/**
 * SuperSquare Storefront — My Account & Auth Portal Styles (NEEMROZ)
 *
 * Consolidated customer portal layout: sidebar navigation, profile hero,
 * dashboard stat cards, orders, addresses, and dedicated login/register/OTP auth cards.
 *
 * @package SuperSquare_Storefront
 */

body.woocommerce-account{background:var(--ssq-cream)}
body.woocommerce-account .site-main{padding-block:clamp(1.5rem,4vw,3.5rem)}

/* ==========================================================================
   Customer Portal Layout
   ========================================================================== */
.woocommerce-account .woocommerce{display:grid;grid-template-columns:minmax(220px,260px) minmax(0,1fr);align-items:flex-start;gap:clamp(1.25rem,3vw,2.25rem);max-width:1240px;margin:0 auto;padding:0 1rem}

/* Profile Hero */
.ssq-account-profile{grid-column:1;display:grid;gap:.75rem;justify-items:center;padding:1.6rem 1.15rem;color:var(--ssq-ivory);text-align:center;background:var(--ssq-gradient-celebration);border-radius:var(--ssq-radius-xl);box-shadow:var(--ssq-shadow-md)}
.ssq-account-avatar img{display:block;width:70px;height:70px;border:3px solid rgba(255,252,247,.3);border-radius:50%;box-shadow:var(--ssq-shadow-sm)}
.ssq-account-profile-copy{display:grid;gap:.15rem;min-width:0}
.ssq-account-profile-copy strong{font-size:1.02rem}
.ssq-account-profile-copy>span:last-child{max-width:200px;overflow:hidden;color:var(--ssq-gold-soft);font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}
.ssq-account-profile .ssq-account-eyebrow{color:var(--ssq-gold-soft)}
.ssq-account-profile-edit{padding:.5rem .9rem;color:var(--ssq-ivory);border:1px solid rgba(255,252,247,.35);border-radius:var(--ssq-radius-full);font-size:.78rem;font-weight:700}
.ssq-account-profile-edit:hover{color:var(--ssq-espresso);background:var(--ssq-ivory)}

/* Sidebar Navigation */
.woocommerce-MyAccount-navigation{grid-column:1;box-sizing:border-box;width:100%;padding:.6rem;background:var(--ssq-surface);border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-lg);box-shadow:var(--ssq-shadow-xs)}
.woocommerce-MyAccount-navigation ul{display:flex;flex-direction:column;gap:.25rem;margin:0;padding:0;list-style:none}
.woocommerce-MyAccount-navigation li a{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:.65rem .85rem;color:var(--ssq-text-secondary);border-radius:var(--ssq-radius-sm);font-size:.85rem;font-weight:650;transition:color var(--ssq-transition-fast),background var(--ssq-transition-fast)}
.woocommerce-MyAccount-navigation li a::before{content:"";flex:0 0 auto;width:7px;height:7px;border:2px solid var(--ssq-border-strong);border-radius:50%}
.woocommerce-MyAccount-navigation li a:hover{color:var(--ssq-terracotta-dark);background:var(--ssq-cream)}
.woocommerce-MyAccount-navigation li.is-active a{color:var(--ssq-terracotta-dark);background:var(--ssq-blush);font-weight:750}
.woocommerce-MyAccount-navigation li.is-active a::before{background:var(--ssq-terracotta);border-color:var(--ssq-terracotta);box-shadow:0 0 0 3px var(--ssq-blush)}
.woocommerce-MyAccount-navigation-link--customer-logout{margin-top:.4rem;padding-top:.4rem;border-top:1px solid var(--ssq-border)}
.woocommerce-MyAccount-navigation-link--customer-logout a{color:var(--ssq-danger)}

/* Content Area Card */
.woocommerce-MyAccount-content{grid-column:2;box-sizing:border-box;width:100%;min-width:0;padding:clamp(1.1rem,3vw,2rem);background:var(--ssq-surface);border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-xl);box-shadow:var(--ssq-shadow-sm)}
.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3{margin-bottom:1.1rem;color:var(--ssq-espresso);font-family:var(--ssq-font-heading);font-size:1.3rem;font-weight:600}

.ssq-account-eyebrow{display:block;margin-bottom:.25rem;color:var(--ssq-text-muted);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

.ssq-account-welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin:0 0 1.5rem;padding-bottom:1.25rem;border-bottom:1px solid var(--ssq-border)}
.ssq-account-welcome h2{margin:0!important;font-size:clamp(1.45rem,3vw,2rem)!important;letter-spacing:-.01em}
.ssq-account-welcome p{max-width:500px;margin:0;color:var(--ssq-text-muted);font-size:.9rem;line-height:1.65}

/* Dashboard Stat Cards */
.ssq-account-dashboard-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin-bottom:1.75rem}
.ssq-account-stat-card{position:relative;display:grid;grid-template-columns:auto 1fr;gap:.65rem;min-height:106px;padding:.95rem;overflow:hidden;background:var(--ssq-gradient-cream);border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-lg)}
.ssq-account-stat-icon{display:grid;width:36px;height:36px;place-items:center;color:var(--ssq-terracotta);background:var(--ssq-blush);border-radius:var(--ssq-radius-sm)}
.ssq-account-stat-info{display:grid;align-content:start}
.ssq-stat-number{color:var(--ssq-espresso);font-size:1.2rem;font-weight:800;line-height:1.1}
.ssq-stat-label{margin-top:.2rem;color:var(--ssq-text-muted);font-size:.72rem}
.ssq-stat-link{grid-column:1/-1;align-self:end;color:var(--ssq-terracotta-dark);font-size:.73rem;font-weight:700}

/* Section header + recent orders */
.ssq-account-section{margin:0 0 1.75rem}
.ssq-account-section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.ssq-account-section-head h2{margin:0!important}
.ssq-account-section-head>a{color:var(--ssq-terracotta-dark);font-size:.8rem;font-weight:700}

.ssq-recent-orders{display:grid;gap:.65rem}
.ssq-order-card{display:grid;grid-template-columns:minmax(145px,1fr) auto auto auto;align-items:center;gap:1rem;padding:.95rem;border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-lg);transition:border-color var(--ssq-transition-fast),box-shadow var(--ssq-transition-fast),transform var(--ssq-transition-fast)}
.ssq-order-card:hover{border-color:var(--ssq-gold-soft);box-shadow:var(--ssq-shadow-sm);transform:translateY(-1px)}
.ssq-order-card>div:first-child{display:grid}

.ssq-order-state{padding:.35rem .65rem;color:var(--ssq-text-secondary);background:var(--ssq-cream);border-radius:var(--ssq-radius-full);font-size:.7rem;font-weight:800}
.ssq-order-state--completed{color:var(--ssq-success);background:rgba(71,113,90,.1)}
.ssq-order-state--processing{color:var(--ssq-terracotta-dark);background:var(--ssq-blush)}
.ssq-order-state--failed,.ssq-order-state--cancelled{color:var(--ssq-danger);background:rgba(166,62,70,.09)}

.ssq-order-total{display:grid;text-align:right;font-weight:800}
.ssq-order-total small{color:var(--ssq-text-muted);font-size:.68rem;font-weight:650}
.ssq-order-card .button{padding:.4rem .85rem;color:var(--ssq-espresso);background:var(--ssq-cream);border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-sm);font-size:.72rem;font-weight:700;white-space:nowrap;transition:background var(--ssq-transition-fast),color var(--ssq-transition-fast),border-color var(--ssq-transition-fast)}
.ssq-order-card .button:hover{color:var(--ssq-ivory);background:var(--ssq-terracotta);border-color:var(--ssq-terracotta)}

/* Order status pills (legacy WooCommerce-rendered orders table) */
.woocommerce-MyAccount-orders{width:100%;margin-top:1rem;border-collapse:collapse}
.woocommerce-MyAccount-orders th{padding:.75rem 1rem;color:var(--ssq-text-muted);background:var(--ssq-cream);border-bottom:1px solid var(--ssq-border);font-size:.75rem;font-weight:750;letter-spacing:.06em;text-align:left;text-transform:uppercase}
.woocommerce-MyAccount-orders td{padding:1rem;border-bottom:1px solid var(--ssq-border-subtle);font-size:.875rem;vertical-align:middle}

.order-status{display:inline-flex;padding:.25rem .625rem;border-radius:var(--ssq-radius-full);font-size:.75rem;font-weight:700;text-transform:capitalize}
.order-status.status-completed{color:var(--ssq-success);background:rgba(71,113,90,.1)}
.order-status.status-processing{color:var(--ssq-terracotta-dark);background:var(--ssq-blush)}
.order-status.status-on-hold,.order-status.status-pending{color:#8a6d1f;background:var(--ssq-warning-soft,#fbf5e9)}
.order-status.status-cancelled,.order-status.status-failed{color:var(--ssq-danger);background:rgba(166,62,70,.09)}

.woocommerce-MyAccount-orders .button{padding:.375rem .875rem;color:var(--ssq-espresso);background:var(--ssq-cream);border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-sm);font-size:.75rem;font-weight:700}
.woocommerce-MyAccount-orders .button:hover{color:var(--ssq-ivory);background:var(--ssq-terracotta);border-color:var(--ssq-terracotta)}

/* Address / details grid + mini cards */
.ssq-account-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.ssq-account-mini-card{display:grid;grid-template-columns:auto 1fr;gap:.85rem;padding:1.1rem;background:var(--ssq-surface);border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-lg)}
.ssq-account-card-icon{display:grid;width:40px;height:40px;place-items:center;color:var(--ssq-terracotta-dark);background:var(--ssq-blush);border-radius:var(--ssq-radius-sm);font-size:1.2rem}
.ssq-account-mini-card h3{margin:0 0 .35rem!important;font-size:1rem!important}
.ssq-account-mini-card p{margin:0;color:var(--ssq-text-muted);font-size:.78rem;line-height:1.55}
.ssq-account-mini-card>a{grid-column:2;color:var(--ssq-terracotta-dark);font-size:.76rem;font-weight:700}

.ssq-account-empty,.woocommerce-MyAccount-content .woocommerce-info{padding:2.25rem 1.25rem;color:var(--ssq-text-muted);text-align:center;background:var(--ssq-cream);border:1px dashed var(--ssq-border-strong);border-radius:var(--ssq-radius-lg)}
.ssq-account-empty>span{display:grid;width:46px;height:46px;margin:0 auto .75rem;place-items:center;color:var(--ssq-terracotta);background:var(--ssq-blush);border-radius:50%;font-size:1.4rem}
.ssq-account-empty h3{margin:0 0 .35rem!important;color:var(--ssq-espresso)}
.ssq-account-empty p{margin:0 auto 1rem}

.woocommerce-MyAccount-content .woocommerce-Addresses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.woocommerce-MyAccount-content .woocommerce-Address{box-sizing:border-box;float:none!important;width:auto!important;padding:1.15rem;border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-lg)}

.woocommerce-MyAccount-content fieldset{margin:1.5rem 0;padding:1.15rem;border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-lg)}

.woocommerce-MyAccount-content input.input-text,.woocommerce-MyAccount-content select,.woocommerce-MyAccount-content textarea{min-height:46px;padding:.7rem .8rem;background:var(--ssq-surface);border:1px solid var(--ssq-border-strong);border-radius:var(--ssq-radius-md)}
.woocommerce-MyAccount-content input:focus,.woocommerce-MyAccount-content select:focus,.woocommerce-MyAccount-content textarea:focus{outline:2px solid rgba(181,138,82,.2);border-color:var(--ssq-gold)}

/* Account-save action (Save Address, Save Account Details) — terracotta outline rect: a distinct "commit" language from Login's solid espresso pill and Place Order's sealed dark shape. Scoped to <button type="submit"> only so it never overrides the quieter <a class="button"> order-action links styled above. */
.woocommerce-MyAccount-content form button[type="submit"]{min-height:46px;padding:.75rem 1.5rem;color:var(--ssq-terracotta-dark)!important;background:transparent;border:1.5px solid var(--ssq-terracotta);border-radius:var(--ssq-radius-md);font-size:.875rem;font-weight:700;cursor:pointer;transition:background var(--ssq-transition-fast),color var(--ssq-transition-fast)}
.woocommerce-MyAccount-content form button[type="submit"]:hover{color:var(--ssq-ivory)!important;background:var(--ssq-terracotta)}

/* ==========================================================================
   Dedicated Auth Page: Login / Register Split
   ========================================================================== */
body.woocommerce-account:not(.logged-in) .woocommerce{display:block;box-sizing:border-box;width:100%;max-width:1040px;margin:0 auto;padding:2rem 1rem 3.5rem}

#customer_login{display:grid;grid-template-columns:1fr 1fr;gap:2.25rem;max-width:900px;margin:1.5rem auto 3.5rem}
#customer_login.single-column{grid-template-columns:1fr;max-width:460px}

.u-column1,.u-column2{box-sizing:border-box;padding:2rem;background:var(--ssq-surface);border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-xl);box-shadow:var(--ssq-shadow-sm)}

#customer_login h2{margin-bottom:1.35rem;padding-bottom:.7rem;color:var(--ssq-espresso);font-family:var(--ssq-font-heading);font-size:1.3rem;font-weight:600;border-bottom:1px solid var(--ssq-border)}
#customer_login form{display:flex;flex-direction:column;gap:1rem}
#customer_login .form-row{display:flex;flex-direction:column;gap:.375rem;margin:0}
#customer_login label{color:var(--ssq-espresso);font-size:.8125rem;font-weight:650}

#customer_login .woocommerce-form,#customer_login .form-row{box-sizing:border-box;width:100%;margin-inline:0}
#customer_login label{white-space:normal;overflow-wrap:normal;word-break:normal;width:100%}
#customer_login input.input-text,#customer_login input[type="text"],#customer_login input[type="email"],#customer_login input[type="password"]{box-sizing:border-box;display:block;width:100%;min-width:0;min-height:46px;padding:.72rem .85rem;border:1px solid var(--ssq-border-strong);border-radius:var(--ssq-radius-md)}

#customer_login .password-input{position:relative;display:block;width:100%}
#customer_login .password-input input{padding-inline-end:3rem}
#customer_login .show-password-input{position:absolute;top:50%;inset-inline-end:.85rem;transform:translateY(-50%)}

#customer_login .woocommerce-form-login__rememberme{display:inline-flex;flex-direction:row;align-items:center;gap:.5rem;width:auto;white-space:nowrap}
#customer_login .woocommerce-form-login__rememberme input{flex:0 0 auto;width:auto;min-height:0;margin:0}

/* Base shape shared by both auth submits (pill, full-width) — color/fill differentiates Login from Register below, at equal specificity so source order and intent stay predictable. */
#customer_login .woocommerce-form button[type="submit"].button{width:100%;min-height:48px;margin-top:.5rem;padding:.8rem 1.5rem;border-radius:var(--ssq-radius-full);font-size:.9375rem;font-weight:700;cursor:pointer;transition:background var(--ssq-transition-fast),color var(--ssq-transition-fast)}
/* Login: confident solid pill — the primary authentication commit. */
#customer_login .woocommerce-form-login button[type="submit"].button{color:var(--ssq-ivory);background:var(--ssq-espresso);border:none}
#customer_login .woocommerce-form-login button[type="submit"].button:hover{background:var(--ssq-terracotta-dark)}
/* Register: complementary but visually secondary — outline pill, not a second solid espresso button. */
#customer_login .woocommerce-form-register button[type="submit"].button{color:var(--ssq-terracotta-dark);background:transparent;border:1.5px solid var(--ssq-terracotta)}
#customer_login .woocommerce-form-register button[type="submit"].button:hover{color:var(--ssq-ivory);background:var(--ssq-terracotta)}

.woocommerce-LostPassword{margin-top:.5rem;font-size:.8125rem}

/* Auth mode tabs + OTP panel */
.ssq-otp-login{max-width:960px;margin:1.5rem auto 0;padding:0 1rem}

.ssq-auth-mode-tabs{display:flex;gap:.5rem;padding:.35rem;background:var(--ssq-cream);border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-lg)}
.ssq-auth-mode-tab{flex:1;min-height:44px;background:transparent;border:0;border-radius:var(--ssq-radius-md);font:inherit;font-weight:700;cursor:pointer}
.ssq-auth-mode-tab.is-active{color:var(--ssq-terracotta-dark);background:var(--ssq-surface);box-shadow:var(--ssq-shadow-xs)}

.ssq-otp-panel{margin-top:1rem;padding:1.5rem;background:var(--ssq-surface);border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-lg)}
.ssq-otp-panel label{display:block;margin-bottom:.45rem;font-weight:650}
.ssq-otp-row{display:flex;align-items:center;overflow:hidden;border:1px solid var(--ssq-border-strong);border-radius:var(--ssq-radius-md)}
.ssq-otp-prefix{padding:.8rem;background:var(--ssq-cream);border-inline-end:1px solid var(--ssq-border-strong)}
.ssq-otp-row input{flex:1;min-width:0;border:0!important;box-shadow:none!important}

/* OTP Send: compact verification utility — inline-width outline pill, never a full-width commerce-style CTA. */
.ssq-otp-send{display:inline-flex;align-items:center;width:auto;min-height:40px;margin-top:.8rem;padding:0 1.15rem;color:var(--ssq-terracotta-dark)!important;background:transparent;border:1.5px solid var(--ssq-terracotta);border-radius:var(--ssq-radius-full);font-size:.8125rem;font-weight:700;cursor:pointer;transition:background var(--ssq-transition-fast),color var(--ssq-transition-fast)}
.ssq-otp-send:hover{color:var(--ssq-ivory)!important;background:var(--ssq-terracotta)}
/* OTP Verify: the actual verification commit — solid, with a check-mark glyph so it reads distinctly from Send. */
.ssq-otp-verify .button{display:inline-flex;align-items:center;gap:.5rem;min-height:46px;padding:0 1.5rem;color:var(--ssq-ivory)!important;background:var(--ssq-espresso);border:1px solid var(--ssq-espresso);border-radius:var(--ssq-radius-md);font-size:.875rem;font-weight:700;cursor:pointer;transition:background var(--ssq-transition-fast)}
.ssq-otp-verify .button::before{content:"";display:inline-block;width:15px;height:15px;flex-shrink:0;background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
.ssq-otp-verify .button:hover{background:var(--ssq-terracotta-dark)}
.ssq-otp-verify{margin-top:1rem}
.ssq-otp-verify input{box-sizing:border-box;width:100%}
.ssq-otp-resend{margin:.8rem 0 0 .5rem;background:transparent;border:0;text-decoration:underline;cursor:pointer}
.ssq-otp-status{margin:.75rem 0 0;min-height:1.4em}
.ssq-otp-unavailable{margin:0;color:var(--ssq-text-secondary)}

body.ssq-auth-password-mode .ssq-otp-panel{display:none}
body.ssq-auth-password-mode #customer_login{margin-top:1rem}
body.woocommerce-account:not(.logged-in):not(.ssq-auth-password-mode) #customer_login{display:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:1050px){
  .ssq-account-dashboard-cards{grid-template-columns:repeat(2,1fr)}
  .ssq-order-card{grid-template-columns:1fr auto}
  .ssq-order-total{text-align:left}
}

@media(max-width:840px){
  .woocommerce-account .woocommerce{display:block}
  .ssq-account-profile{grid-template-columns:auto 1fr auto;justify-items:start;margin-bottom:1rem;text-align:left}
  .ssq-account-avatar img{width:56px;height:56px}
  .woocommerce-MyAccount-navigation{margin-bottom:1rem;overflow-x:auto}
  .woocommerce-MyAccount-navigation ul{flex-direction:row;width:max-content}
  .woocommerce-MyAccount-navigation li a{white-space:nowrap}
  .woocommerce-MyAccount-content{padding:1.25rem}
  .ssq-account-welcome{display:block}
  .ssq-account-welcome p{margin-top:.75rem}

  #customer_login{grid-template-columns:1fr;gap:1.25rem}
  body.woocommerce-account:not(.logged-in) #customer_login{grid-template-columns:1fr;gap:1.25rem}
  body.woocommerce-account:not(.logged-in) .woocommerce{padding:1.25rem .75rem 3rem}
}

@media(max-width:600px){
  .ssq-account-profile{grid-template-columns:auto 1fr}
  .ssq-account-profile-edit{grid-column:2}
  .ssq-account-dashboard-cards,.ssq-account-detail-grid,.woocommerce-MyAccount-content .woocommerce-Addresses{grid-template-columns:1fr}
  .ssq-order-card{grid-template-columns:1fr auto}
  .ssq-order-card .button{grid-column:1/-1;text-align:center}

  .woocommerce-MyAccount-orders thead{display:none}
  .woocommerce-MyAccount-orders tr{display:block;margin-bottom:.85rem;padding:.75rem;border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-md)}
  .woocommerce-MyAccount-orders td{display:flex;justify-content:space-between;gap:1rem;padding:.55rem!important;border:0}
  .woocommerce-MyAccount-orders td::before{content:attr(data-title);color:var(--ssq-text-muted);font-weight:700}

  body.woocommerce-account .site-main{padding-left:0;padding-right:0}
  .woocommerce-account .woocommerce,.ssq-account-profile,.woocommerce-MyAccount-navigation,.woocommerce-MyAccount-content{box-sizing:border-box;width:100%!important;max-width:none;margin-left:0;margin-right:0}
}