@media(max-width:768px){

/* =========================================
   1. RESET
========================================= */

.nav-menu.active{

    display:flex !important;
    z-index:999999 !important;

}

.mobile-menu{

    display:none;

}

.mobile-menu.active{

    display:flex !important;

    flex-direction:column;

}

.main-header{

    overflow:visible !important;

}

.header-container{

    overflow:visible !important;

}

html,
body{

    

}

*{

    box-sizing:border-box;

}

/* =========================================
   2. GLOBAL LAYOUT
========================================= */

body,
.main-header,
.hero-section,
.services-section,
.payment-section,
.tauliah-section,
.main-footer{

    min-width:0 !important;

}

.container,
.site-canvas{

    padding-left:16px;
    padding-right:16px;

}

/* =========================================
   3. PAYMENT WRAPPER
========================================= */

.payment-wrapper{

    display:flex !important;
    flex-direction:column !important;

    gap:0px !important;

}

.nisab-card{

    display:grid;
    grid-template-columns:1fr;

    gap:0px !important;

}

/* =========================================
   4. LEFT SIDE
========================================= */

.nisab-left,
.payment-left{

    width:100% !important;

    text-align:center;

    display:flex;
    flex-direction:column;
    align-items:center;
 padding:0px;
}
.nisab-price{
    font-size:30px;
    font-weight:800;

    color:#0d47a1;
}

.payment-left h2{

    font-size:22px;

}

.payment-features{

    padding-left:0;

}

.payment-features li{

    font-size:14px;
    line-height:1.5;

}

/* =========================================
   5. RIGHT SIDE / CARD
========================================= */



.payment-card{

    padding:24px;
    border-radius:24px;
    gap: 16px !important;
    box-shadow:
    0 10px 40px rgba(15,23,42,0.06);
    border:1px solid rgba(255,255,255,0.7);

    background:
    rgba(255,255,255,0.82);

    backdrop-filter:blur(18px);

}

.kalkulatorContainer{
    width:100% !important;

    text-align:center;

    display:flex;
    flex-direction:column;
    align-items:center;
 padding:0px;
    
}

.kira-box {
    margin-top:20px !important;
}

.section-title{
    font-size: 16px;
    text-align:left!important;
    margin:30px 0 12px 0 !important;

}


.kira-row{

display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;
}

    .kira-label{

    text-align:left !important;
    flex:1;
    display:flex;
    align-items:center;

    justify-content:flex-start;

    line-height:1.3;
    font-size: 15px !important;
    font-weight: 500;

}




.jumlah-label,
.rumusan-value{
    font-size: 16px !important;
    font-weight: 450;
    color:#2563eb;

    
}

.rumusan-box{
    border-radius:6px !important;

}

.rumusan-row{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;
    
    padding: 8px 0;


    gap:16px;

}

.rumusan-row span{

    flex:1;

    font-size:16px !important;

    text-align:left;

    line-height:1.4;

}

.rumusan-row strong{

   
    font-size:15px;

}

.rumusan-divider{

    width:85%;

    margin:20px auto;

}

.nisab-status{
    
    font-size:15px !important;
    border-radius: 10px !important;
}
    



.rumusan-zakat{

    display:flex;

    gap:18px;

    align-items:stretch;

    flex-wrap:wrap;

}

.rumusan-zakat-box{

    flex:1;

    min-width: 50%;
    
    padding:5px 5px;

    border-radius:24px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}

.rumusan-zakat-box strong{

    font-size:2rem;

    margin-top:12px;

    display:block;

}

.submit1-btn
{

    width:100%;

    margin-top:5px;


    border-radius:8px;

    background:
    linear-gradient(
    135deg,
    #1570EF,
    #175CD3
    );

    color:#fff;

    font-size:16px;

    font-weight:700;

    letter-spacing:0.2px;

    cursor:pointer;

    border:1.5px solid #D0D5DD;
    
    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 4px 12px rgba(16,24,40,0.06);

    backdrop-filter:blur(10px);

}
.bayar-btn
{

    width:100%;

    margin-top:22px;

    padding:12px 14px;

    border-radius:8px;

    background:
    linear-gradient(
    135deg,
    #1570EF,
    #175CD3
    );

    color:#fff;

    font-size:1rem;

    font-weight:700;

    letter-spacing:0.2px;

    cursor:pointer;

    border:1.5px solid #D0D5DD;
    
    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 4px 12px rgba(16,24,40,0.06);

    backdrop-filter:blur(10px);

}



.rumusan-zakat-box span{

    font-size:12px !important;

    line-height:1.3 !important;

}

#zakatBulananDisplay,
#zakatTahunanDisplay{

    font-size:22px !important;

    line-height:1 !important;

}

.zakat-action{

    gap:10px !important;

}



.money-input{
    width: 145px !important;
    flex-shrink:0;
    border-radius:6px !important;
    background:#f8fafc;
    box-shadow:
    inset 0 1px 2px rgba(15,23,42,0.04);
}
.money-input,
.money-input input{
    
    height: 36px !important;
    border-radius: 8px !important;
    padding: 0 6px;
    font-size:16px !important;
    flex-shrink:0;
    
}

.money-input:focus-within{

    background:white;

    box-shadow:
    0 0 0 4px rgba(37,99,235,0.08);

}

.currency{
    font-size: 13px !important;
    
}

.jumlah-row select{

    width:85px !important;
   
    height:38px !important;

    font-size:14px !important;

    border-radius:12px;

    text-align:left !important;
    text-align-last:left !important;

    padding-left:14px !important;

    appearance:none;
    -webkit-appearance:none;
background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 12px center;

}

.jumlah-row select option{

    text-align:left;

}

.total-box{

    display:flex;

    justify-content:space-between;

    align-items:center;
    padding: 10px 0;

    margin-top:10px;
    margin-bottom:40px!important;

    border-top:
    1.5px solid rgba(37,99,235,0.08);
    
    border-bottom: 
    1.5px solid rgba(37,99,235,0.08);

}


/* =========================================
   6. FORM PROGRESS
========================================= */

.form-progress{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-top: 20px !important;
    margin-bottom: 1px !important;
    width:100%;

    gap:6px;

}

.progress-step{

    flex:1;
    min-width:0;

    text-align:center;

}

.progress-step span{

    width:32px;
    height:32px;

    font-size:12px;

}

.progress-step p{

    font-size:10px;
    line-height:1.3;

}

.progress-line{

    flex:0 0 24px;
    margin-top:16px;

}

/* =========================================
   7. FORM INPUT
========================================= */

.payment-card label{

    font-size:15px;

}

.payment-card input,
.payment-card select,
.payment-card textarea{

    width:100%;

    height:38px;

    font-size:13px;

    border-radius:10px;

}

/* =========================================
   8. BUTTONS
========================================= */

.step-buttons{

    display:flex !important;

    flex-wrap:wrap !important;

    justify-content:flex-start !important;

}

.step-buttons button{

    flex:0 0 auto !important;

}

.back1-btn
{

    width:100%;

    margin-top:5px;


    border-radius:8px;

    background:#EEF2F6;

    color:#344054;

    font-size:16px;

    font-weight:700;

    letter-spacing:0.2px;

    cursor:pointer;

    border:1.5px solid #D0D5DD;
    
    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 4px 12px rgba(16,24,40,0.06);

    backdrop-filter:blur(10px);

}

.reset-btn
{

    width:100%;

    margin-top:22px;

    padding:12px 14px;

    border-radius:8px;

    background:#EEF2F6;

    color:#344054;

    font-size:1rem;

    font-weight:700;

    letter-spacing:0.2px;

    cursor:pointer;

    border:1.5px solid #D0D5DD;
    
    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 4px 12px rgba(16,24,40,0.06);

    backdrop-filter:blur(10px);

}
.reset-btn:hover{

    background:#E4E7EC;

    transform:translateY(-1px);

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 8px 20px rgba(16,24,40,0.10);

}

.reset-btn:active{

    transform:scale(0.98);
}

/* =========================================
   9. PAYMENT NOTE
========================================= */

.payment-note{

    font-size:11px;
    line-height:1.4;

    text-align:center;

}

/* =========================================
   10. AKAD
========================================= */

.akad-box{

    padding:22px 18px;

    border-radius:24px;

}

.akad-arabic{

    font-size:25px;
    line-height:1.6;

}

.akad-text{

    font-size:16px;
    line-height:1.4;

}

.jenis-zakat-business{

    display:inline-flex;
    align-items:center;
    padding:10px 18px;
    justify-content:center;
    border-radius:8px;

    background:
    linear-gradient(
        135deg,
        rgba(37,99,235,0.10),
        rgba(37,99,235,0.03)
    );

    border:1px solid rgba(37,99,235,0.10);

    backdrop-filter:blur(14px);

    box-shadow:none;
    
    
    color:#2563eb;

    font-size:16px;
    font-weight:800;
    width: 100% !important;

    letter-spacing:3px;
    text-transform:uppercase;
    text-align: center !important;
    margin-bottom:0px !important;
    
    

}

.section-header-business{

    display:flex;
    flex-direction:column;
    align-items:flex-start;


}

.status-zakat{

    padding:14px 14px;

    border-radius:18px;

    font-size:16px;

    line-height:1.4;

    font-weight:700;

    text-align:center;

    background:
    rgba(37,99,235,0.08);

    color:#1d4ed8;

    margin-top:20px;

}

.bahagian-header{

display:flex;
justify-content:space-between;
align-items:center;

padding:20px 24px;

border-radius:24px;

background:white;

border:1px solid #E5E7EB;

cursor:pointer;

transition:0.25s;

margin-bottom:16px;

}

.bahagian-header:hover{

transform:translateY(-1px);

box-shadow:
0 8px 24px rgba(15,23,42,0.06);

}

.bahagian-left{

display:flex;
align-items:center;

gap:16px;

}

.bahagian-badge{

width:42px;
height:42px;

border-radius:14px;

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

background:
linear-gradient(
135deg,
#1570EF,
#175CD3
);

color:white;

font-weight:700;

font-size:18px;

}

.bahagian-left h3{

font-size:22px;
font-weight:700;

margin:0;

color:#0F172A;

}

.bahagian-left p{

margin:4px 0 0 0;

font-size:14px;

color:#64748B;

}

.bahagian-icon{

width:42px;
height:42px;

border-radius:12px;

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

background:#F8FAFC;

position:relative;

}

.plus-icon,
.minus-icon{

position:absolute;

transition:0.25s;

color:#2563EB;

}

.plus-icon{

opacity:0;
transform:scale(0.7);

}

.bahagian-header.collapsed .plus-icon{

opacity:1;
transform:scale(1);

}

.bahagian-header.collapsed .minus-icon{

opacity:0;
transform:scale(0.7);

}

}