/* =========================================================
   Competition My Account — Dark themed
   Matches the cart + checkout design.
   Enqueue on is_account_page().
   ========================================================= */

.woocommerce-account .woocommerce {
	color: #e7eef0;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* =========================================================
   LAYOUT — Force sidebar LEFT, content RIGHT
   Maximum specificity so theme wrappers can't break it.
   We target every plausible WC parent container.
   ========================================================= */
body.woocommerce-account .woocommerce,
body.woocommerce-account div.woocommerce,
body.woocommerce-account .woocommerce-page,
body.woocommerce-account main .woocommerce,
body.woocommerce-account #main .woocommerce,
body.woocommerce-account #primary .woocommerce,
body.woocommerce-account .entry-content .woocommerce,
body.woocommerce-account .container .woocommerce {
	display: grid !important;
	grid-template-columns: 280px minmax(0, 1fr) !important;
	grid-template-rows: auto !important;
	grid-auto-flow: column !important;
	gap: 24px !important;
	align-items: start !important;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Explicit grid placement — nav in column 1, content in column 2 */
body.woocommerce-account .woocommerce-MyAccount-navigation {
	grid-column: 1 / 2 !important;
	grid-row: 1 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content {
	grid-column: 2 / 3 !important;
	grid-row: 1 !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
	background: #2a3133 !important;
	border-radius: 16px !important;
	padding: 28px !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}
body.woocommerce-account .woocommerce-MyAccount-content { min-height: 400px; }

/* Kill decorative pseudo-elements + any background bars the theme adds */
body.woocommerce-account .woocommerce-MyAccount-navigation::before,
body.woocommerce-account .woocommerce-MyAccount-navigation::after,
body.woocommerce-account .woocommerce-MyAccount-content::before,
body.woocommerce-account .woocommerce-MyAccount-content::after,
body.woocommerce-account .woocommerce::before,
body.woocommerce-account .woocommerce::after {
	display: none !important;
	content: none !important;
	background: none !important;
	height: 0 !important;
}

@media (max-width: 900px) {
	body.woocommerce-account .woocommerce,
	body.woocommerce-account div.woocommerce,
	body.woocommerce-account .woocommerce-page,
	body.woocommerce-account main .woocommerce,
	body.woocommerce-account #main .woocommerce,
	body.woocommerce-account #primary .woocommerce,
	body.woocommerce-account .entry-content .woocommerce,
	body.woocommerce-account .container .woocommerce {
		grid-template-columns: 1fr !important;
	}
	body.woocommerce-account .woocommerce-MyAccount-navigation,
	body.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: 1 / 2 !important;
	}
	body.woocommerce-account .woocommerce-MyAccount-navigation { grid-row: 1 !important; }
	body.woocommerce-account .woocommerce-MyAccount-content    { grid-row: 2 !important; }
}

/* =========================================================
   SIDEBAR NAV — Override the theme's Bootstrap list-group markup
   This theme uses:
     <nav class="woocommerce-MyAccount-navigation">
       <div class="list-group">
         <a class="list-group-item list-group-item-action active">Dashboard</a>
         <a class="list-group-item list-group-item-action">Orders</a>
         ...
       </div>
     </nav>
   So we target .list-group + direct <a> children, NOT ul li a.
   ========================================================= */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account nav.woocommerce-MyAccount-navigation {
	display: block !important;
	width: 100% !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation .list-group,
body.woocommerce-account nav.woocommerce-MyAccount-navigation .list-group {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	gap: 0 !important;
}

/* Each nav link — direct <a> child of .list-group OR legacy <li> markup */
body.woocommerce-account .woocommerce-MyAccount-navigation .list-group > a,
body.woocommerce-account .woocommerce-MyAccount-navigation .list-group .list-group-item,
body.woocommerce-account .woocommerce-MyAccount-navigation .list-group-item-action,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a,
body.woocommerce-account .woocommerce-MyAccount-navigation .list-group > a:link,
body.woocommerce-account .woocommerce-MyAccount-navigation .list-group > a:visited {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	width: 100% !important;
	flex: 0 0 auto !important;
	padding: 14px 0 !important;
	margin: 0 !important;
	color: #b9c3c5 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(255,255,255,0.08) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: color 0.15s ease;
	text-transform: none !important;
	letter-spacing: 0 !important;
	white-space: nowrap;
	float: none !important;
}

/* Strip Bootstrap's default list-group hover/focus backgrounds */
body.woocommerce-account .woocommerce-MyAccount-navigation .list-group > a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation .list-group .list-group-item:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation .list-group-item-action:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation .list-group > a:focus,
body.woocommerce-account .woocommerce-MyAccount-navigation .list-group-item-action:focus {
	color: #fff !important;
	background: transparent !important;
	border-bottom-color: rgba(255,255,255,0.08) !important;
	outline: 0 !important;
}

/* Last item — no bottom border */
body.woocommerce-account .woocommerce-MyAccount-navigation .list-group > a:last-child,
body.woocommerce-account .woocommerce-MyAccount-navigation .list-group .list-group-item:last-child,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child a {
	border-bottom: 0 !important;
}

/* Active link — supports both Bootstrap's .active class AND WC's .is-active */
body.woocommerce-account .woocommerce-MyAccount-navigation .list-group > a.active,
body.woocommerce-account .woocommerce-MyAccount-navigation .list-group .list-group-item.active,
body.woocommerce-account .woocommerce-MyAccount-navigation .list-group-item-action.active,
body.woocommerce-account .woocommerce-MyAccount-navigation .list-group > a.active:link,
body.woocommerce-account .woocommerce-MyAccount-navigation .list-group > a.active:visited,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	color: #2cbcb1 !important;
	font-weight: 700 !important;
	background: transparent !important;
	border-color: rgba(255,255,255,0.08) !important;
}

/* Chevron after each link */
body.woocommerce-account .woocommerce-MyAccount-navigation .list-group > a::after,
body.woocommerce-account .woocommerce-MyAccount-navigation .list-group .list-group-item::after,
body.woocommerce-account .woocommerce-MyAccount-navigation ul li a::after {
	content: "\203A" !important;   /* › */
	margin-left: auto !important;
	font-size: 18px !important;
	opacity: 0.5;
	display: inline-block !important;
	color: inherit !important;
	background: none !important;
}

/* =========================================================
   HEADINGS + TEXT
   ========================================================= */
.woocommerce-account .woocommerce-MyAccount-content h1,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	color: #fff;
	font-weight: 700;
	margin: 0 0 16px;
}
.woocommerce-account .woocommerce-MyAccount-content h2 { font-size: 22px; }
.woocommerce-account .woocommerce-MyAccount-content h3 { font-size: 16px; }
.woocommerce-account .woocommerce-MyAccount-content p { color: #b9c3c5; line-height: 1.6; }

/* Inline links */
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
	color: #2cbcb1;
	text-decoration: none;
	font-weight: 500;
}
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover { text-decoration: underline; }

/* =========================================================
   TABLES (Orders, Downloads)
   ========================================================= */
.woocommerce-account table.shop_table {
	background: transparent !important;
	border: 0 !important;
	border-collapse: separate !important;
	border-spacing: 0 10px !important;
	width: 100%;
}

.woocommerce-account table.shop_table thead th {
	background: transparent !important;
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
	padding: 8px 14px !important;
	border: 0 !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.woocommerce-account table.shop_table tbody tr {
	background: #353d3f !important;
}
.woocommerce-account table.shop_table tbody td {
	background: transparent !important;
	color: #e7eef0 !important;
	border: 0 !important;
	padding: 16px 14px !important;
	vertical-align: middle;
}
.woocommerce-account table.shop_table tbody tr td:first-child { border-radius: 10px 0 0 10px; }
.woocommerce-account table.shop_table tbody tr td:last-child  { border-radius: 0 10px 10px 0; }

/* Order status pills */
.woocommerce-account .order-status,
.woocommerce-account mark.order-status {
	display: inline-block;
	background: rgba(44, 188, 177, 0.15) !important;
	color: #2cbcb1 !important;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.woocommerce-account .order-status.status-cancelled,
.woocommerce-account .order-status.status-failed {
	background: rgba(255, 93, 108, 0.15) !important;
	color: #ff5d6c !important;
}
.woocommerce-account .order-status.status-pending,
.woocommerce-account .order-status.status-on-hold {
	background: rgba(255, 184, 0, 0.15) !important;
	color: #ffb800 !important;
}

/* =========================================================
   FORMS (Edit Address, Account Details, Lost Password)
   ========================================================= */
.woocommerce-account .form-row {
	margin: 0 0 16px;
	padding: 0;
	display: block;
}
.woocommerce-account .form-row label {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	display: block;
	margin-bottom: 8px;
}
.woocommerce-account .form-row label .required { color: #ff5d6c; text-decoration: none; margin-left: 2px; }
.woocommerce-account .form-row label .optional { color: #b9c3c5; font-weight: 400; }

.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="number"],
.woocommerce-account textarea,
.woocommerce-account select,
.woocommerce-account .select2-container--default .select2-selection--single,
.woocommerce-account .select2-selection {
	width: 100% !important;
	background: #3a4244 !important;
	border: 0 !important;
	border-radius: 10px !important;
	color: #fff !important;
	padding: 14px 16px !important;
	font-size: 14px !important;
	height: auto !important;
	box-shadow: none !important;
	outline: 2px solid transparent;
	transition: outline 0.15s ease;
}
.woocommerce-account input:focus,
.woocommerce-account textarea:focus,
.woocommerce-account select:focus,
.woocommerce-account .select2-container--default.select2-container--focus .select2-selection {
	outline: 2px solid #2cbcb1 !important;
}
.woocommerce-account input::placeholder,
.woocommerce-account textarea::placeholder { color: #8a9598; }
.woocommerce-account textarea { min-height: 120px; resize: vertical; }

/* Select2 quirks */
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff; line-height: 28px; padding: 0; }
.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; right: 12px; transform: translateY(-50%); }

/* Two-column row helpers */
.woocommerce-account .form-row-first { width: calc(50% - 8px); float: left; margin-right: 16px; }
.woocommerce-account .form-row-last  { width: calc(50% - 8px); float: left; margin-right: 0; }
.woocommerce-account .form-row-wide  { width: 100%; clear: both; }

/* =========================================================
   BUTTONS
   ========================================================= */
.woocommerce-account .button,
.woocommerce-account button[type="submit"],
.woocommerce-account input[type="submit"] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #2cbcb1 !important;
	color: #fff !important;
	border: 0 !important;
	padding: 14px 22px !important;
	border-radius: 10px !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s ease;
	text-decoration: none !important;
}
.woocommerce-account .button:hover,
.woocommerce-account button[type="submit"]:hover,
.woocommerce-account input[type="submit"]:hover { background: #25a89e !important; }

/* Secondary button (e.g. View order, Edit) */
.woocommerce-account .woocommerce-button.view,
.woocommerce-account .button.alt {
	background: #fff !important;
	color: #1f2526 !important;
}
.woocommerce-account .woocommerce-button.view:hover { background: #e7eef0 !important; }

/* =========================================================
   ADDRESSES PAGE — billing/shipping cards
   Force a clean 2-column grid. Theme uses u-column1 / u-column2
   floats which cause diagonal positioning — override aggressively.
   ========================================================= */
body.woocommerce-account .woocommerce-Addresses,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses,
body.woocommerce-account .u-columns.woocommerce-Addresses,
body.woocommerce-account .col2-set.addresses {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 20px !important;
	margin: 20px 0 0 !important;
	float: none !important;
	clear: both;
}
body.woocommerce-account .woocommerce-Addresses::before,
body.woocommerce-account .woocommerce-Addresses::after { content: none !important; display: none !important; }

@media (max-width: 700px) {
	body.woocommerce-account .woocommerce-Addresses,
	body.woocommerce-account .col2-set.addresses { grid-template-columns: 1fr !important; }
}

body.woocommerce-account .woocommerce-Address,
body.woocommerce-account .u-column1.woocommerce-Address,
body.woocommerce-account .u-column2.woocommerce-Address,
body.woocommerce-account .col-1.woocommerce-Address,
body.woocommerce-account .col-2.woocommerce-Address {
	background: #353d3f !important;
	border-radius: 12px !important;
	padding: 22px !important;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}
body.woocommerce-account .woocommerce-Address-title h3 {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin: 0 0 12px !important;
	font-size: 16px !important;
	color: #fff !important;
}
body.woocommerce-account .woocommerce-Address-title .edit,
body.woocommerce-account .woocommerce-Address-title a.edit {
	background: transparent !important;
	color: #2cbcb1 !important;
	padding: 0 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
}
body.woocommerce-account .woocommerce-Address address {
	color: #b9c3c5 !important;
	font-style: normal !important;
	line-height: 1.7 !important;
	font-size: 14px !important;
	margin: 0 !important;
}

/* =========================================================
   FIELDSETS — kill the browser default border on Account
   Details > Password change section
   ========================================================= */
body.woocommerce-account .woocommerce-MyAccount-content fieldset {
	border: 0 !important;
	padding: 0 !important;
	margin: 32px 0 0 0 !important;
	min-width: 0 !important;
	background: transparent !important;
}
body.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
	display: block !important;
	width: 100% !important;
	float: none !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	padding: 0 0 12px 0 !important;
	margin: 0 0 20px 0 !important;
	border-bottom: 1px solid rgba(255,255,255,0.08) !important;
	background: transparent !important;
}

/* =========================================================
   ORDER DETAILS (View Order page)
   ========================================================= */
.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details {
	background: #353d3f;
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 20px;
}
.woocommerce-account .woocommerce-order-details h2,
.woocommerce-account .woocommerce-customer-details h2 { font-size: 18px; margin-top: 0; }

/* =========================================================
   NOTICES (success / error messages)
   ========================================================= */
.woocommerce-account .woocommerce-notices-wrapper { margin-bottom: 16px; }
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	background: #353d3f !important;
	color: #e7eef0 !important;
	border: 0 !important;
	border-left: 3px solid #2cbcb1 !important;
	border-radius: 10px !important;
	padding: 14px 18px !important;
	margin-bottom: 12px;
}
.woocommerce-account .woocommerce-error {
	border-left-color: #ff5d6c !important;
}
.woocommerce-account .woocommerce-message a,
.woocommerce-account .woocommerce-info a {
	color: #2cbcb1 !important;
	font-weight: 700;
}

/* =========================================================
   LOGIN / REGISTER (form-login.php) — centered, no sidebar
   ========================================================= */

/* When user is NOT logged in, the My Account page has no sidebar nav.
   Reset the parent grid back to a single centered column. */
body.woocommerce-account:not(.logged-in) .woocommerce,
body.woocommerce-account:not(.logged-in) div.woocommerce,
body.woocommerce-account:not(.logged-in) main .woocommerce,
body.woocommerce-account:not(.logged-in) #main .woocommerce,
body.woocommerce-account:not(.logged-in) #primary .woocommerce,
body.woocommerce-account:not(.logged-in) .entry-content .woocommerce,
body.woocommerce-account:not(.logged-in) .container .woocommerce {
	display: block !important;
	grid-template-columns: none !important;
	max-width: 1000px !important;
	margin: 0 auto !important;
	padding: 0 16px;
}

/* Login + Register columns side by side */
body.woocommerce-account:not(.logged-in) .u-columns,
body.woocommerce-account:not(.logged-in) .woocommerce > .u-columns {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 24px !important;
	margin: 0 auto !important;
	max-width: 900px;
}
/* When only the Login column exists (registration disabled),
   center it and give it a comfortable width */
body.woocommerce-account:not(.logged-in) .u-columns:has(.u-column1):not(:has(.u-column2)),
body.woocommerce-account:not(.logged-in) .u-columns:has(.u-column2):not(:has(.u-column1)) {
	grid-template-columns: 1fr !important;
	max-width: 480px;
}
/* Fallback for browsers without :has() — if only one column was output by Woo */
body.woocommerce-account:not(.logged-in) .u-column1:only-child,
body.woocommerce-account:not(.logged-in) .u-column2:only-child {
	max-width: 480px;
	margin-left: auto !important;
	margin-right: auto !important;
	grid-column: 1 / -1 !important;
}

@media (max-width: 700px) {
	body.woocommerce-account:not(.logged-in) .u-columns,
	body.woocommerce-account:not(.logged-in) .woocommerce > .u-columns {
		grid-template-columns: 1fr !important;
	}
}

body.woocommerce-account .u-column1,
body.woocommerce-account .u-column2 {
	background: #2a3133 !important;
	border-radius: 16px !important;
	padding: 32px !important;
	/* width: auto !important; */
	max-width: none !important;
	float: none !important;
	margin: 7rem !important;
}

body.woocommerce-account .u-column1 h2,
body.woocommerce-account .u-column2 h2 {
	color: #fff !important;
	font-size: 20px !important;
	margin: 0 0 20px !important;
	padding-bottom: 16px !important;
	border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Kill the fieldset/inner-card border around the login form */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* "Remember me" + "Lost password" line */
body.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	color: #b9c3c5 !important;
	font-size: 13px !important;
	cursor: pointer;
	margin-bottom: 16px !important;
}
body.woocommerce-account .woocommerce-form-login__rememberme input { accent-color: #2cbcb1; }
body.woocommerce-account .woocommerce-LostPassword { margin-top: 8px !important; font-size: 13px !important; }
body.woocommerce-account .woocommerce-LostPassword a { color: #2cbcb1 !important; }

/* Login button — full width inside the card */
body.woocommerce-account .woocommerce-form-login button[type="submit"],
body.woocommerce-account .woocommerce-form-register button[type="submit"] {
	width: 100% !important;
	justify-content: center !important;
	margin-top: 8px !important;
}

/* =========================================================
   DASHBOARD welcome paragraph
   ========================================================= */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
	background: #353d3f;
	border-radius: 12px;
	padding: 18px 22px;
	margin: 0 0 20px;
}
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type strong { color: #fff; }