/**
 * SuperSquare Storefront — My Account & Auth Portal Styles
 *
 * Implements modern customer portal layout with sidebar navigation,
 * orders table with status pills, and dedicated split login/register auth cards.
 *
 * @package SuperSquare_Storefront
 */

/* ==========================================================================
   Customer Portal Layout
   ========================================================================== */
.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2.5rem;
  align-items: flex-start;
  padding: 2rem 0 4rem 0;
}

/* Sidebar Navigation */
.woocommerce-MyAccount-navigation {
  background-color: #ffffff;
  border: 1px solid var(--ssq-border, #e2e8f0);
  border-radius: var(--ssq-radius-lg, 12px);
  padding: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6875rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ssq-text-secondary, #475569);
  transition: all var(--ssq-transition-fast, 0.15s ease);
}

.woocommerce-MyAccount-navigation li a:hover {
  background-color: var(--ssq-surface-subtle, #f8fafc);
  color: var(--ssq-accent, #2563eb);
}

.woocommerce-MyAccount-navigation li.is-active a {
  background-color: #eff6ff;
  color: var(--ssq-accent, #2563eb);
  font-weight: 700;
}

/* Content Area Card */
.woocommerce-MyAccount-content {
  background-color: #ffffff;
  border: 1px solid var(--ssq-border, #e2e8f0);
  border-radius: var(--ssq-radius-lg, 12px);
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ssq-text-main, #0f172a);
  margin-bottom: 1.25rem;
}

/* Orders Table */
.woocommerce-MyAccount-orders {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.woocommerce-MyAccount-orders th {
  background-color: var(--ssq-surface-subtle, #f8fafc);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ssq-text-muted, #64748b);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ssq-border, #e2e8f0);
  text-align: left;
}

.woocommerce-MyAccount-orders td {
  padding: 1rem;
  border-bottom: 1px solid var(--ssq-border-subtle, #f1f5f9);
  font-size: 0.875rem;
  vertical-align: middle;
}

.order-status {
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  text-transform: capitalize;
}

.order-status.status-completed {
  background-color: #d1fae5;
  color: #065f46;
}

.order-status.status-processing {
  background-color: #dbeafe;
  color: #1e40af;
}

.order-status.status-on-hold,
.order-status.status-pending {
  background-color: #fef3c7;
  color: #92400e;
}

.order-status.status-cancelled,
.order-status.status-failed {
  background-color: #fee2e2;
  color: #991b1b;
}

.woocommerce-MyAccount-orders .button {
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 6px;
  background-color: var(--ssq-surface-subtle, #f8fafc);
  border: 1px solid var(--ssq-border, #e2e8f0);
  color: var(--ssq-text-main, #0f172a);
}

.woocommerce-MyAccount-orders .button:hover {
  background-color: var(--ssq-accent, #2563eb);
  color: #ffffff;
  border-color: var(--ssq-accent, #2563eb);
}

/* ==========================================================================
   Dedicated Auth Page: Login / Register Split
   ========================================================================== */
#customer_login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  max-width: 900px;
  margin: 2rem auto 4rem auto;
}

#customer_login.single-column {
  grid-template-columns: 1fr;
  max-width: 460px;
}

.u-column1, .u-column2 {
  background-color: #ffffff;
  border: 1px solid var(--ssq-border, #e2e8f0);
  border-radius: var(--ssq-radius-xl, 16px);
  padding: 2.25rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

#customer_login h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ssq-text-main, #0f172a);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ssq-border, #e2e8f0);
}

#customer_login form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#customer_login .form-row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
}

#customer_login label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ssq-text-main, #0f172a);
}

#customer_login button[type="submit"] {
  margin-top: 0.5rem;
  padding: 0.8125rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 8px;
  background-color: var(--ssq-accent, #2563eb);
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: background-color var(--ssq-transition-fast, 0.15s ease);
}

#customer_login button[type="submit"]:hover {
  background-color: var(--ssq-accent-hover, #1d4ed8);
}

.woocommerce-LostPassword {
  font-size: 0.8125rem;
  margin-top: 0.5rem;
}

@media (max-width: 840px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  #customer_login {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}


/* Logged-out WooCommerce account shell. */
body.woocommerce-account:not(.logged-in) .woocommerce { display:block; width:100%; max-width:1040px; margin:0 auto; padding:2.5rem 1rem 4rem; }
body.woocommerce-account:not(.logged-in) #customer_login { display:grid; width:100%; max-width:960px; margin:2rem auto 4rem; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; }
body.woocommerce-account:not(.logged-in) #customer_login .u-column1,
body.woocommerce-account:not(.logged-in) #customer_login .u-column2 { float:none; width:auto; min-width:0; margin:0; box-sizing:border-box; }
body.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form,
body.woocommerce-account:not(.logged-in) #customer_login .form-row { width:100%; margin-inline:0; box-sizing:border-box; }
body.woocommerce-account:not(.logged-in) #customer_login label { width:100%; white-space:normal; overflow-wrap:normal; word-break:normal; }
body.woocommerce-account:not(.logged-in) #customer_login input.input-text,
body.woocommerce-account:not(.logged-in) #customer_login input[type="text"],
body.woocommerce-account:not(.logged-in) #customer_login input[type="email"],
body.woocommerce-account:not(.logged-in) #customer_login input[type="password"] { display:block; width:100%; min-width:0; min-height:46px; box-sizing:border-box; padding:.72rem .85rem; border:1px solid var(--ssq-border,#e2e8f0); border-radius:8px; }
body.woocommerce-account:not(.logged-in) #customer_login .password-input { display:block; position:relative; width:100%; }
body.woocommerce-account:not(.logged-in) #customer_login .password-input input { padding-inline-end:3rem; }
body.woocommerce-account:not(.logged-in) #customer_login .show-password-input { position:absolute; inset-inline-end:.85rem; top:50%; transform:translateY(-50%); }
body.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-login__rememberme { display:inline-flex; flex-direction:row; align-items:center; gap:.5rem; width:auto; white-space:nowrap; }
body.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-login__rememberme input { width:auto; min-height:0; margin:0; flex:0 0 auto; }
body.woocommerce-account:not(.logged-in) #customer_login button.button { width:100%; min-height:46px; }
@media (max-width:840px){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}}
.ssq-otp-login{max-width:960px;margin:2rem auto 0;padding:0 1rem}.ssq-auth-mode-tabs{display:flex;gap:.5rem;padding:.35rem;background:var(--ssq-surface-subtle,#f8fafc);border:1px solid var(--ssq-border,#e2e8f0);border-radius:12px}.ssq-auth-mode-tab{flex:1;min-height:44px;border:0;border-radius:9px;background:transparent;font:inherit;font-weight:700;cursor:pointer}.ssq-auth-mode-tab.is-active{background:#fff;box-shadow:0 1px 4px rgba(15,23,42,.08);color:var(--ssq-accent,#2563eb)}.ssq-otp-panel{margin-top:1rem;padding:1.5rem;background:#fff;border:1px solid var(--ssq-border,#e2e8f0);border-radius:14px}.ssq-otp-panel label{display:block;font-weight:650;margin-bottom:.45rem}.ssq-otp-row{display:flex;align-items:center;border:1px solid var(--ssq-border,#cbd5e1);border-radius:9px;overflow:hidden}.ssq-otp-prefix{padding:.8rem;border-inline-end:1px solid var(--ssq-border,#cbd5e1);background:#f8fafc}.ssq-otp-row input{border:0!important;box-shadow:none!important;min-width:0;flex:1}.ssq-otp-send,.ssq-otp-verify .button{margin-top:.8rem;min-height:44px}.ssq-otp-verify{margin-top:1rem}.ssq-otp-verify input{width:100%;box-sizing:border-box}.ssq-otp-resend{margin:.8rem 0 0 .5rem;border:0;background:transparent;text-decoration:underline;cursor:pointer}.ssq-otp-status{min-height:1.4em;margin:.75rem 0 0}.ssq-otp-unavailable{margin:0;color:var(--ssq-text-secondary,#475569)}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}

/* Premium customer portal */
body.logged-in.woocommerce-account { background:#f6f8fc; }
body.logged-in.woocommerce-account .site-main { padding-block:clamp(1.5rem,4vw,4rem); }
body.logged-in.woocommerce-account .woocommerce { grid-template-columns:minmax(220px,272px) minmax(0,1fr); gap:clamp(1.25rem,3vw,2.5rem); max-width:1240px; margin:auto; padding:0 1rem 4rem; }
.ssq-account-profile { grid-column:1; display:grid; justify-items:center; gap:.75rem; padding:1.75rem 1.25rem; color:#fff; text-align:center; border-radius:22px; background:linear-gradient(145deg,#172554,#1d4ed8 68%,#3b82f6); box-shadow:0 18px 45px rgba(30,64,175,.22); }
.ssq-account-avatar img { display:block; width:72px; height:72px; border:4px solid rgba(255,255,255,.28); border-radius:50%; box-shadow:0 8px 20px rgba(15,23,42,.25); }
.ssq-account-profile-copy { display:grid; gap:.15rem; min-width:0; }
.ssq-account-profile-copy strong { font-size:1.05rem; }
.ssq-account-profile-copy > span:last-child { max-width:210px; color:#dbeafe; font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ssq-account-profile .ssq-account-eyebrow { color:#bfdbfe; }
.ssq-account-profile-edit { padding:.55rem .9rem; color:#fff; font-size:.78rem; font-weight:750; border:1px solid rgba(255,255,255,.35); border-radius:999px; }
.ssq-account-profile-edit:hover { color:#172554; background:#fff; }
body.logged-in.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation { grid-column:1; float:none; width:100%; max-width:none; box-sizing:border-box; padding:.65rem; border:0; border-radius:18px; box-shadow:0 12px 36px rgba(15,23,42,.08); }
body.logged-in .woocommerce-MyAccount-navigation li a { min-height:46px; padding:.72rem .9rem; border-radius:11px; }
body.logged-in .woocommerce-MyAccount-navigation li a::before { content:""; width:7px; height:7px; flex:0 0 auto; border:2px solid #94a3b8; border-radius:50%; }
body.logged-in .woocommerce-MyAccount-navigation li.is-active a { color:#1d4ed8; background:linear-gradient(90deg,#eff6ff,#f8fbff); }
body.logged-in .woocommerce-MyAccount-navigation li.is-active a::before { border-color:#2563eb; background:#2563eb; box-shadow:0 0 0 4px #dbeafe; }
body.logged-in .woocommerce-MyAccount-navigation-link--customer-logout { margin-top:.5rem; padding-top:.5rem; border-top:1px solid #eef2f7; }
body.logged-in .woocommerce-MyAccount-navigation-link--customer-logout a { color:#b91c1c; }
body.logged-in.woocommerce-account .woocommerce .woocommerce-MyAccount-content { grid-column:2; grid-row:1 / span 3; float:none; width:100%; max-width:none; min-width:0; box-sizing:border-box; padding:clamp(1.1rem,3vw,2.25rem); border:0; border-radius:24px; box-shadow:0 18px 55px rgba(15,23,42,.08); }
.ssq-account-eyebrow { display:block; margin-bottom:.25rem; color:#64748b; font-size:.68rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.ssq-account-welcome { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin:-.4rem 0 1.75rem; padding-bottom:1.5rem; border-bottom:1px solid #e8edf5; }
.ssq-account-welcome h2 { margin:0!important; font-size:clamp(1.55rem,3vw,2.2rem)!important; letter-spacing:-.035em; }
.ssq-account-welcome p { max-width:520px; margin:0; color:#64748b; font-size:.9rem; line-height:1.65; }
.ssq-account-dashboard-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; margin-bottom:2rem; }
.ssq-account-stat-card { position:relative; display:grid; grid-template-columns:auto 1fr; gap:.7rem; min-height:112px; padding:1rem; overflow:hidden; border:1px solid #e5eaf2; border-radius:16px; background:linear-gradient(145deg,#fff,#f8fafc); }
.ssq-account-stat-icon { display:grid; width:38px; height:38px; place-items:center; color:#2563eb; border-radius:11px; background:#eaf2ff; }
.ssq-account-stat-info { display:grid; align-content:start; }
.ssq-stat-number { color:#0f172a; font-size:1.25rem; font-weight:850; line-height:1.1; }
.ssq-stat-label { margin-top:.2rem; color:#64748b; font-size:.72rem; }
.ssq-stat-link { grid-column:1/-1; align-self:end; color:#1d4ed8; font-size:.73rem; font-weight:750; }
.ssq-account-section { margin:0 0 2rem; }
.ssq-account-section-head { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1rem; }
.ssq-account-section-head h2 { margin:0!important; }
.ssq-account-section-head > a { color:#2563eb; font-size:.8rem; font-weight:750; }
.ssq-recent-orders { display:grid; gap:.7rem; }
.ssq-order-card { display:grid; grid-template-columns:minmax(145px,1fr) auto auto auto; align-items:center; gap:1rem; padding:1rem; border:1px solid #e7ecf3; border-radius:15px; transition:.2s ease; }
.ssq-order-card:hover { border-color:#bfdbfe; box-shadow:0 10px 25px rgba(30,64,175,.08); transform:translateY(-1px); }
.ssq-order-card > div:first-child { display:grid; }
.ssq-order-state { padding:.35rem .65rem; color:#475569; font-size:.7rem; font-weight:800; border-radius:999px; background:#f1f5f9; }
.ssq-order-state--completed { color:#047857; background:#ecfdf5; }
.ssq-order-state--processing { color:#1d4ed8; background:#eff6ff; }
.ssq-order-state--failed,.ssq-order-state--cancelled { color:#b91c1c; background:#fef2f2; }
.ssq-order-total { display:grid; text-align:right; font-weight:800; }
.ssq-order-total small { color:#94a3b8; font-size:.68rem; font-weight:600; }
.ssq-order-card .button { white-space:nowrap; }
.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:.9rem; padding:1.2rem; border:1px solid #e7ecf3; border-radius:18px; background:#fff; }
.ssq-account-card-icon { display:grid; width:42px; height:42px; place-items:center; color:#1d4ed8; font-size:1.25rem; border-radius:13px; background:#eff6ff; }
.ssq-account-mini-card h3 { margin:0 0 .35rem!important; font-size:1rem!important; }
.ssq-account-mini-card p { margin:0; color:#64748b; font-size:.78rem; line-height:1.55; }
.ssq-account-mini-card > a { grid-column:2; color:#1d4ed8; font-size:.76rem; font-weight:750; }
.ssq-account-empty,.woocommerce-MyAccount-content .woocommerce-info { padding:2.5rem 1.25rem; color:#64748b; text-align:center; border:1px dashed #cbd5e1; border-radius:18px; background:#f8fafc; }
.ssq-account-empty > span { display:grid; width:48px; height:48px; margin:0 auto .8rem; place-items:center; color:#2563eb; font-size:1.5rem; border-radius:50%; background:#eaf2ff; }
.ssq-account-empty h3 { margin:0 0 .35rem!important; color:#0f172a; }
.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 { float:none!important; width:auto!important; padding:1.25rem; border:1px solid #e7ecf3; border-radius:16px; }
.woocommerce-MyAccount-content fieldset { margin:1.5rem 0; padding:1.25rem; border:1px solid #e7ecf3; border-radius:16px; }
.woocommerce-MyAccount-content input.input-text,.woocommerce-MyAccount-content select,.woocommerce-MyAccount-content textarea { min-height:48px; padding:.75rem .85rem; border:1px solid #cbd5e1; border-radius:11px; background:#fff; }
.woocommerce-MyAccount-content input:focus,.woocommerce-MyAccount-content select:focus,.woocommerce-MyAccount-content textarea:focus { outline:3px solid rgba(37,99,235,.14); border-color:#2563eb; }

@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) { body.logged-in.woocommerce-account .woocommerce { display:block; } .ssq-account-profile { grid-template-columns:auto 1fr auto; justify-items:start; text-align:left; margin-bottom:1rem; } .ssq-account-avatar img { width:58px; height:58px; } .woocommerce-MyAccount-navigation { margin-bottom:1rem; overflow-x:auto; } .woocommerce-MyAccount-navigation ul { flex-direction:row; width:max-content; } body.logged-in .woocommerce-MyAccount-navigation li a { white-space:nowrap; } body.logged-in .woocommerce-MyAccount-content { padding:1.25rem; } .ssq-account-welcome { display:block; } .ssq-account-welcome p { margin-top:.75rem; } }
@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 #e7ecf3; border-radius:14px; } .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:#64748b; font-weight:700; } }



/* Mobile account full-width layout */
@media (max-width: 600px) {
  body.logged-in.woocommerce-account .site-main {
    padding-left: 0;
    padding-right: 0;
  }

  body.logged-in.woocommerce-account .woocommerce {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

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