/* ==========================================================
   GOOGLE SIGN-IN BUTTON
========================================================== */

.account-google-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:8px;

    background:#fff;

    color:#3C4043;

    border:1.5px solid #E2E8F0;

    border-radius:10px;

    padding:10px;

    font-size:13.5px;

    font-weight:600;

    text-decoration:none;

    transition:.2s;

}

.account-google-btn:hover{

    background:#F8FAFC;

    color:#3C4043;

}

/* ==========================================================
   BILLING PAGE
========================================================== */

.billing-card{

    max-width:580px;

}

.billing-header{

    display:flex;

    align-items:flex-start;

    gap:16px;

    margin-bottom:8px;

}

.billing-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:48px;

    height:48px;

    flex-shrink:0;

    font-size:22px;

    background:linear-gradient(135deg, #EEF7F3, #DCEEE3);

    border-radius:14px;

}

.billing-header h2{

    margin:0 0 4px;

}

.billing-subtitle-text{

    color:#64748B;

    font-size:14px;

    margin:0;

}

.billing-generation-note{

    display:block;

    background:#EEF7F3;

    color:#0E6544;

    font-size:13px;

    font-weight:600;

    line-height:1.5;

    padding:12px 16px;

    border-radius:12px;

    margin:20px 0 26px;

}

.billing-box{

    border:1px solid #E5E7EB;

    border-radius:18px;

    padding:28px;

    background:linear-gradient(180deg, #FAFCFB, #F4F8F6);

    box-sizing:border-box;

}

.billing-box label{

    display:block;

    font-size:13px;

    font-weight:600;

    color:#334155;

    margin-bottom:12px;

}

.billing-stepper{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:22px;

}

.billing-step-btn{

    width:48px;

    height:48px;

    border-radius:50%;

    border:1.5px solid #D9E1EC;

    background:#fff;

    font-size:20px;

    font-weight:700;

    color:#0E6544;

    cursor:pointer;

    transition:.2s;

    flex-shrink:0;

    box-shadow:0 2px 6px rgba(15,23,42,.04);

}

.billing-step-btn:hover{

    background:#0E6544;

    border-color:#0E6544;

    color:#fff;

    transform:translateY(-1px);

}

.billing-stepper-value{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:56px;

    border:1.5px solid #D9E1EC;

    border-radius:14px;

    background:#fff;

    box-shadow:0 2px 6px rgba(15,23,42,.04);

}

#billing-credits{

    width:70px;

    height:100%;

    text-align:right;

    font-size:24px;

    font-weight:700;

    color:#0E6544;

    border:none;

    background:none;

}

.billing-stepper-value span{

    font-size:14px;

    font-weight:600;

    color:#94A3B8;

}

.billing-presets{

    display:grid;

    grid-template-columns:repeat(4, 1fr);

    gap:10px;

    margin-bottom:22px;

}

.billing-preset{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:2px;

    padding:12px 6px;

    border:1.5px solid #E2E8F0;

    border-radius:12px;

    background:#fff;

    cursor:pointer;

    transition:.2s;

}

.billing-preset strong{

    font-size:16px;

    font-weight:700;

    color:#111827;

}

.billing-preset span{

    font-size:11.5px;

    font-weight:600;

    color:#94A3B8;

}

.billing-preset:hover{

    border-color:#BFE3D1;

    background:#F5FBF8;

}

.billing-preset.active{

    border-color:#0E6544;

    background:#EEF7F3;

    box-shadow:0 0 0 3px rgba(14,101,68,.1);

}

.billing-preset.active strong,
.billing-preset.active span{

    color:#0E6544;

}

.billing-price{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 20px;

    background:#fff;

    border:1.5px solid #0E6544;

    border-radius:14px;

    margin-bottom:22px;

    font-size:14px;

    font-weight:600;

    color:#334155;

}

#billing-total{

    font-size:26px;

    color:#0E6544;

}

.billing-checkout-btn{

    width:100%;

    background:linear-gradient(135deg, #0E6544, #0A4E35);

    color:#fff;

    border:none;

    border-radius:12px;

    padding:16px;

    font-size:15.5px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

    box-shadow:0 10px 24px rgba(14,101,68,.22);

}

.billing-checkout-btn:hover{

    transform:translateY(-1px);

    box-shadow:0 14px 30px rgba(14,101,68,.3);

}

.billing-checkout-btn:disabled{

    opacity:.7;

    cursor:not-allowed;

    transform:none;

}

.billing-note{

    text-align:center;

    font-size:12.5px;

    color:#94A3B8;

    margin:16px 0 0;

}

/* ==========================================================
   PURCHASE HISTORY
========================================================== */

.purchase-history-card{

    margin-top:24px;

}

.purchase-history-table-wrap{

    width:100%;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;

}

.purchase-history-table{

    width:100%;

    border-collapse:collapse;

}

@media (max-width:600px){

    .purchase-history-table{

        min-width:480px;

    }

    .purchase-history-table th,
    .purchase-history-table td{

        padding:10px 8px;

        font-size:12.5px;

    }

}

.purchase-history-table th{

    text-align:left;

    font-size:12px;

    font-weight:700;

    letter-spacing:.04em;

    text-transform:uppercase;

    color:#94A3B8;

    padding:0 12px 12px;

    border-bottom:1px solid #E5E7EB;

}

.purchase-history-table td{

    padding:14px 12px;

    font-size:14px;

    color:#334155;

    border-bottom:1px solid #F1F5F9;

}

.purchase-history-table tr:last-child td{

    border-bottom:none;

}

.purchase-status{

    display:inline-block;

    padding:4px 10px;

    border-radius:999px;

    font-size:11.5px;

    font-weight:700;

}

.purchase-status-completed{

    background:#EEF7F3;

    color:#0E6544;

}

.purchase-status-refunded{

    background:#FEF2F2;

    color:#DC2626;

}

.purchase-status-partially-refunded{

    background:#FFFBEB;

    color:#92400E;

}

.purchase-receipt-link{

    font-size:12.5px;

    font-weight:600;

    color:#0E6544;

    text-decoration:none;

}

.purchase-receipt-link:hover{

    text-decoration:underline;

}