/* ==========================================================================
   account.css — login / verify, account pages, orders, wishlist
   ========================================================================== */

/* ---------- Login and verify: split layout ---------- */
.auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);       /* form on the right, brand panel on the left (RTL) */
    min-height: min(38rem, calc(100vh - 14rem));
    margin-block: var(--space-7);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.auth__form { display: flex; flex-direction: column; justify-content: center; padding: clamp(var(--space-6), 6vw, var(--space-9)); }
.auth__inner { width: 100%; max-width: 24rem; margin-inline: auto; }
.auth__kicker { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--fs-sm); font-weight: 600; color: var(--gold-700); }
.auth__title { margin: 0 0 var(--space-3); font-size: var(--fs-h2); }
.auth__hint { margin: 0 0 var(--space-6); font-size: var(--fs-sm); color: var(--ink-soft); }
.auth__links { margin: var(--space-5) 0 0; text-align: center; }

.auth .field-input[dir="ltr"] { text-align: left; font-size: 1.125rem; }   /* phone numbers read left to right */
.otp-input {
    min-height: 60px;
    padding-inline-start: 0.5em;       /* balances the letter-spacing added after the last digit */
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.5em;             /* safe here: digits only, no joined Persian letters */
    text-align: center;
}

.auth__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-8);
    overflow: hidden;
    background:
        radial-gradient(70% 60% at 15% 0%, rgba(63, 186, 194, 0.28), transparent 70%),
        linear-gradient(160deg, var(--night), #1B3532);
    color: var(--paper);
}
.auth__brand::before {                 /* gold diamond pattern, fading out toward the top */
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 6 58 32 32 58 6 32Z' fill='none' stroke='%23B98B2A' stroke-width='1.2'/%3E%3Cpath d='M32 20 44 32 32 44 20 32Z' fill='none' stroke='%233FBAC2' stroke-width='1.2'/%3E%3C/svg%3E");
    opacity: 0.35;
    -webkit-mask-image: linear-gradient(to top, #000, transparent 75%);
    mask-image: linear-gradient(to top, #000, transparent 75%);
}
.auth__brand > * { position: relative; }
.auth__logo { align-self: flex-start; width: auto; height: 72px; }
.auth__quote { margin: 0; font-size: var(--fs-h1); }
.auth__quote em { font-style: normal; color: var(--teal-500); }
.auth__sub { margin: var(--space-4) 0 0; font-size: var(--fs-sm); color: #D9D4C7; }

@media (max-width: 767px) {
    .auth { display: block; min-height: 0; margin-block: var(--space-5); border: 0; background: transparent; }
    .auth__brand { display: none; }
    .auth__form { padding: var(--space-5) 0; }
}

/* ---------- Account header ---------- */
.acct-head { padding-top: var(--space-6); margin-bottom: var(--space-5); }
.acct-head__kicker { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--fs-sm); font-weight: 600; color: var(--gold-700); }
.acct-head__title { margin: 0; font-size: var(--fs-h1); }
.acct-head__phone { margin: var(--space-1) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.acct-notice { margin-top: var(--space-5); }

/* ---------- Profile ---------- */
.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; margin-top: var(--space-6); }
@media (max-width: 899px) { .acct-grid { grid-template-columns: minmax(0, 1fr); } }
.acct-stack { display: grid; gap: var(--space-6); }

.acct-card { padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.acct-card__title { margin: 0 0 var(--space-5); font-size: var(--fs-md); }

/* Date of birth: three selects with a small label floating inside each */
.dob-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.dob-field { position: relative; display: block; }
.dob-sublabel { position: absolute; top: 8px; inset-inline-start: var(--space-4); z-index: 1; font-size: 11px; color: var(--muted); pointer-events: none; }
.dob-select { appearance: none; -webkit-appearance: none; min-height: 56px; padding: 22px var(--space-6) 6px var(--space-4); cursor: pointer; }
.dob-field .select-arrow { position: absolute; top: 50%; left: 12px; width: 1rem; height: 1rem; color: var(--muted); transform: translateY(-50%); pointer-events: none; }

/* Small text buttons (edit / delete / cancel) */
.alink { padding: 0; border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.alink:hover { color: var(--ink); }
.alink--accent { color: var(--teal-700); }
.alink--danger { color: var(--sale); }

.addr-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.addr { padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.addr__text { margin: 0 0 var(--space-3); font-size: var(--fs-sm); line-height: 1.9; color: var(--ink-soft); }
.addr__actions { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-2); }
.addr__edit textarea { margin-bottom: var(--space-2); }

/* ---------- Orders ---------- */
.ord-tabs { margin-top: var(--space-2); }
.ord-list { display: grid; gap: var(--space-5); margin-top: var(--space-6); }

.ord { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.ord__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); }
.ord__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; }
.ord__meta div { display: grid; gap: 2px; }
.ord__meta dt { font-size: var(--fs-xs); color: var(--muted); }
.ord__meta dd { margin: 0; font-size: var(--fs-sm); font-weight: 700; }

.ord__progress { padding: 0 var(--space-6) var(--space-5); }
.ord__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.ord__steps li { height: 4px; border-radius: 2px; background: var(--line); transition: background var(--dur-base); }
.ord__steps li.is-on { background: var(--teal-700); }
.ord__labels { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-sm); }
.ord__labels strong { color: var(--teal-800); }
.ord__labels span { color: var(--muted); }

.ord__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); }
.ord__ship { display: grid; gap: 2px; font-size: var(--fs-xs); color: var(--ink-soft); }
.ord__thumbs { display: flex; align-items: center; gap: var(--space-2); }
.ord__thumbs img { width: 44px; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); }
.ord__more-count { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }

.ord__more { border-top: 1px solid var(--line); }
.ord__more summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--teal-800);
    cursor: pointer;
    list-style: none;
}
.ord__more summary::-webkit-details-marker { display: none; }
.ord__more summary::after {          /* chevron as a mask, so it takes the text colour */
    content: '';
    width: 0.875rem;
    height: 0.875rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--dur-base) var(--ease-out);
}
.ord__more[open] summary::after { transform: rotate(180deg); }

.ord__lines { margin: 0; padding: 0 var(--space-6); list-style: none; }
.ord__line { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3); border-top: 1px dashed var(--line); }
.ord__line img { flex: none; width: 48px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); background: var(--line); }
.ord__line-info { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.ord__line-info a:hover { color: var(--teal-800); }
.ord__line-info small { display: block; margin-top: 2px; color: var(--muted); }
.ord__line-price { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }

.ord__address,
.ord__sums { margin: 0; padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.ord__address p { margin: var(--space-2) 0 0; line-height: 1.9; color: var(--ink-soft); }
.ord__sums div { display: flex; justify-content: space-between; padding-block: var(--space-1); }
.ord__sums dt { color: var(--muted); }
.ord__sums dd { margin: 0; }
.ord__sums .is-total { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--fs-base); font-weight: 800; }
.ord__sums .is-total dt { color: var(--ink); }

@media (max-width: 639px) {
    .ord__head, .ord__foot, .ord__progress { padding-inline: var(--space-4); }
    .ord__more summary, .ord__lines, .ord__address, .ord__sums { padding-inline: var(--space-4); }
}

/* ---------- Empty states (orders, wishlist) ---------- */
.acct-empty {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-9) var(--space-5);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    text-align: center;
}
.acct-empty > .icon { width: 2rem; height: 2rem; color: var(--gold-700); }
.acct-empty .brand-flourish { transform: scale(1.8); margin-bottom: var(--space-2); }
.acct-empty__title { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; }
.acct-wishlist { margin-top: var(--space-6); }