/* ==========================================================
   ANDALUS FINANCE CALCULATOR V4
   Compact premium calculator UI
   ========================================================== */

#afs-installment-calculator .afs-calc-heading{
    width:min(880px,100%);
    margin:0 auto 14px;
    align-items:center;
}

#afs-installment-calculator .afs-calc-heading h2{
    font-size:clamp(25px,3vw,35px);
}

#afs-installment-calculator .afs-calc-heading p{
    font-size:13px;
    line-height:1.65;
}

#afs-installment-calculator .afs-offer-mini{
    min-width:160px;
    padding:10px 14px;
    border-radius:17px;
}

#afs-installment-calculator .afs-offer-mini strong{
    font-size:27px;
}


/* Main calculator shell */

#afs-installment-calculator .afs-calc-card.afs-compact-mode{
    width:min(880px,100%);
    margin-inline:auto;
    padding:14px;
    border-radius:26px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(250,247,244,.96)
        );

    border:1px solid rgba(70,42,42,.09);

    box-shadow:
        0 20px 55px rgba(52,29,31,.075);
}


/* Hide old large calculator presentation */

.afs-compact-mode > .afs-plan-label,
.afs-compact-mode > .afs-plan-grid,
.afs-compact-mode > .afs-divider,
.afs-compact-mode > .afs-long-intro,
.afs-compact-mode > .afs-calc-foot{
    display:none !important;
}

.afs-compact-mode .afs-calc-legend{
    display:none !important;
}


/* Amount screen */

.afs-compact-mode .afs-input-row{
    display:block;
    padding:0;
    border:0;
}

.afs-compact-mode .afs-price-field > label{
    margin:0 0 6px 2px;
    font-size:11px;
}

.afs-v4-entry{
    display:grid;
    grid-template-columns:minmax(0,1fr) 190px;
    gap:9px;
}

.afs-compact-mode .afs-input-shell{
    min-width:0;
}

.afs-compact-mode .afs-input-shell input{
    height:68px;

    padding:
        0
        19px
        0
        75px;

    border:1px solid rgba(255,255,255,.07);
    border-radius:18px;

    color:#fff;
    background:
        linear-gradient(
            145deg,
            #211a1b,
            #351b1f
        );

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.055),
        inset 0 -8px 24px rgba(0,0,0,.12);

    font-size:27px;
    font-weight:900;

    letter-spacing:.2px;
}

.afs-compact-mode .afs-input-shell input::placeholder{
    color:rgba(255,255,255,.33);
    font-size:18px;
    font-weight:650;
}

.afs-compact-mode .afs-input-shell input:focus{
    border-color:rgba(189,146,87,.55);

    box-shadow:
        0 0 0 4px rgba(189,146,87,.10),
        inset 0 1px 1px rgba(255,255,255,.05);
}

.afs-compact-mode .afs-input-shell > span{
    left:17px;

    color:rgba(255,255,255,.52);

    font-size:11px;
}


/* Equals / calculate button */

.afs-v4-calculate{
    min-height:68px;

    padding:8px 13px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    border:0;
    border-radius:18px;

    cursor:pointer;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #7d1d2b,
            #5f1420
        );

    box-shadow:
        0 10px 25px rgba(125,29,43,.17);

    font-weight:900;

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

.afs-v4-calculate:hover{
    transform:translateY(-1px);

    box-shadow:
        0 13px 29px rgba(125,29,43,.22);
}

.afs-v4-calculate:active{
    transform:translateY(1px);
}

.afs-v4-equal{
    width:38px;
    height:38px;

    flex:0 0 38px;

    display:grid;
    place-items:center;

    border-radius:12px;

    color:#6c1723;

    background:#fff;

    font-size:24px;
    line-height:1;
    font-weight:900;
}

.afs-v4-calculate-text{
    font-size:13px;
}


/* Validation */

.afs-v4-error{
    min-height:18px;

    margin:5px 3px 0;

    color:#a52534;

    font-size:10px;
    font-weight:750;
}


/* Result area */

.afs-v4-results[hidden]{
    display:none !important;
}

.afs-v4-results{
    margin-top:11px;

    padding-top:11px;

    border-top:
        1px solid rgba(61,43,43,.08);
}

.afs-v4-result-layout{
    display:grid;
    grid-template-columns:315px minmax(0,1fr);
    gap:11px;
    align-items:stretch;
}


/* Calculator keypad */

.afs-v4-keypad{
    padding:11px;

    border-radius:18px;

    background:#f3f0ed;
}

.afs-v4-keypad-title{
    margin-bottom:8px;

    color:#6e686a;

    font-size:10px;
    font-weight:850;
}

.afs-v4-month-buttons{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
}

.afs-v4-month{
    min-width:0;
    min-height:43px;

    padding:5px 3px;

    border:
        1px solid rgba(60,45,45,.095);

    border-radius:12px;

    cursor:pointer;

    color:#4d4749;

    background:#fff;

    font-size:11px;
    font-weight:900;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.afs-v4-month:hover{
    border-color:rgba(125,29,43,.20);
}

.afs-v4-month:active{
    transform:scale(.98);
}

.afs-v4-month.is-active{
    color:#fff;

    border-color:#7d1d2b;

    background:#7d1d2b;

    box-shadow:
        0 6px 14px rgba(125,29,43,.13);
}


/* Result screen */

.afs-v4-screen{
    min-width:0;

    padding:16px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    border-radius:18px;

    color:#fff;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(189,146,87,.12),
            transparent 16rem
        ),
        linear-gradient(
            145deg,
            #20191a,
            #39191f
        );

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.04);
}

.afs-v4-screen-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.afs-v4-selected-period{
    color:rgba(255,255,255,.67);

    font-size:11px;
    font-weight:800;
}

.afs-v4-offer-tag{
    padding:4px 7px;

    border:
        1px solid rgba(237,207,161,.16);

    border-radius:100px;

    color:#efd0a1;

    background:
        rgba(189,146,87,.10);

    font-size:8px;
    font-weight:900;
}

.afs-v4-monthly{
    margin-top:7px;

    display:flex;
    align-items:flex-end;
    gap:6px;

    flex-wrap:wrap;
}

.afs-v4-monthly strong{
    color:#fff;

    font-size:clamp(31px,4vw,43px);
    line-height:1;
    font-weight:950;

    letter-spacing:-1px;
}

.afs-v4-monthly span{
    padding-bottom:3px;

    color:rgba(255,255,255,.55);

    font-size:10px;
    font-weight:750;
}

.afs-v4-before{
    margin-top:7px;

    color:rgba(255,255,255,.52);

    font-size:10px;
}

.afs-v4-before del{
    margin-inline-start:4px;
}

.afs-v4-saving{
    margin-top:3px;

    color:#a7dfc3;

    font-size:10px;
    font-weight:850;
}

.afs-v4-result-rule{
    margin-top:9px;

    padding-top:8px;

    border-top:
        1px solid rgba(255,255,255,.08);

    color:rgba(255,255,255,.66);

    font-size:9px;
    line-height:1.55;
}


/* Actions under result */

.afs-v4-actions{
    margin-top:9px;

    display:flex;
    gap:7px;
    flex-wrap:wrap;
}

.afs-v4-whatsapp{
    min-height:43px;

    padding:0 14px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:13px;

    color:#fff !important;

    background:#7d1d2b;

    font-size:11px;
    font-weight:900;

    text-decoration:none !important;
}

.afs-v4-reset{
    min-height:43px;

    padding:0 13px;

    border:
        1px solid rgba(70,44,44,.11);

    border-radius:13px;

    cursor:pointer;

    color:#5e5658;

    background:#fff;

    font-size:10px;
    font-weight:850;
}


/* Small offer message */

.afs-v4-help{
    margin-top:9px;

    color:#8a8385;

    font-size:9px;
    line-height:1.55;
}


/* Make the partners section a little tighter too */

#afs-installment-calculator .afs-finance-partners{
    width:min(880px,100%);
    margin:11px auto 0;
    padding:13px 15px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:800px){

    .afs-v4-result-layout{
        grid-template-columns:280px minmax(0,1fr);
    }

    .afs-v4-month-buttons{
        grid-template-columns:repeat(3,1fr);
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:620px){

    #afs-installment-calculator .afs-upgrade-wrap{
        width:calc(100% - 18px);
    }

    #afs-installment-calculator .afs-calc-heading{
        margin-bottom:10px;
    }

    #afs-installment-calculator .afs-calc-heading h2{
        font-size:24px;
        line-height:1.25;
    }

    #afs-installment-calculator .afs-calc-heading p{
        font-size:12px;
    }

    #afs-installment-calculator .afs-offer-mini{
        display:flex;
        align-items:center;
        justify-content:space-between;

        padding:8px 12px;
    }

    #afs-installment-calculator .afs-offer-mini strong{
        margin:0;
        font-size:23px;
    }

    #afs-installment-calculator .afs-calc-card.afs-compact-mode{
        padding:10px;
        border-radius:20px;
    }

    .afs-v4-entry{
        grid-template-columns:1fr;
        gap:7px;
    }

    .afs-compact-mode .afs-input-shell input{
        height:60px;
        font-size:23px;
        border-radius:15px;
    }

    .afs-v4-calculate{
        min-height:52px;
        border-radius:15px;
    }

    .afs-v4-equal{
        width:32px;
        height:32px;
        flex-basis:32px;

        border-radius:10px;

        font-size:20px;
    }

    .afs-v4-result-layout{
        grid-template-columns:1fr;
        gap:8px;
    }

    .afs-v4-keypad{
        padding:9px;
        border-radius:16px;
    }

    .afs-v4-month-buttons{
        grid-template-columns:repeat(4,1fr);
        gap:5px;
    }

    .afs-v4-month{
        min-height:42px;

        border-radius:11px;

        font-size:10px;
    }

    .afs-v4-screen{
        padding:14px;
        border-radius:16px;
    }

    .afs-v4-monthly strong{
        font-size:35px;
    }

    .afs-v4-actions{
        display:grid;
        grid-template-columns:1fr auto;
    }

    .afs-v4-whatsapp{
        width:100%;
    }

    #afs-installment-calculator .afs-finance-partners{
        padding:12px;
        border-radius:17px;
    }
}


/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */

@media(max-width:370px){

    .afs-v4-month-buttons{
        grid-template-columns:repeat(3,1fr);
    }

    .afs-v4-actions{
        grid-template-columns:1fr;
    }

    .afs-v4-reset{
        width:100%;
    }
}


/* Keyboard accessibility */

.afs-v4-calculate:focus-visible,
.afs-v4-month:focus-visible,
.afs-v4-reset:focus-visible,
.afs-v4-whatsapp:focus-visible{
    outline:
        3px solid rgba(189,146,87,.35);

    outline-offset:2px;
}