/* ═══════════════════════════════════════════════════════════════════
   customer-auth.css  —  SarNex Nutrition
   Exact values from style.css:
     body bg:       #0f1115
     surface:       #161a22  (.feature bg)
     accent:        #00e0a4
     border/divider:#1f222a
     body text:     #ffffff
     muted text:    #cfcfcf  (.hero p) / #aaa (footer)
     input border:  2.5px solid #ffffff
     input focus:   border #00e0a4, box-shadow rgba(0,224,164,0.45)
     btn:           bg #00e0a4, color #000, border-radius 30px, padding 14px 28px
     fonts:         'Bebas Neue' (headings), 'Montserrat' (body)
     header:        bg #0f1115, border-bottom 1px solid #1f222a, padding 15px 0
     logo:          max-width 260px
     section-title: Bebas Neue, 38px, letter-spacing 10px
     feature card:  bg #161a22, border-radius 12px, padding 25px
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1. HEADER NAV  (homepage + auth pages)
───────────────────────────────────────────────────────────────────── */
.snx-header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   /* header already has padding:15px 0 from style.css */
}

.snx-header-nav {
   display: flex;
   align-items: center;
   gap: 18px;
   font-family: 'Montserrat', sans-serif;
   font-size: 14px;
}

/* "Hi, Name" greeting */
.snx-nav-greeting {
   color: #cfcfcf;
   font-size: 13px;
   font-weight: 400;
}
.snx-nav-greeting strong {
   color: #00e0a4;
   font-weight: 700;
}

/* Text links in nav */
.snx-nav-link {
   color: #cfcfcf;
   text-decoration: none;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 5px;
   transition: color 0.3s ease;
}
.snx-nav-link:hover { color: #00e0a4; }

/* Button in nav — inherits .btn, just tighter padding */
.snx-nav-btn {
   padding: 10px 22px !important;
   font-size: 13px !important;
   font-weight: 700 !important;
}

@media (max-width: 540px) {
   .snx-nav-greeting { display: none; }
   .snx-header-nav   { gap: 10px; }
   .snx-nav-btn      { padding: 8px 14px !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   2. FLASH BAR  (top of page, below header)
───────────────────────────────────────────────────────────────────── */
.cauth-flash {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 13px 24px;
   font-family: 'Montserrat', sans-serif;
   font-size: 14px;
   font-weight: 600;
}
.cauth-flash--success {
   background: rgba(0, 224, 164, 0.08);
   color: #00e0a4;
   border-bottom: 2px solid rgba(0, 224, 164, 0.30);
}
.cauth-flash--error {
   background: rgba(214, 0, 0, 0.08);
   color: #ff6b6b;
   border-bottom: 2px solid rgba(214, 0, 0, 0.30);
}

/* ─────────────────────────────────────────────────────────────────────
   3. AUTH PAGE BODY WRAPPER
   body is already #0f1115 from style.css — no override needed
───────────────────────────────────────────────────────────────────── */
.cauth-body {
   min-height: calc(100vh - 130px);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 60px 20px 80px;
   /* Matches hero radial gradient from style.css */
   background:
      radial-gradient(circle at 15% 40%, rgba(0,224,164,0.10), transparent 40%),
      radial-gradient(circle at 85% 70%, rgba(0,224,164,0.07), transparent 40%);
}

/* ─────────────────────────────────────────────────────────────────────
   4. CARD  — matches .feature / .price-card  (#161a22, border-radius)
───────────────────────────────────────────────────────────────────── */
.cauth-card {
   background: #161a22;          /* exact .feature bg */
   border-radius: 16px;          /* matches .price-card */
   padding: 44px 40px;
   width: 100%;
   max-width: 480px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.50);
   transition: box-shadow 0.3s ease;
}
.cauth-card--wide { max-width: 640px; }

/* ─────────────────────────────────────────────────────────────────────
   5. LOGO inside card  — same image, same max-width proportion
───────────────────────────────────────────────────────────────────── */
.cauth-logo {
   display: flex;
   justify-content: center;
   margin-bottom: 26px;
}
.cauth-logo img {
   max-width: 200px;         /* harmonious with header .logo max-width:260px */
   width: 100%;
   height: auto;
   object-fit: contain;
}

/* ─────────────────────────────────────────────────────────────────────
   6. TITLE  — matches .section-title exactly
───────────────────────────────────────────────────────────────────── */
.cauth-title {
   /*font-family: 'Bebas Neue', sans-serif;*/
   font-size: 38px;
   letter-spacing: 0px;        /* exact .section-title letter-spacing */
   color: #ffffff;
   text-align: center;
   margin: 0 0 8px;
}

/* ─────────────────────────────────────────────────────────────────────
   7. SUBTITLE  — matches .hero p
───────────────────────────────────────────────────────────────────── */
.cauth-sub {
   font-family: 'Montserrat', sans-serif;
   font-size: 14px;
   color: #cfcfcf;               /* exact .hero p color */
   text-align: center;
   margin: 0 0 30px;
}

/* ─────────────────────────────────────────────────────────────────────
   8. ALERT BOX
───────────────────────────────────────────────────────────────────── */
.cauth-alert {
   padding: 13px 16px;
   border-radius: 10px;
   font-family: 'Montserrat', sans-serif;
   font-size: 13px;
   font-weight: 600;
   margin-bottom: 20px;
   line-height: 1.6;
}
.cauth-alert--error {
   background: rgba(214, 0, 0, 0.10);
   border: 1.5px solid rgba(214, 0, 0, 0.35);
   color: #ff6b6b;
}
.cauth-alert--success {
   background: rgba(0, 224, 164, 0.08);
   border: 1.5px solid rgba(0, 224, 164, 0.28);
   color: #00e0a4;
}
.cauth-alert div + div { margin-top: 4px; }

/* ─────────────────────────────────────────────────────────────────────
   9. FORM & FIELDS
   All inputs inherit from style.css:
     border: 2.5px solid #ffffff
     background: rgba(255,255,255,0.04)
     border-radius: 10px
     padding: 14px
     color: #fff
     margin-bottom: 16px
     focus → border #00e0a4, box-shadow rgba(0,224,164,0.45)
   We only add label + error styles here.
───────────────────────────────────────────────────────────────────── */
.cauth-form  { width: 100%; }

.cauth-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
}

.cauth-field { margin-bottom: 0; } /* inputs have mb:16px from style.css */

.cauth-field label {
   display: block;
   font-family: 'Montserrat', sans-serif;
   font-size: 11px;
   font-weight: 700;
   color: #cfcfcf;
   text-transform: uppercase;
   letter-spacing: 1.2px;
   margin-bottom: 5px;
}

/* inputs/textarea/select already styled by style.css — just reset margin inside rows */
.cauth-row .cauth-field input,
.cauth-row .cauth-field textarea,
.cauth-row .cauth-field select { margin-bottom: 0; }

/* disabled (email field on profile page) */
.cauth-field input:disabled {
   opacity: 0.35;
   cursor: not-allowed;
   border-color: rgba(255,255,255,0.20);
}

/* Custom select arrow */
.cauth-field select {
   cursor: pointer;
   appearance: none;
   -webkit-appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 14px center;
   background-color: rgba(255,255,255,0.04);
   padding-right: 40px;
}
.cauth-field select option { background: #161a22; color: #fff; }

/* Error border */
.cauth-field--error input,
.cauth-field--error textarea,
.cauth-field--error select {
   border-color: rgba(214, 0, 0, 0.80) !important;
}

/* Error text — same colour as .payment-message.error */
.cauth-field-error {
   font-family: 'Montserrat', sans-serif;
   font-size: 12px;
   font-weight: 600;
   color: #d60000;             /* exact .payment-message.error color */
   margin-top: 10px;          /* pull up under the input (mb is 16px from style) */
   margin-bottom: 10px;
}

/* ─────────────────────────────────────────────────────────────────────
   10. PASSWORD EYE TOGGLE
───────────────────────────────────────────────────────────────────── */
.cauth-password-wrap          { position: relative; }
.cauth-password-wrap input    { padding-right: 48px; margin-bottom: 0; }
.cauth-eye-btn {
   position: absolute;
   right: 14px; top: 50%;
   transform: translateY(-50%);
   background: none; border: none;
   cursor: pointer;
   color: rgba(255,255,255,0.35);
   font-size: 16px; padding: 0; line-height: 1;
   transition: color 0.2s ease;
}
.cauth-eye-btn:hover { color: #00e0a4; }

/* ─────────────────────────────────────────────────────────────────────
   11. +91 PHONE PREFIX
   Matches exactly the input border/bg from style.css
───────────────────────────────────────────────────────────────────── */
.cauth-prefix-wrap { display: flex; }
.cauth-prefix {
   padding: 14px;                      /* same as input padding */
   background: rgba(255,255,255,0.04); /* same as input bg */
   border: 2.5px solid #ffffff;        /* same as input border */
   border-right: none;
   border-radius: 10px 0 0 10px;      /* same as input border-radius */
   font-family: 'Montserrat', sans-serif;
   font-size: 14px;
   color: #cfcfcf;
   white-space: nowrap;
   line-height: 1.6;
}
.cauth-prefix-wrap input {
   border-radius: 0 10px 10px 0 !important;
   margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   12. SECTION LABEL divider inside form
───────────────────────────────────────────────────────────────────── */
.cauth-section-label {
   display: flex; align-items: center; gap: 8px;
   font-family: 'Montserrat', sans-serif;
   font-size: 10px; font-weight: 700;
   letter-spacing: 2px; text-transform: uppercase;
   color: rgba(255,255,255,0.30);
   margin: 6px 0 14px;
}
.cauth-section-label::after {
   content: ''; flex: 1; height: 1px;
   background: #1f222a;        /* exact border color from style.css */
}
.cauth-section-label small {
   font-size: 10px; font-weight: 400;
   text-transform: none; letter-spacing: 0;
   color: rgba(255,255,255,0.18);
}

/* ─────────────────────────────────────────────────────────────────────
   13. SUBMIT BUTTON
   Uses .btn from style.css — just force full-width
───────────────────────────────────────────────────────────────────── */
.cauth-submit-btn {
   width: 100%;
   display: block;
   text-align: center;
   margin-top: 4px;
   font-size: 15px !important;
   letter-spacing: 1px;
}

/* ─────────────────────────────────────────────────────────────────────
   14. FOOTER LINKS below card
───────────────────────────────────────────────────────────────────── */
.cauth-footer {
   text-align: center;
   font-family: 'Montserrat', sans-serif;
   font-size: 13px;
   color: #cfcfcf;
   margin-top: 20px;
}
.cauth-footer a {
   color: #00e0a4;
   font-weight: 700;
   text-decoration: none;
   transition: opacity 0.2s ease;
}
.cauth-footer a:hover { opacity: 0.75; }

/* ─────────────────────────────────────────────────────────────────────
   15. "OR" DIVIDER
───────────────────────────────────────────────────────────────────── */
.cauth-divider {
   display: flex; align-items: center; gap: 12px;
   margin: 18px 0 0;
   font-family: 'Montserrat', sans-serif;
   font-size: 11px; color: rgba(255,255,255,0.18);
   letter-spacing: 1px; text-transform: uppercase;
}
.cauth-divider::before,
.cauth-divider::after {
   content: ''; flex: 1; height: 1px;
   background: #1f222a;        /* exact same as footer border-top */
}

/* ─────────────────────────────────────────────────────────────────────
   16. ORDER FORM bar (auth status above order form on homepage)
───────────────────────────────────────────────────────────────────── */
.cauth-bar {
   padding: 12px 16px; border-radius: 10px;
   font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600;
   margin-bottom: 16px;
   display: flex; align-items: center; justify-content: space-between;
   flex-wrap: wrap; gap: 8px;
}
.cauth-bar--logged-in {
   background: rgba(0,224,164,0.07);
   border: 1px solid rgba(0,224,164,0.22);
   color: #00e0a4;
}
.cauth-bar--logged-in a { color: #00e0a4; font-weight: 700; }
.cauth-bar--guest {
   background: rgba(255,193,7,0.07);
   border: 1px solid rgba(255,193,7,0.22);
   color: #ffd166;
}
.cauth-bar--guest a { color: #ffd166; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════
   ACCOUNT PAGES  (profile / orders)
   ═══════════════════════════════════════════════════════════════════ */

.cauth-account-section {
   min-height: calc(100vh - 130px);
   display: flex; align-items: flex-start; justify-content: center;
   padding: 48px 20px 80px;
}
.cauth-account-wrap {
   display: flex; gap: 24px;
   max-width: 1060px; width: 100%; align-items: flex-start;
}

/* Sidebar */
.cauth-sidebar { width: 300px; flex-shrink: 0; }
.cauth-user-card {
   display: flex; align-items: center; gap: 12px;
   background: #161a22; border: 1px solid #1f222a;
   border-radius: 12px; padding: 16px; margin-bottom: 10px;
}
.cauth-avatar {
   width: 46px; height: 46px;
   background: rgba(0,224,164,0.10);
   border: 1.5px solid rgba(0,224,164,0.25);
   border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
   /*font-family: 'Bebas Neue', sans-serif;*/
   font-size: 22px; color: #00e0a4; flex-shrink: 0;
}
.cauth-user-name  { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; color: #fff; margin-bottom: 2px; }
.cauth-user-email { font-family: 'Montserrat', sans-serif; font-size: 12px; color: #cfcfcf; }

.cauth-side-nav { display: flex; flex-direction: column; gap: 4px; }
.cauth-side-nav a {
   display: flex; align-items: center; gap: 10px; padding: 11px 14px;
   border-radius: 10px; font-family: 'Montserrat', sans-serif;
   font-size: 13px; font-weight: 600; color: #cfcfcf;
   text-decoration: none; transition: background 0.2s, color 0.2s;
}
.cauth-side-nav a:hover          { background: rgba(0,224,164,0.07); color: #00e0a4; }
.cauth-side-nav a.active         { background: rgba(0,224,164,0.12); color: #00e0a4; }
.cauth-side-nav a.logout-link:hover { background: rgba(214,0,0,0.10); color: #ff6b6b; }

/* Main panel */
.cauth-main   { flex: 1; 
   /*min-width: 0; */
}
.cauth-panel  { background: #161a22; border: 1px solid #1f222a; border-radius: 16px; padding: 28px; margin-bottom: 20px; }
.cauth-panel-title {
   /*font-family: 'Bebas Neue', sans-serif; font-size: 28px;*/
   letter-spacing: 0px; color: #fff; margin-bottom: 6px;
   display: flex; align-items: center; gap: 10px;
}
.cauth-panel-sub { font-family: 'Montserrat', sans-serif; font-size: 13px; color: #cfcfcf; margin-bottom: 20px; }

/* Orders */
.cauth-orders-list { display: flex; flex-direction: column; gap: 12px; }
.cauth-order-row {
   display: flex; align-items: center; justify-content: space-between;
   background: #0f1115; border: 1px solid #1f222a;
   border-radius: 12px; padding: 16px 18px;
   transition: border-color 0.3s, box-shadow 0.3s;
}
.cauth-order-row:hover { border-color: rgba(0,224,164,0.25); box-shadow: 0 4px 20px rgba(0,224,164,0.08); }
.cauth-order-left  { flex: 1; }
.cauth-order-right { text-align: right; flex-shrink: 0; padding-left: 16px; }
.cauth-field {margin-bottom: 16px; }
.cauth-order-id      { font-family: monospace; font-size: 12px; font-weight: 700; color: #00e0a4; margin-bottom: 3px; }
.cauth-order-date    { font-family: 'Montserrat', sans-serif; font-size: 11px; color: #cfcfcf; margin-bottom: 5px; }
.cauth-order-product { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.cauth-order-addr    { font-family: 'Montserrat', sans-serif; font-size: 12px; color: #cfcfcf; }
.cauth-order-track   { font-family: 'Montserrat', sans-serif; font-size: 12px; color: #cfcfcf; margin-top: 4px; }
.cauth-order-status  { display: inline-block; padding: 4px 12px; border-radius: 20px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; margin-bottom: 6px; }
.cauth-status--success { background: rgba(0,224,164,0.12); border:1px solid rgba(0,224,164,0.30); color:#00e0a4; }
.cauth-status--pending { background: rgba(255,193,7,0.10);  border:1px solid rgba(255,193,7,0.28); color:#ffd166; }
.cauth-status--failed  { background: rgba(214,0,0,0.10);    border:1px solid rgba(214,0,0,0.28);   color:#ff6b6b; }
.cauth-order-ship-status { font-family: 'Montserrat', sans-serif; font-size: 11px; color: #cfcfcf; margin-bottom: 4px; text-transform: capitalize; }
.cauth-order-amount      { 
   /*font-family: 'Bebas Neue', sans-serif; */
   font-size: 26px; color: #00e0a4; letter-spacing: 1px; }
.cauth-badge-count { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; background:rgba(0,224,164,0.12); border:1px solid rgba(0,224,164,0.25); color:#00e0a4; border-radius:50%; font-family:'Montserrat',sans-serif; font-size:13px; font-weight:700; }
.cauth-empty { text-align:center; padding:48px 20px; }
.cauth-empty-icon { font-size:48px; color:rgba(255,255,255,0.12); margin-bottom:14px; }
.cauth-empty h3 { 
   /*font-family:'Bebas Neue',sans-serif; */
   font-size:26px; color:#fff; margin-bottom:8px; letter-spacing:4px; }
.cauth-empty p  { font-family:'Montserrat',sans-serif; font-size:14px; color:#cfcfcf; margin-bottom:20px; }

/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
   .cauth-account-wrap { flex-direction: column; }
   .cauth-sidebar      { width: 100%; }
   .cauth-side-nav     { flex-direction: row; flex-wrap: wrap; }
   .cauth-side-nav a   { flex: 1; min-width: 110px; justify-content: center; }
}
@media (max-width: 768px) {
   .cauth-card         { padding: 30px 20px; }
   .cauth-card--wide   { padding: 28px 16px; }
   .cauth-row          { grid-template-columns: 1fr; }
   .cauth-title        { font-size: 30px; letter-spacing: 6px; }
   .cauth-account-section { padding: 24px 14px 60px; }
}


.pwd-meter {
  height: 6px;
  width: 100%;
  background: rgba(255,255,255,.15);
  border-radius: 6px;
  margin-top: 6px;
  overflow: hidden;
}

.pwd-bar {
  height: 100%;
  width: 0%;
  transition: width .3s ease;
  border-radius: 6px;
}

.pwd-text {
  display:block;
  margin-top:4px;
  font-size:12px;
  opacity:.85;
}

.pwd-rules {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;   /* wraps on small screens */
  padding: 6px 0 0;
  margin: 0;
  list-style: none;
}

.pwd-rules li {
  font-size: 12px;
  opacity: .5;
  white-space: nowrap;
  transition: .2s;
}

.pwd-rules li.ok {
  color: #00e0a4;
  opacity: 1;
  font-weight: 600;
}
.pwd-rules li.ok::before {
  content: "✔ ";
}