/* ==========================================================================
   ALIZAY FABRICS — ACCOUNT PAGES
   ========================================================================== */

.auth-section { padding: clamp(7rem, 14vw, 9rem) 0 var(--section-space); display: flex; justify-content: center; }
.auth-card { width: 100%; max-width: 440px; }
.auth-card .eyebrow { display: block; text-align: center; }
.auth-card h1 { text-align: center; margin-top: 0.5rem; }
.auth-card p.sub { text-align: center; color: rgba(212,175,55,0.55); margin-top: 0.6rem; font-size: 0.92rem; }
.auth-form { margin-top: 2.2rem; }
.auth-form .form-field { margin-bottom: 1.2rem; }
.auth-form label { display: block; font-size: 0.82rem; margin-bottom: 0.4rem; color: rgba(212,175,55,0.6); }
.auth-form input, .auth-form textarea, .auth-form select {
  width: 100%; padding: 0.8rem 0.9rem; border: 1px solid rgba(212,175,55,0.2); font-family: var(--f-body); font-size: 0.92rem;
  background: var(--c-black-panel); color: var(--c-gold);
}
.auth-form input::placeholder, .auth-form textarea::placeholder { color: rgba(212,175,55,0.35); }

/* Same styling for forms that use .form-field wrappers without the
   .auth-form class (profile.php, addresses.php) */
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 0.8rem 0.9rem; border: 1px solid rgba(212,175,55,0.2); font-family: var(--f-body); font-size: 0.92rem;
  background: var(--c-black-panel); color: var(--c-gold);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: rgba(212,175,55,0.35); }
.form-field label { display: block; font-size: 0.82rem; margin-bottom: 0.4rem; color: rgba(212,175,55,0.6); }
.auth-form input:focus { outline: none; border-color: var(--c-gold); }
.password-field { position: relative; }
.password-toggle { position: absolute; right: 0.9rem; top: 42px; color: rgba(212,175,55,0.4); font-size: 0.9rem; }
.auth-form .btn { width: 100%; justify-content: center; margin-top: 0.6rem; }
.auth-links { text-align: center; margin-top: 1.6rem; font-size: 0.88rem; color: rgba(212,175,55,0.6); }
.auth-links a { text-decoration: underline; color: var(--c-black); }
.auth-alert { padding: 0.9rem 1.1rem; font-size: 0.88rem; margin-bottom: 1.4rem; }
.auth-alert.error { background: rgba(92,26,43,0.08); color: var(--c-oxblood); }
.auth-alert.success { background: rgba(46,125,50,0.08); color: #2e7d32; }
.dev-note { margin-top: 1.4rem; font-size: 0.78rem; padding: 0.8rem 1rem; background: var(--c-gray-light); word-break: break-all; }

/* Dashboard */
.account-layout { display: grid; grid-template-columns: 260px 1fr; gap: 3rem; padding: clamp(7rem, 12vw, 9rem) 0 var(--section-space); }
.account-sidebar { border-right: 1px solid rgba(212,175,55,0.08); padding-right: 2rem; }
.account-sidebar .user-chip { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 2rem; }
.account-sidebar .user-chip .avatar {
  width: 46px; height: 46px; border-radius: 50%; background: var(--c-black); color: var(--c-gold);
  display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 1.2rem;
}
.account-nav a {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0; font-size: 0.9rem; color: rgba(212,175,55,0.65);
  border-bottom: 1px solid rgba(212,175,55,0.06);
}
.account-nav a i { width: 18px; color: var(--c-gold-dark); }
.account-nav a.is-active, .account-nav a:hover { color: var(--c-black); }
.account-nav a.logout-link { color: var(--c-oxblood); }

.account-main h2 { margin-bottom: 0.4rem; }
.account-main .lede { color: rgba(212,175,55,0.55); margin-bottom: 2rem; font-size: 0.92rem; }

.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-bottom: 2.5rem; }
.stat-card { background: var(--c-gray-light); padding: 1.6rem; }
.stat-card .num { font-family: var(--f-display); font-size: 2.2rem; }
.stat-card .label { font-size: 0.82rem; color: rgba(212,175,55,0.55); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.3rem; }

.orders-table { width: 100%; border-collapse: collapse; }
.orders-table th { text-align: left; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(212,175,55,0.45); padding-bottom: 0.9rem; border-bottom: 1px solid rgba(212,175,55,0.1); }
.orders-table td { padding: 1rem 0; border-bottom: 1px solid rgba(212,175,55,0.06); font-size: 0.9rem; }
.status-pill { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.3rem 0.7rem; display: inline-block; }
.status-pill.pending { background: rgba(184,134,11,0.12); color: var(--c-gold-dark); }
.status-pill.processing { background: rgba(27,42,74,0.1); color: #1b2a4a; }
.status-pill.shipped { background: rgba(27,42,74,0.1); color: #1b2a4a; }
.status-pill.delivered { background: rgba(46,125,50,0.1); color: #2e7d32; }
.status-pill.cancelled { background: rgba(92,26,43,0.1); color: var(--c-oxblood); }

.address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.address-card { border: 1px solid rgba(212,175,55,0.12); padding: 1.4rem; position: relative; }
.address-card .default-tag { position: absolute; top: 1rem; right: 1rem; font-size: 0.7rem; background: var(--c-gold); color: var(--c-black); padding: 0.2rem 0.5rem; }
.address-card .actions { margin-top: 1rem; display: flex; gap: 1rem; font-size: 0.82rem; }
.address-card .actions a, .address-card .actions button { text-decoration: underline; color: rgba(212,175,55,0.6); }

.empty-panel { text-align: center; padding: 4rem 1rem; color: rgba(212,175,55,0.5); }
.empty-panel i { font-size: 2.4rem; color: rgba(212,175,55,0.15); margin-bottom: 1rem; }

@media (max-width: 860px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-sidebar { border-right: none; border-bottom: 1px solid rgba(212,175,55,0.08); padding-right: 0; padding-bottom: 1.5rem; }
  .stat-cards { grid-template-columns: 1fr; }
  .address-grid { grid-template-columns: 1fr; }
  .orders-table { display: block; overflow-x: auto; }
}