@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Cinzel:wght@400;500;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ═══════════════════════════════════════════════════════════
   ZAYYORA WALLET – Design Tokens
   Palette: Deep Navy #062037 · Gold #C5A054 · Cream #FAF7F2
   ═══════════════════════════════════════════════════════════ */
:root {
    --w-primary:        #062037;
    --w-primary-dark:   #041425;
    --w-primary-light:  #1a3a55;
    --w-primary-ghost:  rgba(6, 32, 55, .05);
    
    --w-accent:         #C5A054;
    --w-accent-light:   #DCC07A;
    --w-accent-pale:    #F2EAD0;
    --w-accent-ghost:   rgba(197, 160, 84, .08);

    --w-bg:             #FAF7F2;
    --w-bg-card:        #FFFFFF;
    --w-surface:        #F3EFE8;
    
    --w-border:         rgba(6, 32, 55, .09);
    --w-border-focus:   rgba(6, 32, 55, .18);

    --w-text:           #062037;
    --w-text-sec:       #1a3a55;
    --w-text-muted:     #6b7d8e;
    --w-text-faint:     #9babb8;

    --w-green-bg:       #f0fdf4;
    --w-green-text:     #166534;
    --w-red-bg:         #fef2f2;
    --w-red-text:       #b91c1c;

    --w-radius-xl:      20px;
    --w-radius:         14px;
    --w-radius-sm:      10px;
    --w-radius-pill:    50px;

    --w-shadow-card:    0 1px 3px rgba(6, 32, 55, .04), 0 6px 16px rgba(6, 32, 55, .05);
    --w-shadow-glow:    0 0 0 3px rgba(6, 32, 55, .08);
    
    --w-ease:           .25s cubic-bezier(.4, 0, .2, 1);
}


/* ═══════════════════════════════════════════════════════════
   PAGE LAYOUT
   ═══════════════════════════════════════════════════════════ */
.wallet-page {
    width: 100%;
    background: var(--w-bg);
    font-family: 'DM Sans', sans-serif;
    color: var(--w-text);
    -webkit-font-smoothing: antialiased;
}

.wallet-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 28px;
    align-items: start;
}


/* ═══════════════════════════════════════════════════════════
   BALANCE CARD
   ═══════════════════════════════════════════════════════════ */
.balance-card {
    background: linear-gradient(135deg, #062037 0%, #041425 100%);
    border-radius: var(--w-radius-xl);
    padding: 36px 40px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(6, 32, 55, .25);
    margin-bottom: 28px;
}

.balance-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 350px 250px at 0% 100%, rgba(197, 160, 84, .18) 0%, transparent 70%),
        radial-gradient(ellipse 250px 180px at 100% 0%, rgba(197, 160, 84, .06) 0%, transparent 70%);
    pointer-events: none;
}

.balance-content { position: relative; z-index: 2; }

.balance-label {
    font-size: .75rem;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    font-weight: 500;
}

.balance-amount {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.2rem;
    font-weight: 700;
    margin: 12px 0 28px;
    line-height: 1;
    color: #ffffff;
}

.balance-actions { display: flex; gap: 12px; }

.btn-add-money {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--w-accent);
    color: var(--w-primary-dark);
    border: 2px solid var(--w-accent);
    border-radius: var(--w-radius-pill);
    padding: 12px 26px;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--w-ease);
}

.btn-add-money svg { width: 15px; height: 15px; }

.btn-add-money:hover {
    background: transparent;
    color: var(--w-accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(197, 160, 84, .25);
}

.balance-bg-icon {
    position: absolute;
    right: -20px;
    bottom: -25px;
    width: 160px;
    height: 160px;
    opacity: .06;
    color: #fff;
    z-index: 1;
}

.balance-bg-icon svg { width: 100%; height: 100%; }


/* ═══════════════════════════════════════════════════════════
   SAVINGS PLAN CARD
   ═══════════════════════════════════════════════════════════ */
.plan-card {
    background: var(--w-bg-card);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-xl);
    overflow: hidden;
    box-shadow: var(--w-shadow-card);
}

.plan-card-head {
    padding: 22px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--w-border);
}

.plan-card-head h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--w-text);
}

.plan-status-tag {
    font-size: .62rem;
    letter-spacing: .06em;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 5px 14px;
    background: var(--w-green-bg);
    color: var(--w-green-text);
    border: 1px solid rgba(22, 101, 52, .12);
    white-space: nowrap;
}

.plan-status-tag.none, .plan-status-tag.inactive {
    background: var(--w-surface);
    color: var(--w-text-muted);
    border-color: var(--w-border);
}

.plan-card-body {
    padding: 24px 28px;
}

.plan-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px dashed var(--w-border-focus);
}

.plan-info-row span {
    font-size: .88rem;
    color: var(--w-text-muted);
}

.plan-frozen-amount {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--w-red-text);
    white-space: nowrap;
}

.plan-note {
    display: flex;
    gap: 10px;
    font-size: .82rem;
    color: var(--w-text-muted);
    background: var(--w-primary-ghost);
    padding: 14px 16px;
    border-radius: var(--w-radius-sm);
    line-height: 1.5;
    border-left: 3px solid var(--w-accent);
}

.plan-card-footer {
    padding: 16px 28px;
    background: var(--w-surface);
    border-top: 1px solid var(--w-border);
}

.plan-release-date {
    font-size: .80rem;
    font-weight: 600;
    color: var(--w-text-sec);
}


/* ═══════════════════════════════════════════════════════════
   HISTORY / SIDEBAR
   ═══════════════════════════════════════════════════════════ */
.wallet-sidebar {
    position: relative;
}

.history-card {
    background: var(--w-bg-card);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius-xl);
    box-shadow: var(--w-shadow-card);
    display: flex;
    flex-direction: column;
    /* Desktop sticky scroll */
    height: calc(100vh - 120px);
    max-height: 780px;
    position: sticky;
    top: 30px;
}

.history-card-head {
    padding: 22px 24px;
    border-bottom: 1px solid var(--w-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.history-card-head h3 {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--w-text);
}

.filter-wrapper { position: relative; }

.filter-trigger {
    width: 38px; height: 38px;
    border-radius: var(--w-radius-sm);
    border: 1px solid var(--w-border);
    background: var(--w-surface);
    cursor: pointer;
    display: grid; place-items: center;
    transition: all var(--w-ease);
    color: var(--w-text-muted);
}

.filter-trigger:hover {
    border-color: var(--w-border-focus);
    color: var(--w-primary);
}

.filter-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--w-bg-card);
    border: 1px solid var(--w-border);
    border-radius: var(--w-radius);
    box-shadow: 0 12px 32px rgba(6, 32, 55, .12);
    width: 180px;
    display: flex;
    flex-direction: column;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--w-ease);
    overflow: hidden;
}

.filter-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.filter-dropdown button {
    padding: 12px 16px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: .84rem;
    font-weight: 500;
    color: var(--w-text-muted);
    cursor: pointer;
    transition: all var(--w-ease);
    font-family: inherit;
}

.filter-dropdown button:hover {
    background: var(--w-primary-ghost);
    color: var(--w-accent);
}

/* History List */
.history-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 24px 24px;
}

.history-list::-webkit-scrollbar { width: 4px; }
.history-list::-webkit-scrollbar-track { background: transparent; }
.history-list::-webkit-scrollbar-thumb { background: var(--w-accent); border-radius: 10px; }

.history-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--w-border);
    transition: all var(--w-ease);
}

.history-item:last-child { border-bottom: none; }

.history-item.hidden {
    display: none;
    opacity: 0;
    transform: scale(.96);
}

.history-item-icon {
    width: 40px; height: 40px;
    border-radius: var(--w-radius-sm);
    display: grid; place-items: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.history-item.is-credit .history-item-icon {
    background: var(--w-green-bg);
    color: var(--w-green-text);
}

.history-item.is-debit .history-item-icon {
    background: rgba(197, 160, 84, .1);
    color: var(--w-accent);
}

.history-item-icon svg { width: 18px; height: 18px; }

.history-item-info {
    flex: 1;
    min-width: 0;
}

.history-item-title {
    display: block;
    font-weight: 600;
    font-size: .88rem;
    color: var(--w-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item-date {
    display: block;
    font-size: .74rem;
    color: var(--w-text-muted);
    margin-top: 4px;
}

.history-item-amount {
    font-weight: 700;
    font-size: .92rem;
    white-space: nowrap;
    font-family: 'DM Sans', sans-serif;
    margin-top: 2px;
    text-align: right;
}

.text-credit { color: var(--w-green-text); }
.text-debit { color: var(--w-red-text); }

.history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    gap: 12px;
}

.history-empty p {
    color: var(--w-text-muted);
    font-size: .88rem;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 20, 37, .65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-card {
    background: var(--w-bg-card);
    width: 90%;
    max-width: 440px;
    border-radius: var(--w-radius-xl);
    box-shadow: 0 25px 50px rgba(6, 32, 55, .25);
    transform: translateY(20px) scale(.98);
    transition: all .35s cubic-bezier(.34, 1.56, .64, 1);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-overlay.active .modal-card {
    transform: translateY(0) scale(1);
}

.modal-card-head {
    padding: 24px 28px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-card-head h3 {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--w-text);
}

.modal-close {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--w-border);
    background: var(--w-surface);
    cursor: pointer;
    display: grid; place-items: center;
    color: var(--w-text-muted);
    transition: all var(--w-ease);
}

.modal-close:hover {
    background: var(--w-red-bg);
    color: var(--w-red-text);
    border-color: rgba(185, 28, 28, .2);
}

.modal-card-body {
    padding: 28px;
}

.wallet-pay-note {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--w-text-muted, #6b7280);
    line-height: 1.4;
}

.input-label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--w-text-muted);
    margin-bottom: 10px;
}

.currency-input-wrapper {
    position: relative;
}

.currency-symbol {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--w-text-muted);
    pointer-events: none;
}

.currency-input-wrapper input {
    width: 100%;
    padding: 18px 20px 18px 44px;
    border-radius: var(--w-radius);
    border: 1.5px solid var(--w-border);
    background: var(--w-surface);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--w-text);
    outline: none;
    transition: all var(--w-ease);
    font-family: 'DM Sans', sans-serif;
    box-sizing: border-box;
}

.currency-input-wrapper input:focus {
    border-color: var(--w-primary);
    box-shadow: var(--w-shadow-glow);
    background: #fff;
}

.currency-input-wrapper input::placeholder {
    color: var(--w-text-faint);
    font-weight: 400;
}

.quick-amounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.quick-amounts button {
    padding: 12px;
    border-radius: var(--w-radius-sm);
    border: 1px solid var(--w-border);
    background: #fff;
    cursor: pointer;
    font-size: .86rem;
    font-weight: 600;
    color: var(--w-text-sec);
    transition: all var(--w-ease);
    font-family: 'DM Sans', sans-serif;
}

.quick-amounts button:hover {
    border-color: var(--w-accent);
    color: var(--w-accent);
    background: var(--w-accent-ghost);
    transform: translateY(-1px);
}

.modal-card-footer {
    padding: 0 28px 28px;
    display: flex;
    gap: 12px;
}

.btn-cancel {
    flex: 1;
    padding: 14px;
    border-radius: var(--w-radius);
    border: 1px solid var(--w-border);
    background: #fff;
    color: var(--w-text-muted);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--w-ease);
    font-family: inherit;
}

.btn-cancel:hover { background: var(--w-surface); }

.btn-confirm {
    flex: 2;
    padding: 14px;
    border-radius: var(--w-radius);
    border: none;
    background: var(--w-primary);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .03em;
    cursor: pointer;
    transition: all var(--w-ease);
    font-family: inherit;
}

.btn-confirm:hover {
    background: var(--w-primary-light);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(6, 32, 55, .25);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE FIXED VERSION
   Proper Mobile / Tablet Layout
═══════════════════════════════════════════════════════════ */

/* =========================
   LARGE LAPTOP
========================= */
@media (max-width: 1200px) {

    .wallet-grid{
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 24px;
        align-items: start;
    }

}


/* =========================
   TABLET
========================= */
@media (max-width: 1024px){

    .wallet-grid{
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .history-card{
        position: relative;
        top: unset;
        height: auto;
        max-height: unset;
    }

    .history-list{
        max-height: 420px;
        overflow-y: auto;
    }

}


/* =========================
   SMALL TABLET
========================= */
@media (max-width: 768px){

    .wallet-wrapper,
    .wallet-page,
    .wallet-container{
        width: 100%;
        padding-left: 14px;
        padding-right: 14px;
        overflow-x: hidden;
    }

    .wallet-grid{
        gap: 18px;
    }

    .balance-card{
        padding: 24px 20px;
        border-radius: 18px;
    }

    .balance-amount{
        font-size: 2.2rem;
        line-height: 1.2;
        word-break: break-word;
    }

    .btn-add-money{
        width: 100%;
        justify-content: center;
        padding: 14px;
    }

    .plan-card-head{
        padding: 18px;
    }

    .plan-card-body{
        padding: 18px;
    }

    .plan-card-footer{
        padding: 16px 18px;
    }

    .plan-title{
        font-size: 0.95rem;
        line-height: 1.4;
    }

    .plan-frozen-amount{
        font-size: 1.2rem;
    }

    .history-card-head{
        padding: 18px;
    }

    .history-list{
        padding: 12px 18px 18px;
    }

    .history-item{
        gap: 12px;
    }

    .history-item-text{
        width: 100%;
        overflow: hidden;
    }

    .history-item-title{
        font-size: 0.88rem;
        line-height: 1.4;
    }

    .history-item-date{
        font-size: 0.75rem;
    }

}


/* =========================
   MOBILE
========================= */
@media (max-width: 480px){

    html,
    body{
        overflow-x: clip;
    }

    .wallet-wrapper,
    .wallet-page,
    .wallet-container{
        width: 100%;
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }

    .wallet-grid{
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .balance-card{
        padding: 20px 16px;
        border-radius: 16px;
    }

    .balance-label{
        font-size: 0.72rem;
    }

    .balance-amount{
        font-size: 1.9rem;
        margin: 10px 0 18px;
        line-height: 1.2;
    }

    .btn-add-money{
        width: 100%;
        min-height: 48px;
        font-size: 0.9rem;
        border-radius: 12px;
    }

    .plan-card{
        border-radius: 16px;
        overflow: hidden;
    }

    .plan-card-head{
        padding: 16px;
    }

    .plan-card-body{
        padding: 16px;
    }

    .plan-card-footer{
        padding: 14px 16px;
    }

    .plan-title{
        font-size: 0.9rem;
    }

    .plan-frozen-amount{
        font-size: 1.15rem;
        word-break: break-word;
    }

    .history-card{
        border-radius: 16px;
    }

    .history-card-head{
        padding: 16px;
    }

    .history-list{
        padding: 10px 16px 16px;
        max-height: 380px;
    }

    .history-item{
        padding: 12px 0;
        align-items: flex-start;
    }

    .history-item-title{
        font-size: 0.84rem;
    }

    .history-item-date{
        font-size: 0.72rem;
    }

    .modal-card{
        width: calc(100% - 20px);
        max-width: 100%;
        border-radius: 16px;
    }

    .modal-card-body{
        padding: 20px 16px;
    }

    .modal-card-footer{
        padding: 0 16px 16px;
        flex-direction: column;
        gap: 10px;
    }

    .modal-card-footer button{
        width: 100%;
    }

    .quick-amounts{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 10px;
    }

    .quick-amounts button{
        width: 100%;
        padding: 12px 8px;
        font-size: 0.82rem;
    }

}


/* =========================
   EXTRA SMALL MOBILE
========================= */
@media (max-width: 360px){

    .balance-amount{
        font-size: 1.6rem;
    }

    .quick-amounts{
        grid-template-columns: 1fr;
    }

}


/* =========================
   REDUCED MOTION
========================= */
@media (prefers-reduced-motion: reduce){

    *,
    *::before,
    *::after{
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}