body.payment-page .payment-page-cards {
            max-width: 1000px !important;
            width: 54.5% !important;
            margin: 0 16px !important;
        }
        
        body.payment-page .payment-checkout-grid {
            max-width: 1377px !important;
            margin: 9px 11px 0 !important;
        }
        /* ===== MOBILE (S / M / L — up to 767px): cards stack one-by-one ===== */
        /*@media (max-width: 767px) {*/
   @media (max-width: 767px) {
    body.payment-page .payment-page-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        width: 83% !important;
        max-width: 340px !important;
        gap: 12px !important;
        margin: 0 auto !important;
    }

    body.payment-page .payment-page-cards .card0{
        max-width:160px !important;
        min-height:70px !important;
        padding:10px 10px !important;
        margin:0 auto !important;
    }

    body.payment-page .payment-page-cards .card0 h1{
        font-size:22px !important;
    }

    body.payment-page .payment-page-cards .card0 h2{
        font-size:13px !important;
    }

    body.payment-page .payment-page-cards .card0 h3{
        font-size:12px !important;
    }

    body.payment-page .payment-page-cards .price-btn{
        font-size:10px !important;
        padding:6px 8px !important;
    }
    body.payment-page .paid-confirm-btn {
        display: block !important;
        margin: 24px auto 0 !important;   /* centers it horizontally, keeps existing top spacing */
    }
    
}
         
        /* ===== TABLET (768px+) and LAPTOP/DESKTOP: same as the default desktop design ===== */
        @media (min-width: 1024px) {
            body.payment-page .payment-page-cards {
                grid-template-columns: repeat(3, 1fr) !important;
                height: 80px;
                width: 100px;
            }
        }
        @media (min-width: 1024px) and (max-width: 1439px) {
    
        body.payment-page .payment-page-cards{
            width: 62% !important;   /* Adjust between 58% and 65% if needed */
        }
    
    }
        /* Tablet */
        @media (min-width:768px) and (max-width:1023px){
    
        body.payment-page .payment-page-cards{
            width:100% !important;
            max-width:900px !important;
            margin:0 auto !important;
            height: 100% !important;
            max-height: 200px !important;
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:20px;
        }
    
    }
    
    /* Chrome DevTools - Laptop (1024px to 1439px) */
    @media (min-width: 1024px) and (max-width: 1439px) {
    
        body.payment-page .payment-page-cards {
            width: 70% !important;
            height: 50% !important;
        }
    
    }
    
    /* ============================
       PAYMENT QR SECTION
    ============================ */
    
    .payment-checkout-inner {
    display: flex;
    align-items: flex-start;   /* was center */
    justify-content: space-evenly;
    gap: 40px;
    flex-wrap: wrap;
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
}
    
    .qr-panel {
        flex: 0 1 210px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
    }
    
    .qr-frame{
        width:220px;
        /*height:220px;*/
        overflow:hidden;
        background:#fff;
        border-radius:10px;
    
        display:flex;
        justify-content:center;
        align-items:center;
    }
    
    #payment-qr{
        width:100%;
        height: auto;
        object-fit: contain;
        display:block;
        transform:translateY(-10px) scaleY(1.04);
        transform-origin:top center;
    }
    .payment-selected-bar {
        width: 200px;
        margin-top: 15px;
    }
    
    .utr-entry {
        flex: 1 1 320px;
        max-width: 420px;
        width: 100%;
    }
    
    .utr-input{
        width
    }
    #utr{
        width:140px;
        height:46px;
        background:#FFD400 !important;
        color:#000 !important;
        border:none;
        border-radius:8px;
        font-size:16px;
        font-weight:600;
        cursor:pointer;
        display:block;
        appearance:none;
        -webkit-appearance:none;
    }
    
    #utr:hover{
        background:#e6c200 !important;
    }
    
    #payment-review-message-qr {
    display: block !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: transparent !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-top: 16px !important;
    box-sizing: border-box;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    }   

    #payment-review-message-qr.review-message-box {
    background: rgba(46, 204, 113, 0.1) !important;
    border-color: #2ecc71 !important;
    color: #2ecc71 !important;
    }
    
    .payment-note {
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }
    .review-message-box{
    background: rgba(46, 204, 113, 0.1) !important;
    border: 1px solid #2ecc71 !important;
    color: #2ecc71 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-top: 16px !important;
}
    
    /* ============================
       TABLET
    ============================ */
    
    @media (max-width:1024px){
    
        .payment-checkout-inner{
            gap:30px;
            padding:25px;
        }
    
        .qr-frame{
            width:180px;
            height:180px;
        }
    
        .payment-selected-bar{
            width:180px;
        }
    
        .utr-entry{
            max-width:350px;
        }
         .payment-timer{
        width:auto;
        height:auto;
        font-size:14px;
        margin:18px auto 0;
    }
    
    }
    
    /* ============================
       MOBILE
    ============================ */
    
    @media (max-width:767px){
    
    .payment-checkout-inner{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:8px;
        padding:20px 16px;
    }
    #payment-qr{
        width:150% !important;
        height:150% !important;
        object-fit:cover !important;
        object-position:center !important;
        display:block;
        transform:none !important;
    }
    .payment-timer{
        width:auto;
        height:auto;
        font-size:14px;
        margin:18px auto 0;
    }

    .qr-panel{
        width:100%;
    }
    
    .qr-frame{
        width:140px !important;
        height:140px !important;   /* must equal width — keeps it a square */
        aspect-ratio: 1 / 1;       /* extra safety in case height gets overridden elsewhere */
        padding:0 !important;
        overflow:hidden;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:10px;
    }

    .payment-selected-bar{
        width:170px;
    }
    
    .utr-entry{
            /*width:100%;*/
        max-width:320px;
    }
    
    .utr-input,
    #utr{
        width:100%;
    }
     #qr-panel.qr-panel .qr-frame{
        width:140px !important;
        height:140px !important;
        max-height:140px !important;
        min-height:0 !important;
        overflow:hidden !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        padding:0 !important;
    }
    
    #qr-panel.qr-panel .qr-frame img#payment-qr{
        width:100% !important;
        height:100% !important;
        max-width:none !important;
        max-height:none !important;
        min-width:0 !important;
        min-height:0 !important;
        object-fit:cover !important;
        object-position:center center !important;
        transform:none !important;
        display:block !important;
    }
    
}
    .selected-amount-box{
        margin-top:0 !important;
        margin-bottom:8px;
        text-align:left;
    }
    
    .selected-amount-label{
        color:#bdbdbd;
        font-size:14px;
        font-weight:500;
        margin-bottom:4px;
    }
    
    .selected-amount-box h2{
        color:#ffffff;
        font-size:24px;
        font-weight:700;
        margin:0;
        line-height:1;
    }
    /* Paid & Continue Button */
    .paid-confirm-btn{
        height:50px;
        min-width:220px;
    
        display:none;
        align-items:center;
        justify-content:center;
    
        background:#FFD400;
        color:#000;
    
        border:none;
        border-radius:10px;
    
        font-size:16px;
        font-weight:700;
        cursor:pointer;
        
    }
    
    .paid-confirm-btn:hover {
        background: #E6C200 !important;
    }
    
    .paid-confirm-btn:active {
        transform: scale(0.98);
    }
    /*.payment-action-row{*/
    /*    display:flex;*/
    /*    align-items:center;*/
    /*    justify-content:flex-start;*/
    /*    gap:16px;*/
        margin-top:10px;   /* was 24px */
    /*}*/
    
  .payment-timer {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 190px auto 0 !important;
}

.payment-timer.show {
    visibility: visible;
}
    .paid-confirm-btn{
        height:50px;
        min-width:134px;
    
        display:flex;
        align-items:center;
        justify-content:center;
    
        background:#FFD400 !important;
        color:#000;
    
        border:none;
        border-radius:10px;
    
        font-size:16px;
        font-weight:700;
        cursor:pointer;
        margin-top:24px;
    }
    .timer-wrapper{
        display:flex;
        justify-content:center;
        margin-top:18px;
    }
    
    /* ==========================================
       SMALLER PAYMENT PLAN CARDS - ALL DEVICES
    ========================================== */
    
    /* Desktop */
    body.payment-page .payment-page-cards .card0{
        max-width: 250px !important;
        min-height: 150px !important;
        padding: 0px 0px !important;
    }
    
    /* Reduce text sizes */
    body.payment-page .payment-page-cards .card0 h1{
        font-size: 25px !important;
    }
    
    body.payment-page .payment-page-cards .card0 h2{
        font-size: 13px !important;
    }
    
    body.payment-page .payment-page-cards .card0 h3{
        font-size: 18px !important;
    }
    
    body.payment-page .payment-page-cards .card0 .sub{
        font-size: 13px !important;
    }
    
    body.payment-page .payment-page-cards .price-btn{
        padding: 10px 14px !important;
        font-size: 13px !important;
    }
    body.payment-page .utr-input:disabled,
    body.payment-page #utr:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
    
    /* Tablet */
    @media (max-width:1023px){
    
        body.payment-page .payment-page-cards .card0{
            max-width:220px !important;
            min-height:60px !important;
            padding:0px 0px !important;
        }
    
        body.payment-page .payment-page-cards .card0 h1{
            font-size:27px !important;
        }
    }
    
    /* Mobile */
    @media (max-width:767px){
    
        body.payment-page .payment-page-cards .card0{
            max-width:160px !important;
            min-height:50px !important;
            padding:8px 10px !important;
            margin:0 auto !important;
        }
    
        body.payment-page .payment-page-cards .card0 h1{
            font-size:17px !important;
        }
    
        body.payment-page .payment-page-cards .price-btn{
            font-size:12px !important;
            padding:8px 10px !important;
        }
         body.payment-page .qr-frame{
        width:140px !important;
        height:140px !important;
        overflow:hidden !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        padding:0 !important;
    }
    
         body.payment-page .qr-frame img#payment-qr{
        width:150% !important;
        height:150% !important;
        max-width:none !important;
        max-height:none !important;
        min-width:0 !important;
        min-height:0 !important;
        object-fit:cover !important;
        object-position:center center !important;
        transform:none !important;
        display:block !important;
    }
        body.payment-page #payment-qr{
        width:150% !important;
        height:150% !important;
        max-width:none !important;
        max-height:none !important;
        object-fit:cover !important;
        object-position:center !important;
        transform:none !important;
        display:block !important;
        }
        body.payment-page .paid-confirm-btn[hidden]{
        display: none !important;
    }
    }
    
    body.payment-page .payment-page-cards .card0{
        height: auto !important;
        min-height: 160px !important;
        max-height: 160px !important;
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        gap: 0px;
    }
    /* Reduce spacing inside payment cards */
    body.payment-page .payment-page-cards .card0{
        gap: 6px !important;          /* Reduce gap between elements */
        justify-content: center !important;
    }
    
    /* Remove default margins */
    body.payment-page .payment-page-cards .card0 h3{
        margin: 0 0 4px 0 !important;
        line-height: 1.1 !important;
    }
    
    body.payment-page .payment-page-cards .card0 h1{
        margin: 0 !important;
        line-height: 1 !important;
    }
    
    body.payment-page .payment-page-cards .card0 .sub{
        margin: 2px 0 !important;
        line-height: 1.25 !important;
    }
    
    body.payment-page .payment-page-cards .card0 h2{
        margin: 4px 0 0 0 !important;
        line-height: 1.1 !important;
    }
    
    body.payment-page .payment-page-cards .card0{
        min-height: 157px !important;
        justify-content: space-evenly !important;
        padding: 10px 14px !important;
    }
    /* ==========================================
       PAYMENT CARDS - YELLOW THEME
    ========================================== */
    
    body.payment-page .payment-page-cards .card0{
        background: var(--accent-gradient) !important;
        color: #000 !important;
        border: none !important;
        min-height: 55px !important;
        box-shadow: 0 4px 12px var(--accent-glow);
        border: none !important;
    }
    
    /* All text black */
    body.payment-page .payment-page-cards .card0 h1,
    body.payment-page .payment-page-cards .card0 h2,
    body.payment-page .payment-page-cards .card0 h3,
    body.payment-page .payment-page-cards .card0 p{
        color: #000 !important;
    }
    
    /* Button matches the card */
    body.payment-page .payment-page-cards .price-btn{
        background: #000 !important;
        color: #FFD400 !important;
        border: none !important;
    }
    
    body.payment-page .payment-page-cards .price-btn:hover{
        background: #1a1a1a !important;
    }
      body.payment-page .paid-confirm-btn[hidden]{
    display: none !important;
}

    @media (min-width:1024px){
    
        body.payment-page .payment-page-cards .card0{
            height: 65px !important;
            min-height: 56px !important;
            max-height: 100px !important;
            padding: 10px 12px !important;
        }
    
 
body.payment-page .pricing-section {
    max-width: 1000px !important;
    width: 359.5px !important;
    margin: 0 0px !important;
    padding-left:20px;  
} 

}
body.payment-page .utr-input {
    margin-bottom: 14px !important;
}