/* ==================================================
   100% CUSTOM BENGALI CHECKOUT FORM STYLES (PREMIUM GLASS EFFECT)
   ================================================== */
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

html, body { overflow-x: hidden !important; }
body { background-color: #f8fafc; color: #1e293b; font-family: 'Poppins', 'Hind Siliguri', sans-serif; margin: 0; padding: 0; }

/* Sticky Header Override */
.mht-super-sticky-header {
    position: -webkit-sticky !important; position: sticky !important; top: 0 !important;
    z-index: 999999 !important; background-color: #0B081D !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important; width: 100% !important; display: block !important;
}
body.admin-bar .mht-super-sticky-header { top: 32px !important; }
@media screen and (max-width: 782px) { body.admin-bar .mht-super-sticky-header { top: 46px !important; } }

/* 🌟 Layout container 🌟 */
.checkout-page-wrapper { 
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    min-height: 80vh; 
    padding: 40px 15px; 
}
.mht-checkout-container { max-width: 1200px; margin: 0 auto; }

/* Top Header Area */
.checkout-top-header { border-bottom: 1px solid rgba(99, 102, 241, 0.2); margin-bottom: 30px; padding-bottom: 15px; }
.checkout-page-title { font-size: 26px; font-weight: 700; margin: 0 0 5px 0; color: #111827; }
.breadcrumbs { font-size: 14px; color: #64748b; }
.breadcrumbs .highlight { color: #6366f1; font-weight: 600; }

/* Utilities */
.text-blue { color: #6366f1 !important; }
.text-green { color: #10b981 !important; }
.text-pink { color: #e11d48 !important; }
.text-orange { color: #f97316 !important; }
.req { color: #ef4444; }

/* 🌟 Grid Layout 🌟 */
.mht-checkout-grid { display: flex; gap: 30px; align-items: flex-start; }
.mht-checkout-left { width: 64%; display: flex; flex-direction: column; gap: 25px; }
.mht-checkout-right { width: 36%; position: sticky; top: 120px; }

/* 🌟 Section Boxes (Glassmorphism Effect) 🌟 */
.mht-section-box { 
    background: rgba(255, 255, 255, 0.75); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    padding: 30px; 
    border-radius: 12px; 
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.12);
}

/* ==================================================
   🌟 100% RESPONSIVE TITLE WRAPPER 🌟
   ================================================== */
.mht-title-wrapper {
    display: flex;
    align-items: stretch; 
    justify-content: space-between;
    margin-bottom: 25px;
    gap: 15px;
    width: 100%;
}

.mht-section-title { 
    font-size: 17px; 
    color: #ffffff; 
    background: linear-gradient(90deg, #0B081D 0%, #3b82f6 100%); 
    font-weight: 600; 
    margin: 0; 
    padding: 12px 20px; 
    border-radius: 6px; 
    border-left: 5px solid #FFD700; 
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); 
    letter-spacing: 0.5px;
    white-space: nowrap; 
    display: flex;
    align-items: center;
}

/* Form Fields */
.mht-form-row-group { display: flex; gap: 20px; margin-bottom: 20px; }
.mht-form-group { display: flex; flex-direction: column; }
.mht-form-group.full-width { width: 100%; margin-bottom: 20px; }
.mht-form-group.half-width { width: 50%; }
.mht-form-row-group.three-cols .mht-form-group { width: 33.33%; }

.mht-form-group label { font-size: 14px; font-weight: 600; color: #1e293b; margin-bottom: 8px; }
.mht-form-group input, .mht-form-group select, .mht-form-group textarea {
    padding: 12px 15px; border: 1px solid #cbd5e1; border-radius: 6px; width: 100%; font-size: 14px; font-family: inherit; box-sizing: border-box; outline: none; 
    background: #ffffff;
    transition: 0.3s;
}
.mht-form-group input:focus, .mht-form-group select:focus, .mht-form-group textarea:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
.mht-form-group textarea { height: 90px; resize: vertical; }
.mht-form-group .readonly-input { background-color: #f1f5f9; color: #64748b; cursor: not-allowed; border-color: #e2e8f0; }
.hint-text { font-size: 12px; color: #64748b; margin-top: 6px; display: block; }

/* 🌟 Radio Boxes (Shipping & Payment) 🌟 */
.mht-radio-group { display: flex; flex-direction: column; gap: 15px; }
.mht-radio-item { display: flex; align-items: center; justify-content: space-between; border: 1px solid #cbd5e1; padding: 15px 20px; border-radius: 8px; cursor: pointer; transition: 0.3s; background: #ffffff; }
.mht-radio-item:hover { border-color: #94a3b8; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.mht-radio-item.active { border-color: #6366f1; background: rgba(99, 102, 241, 0.05); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1); }

.radio-content { display: flex; align-items: center; gap: 15px; }
.radio-content input[type="radio"] { accent-color: #6366f1; width: 18px; height: 18px; cursor: pointer; margin: 0; }
.radio-content i { font-size: 24px; width: 30px; text-align: center; }
.pay-logo { width: 55px; height: auto; object-fit: contain; }
.radio-content div { display: flex; flex-direction: column; }
.radio-content div strong { font-size: 15px; color: #111827; margin-bottom: 2px; }
.radio-content div span { font-size: 12px; color: #64748b; }
.radio-price { font-weight: 700; color: #6366f1; font-size: 16px; }

/* 🌟 Submit Button 🌟 */
.mht-submit-btn { background: #6366f1; color: #fff; width: 100%; border: none; padding: 16px; font-size: 18px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: 0.3s; margin-top: 10px; font-family: inherit; }
.mht-submit-btn:hover { background: #4f46e5; box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35); transform: translateY(-2px); }
.security-notice { text-align: center; margin-top: 15px; font-size: 13px; color: #64748b; }

/* ========================================== */
/* 🌟 RIGHT COLUMN (Order Summary) 🌟 */
/* ========================================== */
.mht-summary-box { 
    background: rgba(255, 255, 255, 0.75); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    padding: 30px; 
    border-radius: 12px; 
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.12);
}
.summary-title { font-size: 18px; color: #111827; font-weight: 700; margin: 0 0 20px 0; padding-bottom: 15px; border-bottom: 1px dashed #cbd5e1; }

.mht-cart-items { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; border-bottom: 1px solid rgba(99, 102, 241, 0.15); padding-bottom: 20px; }
.summary-item { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.item-img img { width: 55px; height: 55px; border-radius: 8px; object-fit: cover; border: 1px solid #e2e8f0; padding: 2px; background: #fff; }
.item-info { flex: 1; }
.item-info h4 { margin: 0 0 5px 0; font-size: 14px; color: #1e293b; font-weight: 600; line-height: 1.3; }
.item-meta, .item-qty { font-size: 12px; color: #64748b; }
.item-price { font-weight: 700; color: #111827; font-size: 15px; }

.summary-totals .tot-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 15px; color: #475569; }
.summary-totals .tot-row strong { color: #111827; font-weight: 600; font-size: 16px; }
.summary-totals .grand-total { border-top: 1px solid rgba(99, 102, 241, 0.2); padding-top: 18px; margin-top: 10px; font-size: 17px; color: #111827; font-weight: 700; }
.summary-totals .grand-total strong { font-size: 22px; }

/* Coupon UI */
.custom-coupon-ui { display: flex; margin-top: 25px; margin-bottom: 25px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-radius: 6px; }
.custom-coupon-ui input { flex: 1; border: 1px solid #cbd5e1; border-right: none; border-radius: 6px 0 0 6px; padding: 12px 15px; outline: none; font-size: 14px; font-family: inherit; background: #fff; }
.custom-coupon-ui button { background: #6366f1; color: #fff; border: none; padding: 12px 20px; border-radius: 0 6px 6px 0; cursor: pointer; font-weight: 600; font-size: 14px; transition: 0.3s; font-family: inherit;}
.custom-coupon-ui button:hover { background: #4f46e5; }

/* Features List */
.checkout-features { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: #475569; border-top: 1px solid rgba(99, 102, 241, 0.15); padding-top: 20px; }
.checkout-features div { display: flex; align-items: center; font-weight: 500; }
.checkout-features i { margin-right: 12px; font-size: 18px; width: 20px; text-align: center; }

/* 🌟 Mobile Responsive Fixes 🌟 */
@media (max-width: 991px) {
    .mht-checkout-grid { flex-direction: column; }
    .mht-checkout-left, .mht-checkout-right { width: 100%; }
    .mht-checkout-right { position: static; }
    .mht-form-row-group { flex-direction: column; gap: 0; }
    .mht-form-group.half-width { width: 100%; }
    .mht-form-row-group.three-cols .mht-form-group { width: 100%; margin-bottom: 15px; }
}

@media (max-width: 576px) {
    .mht-title-wrapper {
        flex-direction: row; 
        align-items: stretch;
        gap: 10px;
    }
    .mht-section-title {
        font-size: 13px; 
        padding: 10px;
    }
    .mht-section-box { padding: 15px; } 
}