/* 🔥 DESKTOP FIX - BUTTON SMALL AGAIN */
@media (min-width: 769px){

    .payment-footer-center .btn{
        width:auto !important;
        padding:10px 30px;
        min-width:160px;
    }

    #transactionModal .btn-success{
        width:auto !important;
        padding:10px 30px;
    }
	
	 #paymentModal .modal-dialog{
        max-width: 500px !important;
        margin: 30px auto !important;
    }

    #transactionModal .modal-dialog{
        max-width: 500px !important;
        margin: 60px auto !important;
    }
	
	    #toggleLoginBtn{
        width:auto !important;
        display:inline-block !important;
        padding:8px 18px !important;
        white-space:nowrap;
        margin-left:auto;   /* 🔥 THIS IS MAIN FIX */
    }


        .login-toggle{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
    }
 .login-toggle span,
    .login-toggle p,
    .login-toggle div:first-child{
        flex:1;
    }
	
	.login-toggle span{
        display:flex;
        align-items:center;   /* 🔥 icon + text same line */
        font-size:15px;
    }
	
}


/* =========================
   LAYOUT IMPROVEMENT
========================= */
.checkout-wrapper{
    margin-top:30px;
    display:flex;
    gap:30px;
    align-items:flex-start;
}

/* LEFT SIDE */
.left-box{
    flex:2;
}



/* RIGHT SIDE */
.right-box{
    flex:1;
    position:sticky;
    top:120px;
}

/* =========================
   SECTION BOX IMPROVE
========================= */
.section-box,
.summary-box,
.shipping-box,
.coupon-box{
    background:#fff;
    padding:28px;
    border-radius:12px;
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
    border:1px solid #f1f1f1;
}

/* TITLE */
.section-title,
.summary-title{
    font-size:18px;
    font-weight:700;
    color:#f15a00; /* உங்கள் brand */
    margin-bottom:16px;
}

.shipping-address{
 margin-top:16px;
 margin-bottom:16px;
 font-size: 20px !important;
 font-weight: 600;

}



.order-notes-box{
    margin-top:18px; /* 🔥 இது தான் main fix */
}




/* =========================
   INPUT IMPROVE
========================= */
.section-box input,
.section-box select,
.section-box textarea{
    border-radius:8px;
    padding:10px 12px;
    border:1px solid #ddd;
    font-size:14px;
    transition:0.2s;
}

.section-box input:focus,
.section-box select:focus,
.section-box textarea:focus{
    border-color:#bbb;
    box-shadow:0 0 0 2px rgba(0,0,0,0.08);
}


/* =========================
   SUMMARY IMPROVE
========================= */
.summary-row{
    display:flex;
    justify-content:space-between;
    padding:8px 0;
    font-size:15px;
}

.summary-row span:last-child{
    font-weight:600;
}

/* TOTAL */
.summary-row.fw-bold{
    font-size:20px !important;
}

/* =========================
   BUTTON IMPROVE
========================= */
.btn-brand{
    background: linear-gradient(135deg, #ff7a1a, #f15a00);
    border:none;
    color:#fff;
    font-weight:600;
    padding:12px 18px;
    border-radius:8px;
    transition:0.3s;
}

.btn-brand:hover{
    background: linear-gradient(135deg, #f15a00, #d84300);
}

/* =========================
   LOGIN BOX FIX
========================= */


.login-panel{
    background:#fafafa;
    border:1px solid #eee;
}

/* =========================
   CHECKBOX ALIGN FIX
========================= */
#shipDiff{
    transform:scale(1.2);
    margin-right:8px;
}



/* =========================
   FINAL SPACING FIX 🔥
========================= */

/* ALL BOX GAP INCREASE */
.left-box > *,
.right-box > *{
    margin-bottom:22px;
}



/* =========================
   CHECKBOX INLINE FIX 🔥
========================= */

.mt-3.checkbox-row{
    display:flex;
    align-items:center;
    gap:12px;
}

#shipDiff{
    width:18px;
    height:18px;
    margin:0;
    flex-shrink:0;
}

#shipDiff + label{
    margin:0;
    font-size:14px;
    line-height:1.2;
    cursor:pointer;
}



/* INPUT GAP IMPROVE */
.section-box .row.g-3{
    row-gap:10px !important;
}

/* LABEL SPACE */
.section-box label{
    margin-bottom:6px;
    display:block;
    font-weight:600;
	font-size:14px;
	
}

/* ORDER NOTES SPACE */
textarea{
    margin-top:5px;
}


/* PAYMENT SECTION BREATHING */
.payment-box{
    margin-top:10px;
}



/* PLACE ORDER BUTTON */
.btn-brand.w-100{
    margin-top:15px;
    padding:14px;
    font-size:16px;
    border-radius:10px;
	display:flex;              /* 🔥 முக்கியம் */
    justify-content:center;    /* center horizontally */
    align-items:center;        /* center vertically */

    text-align:center;
    font-weight:700;
    letter-spacing:0.5px;
}

/* COUPON BOX ALIGN */
.coupon-box .d-flex{
    gap:10px;
}

.coupon-box input{
    height:45px;
}

/* SUMMARY TOTAL LINE SPACE */
.summary-box hr{
    margin:12px 0;
}

/* =========================
   EXTRA CLEAN LOOK (OPTIONAL)
========================= */

/* LIGHT BACKGROUND CARD EFFECT */
.section-box:hover,
.summary-box:hover,
.shipping-box:hover,
.coupon-box:hover{
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
}


/* =========================
   TERMS ALIGN FIX 🔥
========================= */















/* =========================
   PAYMENT SECTION CARD
========================= */
#paymentSection {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    border: 1px solid #eee;
}

/* TITLE */
#paymentSection .section-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}



/* =========================
   PAYMENT BOX
========================= */
.payment-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* =========================
   PAYMENT OPTION CARD
========================= */
.payment-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #fafafa;
    cursor: pointer;
    transition: 0.3s ease;
    font-size: 15px;
}

/* RADIO */
.payment-option input[type="radio"] {
    accent-color: #f15a00;
    transform: scale(1.2);
}

/* HOVER */
.payment-option:hover {
    border-color:#ffd6b8;   /* 🔥 light orange */
    background:#fff4ec;     /* 🔥 soft background */
}

/* =========================
   SELECTED STATE (IMPORTANT)
========================= */
.payment-option input[type="radio"]:checked + span,
.payment-option:has(input[type="radio"]:checked) {
    border-color:#ffb380;   /* 🔥 medium soft */
    background:#fff4ec;
    box-shadow:0 0 0 2px rgba(255,140,80,0.15);
}

/* =========================
   WALLET INFO
========================= */
#walletInfo {
    font-size: 13px;
    margin-top: 5px;
}

#walletCalculation {
    background: #fff7f2;
    padding: 10px;
    border-radius: 8px;
    border: 1px dashed #f15a00;
}

/* =========================
   EDIT BUTTON
========================= */
#editPaymentBtn {
    width: 100%;
    border-radius: 8px;
    font-size: 14px;
}












/* =========================
   QR PAYMENT CLEAN UI 🔥
========================= */

.payment-heading{
    text-align:center;
    font-size:18px;
    font-weight:700;
    margin-bottom:15px;
    color:#333;
}

/* QR CENTER */
.qr-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:15px;
}

.qr-image{
    width:220px;
    max-width:100%;
    padding:12px;
    border-radius:12px;
    border:1px solid #eee;
    background:#fff;
}

/* ACCOUNT NAME */
.account-name{
    text-align:center;
    font-size:16px;
    font-weight:600;
    margin-bottom:15px;
}

/* FIELD */
.payment-field{
    margin-bottom:12px;
}

.payment-field label{
    font-size:13px;
    color:#777;
    margin-bottom:4px;
    display:block;
}

/* COPY BOX */
.copy-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border:1px solid #ddd;
    padding:8px 10px;
    border-radius:8px;
    background:#fafafa;
}

.copy-box span{
    font-size:14px;
    font-weight:500;
    color:#333;
    word-break:break-all;
}

/* COPY BUTTON */
.copy-btn{
    border:none;
    background:#f15a00;
    color:#fff;
    padding:5px 12px;
    border-radius:6px;
    font-size:12px;
    cursor:pointer;
    transition:0.3s;
}

.copy-btn:hover{
    background:#d84300;
}



/* 🔥 PAYMENT INFO TEXT CENTER + MOVE UP */
.payment-info{
    text-align: center;
    margin-top: 5px;   /* 🔥 மேலே move */
    margin-bottom: 10px; /* gap for button */
    font-size: 14px;
}

/* 🔥 PAYMENT DONE BUTTON CENTER */
.payment-footer-center{
    display: flex;
    justify-content: center;
}

/* BUTTON CENTER FIX (extra safe) */
.payment-footer-center .btn{
    margin: 0 auto;
}

/* 🔥 REMOVE LEFT ALIGN FEEL */
.payment-info b{
    display: inline;
}



/* =========================
   PAYMENT MODAL IMPROVE 🔥
========================= */

/* MODAL BOX */
#transactionModal .modal-content{
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.12);
    border: none;
}

/* HEADER */
#transactionModal .modal-header{
    border-bottom: none;
    padding-bottom: 5px;
}

#transactionModal .modal-title{
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

/* LABEL */
#transactionModal label{
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
}

/* INPUT */
#transactionModal .form-control{
    height: 45px;
    border-radius: 8px;
    border: 1px solid #ddd;
    transition: 0.2s;
}

#transactionModal .form-control:focus{
    border-color: #f15a00;
    box-shadow: 0 0 0 2px rgba(241,90,0,0.1);
}

/* SPACE BETWEEN FIELDS */
#transactionModal .mb-3{
    margin-bottom: 16px !important;
}

/* FOOTER CENTER */
#transactionModal .modal-footer{
    border-top: none;
    justify-content: center;
    padding-top: 10px;
}

/* BUTTON STYLE */
#transactionModal .btn-success{
    background: linear-gradient(135deg, #ff7a1a, #f15a00);
    border: none;
    padding: 10px 24px;
    font-weight: 600;
    border-radius: 8px;
    transition: 0.3s;
}

#transactionModal .btn-success:hover{
    background: linear-gradient(135deg, #f15a00, #d84300);
}



#editPaymentBtn {
    width: 100%;
    margin: 10px 0 14px; /* 🔥 TOP / BOTTOM BALANCE */
    padding: 10px;
    border-radius: 8px;

}




.copy-btn:active{
    transform:scale(0.95);
}

.copy-box:hover{
    border-color:#f15a00;
    background:#fff8f3;
}







/* =========================
   TERMS BOX IMPROVE 🔥
========================= */

.terms-row{
    display:flex;
    align-items:flex-start;   /* 🔥 top align */
    gap:10px;

    background:#fff8f3;       /* light brand bg */
   
    border-radius:10px;
	border:1px solid #ffe8d6;
    padding:12px 14px;
    margin-top:12px;
}

/* checkbox */
#agree_terms{
    width:18px;
    height:18px;
    margin-top:3px;
    flex-shrink:0;
}

/* label */
.terms-row label{
    margin:0;
    font-size:15px;
    line-height:1.5;
    color:#333;
}

/* link */
.terms-link{
    color:#f15a00;
    font-weight:600;
    text-decoration:underline;
}

.terms-link:hover{
    color:#d84300;
}

/* =========================
   PLACE ORDER FIX 🔥
========================= */





/* LOGIN TOGGLE BAR */
.login-toggle{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;
    border-radius:10px;
    background:#fff7f2;
    border:1px solid #ffe8d6;
}

/* LOGIN FORM BOX */
.login-panel{
    margin-top:12px;
    padding:16px;
    border-radius:10px;
    background:#fff;
    border:1px solid #eee;
}



/* =========================
   LOGIN INPUT THEME FIX
========================= */

/* input focus color */
#loginBox input:focus{
    border-color:#bbb  !important;
    box-shadow:0 0 0 2px rgba(0,0,0,0.08) !important;
}

/* placeholder look (optional premium feel) */
#loginBox input::placeholder{
    color:#999;
}

/* =========================
   FORGOT PASSWORD LINK
========================= */

#loginBox a{
    color:#f15a00 !important;
    font-weight:500;
    text-decoration:none;
}

#loginBox a:hover{
    color:#d84300 !important;
    text-decoration:underline;
}



/* =========================
   SHIPPING METHOD - FINAL CLEAN 🔥
========================= */

/* BOX */
.shipping-box{
    background:#fff;
    padding:22px;
    border-radius:12px;
    border:1px solid #f1f1f1;
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
    transition:all 0.3s ease;
}

/* TITLE */
.shipping-box .section-title{
    font-size:18px;
    font-weight:700;
    
    margin-bottom:14px;
}

/* SELECT FIELD */
.shipping-box select{
    width:100%;
    height:48px;
    padding:10px 14px;
    border-radius:10px;
    border:1px solid #ddd;
    background:#fff;

    font-size:14px;
    font-weight:500;
    color:#333;
	 
  
    cursor:pointer;
    transition:all 0.25s ease;
}

/* HOVER */
.shipping-box select:hover{
    border-color:#ffd6b8;
}

/* FOCUS (THEME) */
.shipping-box select:focus{
    outline:none;
    border-color:#f15a00;
    box-shadow:0 0 0 3px rgba(241,90,0,0.15);
}



.shipping-box{
    position:relative; /* 🔥 add this */
}

.shipping-box select,
.section-box select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg fill='%23f15a00' height='10' viewBox='0 0 24 24' width='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 15px center;
	padding-right:40px;
	background-size:25px; /* 🔥 THIS IS MAIN */


}


/* OPTION STYLE (LIMITED CONTROL) */
.shipping-box select option{
    padding:10px;
    font-size:15px;
}

/* SELECTED VALUE (when closed) */
.shipping-box select:valid{
    color:#333;
}

/* =========================
   SMOOTH EFFECT
========================= */

.shipping-box:hover{
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.qr-amount-box{
    text-align:center;
    font-size:16px;
    font-weight:600;   /* 🔥 bold */
    color:#f15a00;     /* 🔥 brand orange */
    
    margin-top:5px;   /* 🔥 top space */
    margin-bottom:20px;/* 🔥 bottom space */
    
    letter-spacing:0.3px;
}


#loginBox input{
    height:44px;              /* same as billing */
    font-size:14px;
    border-radius:8px;
}












/* =========================
   📱 MOBILE RESPONSIVE FIX
========================= */

@media (max-width: 768px){

    /* CONTAINER SIDE SPACE */
    .container{
        padding-left:20px !important;
        padding-right:20px !important;
    }

    /* STACK LAYOUT */
    .checkout-wrapper{
        flex-direction:column;
        gap:18px;
    }

    /* FULL WIDTH */
    .left-box,
    .right-box{
        width:100%;
        flex:none;
    }

    /* REMOVE STICKY */
    .right-box{
        position:static;
        top:auto;
    }

    /* BOX PADDING REDUCE */
     .section-box,
    .summary-box,
    .shipping-box{
        padding:16px;
        margin-left:2px;
        margin-right:2px;
    }
	
	.summary-box{
        padding:18px;
    }

 

    /* INPUT FULL WIDTH */
    .section-box .row > div{
        width:100% !important;
    }

    /* INPUT HEIGHT */
    .section-box input,
    .section-box select,
    .section-box textarea{
        height:44px;
        font-size:14px;
    }

    textarea{
        height:auto !important;
    }

    /* ORDER SUMMARY COMPACT */
    .summary-row{
        font-size:15px;
        padding:8px 0;
    }

.summary-row span:last-child{
        font-weight:600;
    }


    .summary-row.fw-bold{
        font-size:18px !important;
    }

    /* SHIPPING SELECT */
    .shipping-box select{
    font-weight:600;
    color:#333;
	 width:100%;
        max-width:100%;
        box-sizing:border-box;
	}


    
	/* 🔥 LOGIN LABEL SAME AS BILLING */
#loginBox label{
    font-size:14px;
    font-weight:600;
    margin-bottom:6px;
    display:block;
}

#loginBox .row{
    row-gap:10px;
}



   
    /* TERMS BOX */
    .terms-row{
        align-items:flex-start;
        font-size:14px;
    }

    /* PLACE ORDER BUTTON */
    .btn-brand.w-100{
        font-size:15px;
        padding:14px;
        border-radius:10px;
    }

    /* PAYMENT OPTIONS */
    .payment-option{
        padding:12px;
       	display:flex !important;
        align-items:center !important;
		justify-content:flex-start;
        gap:10px;
        font-size:15px;
        line-height:1.3;
		
    }
	
	.payment-option input[type="radio"]{
        margin:0;
        flex-shrink:0;
		transform:scale(1.1);
        position:relative;
        top:0; /* 🔥 remove கீழே போற issue */
    }

 /* 🔥 TEXT BREAK FIX */
    .payment-option span,
    .payment-option{
        word-break:break-word;
    }


    /* QR IMAGE */
    .qr-image{
        width:180px;
    }
	
	 /* 🔥 1. CHECKOUT TITLE DOWN */
    .checkout-title{
        margin-top:60px;
        margin-bottom:0px;
        padding-left:5px;
        font-size:20px;
    }
 body{
        font-size:16px;
    }



/* =========================
   📱 MOBILE PAYMENT POPUP FIX ONLY
========================= */




    /* DIALOG CENTER WITH GAP */
    #paymentModal .modal-dialog{
        margin:15px;              /* 🔥 equal gap all sides */
        max-width:100%;
    }

    /* MODAL BOX */
    #paymentModal .modal-content{
        border-radius:14px;
        padding:16px;
        height:auto;              /* 🔥 important */
        max-height:90vh;          /* 🔥 avoid overflow */
        overflow-y:auto;          /* scroll if needed */
        display:flex;
        flex-direction:column;
		margin-bottom:100px;
		
		
    }

    /* HEADER */
    #paymentModal .modal-header{
        justify-content:center;
        position:relative;
        padding-bottom:8px;
    }

    #paymentModal .modal-title{
        font-size:16px;
        text-align:center;
		
    }

    #paymentModal .btn-close{
        position:absolute;
        right:10px;
        top:10px;
    }

    /* QR */
    .qr-wrapper{
        margin:10px 0;
    }

    .qr-image{
        width:200px;
    }

    /* ACCOUNT */
    .account-name{
        font-size:14px;
        margin-bottom:10px;
    }

    /* COPY BOX */
    .copy-box{
        padding:9px;
        gap:8px;
    }

    .copy-box span{
        font-size:14px;
		line-height:1.3;
    }

    .copy-btn{
        font-size:13px;
        padding:6px 12px;
    }

    /* INFO */
    .payment-info{
        font-size:12px;
        margin:10px 0;
    }

    /* FOOTER BUTTON */
    .payment-footer-center{
        margin-top:12px;   /* 🔥 no extra space */
    }

    .payment-footer-center .btn{
        width:100%;
        padding:12px;
        font-size:15px;
        border-radius:10px;
    }
	
	.payment-info {
		font-size: 13px;
	 margin-bottom: -8px;
	 margin-top: -10px !important;
	    }

/* LABEL ALSO LITTLE BIG */
    .payment-field label{
        font-size:13px;
        font-weight:500;
    }

#transactionModal .modal-dialog{
        margin: 70px auto !important;
        max-width: 90%;             /* screen உள்ளே nice gap */
    }







 #toggleLoginBtn{
        width:auto !important;        /* full width remove */
        padding:6px 14px !important;  /* small size */
        font-size:13px;               /* slightly smaller */
        margin-left:auto;             /* right align */
        display:inline-block;
    }

    .login-toggle{
        flex-direction:row !important;   /* 🔥 MAIN FIX */
        align-items:center;
        justify-content:space-between;
    }

    .login-toggle span{
        font-size:15px;
    }


 .shipping-box,
    .section-box{
        overflow:hidden; /* 🔥 வெளியே bleed ஆகாத மாதிரி */
    }


}










/* TERMS ROW FIX */
.terms-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;   /* 🔥 முக்கியம் */
}

/* LABEL FIX */
.terms-row label{
    font-size:14px;
    line-height:1.4;
    cursor:pointer;
}

/* CHECKBOX SIZE */
.terms-row input[type="checkbox"]{
    width:18px;
    height:18px;
    flex-shrink:0;
}



.terms-row{
    background:#fff7f2;
    padding:12px;
    border-radius:8px;
    border:1px solid #f1e3d8;
}

@media(max-width:576px){

    .tc-footer{
        position: fixed;
        left:0;
        bottom:0;
        width:100%;
        background:#fff;
        padding:10px 15px;
        border-top:1px solid #eee;
        z-index:9999;
    }

    .tc-wrapper{
        padding-bottom:80px;
    }
}


/* =========================
   🔥 TERMS MODAL FINAL FIX
========================= */
@media(max-width:576px){

    /* 🔥 DIALOG GAP CONTROL */
    #termsModal .modal-dialog{
        margin:8px !important;   /* 🔥 top + left + right குறைச்சோம் */
    }

    /* 🔥 MAIN BOX */
    #termsModal .modal-content{
        padding:10px !important;     /* 🔥 உள்ள padding குறைச்சோம் */
        border-radius:12px;
        max-height:90vh;             /* 🔥 full height ஆகாது */
        overflow:hidden;
    }

    /* 🔥 REMOVE EXTRA INNER BOX EFFECT */
    .tc-wrapper{
        padding:20px !important;     /* 🔥 outer box remove feel */
        box-shadow:none !important;
        border:none !important;
        background:transparent !important;
    }

    /* 🔥 ACCORDION BOX மட்டும் visible */
    .accordion{
        background:#fff;
        border-radius:10px;
        padding:5px;
    }

    /* 🔥 BODY SCROLL FIX */
    #termsModal .modal-body{
        max-height:80vh;     /* 🔥 height குறைச்சோம் */
        overflow-y:auto;
        padding:5px 5px 10px 5px !important;
    }

    /* 🔥 TITLE SIZE */
    .tc-title{
        font-size:20px;
        margin-bottom:12px;
    }

    /* 🔥 HEADER SPACE குறைச்சோம் */
    #termsModal .modal-header{
        padding:8px 10px;
    }

    /* 🔥 CLOSE BUTTON POSITION */
    #termsModal .btn-close{
        top:8px;
        right:8px;
    }

    /* 🔥 BUTTON மேலே வர */
    .tc-footer{
        position:relative !important;
        margin-top:12px;
    }

}










/* =========================
   ORDER SUCCESS PAGE FINAL
========================= */

.success-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 30px;
}

/* DESKTOP WIDTH IMPROVE */
.success-card{
    width:100%;
    max-width:650px;   /* 🔥 increased */
    background:#fff;
    border-radius:16px;
    padding:45px 35px;
    box-shadow:0 12px 30px rgba(0,0,0,0.08);
    border:1px solid #f1f1f1;
	margin-bottom:10px;
	margin-top:20px;
}

/* ICON → GREEN */
.success-icon{
    width:80px;
    height:80px;
    margin:0 auto 20px;
    background:linear-gradient(135deg,#28a745,#1e7e34);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:32px;
}

/* TITLE */
.success-title{
    font-size:24px;
    font-weight:700;
    margin-bottom:10px;
    color:#333;
}

/* SUBTEXT */
.success-sub{
    font-size:15px;   /* 🔥 min 15px */
    color:#666;
    margin-bottom:25px;
    line-height:1.6;
}

/* ORDER BOX */
.order-box{
    background:#fff7f2;
    border:1px dashed #f15a00;
    padding:20px;
    border-radius:12px;
    margin-bottom:25px;
    transition:0.3s;
}

.order-box:hover{
    background:#fff3ec;
}

.order-box span{
    font-size:14px;
    color:#999;
    display:block;
}

.order-box strong{
    font-size:20px;
    color:#f15a00;
    font-weight:700;
}

/* HELPER TEXT */
.helper-text{
    font-size:14px;
    color:#777;
    margin-bottom:25px;
}

/* BUTTONS */
.success-actions{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

/* PRIMARY BUTTON */
.btn-brand{
    background:linear-gradient(135deg,#ff7a1a,#f15a00);
    color:#fff;
    border:none;
    padding:10px 22px;
    border-radius:8px;
    font-size:14px;
}

/* 🔥 FIX HOVER (NO WHITE) */
.btn-brand:hover{
    background:linear-gradient(135deg,#f15a00,#d84300);
    color:#fff;
}

/* OUTLINE BUTTON */
.btn-outline-brand{
    border:1px solid #f15a00;
    color:#f15a00;
    padding:10px 22px;
    border-radius:8px;
    background:#fff;
    font-size:14px;
	font-weight:600;
}

/* 🔥 FIX HOVER */
.btn-outline-brand:hover{
    background:#fff5ef;
    color:#f15a00;
    border-color:#f15a00;
}

/* MOBILE */
@media(max-width:576px){

    .success-card{
        padding:30px 20px;
    }

    .success-title{
        font-size:20px;
    }

    .order-box strong{
        font-size:18px;
    }
	.success-card{
		
		margin-bottom:10px;
		margin-top:40px;
	}

}