/* =========================================================
   Cat Corner — My Account custom styles.
   Loaded only on account pages (see functions.php enqueue).
   Covers: logged-in dashboard shell + nav + content tables,
           and the logged-out login/register auth card.
   Design System tokens:
     primary / cyan:        #00B4D8
     cyan-100 fill:         #D6F2F8
     cat-gold / CTA:        #FFC300
     oatmeal base:          #F8FAFC
     surface white:         #ffffff
     outline-variant:       #E4E9EE
     ink / text:            #000000
     ink-soft:              #2A2A2A
     muted:                 #6B7280
     error:                 #ba1a1a
   ========================================================= */

/* Material Symbols baseline (icons used across the account UI). */
body.woocommerce-account .material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Give the account content real room — the default page container is narrow. */
body.woocommerce-account .page-content,
body.woocommerce-account .site-main {
	max-width: none;
}

body.woocommerce-account .cc-account,
body.woocommerce-account .cc-auth {
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	color: #000;
	max-width: 1120px;
	margin: 0 auto;
	padding: 32px 20px 72px;
	box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────
   Logged-in: hero greeting
   ───────────────────────────────────────────────────────── */
.cc-account__hero {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	background: linear-gradient( 135deg, #00B4D8 0%, #0090AD 100% );
	color: #fff;
	border-radius: 20px;
	padding: 32px 28px;
	margin-bottom: 28px;
}
.cc-account__hero-eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
	margin: 0 0 6px;
}
body.woocommerce-account .cc-account__hero-title {
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 800;
	font-size: 32px;
	line-height: 1.15;
	margin: 0 0 8px;
	color: #fff;
}
.cc-account__hero-sub {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	opacity: 0.95;
	max-width: 46ch;
}
.cc-account__logout {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba( 255, 255, 255, 0.16 );
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, 0.35 );
	border-radius: 9999px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease;
}
.cc-account__logout:hover { background: rgba( 255, 255, 255, 0.28 ); color: #fff; }
.cc-account__logout .material-symbols-outlined { font-size: 18px; }

/* ─────────────────────────────────────────────────────────
   Logged-in: two-column grid
   ───────────────────────────────────────────────────────── */
.cc-account__grid {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 24px;
	align-items: start;
}

/* WooCommerce's default account stylesheet floats the navigation left and
 * the content right (each with its own width). Those floats override our
 * CSS grid — they collapsed the nav to icon-width (~66px) and shrank the
 * content column — so the sidebar highlight only wrapped the icon and the
 * labels spilled onto two lines. Neutralise them so the grid owns layout. */
body.woocommerce-account .cc-account__nav,
body.woocommerce-account .cc-account__content {
	float: none !important;
	width: auto !important;
}

/* Sidebar nav */
.cc-account__nav {
	background: #fff;
	border: 1px solid #E4E9EE;
	border-radius: 18px;
	padding: 8px;
	position: sticky;
	top: 24px;
}
.cc-account__nav ul { list-style: none; margin: 0; padding: 0; }
.cc-account__nav li { margin: 0; }
.cc-account__nav li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	border-radius: 12px;
	color: #2A2A2A;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
	line-height: 1.3;
}
.cc-account__nav li a:hover { background: #F1F5F8; color: #000; }
.cc-account__nav-icon { font-size: 20px; color: #6B7280; transition: color 0.15s ease; flex-shrink: 0; }
.cc-account__nav li a:hover .cc-account__nav-icon { color: #00B4D8; }

.cc-account__nav li.is-active a,
.cc-account__nav li.woocommerce-MyAccount-navigation-link--active a {
	background: #D6F2F8;
	color: #000;
}
.cc-account__nav li.is-active a .cc-account__nav-icon,
.cc-account__nav li.woocommerce-MyAccount-navigation-link--active a .cc-account__nav-icon {
	color: #0090AD;
}
.cc-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	background: #ffe5e3;
	color: #ba1a1a;
}
.cc-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout a:hover .cc-account__nav-icon { color: #ba1a1a; }

/* Content card */
.cc-account__content {
	background: #fff;
	border: 1px solid #E4E9EE;
	border-radius: 18px;
	padding: 28px;
	min-width: 0;
	min-height: 320px;
}

/* Card / glance links never inherit the global underline.
 * !important is required to beat the Elementor kit's global
 * link styling (.elementor-kit-74 a), which underlines all
 * content links at higher specificity. */
body.woocommerce-account .cc-account__last-order,
body.woocommerce-account .cc-account__last-order *,
body.woocommerce-account .cc-account__card,
body.woocommerce-account .cc-account__card *,
body.woocommerce-account .cc-account__nav a,
body.woocommerce-account .cc-account__shop-cta,
body.woocommerce-account .cc-account__shop-cta * { text-decoration: none !important; }

/* Links inside WC content (orders table, addresses, forms) — no underline. */
body.woocommerce-account .cc-account__content a { text-decoration: none !important; }

/* ─────────────────────────────────────────────────────────
   Dashboard: last order glance
   ───────────────────────────────────────────────────────── */
.cc-account__last-order {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #F8FAFC;
	border: 1px solid #E4E9EE;
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 24px;
	text-decoration: none;
	color: #000;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.cc-account__last-order:hover { border-color: #00B4D8; transform: translateY( -1px ); }
.cc-account__last-order-icon {
	font-size: 28px;
	color: #00B4D8;
	background: #D6F2F8;
	border-radius: 12px;
	padding: 10px;
	flex: none;
}
.cc-account__last-order-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.cc-account__last-order-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #6B7280; }
.cc-account__last-order-title { font-size: 15px; font-weight: 700; }
.cc-account__last-order-status {
	flex: none;
	font-size: 12px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 9999px;
	background: #FFF4CC;
	color: #7a5b00;
}
.cc-account__last-order-status.status-completed { background: #d8f5e0; color: #1b5e36; }
.cc-account__last-order-status.status-processing { background: #D6F2F8; color: #0090AD; }
.cc-account__last-order-status.status-cancelled,
.cc-account__last-order-status.status-failed { background: #ffdad6; color: #93000a; }
.cc-account__last-order-arrow { color: #6B7280; font-size: 22px; flex: none; }

/* Dashboard: quick-action cards */
.cc-account__cards {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 14px;
	margin-bottom: 24px;
}
.cc-account__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: #F8FAFC;
	border: 1px solid #E4E9EE;
	border-radius: 16px;
	padding: 20px;
	text-decoration: none;
	color: #000;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.cc-account__card:hover {
	border-color: #00B4D8;
	transform: translateY( -2px );
	box-shadow: 0 8px 20px rgba( 0, 180, 216, 0.12 );
}
.cc-account__card-icon {
	font-size: 28px;
	color: #00B4D8;
	margin-bottom: 4px;
}
.cc-account__card-title { font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 16px; }
.cc-account__card-desc { font-size: 13px; color: #6B7280; line-height: 1.45; }
.cc-account__card-cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	color: #0090AD;
}
.cc-account__card-cta .material-symbols-outlined { font-size: 16px; transition: transform 0.15s ease; }
.cc-account__card:hover .cc-account__card-cta .material-symbols-outlined { transform: translateX( 3px ); }

/* Dashboard: continue-shopping CTA (gold = action, sticker-style) */
.cc-account__shop-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #FFC300;
	color: #000;
	font-weight: 700;
	font-size: 14px;
	padding: 12px 22px;
	border-radius: 9999px;
	border: 2px solid #000;
	box-shadow: 2px 2px 0 #000;
	text-decoration: none;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cc-account__shop-cta:hover {
	box-shadow: 3px 3px 0 #000;
	transform: translate( -1px, -1px );
	color: #000;
}
.cc-account__shop-cta .material-symbols-outlined { font-size: 20px; }

/* ─────────────────────────────────────────────────────────
   WooCommerce default content blocks, on-brand
   (orders table, addresses, edit-account form, notices)
   ───────────────────────────────────────────────────────── */
body.woocommerce-account .cc-account__content .woocommerce-MyAccount-content-title,
body.woocommerce-account .cc-account__content h2,
body.woocommerce-account .cc-account__content h3 {
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 700;
	color: #000;
	font-size: 20px;
	line-height: 1.3;
	margin: 0 0 16px;
	text-transform: none;
	letter-spacing: normal;
}

/* Sub-headings inside account content (e.g. address columns) */
body.woocommerce-account .cc-account__content h3 {
	font-size: 16px;
	margin: 0 0 12px;
}

/* ── Addresses section — clean two-column layout ───────── */
/* WC uses .col2-set with float-based layout; override with grid. */
.cc-account__content .col2-set,
.cc-account__content .woocommerce-Addresses {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 8px;
}
/* WooCommerce's .u-columns clearfix adds ::before/::after with content:" ".
 * Once the container is a grid, those pseudo-elements become grid items and
 * steal two cells — pushing the address cards onto separate rows. Remove them. */
.cc-account__content .col2-set::before,
.cc-account__content .col2-set::after,
.cc-account__content .woocommerce-Addresses::before,
.cc-account__content .woocommerce-Addresses::after {
	display: none !important;
}
/* Override WC .col2-set float widths */
.cc-account__content .col2-set .col-1,
.cc-account__content .col2-set .col-2 {
	width: 100% !important;
	float: none !important;
}
.cc-account__content .woocommerce-Address {
	background: #F8FAFC;
	border: 1px solid #E4E9EE;
	border-radius: 14px;
	padding: 20px;
}
/* Address card headings (WC uses <h2> in the address title header) */
.cc-account__content .woocommerce-Address-title,
.cc-account__content .woocommerce-Address header.title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.cc-account__content .woocommerce-Address-title h2,
.cc-account__content .woocommerce-Address-title h3 {
	font-size: 15px !important;
	font-weight: 700;
	margin: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.cc-account__content .woocommerce-Address-title .edit {
	font-size: 13px;
	font-weight: 700;
	color: #0090AD;
	text-decoration: none;
	white-space: nowrap;
}
.cc-account__content .woocommerce-Address-title .edit:hover {
	text-decoration: underline !important;
}
.cc-account__content .woocommerce-Address address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.6;
	color: #6B7280;
}

/* ── Orders table ─────────────────────────────────────── */
.cc-account__content .woocommerce-table,
.cc-account__content table.shop_table {
	border: 1px solid #E4E9EE;
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}
.cc-account__content table.shop_table th,
.cc-account__content table.shop_table td {
	padding: 14px 16px;
	border: none;
	border-bottom: 1px solid #E4E9EE;
	font-size: 14px;
	text-align: left;
	vertical-align: middle;
}
.cc-account__content table.shop_table thead th {
	background: #F1F5F8;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6B7280;
}
.cc-account__content table.shop_table tr:last-child td { border-bottom: none; }
.cc-account__content table.shop_table .woocommerce-orders-table__cell-order-status { font-weight: 700; }

/* WooCommerce prints its own icon via ::before using the "WooCommerce"
 * icon font, which isn't loaded here — so it rendered as a blue tofu box
 * sitting on top of the text. Kill it everywhere in the account content;
 * we supply our own icons below where wanted. */
.cc-account__content .woocommerce-info::before,
.cc-account__content .woocommerce-message::before,
.cc-account__content .woocommerce-error::before,
.cc-account__content .woocommerce-noreviews::before {
	display: none !important;
	content: none !important;
}

/* ── Empty state (e.g. "no orders", "no downloads") ──────
   A friendly centered card: bag icon badge + message + CTA. */
.cc-account__content .woocommerce-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 16px;
	background: #F8FAFC;
	border: 1px dashed #CBD5E1;
	border-radius: 18px;
	padding: 48px 28px;
	margin: 0 0 20px;
	font-size: 15px;
	font-weight: 600;
	color: #2A2A2A;
	line-height: 1.5;
}
/* Bag icon badge — inline SVG so it never depends on an icon font. */
.cc-account__content .woocommerce-info::after {
	content: "";
	order: -1;
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #D6F2F8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B4D8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l1 13H5z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center / 32px 32px no-repeat;
	animation: cc-pop 0.45s cubic-bezier( 0.16, 1, 0.3, 1 ) both 0.1s;
}
/* CTA button inside the empty state = gold sticker (drive shopping). */
.cc-account__content .woocommerce-info .button {
	background: #FFC300 !important;
	color: #000 !important;
	border: 2px solid #000 !important;
	border-radius: 9999px !important;
	box-shadow: 2px 2px 0 #000;
	padding: 11px 22px;
}
.cc-account__content .woocommerce-info .button:hover {
	color: #000 !important;
	box-shadow: 3px 3px 0 #000;
	transform: translate( -1px, -1px );
}

/* ── Slim inline notices: success (message) + error ─────── */
.cc-account__content .woocommerce-message,
.cc-account__content .woocommerce-error {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: #F8FAFC;
	border: 1px solid #E4E9EE;
	border-left: 4px solid #00B4D8;
	border-radius: 12px;
	padding: 16px 20px;
	font-size: 14px;
	color: #2A2A2A;
	margin: 0 0 20px;
	line-height: 1.5;
}
.cc-account__content .woocommerce-error {
	border-left-color: #ba1a1a;
	background: #fef5f5;
}

/* Buttons inside WC content.
 * !important overrides the Elementor kit's global button styling
 * (.elementor-kit-74 a.button / button), which is more specific than these rules. */
.cc-account__content .woocommerce-button,
.cc-account__content .button,
.cc-account__content button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #00B4D8 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 9999px !important;
	padding: 10px 20px;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: filter 0.15s ease, transform 0.15s ease;
	white-space: nowrap;
}
.cc-account__content .woocommerce-button:hover,
.cc-account__content .button:hover,
.cc-account__content button[type="submit"]:hover {
	filter: brightness( 0.95 );
	transform: translateY( -1px );
	color: #fff !important;
}
/* Primary save action = gold CTA */
.cc-account__content .woocommerce-Button--primary,
.cc-account__content button[name="save_account_details"],
.cc-account__content button[name="save_address"] {
	background: #FFC300 !important;
	color: #000 !important;
	border: 2px solid #000 !important;
	box-shadow: 2px 2px 0 #000;
}
.cc-account__content button[name="save_account_details"]:hover,
.cc-account__content button[name="save_address"]:hover {
	color: #000 !important;
	box-shadow: 3px 3px 0 #000;
	transform: translate( -1px, -1px );
}

/* ── WC form fields inside account content ──────────────── */
.cc-account__content .woocommerce-Input,
.cc-account__content input.input-text,
.cc-account__content input[type="text"],
.cc-account__content input[type="email"],
.cc-account__content input[type="tel"],
.cc-account__content input[type="password"],
.cc-account__content select,
.cc-account__content textarea {
	width: 100%;
	box-sizing: border-box;
	/* !important overrides the Elementor kit's global input styling (.elementor-kit-74 input…), which is more specific than these scoped rules. */
	border: 1px solid #E4E9EE !important;
	border-radius: 10px !important;
	padding: 11px 14px;
	font-size: 15px;
	font-family: inherit;
	background: #fff !important;
	color: #000 !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cc-account__content input:focus,
.cc-account__content select:focus,
.cc-account__content textarea:focus {
	outline: none;
	border-color: #00B4D8;
	box-shadow: 0 0 0 3px rgba( 0, 180, 216, 0.15 );
}
.cc-account__content label { font-size: 14px; font-weight: 600; color: #2A2A2A; }

/* Form row spacing — tighter, consistent gaps */
.cc-account__content .form-row { margin-bottom: 16px; }

/* ── Fieldset / Legend (e.g. "Perubahan Kata Sandi") ────── */
.cc-account__content fieldset {
	border: none;
	padding: 0;
	margin: 24px 0 0;
}
.cc-account__content fieldset legend,
.cc-account__content legend {
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: #000;
	padding: 0;
	margin: 0 0 16px;
	display: block;
	width: 100%;
	border-bottom: 1px solid #E4E9EE;
	padding-bottom: 12px;
}

/* ── Name fields side-by-side fix ──────────────────────── */
/* WooCommerce outputs first/last name in .form-row-first / .form-row-last.
   On the edit-account page, ensure these stay in a clean 2-col grid. */
.cc-account__content .woocommerce-EditAccountForm .form-row-first,
.cc-account__content .woocommerce-EditAccountForm .form-row-last {
	display: inline-block;
	width: calc( 50% - 8px );
	vertical-align: top;
}
.cc-account__content .woocommerce-EditAccountForm .form-row-first {
	margin-right: 16px;
}

/* WC "description" helper text (e.g. under display name) */
.cc-account__content .woocommerce-form-row em,
.cc-account__content .woocommerce-EditAccountForm em,
.cc-account__content em small,
.cc-account__content small {
	font-size: 12.5px;
	color: #6B7280;
	font-style: normal;
	display: block;
	margin-top: 4px;
	line-height: 1.4;
}

/* ── WC notices (global scope for account pages) ────────── */
/* NB: .woocommerce-info is intentionally excluded — inside the account
 * content it's restyled as a centered empty-state card (see above). */
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error {
	border-radius: 12px;
	border: 1px solid #E4E9EE;
	border-left-width: 4px;
	font-size: 14px;
	line-height: 1.5;
}
body.woocommerce-account .woocommerce-message { border-left-color: #00B4D8; }
body.woocommerce-account .woocommerce-error { border-left-color: #ba1a1a; }

/* ─────────────────────────────────────────────────────────
   Logged-out: auth card (login / register)
   ───────────────────────────────────────────────────────── */
.cc-auth { max-width: 460px; }
.cc-auth__card {
	background: #fff;
	border: 1px solid #E4E9EE;
	border-radius: 24px;
	padding: 36px 32px;
	box-shadow: 0 18px 48px rgba( 0, 0, 0, 0.06 );
}
.cc-auth__brand { text-align: center; margin-bottom: 24px; }
.cc-auth__brand-mark {
	font-size: 34px;
	color: #00B4D8;
	background: #D6F2F8;
	border-radius: 16px;
	padding: 12px;
	display: inline-block;
}
body.woocommerce-account .cc-auth__brand-title {
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 800;
	font-size: 24px;
	line-height: 1.2;
	margin: 14px 0 6px;
	color: #000;
}
.cc-auth__brand-sub { margin: 0; font-size: 14.5px; color: #6B7280; line-height: 1.5; }

/* Tabs */
.cc-auth__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	background: #F1F5F8;
	border-radius: 12px;
	padding: 4px;
	margin-bottom: 24px;
}
.cc-auth__tab {
	/* !important guards against the Elementor kit's global button styling. */
	border: none !important;
	background: transparent !important;
	border-radius: 9px !important;
	padding: 10px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	color: #6B7280;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.cc-auth__tab.is-active {
	background: #fff !important;
	color: #000;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.08 );
}

/* Panels */
.cc-auth__panel.is-hidden { display: none; }
.cc-auth__form { margin: 0; }
.cc-auth__field { margin: 0 0 16px; }
.cc-auth__field label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #2A2A2A;
	margin-bottom: 6px;
}
.cc-auth__field .required { color: #ba1a1a; border: none; }
.cc-auth__input {
	width: 100%;
	box-sizing: border-box;
	/* !important overrides the Elementor kit's global input styling (.elementor-kit-74 input…). */
	border: 1px solid #E4E9EE !important;
	border-radius: 10px !important;
	padding: 12px 14px;
	font-size: 15px;
	font-family: inherit;
	background: #fff !important;
	color: #000 !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cc-auth__input:focus {
	outline: none;
	border-color: #00B4D8;
	box-shadow: 0 0 0 3px rgba( 0, 180, 216, 0.15 );
}

.cc-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 20px;
	font-size: 13.5px;
}
.cc-auth__remember { display: inline-flex; align-items: center; gap: 7px; color: #2A2A2A; margin: 0; cursor: pointer; }
.cc-auth__remember input { width: 16px; height: 16px; accent-color: #00B4D8; margin: 0; }
.cc-auth__lost { color: #0090AD; font-weight: 600; text-decoration: none; }
.cc-auth__lost:hover { text-decoration: underline; }

.cc-auth__submit {
	width: 100%;
	/* !important overrides the Elementor kit's global button styling (.elementor-kit-74 button). */
	border: none !important;
	background: #FFC300 !important;
	color: #000 !important;
	border-radius: 9999px !important;
	padding: 14px;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease;
}
.cc-auth__submit:hover { filter: brightness( 0.96 ); transform: translateY( -1px ); }

.cc-auth__divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0;
	color: #9CA3AF;
	font-size: 12.5px;
}
.cc-auth__divider::before,
.cc-auth__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #E5E7EB;
}

/* Google button spans the full form width, matching the input fields.
   Nextend already sets the <a> to width:100%; its wrapper is inline-grid
   (shrinks to content). !important beats Nextend's higher-specificity
   `div.nsl-container.nsl-container-block .nsl-container-buttons` rule. */
.cc-auth__form .nsl-container-buttons { display: block !important; }
.cc-auth__form .nsl-container-buttons a { width: 100% !important; }
.cc-auth__form .nsl-button { width: 100%; }

/* Center the icon + label as a group. Nextend pins the icon far left and lets
   the label grow (flex:1) to fill, which looks broken on a full-width button. */
.cc-auth__form .nsl-button { justify-content: center; }
.cc-auth__form .nsl-button-label-container { flex: 0 0 auto !important; margin: 0 0 0 8px !important; }

.cc-auth__hint,
.cc-auth__terms {
	font-size: 12.5px;
	color: #6B7280;
	line-height: 1.5;
	margin: 14px 0 0;
	text-align: center;
}
.cc-auth__hint { margin: 0 0 16px; text-align: left; }

/* ─────────────────────────────────────────────────────────
   Motion — entrance reveals + micro-interactions
   Friendly & alive, never gaudy. All guarded by
   prefers-reduced-motion below so it degrades gracefully.
   ───────────────────────────────────────────────────────── */
@keyframes cc-fade-up {
	from { opacity: 0; transform: translateY( 14px ); }
	to   { opacity: 1; transform: none; }
}
@keyframes cc-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes cc-pop {
	0%   { opacity: 0; transform: scale( 0.96 ); }
	60%  { transform: scale( 1.01 ); }
	100% { opacity: 1; transform: none; }
}
/* One-time light sweep across the hero band on load. */
@keyframes cc-sheen {
	0%   { transform: translateX( -120% ) skewX( -18deg ); opacity: 0; }
	18%  { opacity: 1; }
	60%  { opacity: 0; }
	100% { transform: translateX( 220% ) skewX( -18deg ); opacity: 0; }
}

/* Hero greeting — fade up + a single sheen pass. */
.cc-account__hero {
	position: relative;
	overflow: hidden;
	animation: cc-fade-up 0.5s ease both;
}
.cc-account__hero::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 40%;
	height: 100%;
	background: linear-gradient( 90deg, transparent, rgba( 255, 255, 255, 0.22 ), transparent );
	pointer-events: none;
	animation: cc-sheen 1.6s ease-out 0.45s 1 both;
}
/* Friendly little paw wave on the greeting. Settles after load,
   then waves again on hero hover for a playful, on-brand touch. */
@keyframes cc-paw-wave {
	0%, 100% { transform: rotate( 0 ); }
	25%      { transform: rotate( 16deg ); }
	55%      { transform: rotate( -10deg ); }
	80%      { transform: rotate( 6deg ); }
}
.cc-account__hero-paw {
	display: inline-block;
	transform-origin: 70% 80%;
	animation: cc-paw-wave 0.9s ease-in-out 0.7s 1 both;
}
.cc-account__hero:hover .cc-account__hero-paw {
	animation: cc-paw-wave 0.9s ease-in-out 1;
}

/* Sidebar + content panels ease in. */
.cc-account__nav { animation: cc-fade-up 0.5s ease both 0.06s; }
.cc-account__content { animation: cc-fade-up 0.5s ease both 0.12s; }

/* Dashboard: last-order glance + staggered quick-action cards. */
.cc-account__last-order { animation: cc-fade-up 0.45s ease both 0.16s; }
.cc-account__cards .cc-account__card { animation: cc-fade-up 0.45s ease both; }
.cc-account__cards .cc-account__card:nth-child( 1 ) { animation-delay: 0.20s; }
.cc-account__cards .cc-account__card:nth-child( 2 ) { animation-delay: 0.28s; }
.cc-account__cards .cc-account__card:nth-child( 3 ) { animation-delay: 0.36s; }
.cc-account__shop-cta { animation: cc-fade-up 0.45s ease both 0.42s; }

/* Card icon gives a gentle lift alongside the existing hover. */
.cc-account__card-icon { transition: transform 0.2s ease; }
.cc-account__card:hover .cc-account__card-icon { transform: translateY( -2px ) scale( 1.08 ); }

/* Nav item icon nudges right on hover for a tactile feel. */
.cc-account__nav li a { position: relative; }
.cc-account__nav li a:hover .cc-account__nav-icon { transform: translateX( 1px ); }

/* Auth card — pop in, brand mark settles, panels cross-fade on tab switch.
   Removing .is-hidden makes :not(.is-hidden) match → animation replays. */
.cc-auth__card { animation: cc-pop 0.45s cubic-bezier( 0.16, 1, 0.3, 1 ) both; }
.cc-auth__brand-mark { animation: cc-pop 0.5s cubic-bezier( 0.16, 1, 0.3, 1 ) both 0.1s; }
.cc-auth__panel:not( .is-hidden ) { animation: cc-fade-up 0.3s ease both; }
.cc-auth__submit:active,
.cc-account__shop-cta:active { transform: translateY( 1px ) scale( 0.99 ); }

/* Keyboard focus rings (a11y) — visible without muddying mouse hover. */
.cc-account__nav li a:focus-visible,
.cc-account__card:focus-visible,
.cc-account__last-order:focus-visible,
.cc-account__shop-cta:focus-visible,
.cc-auth__tab:focus-visible {
	outline: 3px solid rgba( 0, 180, 216, 0.5 );
	outline-offset: 2px;
	border-radius: 12px;
}

/* Respect users who prefer reduced motion — kill reveals & sweeps. */
@media ( prefers-reduced-motion: reduce ) {
	body.woocommerce-account *,
	body.woocommerce-account *::before,
	body.woocommerce-account *::after {
		animation-duration: 0.001ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.cc-account__hero::after { display: none; }
}

/* ─────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────── */
@media ( max-width: 860px ) {
	.cc-account__grid { grid-template-columns: 1fr; }
	.cc-account__nav { position: static; }
	.cc-account__nav ul {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
	}
	.cc-account__content .col2-set,
	.cc-account__content .woocommerce-Addresses { grid-template-columns: 1fr; }
	.cc-account__nav li { flex: 0 0 auto; }
	.cc-account__nav li a {
		justify-content: center;
		padding: 10px 14px;
		font-size: 13px;
		white-space: nowrap;
	}
	.cc-account__nav-icon { font-size: 18px; }
	.cc-account__cards { grid-template-columns: 1fr 1fr; }
}
@media ( max-width: 600px ) {
	.cc-account, .cc-auth { padding: 20px 16px 56px; }
	.cc-account__hero { flex-direction: column; padding: 24px 20px; }
	body.woocommerce-account .cc-account__hero-title { font-size: 26px; }
	.cc-account__content { padding: 20px; }
	.cc-auth__card { padding: 28px 22px; }
	.cc-account__cards { grid-template-columns: 1fr; }
	.cc-account__content .woocommerce-EditAccountForm .form-row-first,
	.cc-account__content .woocommerce-EditAccountForm .form-row-last {
		width: 100%;
		display: block;
		margin-right: 0;
	}
}