/* ===============================
   Main Layout (منتقل شده از گرین)
================================= */

.snappay-loan-calculator-wrapper {
    max-width: 1200px;
    margin: 20px auto;
   /* padding: 20px; */
    direction: rtl;
    width: 100%;
    box-sizing: border-box;
}

.snappay-calculator-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.08);
    overflow: hidden;
    border: 1px solid #eee;
}

.snappay-calculator-header {
    background: linear-gradient(135deg,#046bd2,#0353a4);
    padding:24px;
}

.snappay-calculator-header h1 {
    margin:0;
    font-size:24px;
    font-weight:700;
    color:#fff;
}

.snappay-calculator-header p {
    margin:8px 0 0;
    opacity:.95;
    font-size:14px;
    color:#fff;
}

.snappay-calculator-body {
    display:grid;
    grid-template-columns:1.3fr 0.9fr;
    gap:24px;
    padding:24px;
}

@media (max-width:900px){
    .snappay-calculator-body{
        grid-template-columns:1fr;
    }
}

.snappay-panel{
    background:#fafafa;
    border:1px solid #eee;
    border-radius:20px;
    padding:20px;
}

.snappay-section-title{
    font-size:16px;
    font-weight:800;
    margin-bottom:12px;
    color:#333;
}

/* ===============================
   Product Box
================================= */

.snappay-product-box{
    flex:1;
    text-align:center;
    padding:10px;
    background:linear-gradient(135deg,#046bd2,#0353a4);
    color:#fff;
    border-radius:16px;
    min-width:0;
}

.snappay-product-name{
    font-size:18px;
    font-weight:700;
    margin-bottom:8px;
}

.snappay-product-amount{
    color:#fff;
    font-size:20px;
    font-weight:600;
}

.snappay-product-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
    width:100%;
}

@media (max-width:600px){
    .snappay-product-amount{
        font-size:14px;
    }
}

/* ===============================
   Installment Slider
================================= */

.snappay-installment-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f8fafc;
    padding: 14px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

/* اصلاح شده برای ثابت ماندن اندازه باکس */

.snappay-installment-box {
    flex: 1;
    text-align: center;
    background: linear-gradient(135deg, #046bd2, #0353a4);
    border-radius: 14px;
    padding: 18px 10px;
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;

    /* جلوگیری از تغییر سایز */
    min-width: 120px;
}
#installmentDisplay{
    position: relative;
    z-index: 2;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
}



.snappay-installment-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    border-radius: 14px;
}

#installmentDisplay {
    position: relative;
    z-index: 2;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.snappay-installment-nav .snappay-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #ffffff;
    color: #046bd2;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(4,107,210,0.15);
    transition: all 0.25s ease;
}

.snappay-installment-nav .snappay-nav-btn:hover {
    background: #046bd2;
    color: #fff;
}

/* ===============================
   Grid Buttons
================================= */

.snappay-installments-grid,
.snappay-providers-list{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

@media (max-width:900px){
    .snappay-installments-grid,
    .snappay-providers-list{
        grid-template-columns:repeat(3,1fr);
    }
}

@media (max-width:600px){
    .snappay-installments-grid,
    .snappay-providers-list{
        grid-template-columns:repeat(2,1fr);
    }
}

.snappay-installment-btn,
.snappay-provider-btn{
    border:1px solid #ddd;
    background:#fff;
    color:#333;
    padding:12px 10px;
    border-radius:14px;
    cursor:pointer;
    transition:all .2s ease;
    font-size:13px;
    width:100%;
    font-weight:600;
}

.snappay-installment-btn:hover:not(:disabled),
.snappay-provider-btn:hover:not(:disabled){
    border-color:#046bd2;
    background:#eaf2ff;
}

.snappay-installment-btn.active,
.snappay-provider-btn.active{
    background:#046bd2;
    color:#fff !important;
    border-color:#046bd2;
    box-shadow:0 6px 20px rgba(4,107,210,.25);
}

/* ===============================
   Result Box
================================= */

.snappay-result-box{
    background:#fff;
    border:1px solid #eee;
    border-radius:18px;
    padding:18px;
}

.snappay-result-row{
    display:flex;
    justify-content:space-between;
    padding:10px 0;
    border-bottom:1px dashed #eee;
}

.snappay-result-value{
    font-weight:700;
    font-size:14px;
}

@media (max-width:600px){
    .snappay-result-value{
        font-size:10px;
    }
}

.snappay-request-btn{
    width:100%;
    margin-top:18px;
    border:none;
    background:#046bd2;
    color:#fff;
    padding:14px 18px;
    border-radius:16px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:all .2s ease;
}

.snappay-request-btn:hover{
    background:#0353a4;
}