/* House of Hijab — hesap alt sayfaları (Destek, Para Puan, Sözleşmelerim) ortak butik stili.
   account-dashboard.css ile aynı sıcak paleti kullanır; düz Bootstrap kartların yerini alır. */

.account-dashboard .account-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.6rem;
}

.account-page-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a8a092;
    font-weight: 600;
    margin: 0 0 0.4rem;
}

.account-page-title {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: clamp(1.55rem, 3vw, 2.05rem);
    font-weight: 600;
    color: #201f1c;
    line-height: 1.12;
    margin: 0;
}

.account-page-sub {
    color: #7a766f;
    font-size: 0.95rem;
    margin: 0.5rem 0 0;
    max-width: 60ch;
}

/* Birincil eylem (kahve aksan) + sade ikincil */
.account-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 999px;
    padding: 0.62rem 1.2rem;
    font-size: 0.92rem;
    font-weight: 600;
    border: 1px solid transparent;
    background: var(--accent-strong, #6e4f36);
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.account-action:hover,
.account-action:focus-visible {
    background: #5a3f2a;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(110, 79, 54, 0.18);
}

.account-action.ghost {
    background: transparent;
    color: #5f5a52;
    border-color: #ddd7cd;
    box-shadow: none;
}

.account-action.ghost:hover {
    background: #f4f2ee;
    color: #2d2b28;
    transform: none;
}

/* Durum etiketi (pill) — sıcak tonlar, küçük nokta göstergeli */
.hoh-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.3rem 0.72rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
    line-height: 1;
}

.hoh-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
}

.hoh-pill--open   { background: #fdf3e7; color: #9a6a2c; border-color: #f2e1c9; }
.hoh-pill--ok     { background: #edf4ee; color: #4b7050; border-color: #dbe8dc; }
.hoh-pill--muted  { background: #f3f2ef; color: #7a756c; border-color: #e6e2da; }
.hoh-pill--danger { background: #fbecea; color: #a85a45; border-color: #f0d8d1; }
.hoh-pill--info   { background: #eef1f6; color: #4b5a76; border-color: #dde2ec; }

/* Sıcak tablo */
.account-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.account-table thead th {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9a948a;
    font-weight: 600;
    text-align: left;
    padding: 0 0.9rem 0.75rem;
    border-bottom: 1px solid #ece9e4;
}

.account-table tbody td {
    padding: 0.95rem 0.9rem;
    border-bottom: 1px solid #f1efea;
    vertical-align: middle;
}

.account-table tbody tr:last-child td { border-bottom: 0; }
.account-table tbody tr { transition: background-color .15s ease; }
.account-table tbody tr:hover { background: #faf9f7; }

.account-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.account-amount-pos { color: #4b7050; font-weight: 600; }
.account-amount-neg { color: #a85a45; font-weight: 600; }

/* Para puan bakiyesi — sayfanın imza anı */
.reward-hero {
    text-align: center;
    padding: 0.5rem 0 0.25rem;
}

.reward-hero .reward-label {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a8a092;
    font-weight: 600;
}

.reward-hero .reward-value {
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(3.2rem, 9vw, 4.6rem);
    font-weight: 600;
    line-height: 1;
    color: var(--accent-strong, #6e4f36);
    margin: 0.35rem 0 0.25rem;
    font-variant-numeric: tabular-nums;
}

.reward-hero .reward-unit { color: #8a847b; font-size: 0.95rem; }

.reward-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e7e2da, transparent);
    margin: 1.4rem 0;
}

.reward-note {
    background: #faf8f4;
    border: 1px solid #ece5d8;
    border-radius: 14px;
    padding: 0.9rem 1.05rem;
    color: #6f6a60;
    font-size: 0.9rem;
    line-height: 1.55;
}

/* Mesaj / yanıt / alan kutuları */
.account-quote {
    border: 1px solid #ece9e4;
    border-radius: 14px;
    padding: 1rem 1.1rem;
    background: #fff;
    white-space: pre-wrap;
    line-height: 1.65;
    color: #3a3833;
}

.account-quote--reply {
    background: #faf8f4;
    border-color: #ece5d8;
}

.account-field-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9a948a;
    font-weight: 600;
    margin-bottom: 0.45rem;
}

/* Form alanları (sıcak) */
.account-input,
.account-textarea {
    width: 100%;
    border: 1px solid #e2ddd4;
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    font: inherit;
    color: #2a2825;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.account-input:focus,
.account-textarea:focus {
    outline: none;
    border-color: var(--accent, #9b7b5f);
    box-shadow: 0 0 0 3px rgba(155, 123, 95, 0.12);
}

.account-textarea { resize: vertical; min-height: 150px; }

/* Boş durum (sıcak, serif) */
.account-empty {
    background: var(--account-panel-bg, #fff);
    border: 1px solid var(--account-border, #ece9e4);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    padding: 3rem 1.5rem;
    text-align: center;
}

.account-empty-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f1ec;
    color: #9b8a72;
    font-size: 1.5rem;
}

.account-empty-title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #201f1c;
    margin: 0 0 0.5rem;
}

.account-empty-text {
    color: #7a766f;
    max-width: 46ch;
    margin: 0 auto 1.4rem;
    line-height: 1.65;
}

.account-empty-actions {
    display: flex;
    gap: 0.7rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .account-page-head { align-items: flex-start; }

    /* Tablolar mobilde tek kart içinde, satırlar alt-çizgiyle ayrılmış dikey listeye
       dönüşür — iç-içe kart yok, yatay padding yok ki içerik tam genişlik kullansın. */
    .account-table thead { display: none; }
    .account-table tbody,
    .account-table tr,
    .account-table td { display: block; width: 100%; }

    .account-table tr {
        padding: 0.55rem 0 0.8rem;
        border-bottom: 1px solid #ece9e4;
    }
    .account-table tbody tr:first-child { padding-top: 0; }
    .account-table tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }
    .account-table tbody tr:hover { background: transparent; }

    .account-table td {
        border: 0;
        padding: 0.3rem 0;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        text-align: right;
    }
    .account-table td::before {
        content: attr(data-label);
        color: #9a948a;
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: left;
        flex-shrink: 0;
    }
    /* Uzun değerler (örn. Konu) sağda satır kaydırsın, kesilmesin */
    .account-table td.text-truncate {
        max-width: none !important;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word;
    }
    /* Etiketsiz (eylem) hücreler: sağa yaslı + taşmasın diye sarılabilir */
    .account-table td:not([data-label]) {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.4rem;
        padding-top: 0.5rem;
    }
    .account-table td:not([data-label])::before { display: none; }

    /* Para puan çevir: input + buton mobilde alt alta */
    .reward-redeem-row { flex-direction: column; align-items: stretch; }
    .reward-redeem-row .account-action { justify-content: center; }
}