/* =========================================
   BUPIZ WALLET FRONTEND
   ========================================= */

.bupiz-wallet-checkout-box{
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid #ecdedd;
    border-radius: 16px;
    background: #fff7f9;
    color: #4a2e35;
}

.bupiz-wallet-checkout-head{
    margin-bottom: 10px;
}

.bupiz-wallet-checkout-title{
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 4px;
}

.bupiz-wallet-checkout-max{
    font-size: 13px;
    color: #8a7379;
    line-height: 1.3;
}

.bupiz-wallet-checkout-toggle{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin: 0;
}

.bupiz-wallet-checkout-toggle input[type="checkbox"]{
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #b86a83;
    flex: 0 0 auto;
}

.bupiz-wallet-checkout-note{
    margin-top: 10px;
    font-size: 12px;
    color: #8a7379;
    line-height: 1.35;
}

@media (max-width: 767px){
    .bupiz-wallet-checkout-box{
        padding: 12px 14px;
        border-radius: 14px;
    }

    .bupiz-wallet-checkout-title{
        font-size: 14px;
    }

    .bupiz-wallet-checkout-toggle{
        font-size: 13px;
        align-items: flex-start;
    }

    .bupiz-wallet-checkout-note{
        font-size: 11px;
    }
}/* BUPIZ Wallet Frontend CSS */



/* =========================================
   BUPIZ WALLET TOAST
   ========================================= */

.bupiz-wallet-toast{
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999999;
    min-width: 280px;
    max-width: 360px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #ecdedd;
    box-shadow: 0 14px 40px rgba(0,0,0,.12);
    color: #4a2e35;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
}

.bupiz-wallet-toast.is-visible{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bupiz-wallet-toast.is-hiding{
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
}

.bupiz-wallet-toast__content{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.bupiz-wallet-toast__icon{
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef9f1;
    color: #1f8f47;
    font-size: 14px;
    font-weight: 700;
}

.bupiz-wallet-toast__text{
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    color: #4a2e35;
}

.bupiz-wallet-toast__close{
    width: 32px;
    height: 32px;
    min-height: 32px;
    flex: 0 0 32px;
    border: none;
    border-radius: 999px;
    background: #f8eef2 !important;
    color: #4a2e35 !important;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    box-shadow: none !important;
    cursor: pointer;
}

.bupiz-wallet-toast--success{
    border-color: #d9eadf;
}

@media (max-width: 767px){
    .bupiz-wallet-toast{
        top: auto;
        right: 12px;
        left: 12px;
        bottom: 92px;
        min-width: 0;
        max-width: none;
        width: auto;
        padding: 12px 12px;
        border-radius: 14px;
    }

    .bupiz-wallet-toast__text{
        font-size: 13px;
    }
}


/* =========================================
   BUPIZ WALLET PAGE
   ========================================= */

.bupiz-wallet-page{
    display:block;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding:0 16px 24px;
}

.bupiz-wallet-page__head{
    margin:0 0 18px;
    padding:0 2px;
}

.bupiz-wallet-page__title{
    margin:0 0 6px;
    font-size:28px;
    line-height:1.2;
    color:#4a2e35;
}

.bupiz-wallet-page__subtitle{
    margin:0;
    color:#8a7379;
    font-size:14px;
    line-height:1.5;
}

.bupiz-wallet-summary{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:14px;
    margin:0 0 18px;
}

.bupiz-wallet-card{
    padding:16px;
    border:1px solid #ecdedd;
    border-radius:18px;
    background:#fff7f9;
}

.bupiz-wallet-card--pending{
    background:#fffaf3;
    border-color:#f0dfbe;
}

.bupiz-wallet-card__label{
    margin:0 0 8px;
    font-size:13px;
    color:#8a7379;
    font-weight:600;
}

.bupiz-wallet-card__amount{
    margin:0 0 6px;
    font-size:28px;
    line-height:1.1;
    font-weight:800;
    color:#4a2e35;
}

.bupiz-wallet-card__note{
    font-size:12px;
    color:#8a7379;
    line-height:1.4;
}

.bupiz-wallet-note{
    margin:0 0 20px;
    padding:14px 16px;
    border:1px solid #ecdedd;
    border-radius:16px;
    background:#fff;
    color:#4a2e35;
    font-size:14px;
    line-height:1.6;
    box-sizing:border-box;
}

.bupiz-wallet-history{
    margin-top:10px;
    padding:0 2px;
}

.bupiz-wallet-history__title{
    margin:0 0 14px;
    font-size:20px;
    line-height:1.25;
    color:#4a2e35;
}

.bupiz-wallet-empty{
    padding:16px;
    border:1px solid #ecdedd;
    border-radius:16px;
    background:#fff;
    color:#8a7379;
}

.bupiz-wallet-table-wrap{
    overflow-x:auto;
    background:#fff;
    border:1px solid #ecdedd;
    border-radius:18px;
}

.bupiz-wallet-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    margin:0 !important;
}

.bupiz-wallet-table thead th{
    background:#fff7f9;
    color:#4a2e35;
    font-size:13px;
    font-weight:700;
    padding:14px 16px;
    border-bottom:1px solid #ecdedd;
}

.bupiz-wallet-table tbody td{
    padding:14px 16px;
    border-bottom:1px solid #f2e7e8;
    font-size:14px;
    color:#4a2e35;
    vertical-align:middle;
}

.bupiz-wallet-table tbody tr:last-child td{
    border-bottom:none;
}

.bupiz-wallet-amount{
    font-weight:700;
}

.bupiz-wallet-amount.is-credit{
    color:#1f8f47;
}

.bupiz-wallet-amount.is-debit{
    color:#b2435b;
}

.bupiz-wallet-status{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    line-height:1;
}

.bupiz-wallet-status--available{
    background:#eef9f1;
    color:#1f8f47;
}

.bupiz-wallet-status--pending{
    background:#fff6e7;
    color:#b87900;
}

.bupiz-wallet-status--used{
    background:#f4efff;
    color:#6f42c1;
}

.bupiz-wallet-status--reversed,
.bupiz-wallet-status--expired{
    background:#f8eef2;
    color:#b2435b;
}

@media (max-width: 1024px){
    .bupiz-wallet-summary{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 767px){
    .bupiz-wallet-page{
        padding:0 12px 20px;
    }

    .bupiz-wallet-page__head{
        margin:0 0 14px;
        padding:0;
    }

    .bupiz-wallet-page__title{
        font-size:24px;
        line-height:1.15;
    }

    .bupiz-wallet-page__subtitle,
    .bupiz-wallet-note{
        font-size:13px;
        line-height:1.55;
    }

    .bupiz-wallet-summary{
        grid-template-columns:1fr;
        gap:12px;
        margin:0 0 14px;
    }

    .bupiz-wallet-card{
        padding:14px;
        border-radius:16px;
    }

    .bupiz-wallet-card__amount{
        font-size:24px;
    }

    .bupiz-wallet-history{
        margin-top:8px;
        padding:0;
    }

    .bupiz-wallet-history__title{
        font-size:18px;
        margin-bottom:10px;
    }

    .bupiz-wallet-table-wrap{
        border-radius:16px;
        overflow:hidden;
    }

    .bupiz-wallet-table thead{
        display:none;
    }

    .bupiz-wallet-table tbody tr{
        display:block;
        border-bottom:1px solid #f2e7e8;
        padding:10px 0;
        background:#fff;
    }

    .bupiz-wallet-table tbody td{
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        gap:12px;
        width:100%;
        border:none;
        padding:8px 14px;
        box-sizing:border-box;
    }

    .bupiz-wallet-table tbody td::before{
        content:attr(data-title);
        font-weight:700;
        color:#8a7379;
        flex:0 0 110px;
    }

    .bupiz-wallet-table tbody tr:last-child{
        border-bottom:none;
    }
}