:root {
    /* ============================================================== */
    /* 🎨 PROFESSIONAL BRAND COLORS (MATCHED WITH SHOP & PRODUCT)    🎨 */
    /* ============================================================== */
    --brand-primary: #18b83f !important;      /* Sera Khabar Green */
    --brand-hover: #0f8f2f !important;        /* Darker green for hover */
    --brand-secondary: #ffd400 !important;    /* Sera Khabar Gold/Yellow */
    --brand-light: rgba(24, 184, 63, 0.12) !important; /* Soft green tint */
    --co-border-color: rgba(7, 16, 6, 0.08) !important; /* Clean matched border */
    --co-bg-main: #f6faf5 !important;         /* Main app background */
    --bg-soft: #f1f8ef !important;            /* Soft minty background for inputs/boxes */
    --text-dark: #071006 !important;          /* Deep forest dark */
    --text-muted: #7c8978 !important;         /* Mossy muted text */
    /* ============================================================== */
}

.hkdev-co-container, .hkdev-co-thankyou-container { 
    font-family: 'Hind Siliguri', 'Inter', sans-serif !important; 
    max-width: 1100px !important; 
    margin: 40px auto !important; 
    padding: 0 15px !important; 
    color: var(--text-dark) !important; 
    line-height: 1.6 !important; 
    background: transparent !important;
}

/* =========================================
   Layout Grid Setup (Pro Split)
========================================= */
.hkdev-co-checkout-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 35px !important; align-items: start !important; }
.hkdev-co-section-card { background: #fff !important; padding: 30px !important; border-radius: 24px !important; border: 1px solid var(--co-border-color) !important; box-shadow: 0 8px 24px rgba(7, 16, 6, 0.04) !important; }

/* Headers */
.hkdev-co-card-header { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 25px !important; padding-bottom: 15px !important; border-bottom: 1px solid var(--co-border-color) !important; }
.hkdev-co-step-icon { width: 40px !important; height: 40px !important; background: var(--brand-light) !important; color: var(--brand-primary) !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; }
.hkdev-co-card-header h3 { margin: 0 !important; font-size: 20px !important; font-weight: 800 !important; color: var(--text-dark) !important; line-height: 1.2 !important; }

.mini-header { border-bottom: none !important; margin-bottom: 15px !important; padding-bottom: 0 !important; }
.mini-header h4 { margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; color: var(--text-dark) !important; line-height: 1.2 !important; }
.hkdev-co-step-icon.mini { width: 32px !important; height: 32px !important; font-size: 13px !important; border-radius: 8px !important; }

/* =========================================
   Input Forms (Native WooCommerce Reset & UI)
========================================= */
.hkdev-co-form-area { margin-bottom: 25px !important; padding-bottom: 20px !important; border-bottom: 1px dashed var(--co-border-color) !important; }

/* WooCommerce Default Resets */
.hkdev-co-form-group.form-row { float: none !important; width: 100% !important; margin: 0 0 20px 0 !important; padding: 0 !important; }
.hkdev-co-form-group .woocommerce-input-wrapper { display: block !important; width: 100% !important; }

/* Label Styling */
.hkdev-co-form-group label { display: block !important; font-size: 13px !important; font-weight: 700 !important; margin-bottom: 8px !important; color: var(--text-muted) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important;}
.hkdev-co-form-group label .required, .hkdev-co-form-group label .req { color: #e53935 !important; text-decoration: none !important; font-weight: bold !important; border: none !important; }

/* Inputs, Textareas, and Selects */
.hkdev-co-form-group input, 
.hkdev-co-form-group textarea, 
.hkdev-co-form-group select,
.select2-container--default .select2-selection--single { 
    width: 100% !important; padding: 15px 18px !important; border: 1px solid var(--co-border-color) !important; border-radius: 12px !important; 
    font-size: 15px !important; font-weight: 600 !important; transition: all 0.3s ease !important; box-sizing: border-box !important; background: #fff !important; color: var(--text-dark) !important;
    font-family: inherit !important; height: auto !important; margin: 0 !important; outline: none !important;
}

/* Custom Select Arrow with new text-muted color */
.hkdev-co-form-group select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%237c8978" viewBox="0 0 16 16"><path d="M4 6h8l-4 5z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    padding-right: 40px !important;
}

.hkdev-co-form-group input:focus, 
.hkdev-co-form-group textarea:focus, 
.hkdev-co-form-group select:focus,
.select2-container--default.select2-container--focus .select2-selection--single { 
    border-color: var(--brand-primary) !important; background: #fff !important; box-shadow: 0 0 0 4px var(--brand-light) !important; 
}

/* Fix for Select2 (WooCommerce default dropdown script) */
.select2-container .select2-selection--single .select2-selection__rendered { padding: 0 !important; line-height: normal !important; color: var(--text-dark) !important; font-weight: 600 !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow { display: none !important; }

/* =========================================
   Cart Items Styling
========================================= */
.hkdev-co-summary-items-list { margin-bottom: 20px !important; }
.hkdev-co-summary-item { display: flex !important; gap: 15px !important; padding: 15px 0 !important; border-bottom: 1px solid var(--co-border-color) !important; position: relative !important; align-items: center !important; }
.hkdev-co-summary-item:last-child { border-bottom: none !important; }
.item-img-box { width: 75px !important; height: 75px !important; border-radius: 12px !important; overflow: hidden !important; border: 1px solid var(--co-border-color) !important; background: var(--bg-soft) !important; padding: 5px !important; flex-shrink: 0 !important; }
.item-img-box img { width: 100% !important; height: 100% !important; object-fit: contain !important; border-radius: 8px !important; }

.item-meta { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; }
.item-name { font-size: 15px !important; font-weight: 700 !important; margin: 0 0 4px !important; color: var(--text-dark) !important; line-height: 1.4 !important; }
.item-price-bottom { margin-bottom: 10px !important; }
.item-price-val { font-weight: 800 !important; font-size: 16px !important; color: var(--brand-primary) !important; }

/* Quantity Box */
.hkdev-co-item-qty-row { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.hkdev-co-qty-stepper-ui { display: inline-flex !important; align-items: center !important; background: var(--bg-soft) !important; border: 1px solid var(--co-border-color) !important; border-radius: 8px !important; overflow: hidden !important; height: 34px !important; }
.hkdev-co-qty-mod { border: none !important; background: transparent !important; padding: 0 12px !important; cursor: pointer !important; color: var(--text-dark) !important; font-size: 18px !important; transition: 0.2s !important; display: flex !important; align-items: center !important; justify-content: center !important; outline: none !important; font-weight: 800 !important;}
.hkdev-co-qty-mod:hover { background: rgba(24, 184, 63, 0.15) !important; color: var(--brand-primary) !important;}
.hkdev-co-qty-val { padding: 0 12px !important; font-size: 14px !important; font-weight: 800 !important; min-width: 30px !important; text-align: center !important; border-left: 1px solid var(--co-border-color) !important; border-right: 1px solid var(--co-border-color) !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--text-dark) !important; }

.hkdev-co-item-remove-trigger { background: transparent !important; border: none !important; color: var(--text-muted) !important; cursor: pointer !important; transition: 0.2s !important; font-size: 18px !important; padding: 5px !important; display: flex !important; align-items: center !important; justify-content: center !important; outline: none !important; }
.hkdev-co-item-remove-trigger:hover { color: #e53935 !important; }

/* =========================================
   Coupon Section (Pill Style)
========================================= */
.hkdev-co-coupon-wrap { margin-top: 20px !important; padding-top: 20px !important; border-top: 1px dashed var(--co-border-color) !important; }
.hkdev-co-coupon-box { display: flex !important; align-items: center !important; background: var(--bg-soft) !important; border: 1px solid var(--co-border-color) !important; border-radius: 12px !important; overflow: hidden !important; padding: 4px !important; transition: 0.3s !important; }
.hkdev-co-coupon-box:focus-within { border-color: var(--brand-primary) !important; box-shadow: 0 0 0 3px var(--brand-light) !important; background: #fff !important;}
.hkdev-co-coupon-box i { color: var(--text-muted) !important; padding: 0 15px !important; font-size: 16px !important; }
.hkdev-co-coupon-box input { flex: 1 !important; border: none !important; background: transparent !important; padding: 12px 0 !important; font-size: 14px !important; outline: none !important; color: var(--text-dark) !important; font-family: inherit !important; font-weight: 600 !important;}
.hkdev-co-coupon-box button { background: var(--text-dark) !important; color: #fff !important; border: none !important; padding: 0 20px !important; height: 40px !important; border-radius: 8px !important; font-weight: 700 !important; cursor: pointer !important; transition: 0.2s !important; font-size: 13px !important; outline: none !important; font-family: inherit !important; }
.hkdev-co-coupon-box button:hover { background: var(--brand-primary) !important; }
.hkdev-co-coupon-box button:disabled { opacity: 0.7 !important; cursor: not-allowed !important; }

/* =========================================
   Shipping & Payment Selection Cards
========================================= */
.hkdev-co-delivery-selection-wrap { margin-top: 30px !important; }
.hkdev-co-mini-title { font-size: 14px !important; font-weight: 800 !important; color: var(--text-dark) !important; margin-bottom: 15px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; line-height: 1.2 !important; }

.hkdev-co-radio-row, .hkdev-co-pay-pill-box { 
    display: block !important; border: 1px solid var(--co-border-color) !important; padding: 18px 20px !important; border-radius: 14px !important; cursor: pointer !important; transition: all 0.2s ease !important; margin-bottom: 12px !important; background: #fff !important; 
}
.hkdev-co-radio-row:hover, .hkdev-co-pay-pill-box:hover { border-color: rgba(24, 184, 63, 0.4) !important; }
.hkdev-co-radio-row.active, .hkdev-co-pay-pill-box.active { 
    border-color: var(--brand-primary) !important; background: var(--brand-light) !important; box-shadow: 0 4px 15px rgba(24, 184, 63, 0.1) !important; 
}

.hkdev-co-radio-row input, .hkdev-co-pay-pill-box input { display: none !important; }
.hkdev-co-radio-box-ui { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 15px !important; }
.hkdev-co-pay-pill-box { display: flex !important; align-items: center !important; gap: 15px !important; font-size: 15px !important; font-weight: 700 !important; color: var(--text-dark) !important;}

/* Checkmark Indicator */
.hkdev-co-radio-indicator, .pay-radio-icon { 
    width: 22px !important; height: 22px !important; border: 2px solid #cdd6ca !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; color: transparent !important; font-size: 11px !important; transition: 0.2s !important; background: #fff !important;
}
.hkdev-co-radio-row.active .hkdev-co-radio-indicator, .hkdev-co-pay-pill-box.active .pay-radio-icon { 
    background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: #fff !important; 
}
.label-text { flex: 1 !important; font-weight: 700 !important; font-size: 15px !important; color: var(--text-dark) !important;}
.price-text { font-weight: 800 !important; color: var(--brand-primary) !important; font-size: 15px !important;}

/* =========================================
   Totals & Calculations
========================================= */
.hkdev-co-calculation-wrap { margin-top: 10px !important; }
.hkdev-co-calc-line { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 10px 0 !important; font-size: 15px !important; font-weight: 600 !important; color: var(--text-muted) !important; border-bottom: 1px solid var(--co-border-color) !important; }
.hkdev-co-calc-line strong { font-weight: 800 !important; color: var(--text-dark) !important; font-size: 16px !important;}

.coupon-line { background: #fef2f2 !important; padding: 10px 15px !important; border-radius: 8px !important; border-bottom: none !important; margin: 10px 0 !important; border: 1px dashed #fca5a5 !important; }
.coupon-line .coupon-title { color: #e53935 !important; font-weight: 700 !important; font-size: 14px !important; }
.coupon-line .coupon-val strong { color: #e53935 !important; }
.hkdev-co-remove-coupon { color: var(--text-muted) !important; font-size: 16px !important; margin-left: 10px !important; transition: 0.2s !important; text-decoration: none !important;}
.hkdev-co-remove-coupon:hover { color: #e53935 !important; }

.grand-total-line { border-top: 2px dashed var(--co-border-color) !important; padding-top: 20px !important; margin-top: 15px !important; align-items: flex-end !important;}
.grand-total-line span { font-size: 16px !important; font-weight: 800 !important; text-transform: uppercase !important; color: var(--text-dark) !important;}
.grand-total-line .total-amt { font-size: 28px !important; font-weight: 800 !important; color: var(--brand-primary) !important; line-height: 1 !important;}

/* =========================================
   Confirm Button
========================================= */
.hkdev-co-confirm-btn { 
    width: 100% !important; padding: 18px !important; 
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-hover)) !important; 
    color: #fff !important; border: none !important; border-radius: 14px !important; 
    font-weight: 800 !important; font-size: 18px !important; cursor: pointer !important; transition: 0.3s ease !important; margin-top: 25px !important; 
    display: flex !important; align-items: center !important; justify-content: center !important; 
    box-shadow: 0 9px 20px rgba(24, 184, 63, 0.22) !important; outline: none !important; font-family: inherit !important; 
}
.hkdev-co-confirm-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 26px rgba(24, 184, 63, 0.3) !important; }

/* Loaders and Empty States */
#hkdev-co-global-loader { display: none !important; position: fixed !important; inset: 0 !important; background: rgba(255,255,255,0.85) !important; z-index: 9999 !important; align-items: center !important; justify-content: center !important; backdrop-filter: blur(4px) !important; }
.loader-box-inner { background: var(--text-dark) !important; color: #fff !important; padding: 15px 35px !important; border-radius: 50px !important; font-weight: 700 !important; font-size: 15px !important; box-shadow: 0 10px 30px rgba(7,16,6,0.1) !important;}

.hkdev-co-empty-cart-wrap { text-align: center !important; padding: 80px 20px !important; background: #fff !important; border-radius: 24px !important; border: 1px solid var(--co-border-color) !important; max-width: 600px !important; margin: 40px auto !important; box-shadow: 0 8px 24px rgba(7, 16, 6, 0.04) !important;}
.empty-icon-circle { width: 100px !important; height: 100px !important; background: var(--bg-soft) !important; color: var(--brand-primary) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 40px !important; margin: 0 auto 25px !important; }

/* =========================================
   Toast Notification Styling
========================================= */
.hkdev-co-toast {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.8) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: #fff !important;
    color: var(--text-dark) !important;
    padding: 18px 25px !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 40px rgba(7,16,6,0.15) !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    z-index: 99999 !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    border-left: 5px solid var(--brand-primary) !important;
    width: max-content !important;
    max-width: 90vw !important;
}
.hkdev-co-toast.show { 
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) scale(1) !important; 
}
.hkdev-co-toast.error { border-left-color: #e53935 !important; }
.hkdev-co-toast.error .toast-icon { color: #e53935 !important; }
.hkdev-co-toast .toast-icon { color: var(--brand-primary) !important; font-size: 22px !important; display: flex !important; align-items: center !important; justify-content: center !important;}

/* =========================================
   Thank You Page Adjustments
========================================= */
.hkdev-co-success-hero { padding: 50px 30px !important; border-radius: 24px !important; border: 1px solid var(--co-border-color) !important; background: linear-gradient(180deg, var(--bg-soft) 0%, #ffffff 100%) !important; text-align: center !important; margin-bottom: 30px !important;}
.success-anim-icon { font-size: 70px !important; color: var(--brand-primary) !important; margin-bottom: 15px !important; }
.hkdev-co-success-hero h2 { color: var(--brand-primary) !important; margin-bottom: 10px !important; font-weight: 800 !important; font-size: 26px !important; line-height: 1.3 !important;}
.hkdev-co-success-hero p { margin-bottom: 5px !important; font-weight: 600 !important; }

.hkdev-co-info-cards-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 15px !important; margin-bottom: 25px !important; }
.hkdev-co-info-card { background: var(--bg-soft) !important; padding: 15px !important; border-radius: 12px !important; text-align: center !important; border: 1px solid var(--co-border-color) !important; }
.hkdev-co-info-card .label { display: block !important; font-size: 11px !important; text-transform: uppercase !important; color: var(--text-muted) !important; font-weight: 800 !important; margin-bottom: 5px !important; }
.hkdev-co-info-card .val { display: block !important; font-size: 15px !important; font-weight: 800 !important; color: var(--brand-primary) !important; }

.hkdev-co-thankyou-content-grid { display: grid !important; grid-template-columns: 1.3fr 0.7fr !important; gap: 25px !important; }
.hkdev-co-thankyou-section { background: #fff !important; border-radius: 16px !important; border: 1px solid var(--co-border-color) !important; padding: 25px !important; box-shadow: 0 4px 14px rgba(7, 16, 6, 0.03) !important; height: fit-content !important; }
.hkdev-co-thankyou-section h3 { font-size: 18px !important; font-weight: 800 !important; color: var(--brand-primary) !important; border-bottom: 2px solid var(--brand-light) !important; padding-bottom: 12px !important; margin-bottom: 20px !important; line-height: 1.2 !important;}

.summary-table-wrap { margin-bottom: 20px !important; }
.hkdev-co-summary-table-row { display: flex !important; align-items: center !important; gap: 15px !important; padding: 12px 0 !important; border-bottom: 1px solid var(--co-border-color) !important; }
.prod-img { width: 50px !important; height: 50px !important; border-radius: 8px !important; overflow: hidden !important; border: 1px solid var(--co-border-color) !important; background: var(--bg-soft) !important; flex-shrink: 0 !important;}
.prod-img img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.prod-info .name { display: block !important; font-size: 14px !important; font-weight: 700 !important; color: var(--text-dark) !important; }
.prod-info .qty { font-size: 12px !important; font-weight: 600 !important; color: var(--text-muted) !important; }
.prod-total { flex: 1 !important; text-align: right !important; font-weight: 800 !important; color: var(--brand-primary) !important; }

.hkdev-co-summary-totals-footer { margin-top: 15px !important; }
.foot-row { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 6px 0 !important; font-size: 15px !important; color: var(--text-muted) !important; font-weight: 600 !important;}
.foot-row strong { font-weight: 800 !important; color: var(--text-dark) !important; }
.grand-total { font-size: 20px !important; font-weight: 800 !important; color: var(--brand-primary) !important; margin-top: 15px !important; border-top: 2px dashed var(--co-border-color) !important; padding-top: 15px !important; }
.grand-total strong { color: var(--brand-primary) !important; }

.hkdev-co-address-box p { margin: 8px 0 !important; font-size: 14px !important; color: var(--text-dark) !important; font-weight: 600 !important;}
.hkdev-co-address-box i { color: var(--brand-primary) !important; width: 20px !important; }
.hkdev-co-qr-block { text-align: center !important; background: var(--bg-soft) !important; border-radius: 12px !important; padding: 20px !important; margin-top: 20px !important; border: 1px solid var(--co-border-color) !important; }
.hkdev-co-qr-block img { width: 110px !important; border-radius: 8px !important; border: 4px solid #fff !important; margin-bottom: 5px !important; }

.hkdev-co-shop-more-btn { width: 100% !important; padding: 16px !important; background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary)) !important; color: var(--text-dark) !important; border: none !important; border-radius: 12px !important; font-weight: 800 !important; font-size: 16px !important; cursor: pointer !important; transition: 0.3s !important; margin-top: 20px !important; display: block !important; text-align: center !important; text-decoration: none !important; box-shadow: 0 6px 18px rgba(7, 16, 6, 0.08) !important;}
.hkdev-co-shop-more-btn:hover { transform: translateY(-2px) !important; color: var(--text-dark) !important; box-shadow: 0 10px 22px rgba(24, 184, 63, 0.15) !important;}

.fade-in { animation: fadeIn 0.6s ease-in-out !important; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Responsive adjustments */
@media (max-width: 900px) { 
    .hkdev-co-checkout-grid { grid-template-columns: 1fr !important; gap: 25px !important;} 
    .hkdev-co-section-card { padding: 25px 20px !important; }
    .grand-total-line .total-amt { font-size: 24px !important; }
    .item-img-box { width: 65px !important; height: 65px !important; }
    .hkdev-co-thankyou-content-grid { grid-template-columns: 1fr !important; } 
    .hkdev-co-info-cards-grid { grid-template-columns: 1fr !important; }
}