/* ==========================================================================
   GLOBAL RESET & BASE FIXES
   ========================================================================== */
.fcs-active .col-inner { transition: all 0.3s ease; }

/* Sticky Sidebar cho PC */
@media (min-width: 850px) {
    .fcs-active .checkout-sidebar {
        position: -webkit-sticky; position: sticky; top: 100px; z-index: 9;
    }
}

/* Reset Payment Box */
.fcs-active #payment { background: transparent; border-radius: 5px; }
.fcs-active #payment ul.payment_methods { border-bottom: none; padding: 0; }
.fcs-active #payment .payment_box {
    background-color: transparent; font-size: 0.9em; padding: 15px 0;
    color: inherit; margin: 10px 0 20px 0 !important;
}
.fcs-active #payment ul.payment_methods li input[type="radio"] {
    opacity: 0; position: absolute; z-index: -1;
}

/* ==========================================================================
   STYLE 1: MODERN CLEAN
   ========================================================================== */
.fcs-style-1 { background-color: #f3f4f6; }

.fcs-style-1 #customer_details, .fcs-style-1 .checkout-sidebar {
    background: #fff; padding: 30px; border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.fcs-style-1 .fl-wrap input.input-text, .fcs-style-1 select, .fcs-style-1 textarea {
    background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px;
    padding-top: 22px; height: 56px;
}
.fcs-style-1 .fl-wrap.fl-is-active input.input-text {
    background: #fff; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.fcs-style-1 .fl-wrap .fl-label { color: #9ca3af; top: 18px; }
.fcs-style-1 .fl-wrap.fl-is-active .fl-label { color: #3b82f6; font-weight: 600; top: 8px; }

/* Payment Card */
.fcs-style-1 #payment ul.payment_methods li label {
    display: block; background: #fff; border: 1px solid #e5e7eb;
    padding: 15px; border-radius: 8px; cursor: pointer; transition: 0.2s;
}
.fcs-style-1 #payment ul.payment_methods li input:checked + label {
    border-color: #3b82f6; background: #eff6ff; color: #1d4ed8;
}
.fcs-style-1 #place_order {
    background: #3b82f6; border-radius: 8px; font-weight: 600; text-transform: none;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.5);
}


/* ==========================================================================
   STYLE 2: MINIMALIST
   ========================================================================== */
.fcs-style-2 { background: #fff; }

.fcs-style-2 #customer_details, .fcs-style-2 .checkout-sidebar {
    border: 2px solid #000; padding: 25px; background: #fff;
}
.fcs-style-2 h3 {
    text-transform: uppercase; border-bottom: 2px solid #000; letter-spacing: -1px;
}

.fcs-style-2 .fl-wrap input.input-text, .fcs-style-2 select {
    border: none; border-bottom: 2px solid #ddd; background: transparent;
    border-radius: 0; padding-left: 0;
}
.fcs-style-2 .fl-wrap.fl-is-active input.input-text { border-bottom-color: #000; }
.fcs-style-2 .fl-wrap .fl-label { left: 0; text-transform: lowercase; }

.fcs-style-2 #payment ul.payment_methods li label {
    border: 1px solid #000; padding: 15px; display: block; margin-bottom: 10px;
}
.fcs-style-2 #payment ul.payment_methods li input:checked + label {
    background: #000; color: #fff;
}
.fcs-style-2 #place_order {
    background: #000; color: #fff; border-radius: 0; letter-spacing: 1px;
}


/* ==========================================================================
   STYLE 3: DARK LUXURY (Đã Fix lỗi nền trắng input)
   ========================================================================== */
.fcs-style-3 { background-color: #121212; color: #d4af37; }
.fcs-style-3 h3, .fcs-style-3 label, .fcs-style-3 span, .fcs-style-3 p { color: #d4af37; }

.fcs-style-3 #customer_details, .fcs-style-3 .checkout-sidebar {
    background: #1c1c1c; border: 1px solid #333; padding: 30px; border-radius: 4px;
}

/* Fix Input Background */
.fcs-style-3 .fl-wrap input.input-text, .fcs-style-3 select, .fcs-style-3 textarea {
    background-color: #2a2a2a !important; border: 1px solid #444 !important;
    color: #fff !important; border-radius: 2px; height: 50px;
}
/* Fix lỗi Autofill của Chrome làm trắng input */
.fcs-style-3 input:-webkit-autofill,
.fcs-style-3 input:-webkit-autofill:hover, 
.fcs-style-3 input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #2a2a2a inset !important;
    -webkit-text-fill-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s;
}

.fcs-style-3 .fl-wrap.fl-is-active input.input-text { border-color: #d4af37 !important; }
.fcs-style-3 .fl-wrap .fl-label { color: #888 !important; }
.fcs-style-3 .fl-wrap.fl-is-active .fl-label { color: #d4af37 !important; }

.fcs-style-3 #payment ul.payment_methods li label {
    background: #2a2a2a; border: 1px solid #444; padding: 15px; display: block; color: #bbb;
}
.fcs-style-3 #payment ul.payment_methods li input:checked + label {
    border-color: #d4af37; color: #d4af37; background: #1a1a1a;
}
.fcs-style-3 #place_order {
    background: linear-gradient(135deg, #d4af37, #b49321); color: #000;
    font-weight: 700; letter-spacing: 1px;
}


/* ==========================================================================
   STYLE 4: CORPORATE BLUE
   ========================================================================== */
.fcs-style-4 { }
.fcs-style-4 h3 {
    color: #0f4c81; background: #eef4f9; padding: 15px;
    border-left: 4px solid #0f4c81; margin-bottom: 25px;
}

.fcs-style-4 .fl-wrap input.input-text {
    background: #f8f9fa; border: 1px solid #cbd5e0; border-radius: 4px;
}
.fcs-style-4 .fl-wrap.fl-is-active input.input-text {
    background: #fff; border-color: #0f4c81;
}

.fcs-style-4 #payment ul.payment_methods li label {
    padding: 15px; border: 1px solid #eee; display: block; margin-bottom: 5px;
}
.fcs-style-4 #payment ul.payment_methods li input:checked + label {
    background: #eef4f9; color: #0f4c81; font-weight: bold; border-color: #0f4c81;
}
.fcs-style-4 #place_order { background-color: #0f4c81; border-radius: 4px; }


/* ==========================================================================
   STYLE 5: VIBRANT ORANGE
   ========================================================================== */
.fcs-style-5 { background: #fff8f5; }

.fcs-style-5 .checkout-sidebar {
    background: #fff; border-top: 4px solid #ff6b35;
    box-shadow: 0 10px 25px rgba(255, 107, 53, 0.1); padding: 25px;
}
.fcs-style-5 #customer_details { background: #fff; padding: 25px; }

.fcs-style-5 .fl-wrap.fl-is-active input.input-text { border-bottom: 2px solid #ff6b35; }
.fcs-style-5 .fl-wrap.fl-is-active .fl-label { color: #ff6b35; font-weight: 700; }

.fcs-style-5 .order-total .amount { color: #ff6b35; font-size: 1.4em; font-weight: 800; }
.fcs-style-5 #place_order {
    background: #ff6b35; border-radius: 30px; font-weight: 700; text-transform: uppercase;
}


/* ==========================================================================
   STYLE 6: COMPACT
   ========================================================================== */
.fcs-style-6 { font-size: 13px; }
.fcs-style-6 .row { max-width: 980px; margin: 0 auto; }
.fcs-style-6 .col-inner { padding: 15px !important; background: #fff; border: 1px solid #e1e1e1; }

.fcs-style-6 .fl-wrap input.input-text, .fcs-style-6 select {
    height: 40px; padding-top: 12px; padding-bottom: 0; font-size: 13px;
}
.fcs-style-6 .fl-wrap .fl-label { font-size: 11px; top: 12px; }
.fcs-style-6 .fl-wrap.fl-is-active .fl-label { font-size: 9px; top: 2px; }

.fcs-style-6 #place_order { padding: 10px; font-size: 13px; background: #444; }


/* ==========================================================================
   STYLE 7: MATERIAL DESIGN
   ========================================================================== */
.fcs-style-7 { }

.fcs-style-7 input.input-text {
    background: #f5f5f5; border-bottom: 2px solid #bdbdbd;
    border-top: none; border-left: none; border-right: none;
    border-radius: 4px 4px 0 0; transition: 0.3s;
}
.fcs-style-7 .fl-wrap.fl-is-active input.input-text {
    background: #e3f2fd; border-bottom-color: #2196f3;
}
.fcs-style-7 .fl-wrap.fl-is-active .fl-label { color: #2196f3; }

.fcs-style-7 #customer_details, .fcs-style-7 .checkout-sidebar {
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    padding: 25px; border-radius: 2px;
}
.fcs-style-7 #place_order {
    background: #2196f3; text-transform: uppercase; font-weight: 500; letter-spacing: 0.5px;
}


/* ==========================================================================
   STYLE 8: NEUMORPHISM (SOFT UI) - Đã Fix lỗi Background
   ========================================================================== */
.fcs-style-8 { background-color: #e0e5ec !important; color: #4d4d4d; }

.fcs-style-8 #customer_details, 
.fcs-style-8 .checkout-sidebar {
    background-color: #e0e5ec;
    border-radius: 20px;
    box-shadow: 20px 20px 60px #bec3c9, -20px -20px 60px #ffffff;
    padding: 30px; border: none;
}

/* Fix Input: Phải trùng màu nền và dùng inset shadow */
.fcs-style-8 .fl-wrap input.input-text, 
.fcs-style-8 .fl-wrap select,
.fcs-style-8 .fl-wrap textarea {
    background-color: #e0e5ec !important; /* Quan trọng */
    border: none !important;
    border-radius: 12px;
    box-shadow: inset 5px 5px 10px #bec3c9, inset -5px -5px 10px #ffffff;
    color: #4d4d4d;
    padding-left: 20px;
}

.fcs-style-8 .fl-wrap.fl-is-active .fl-label { color: #007aff; }

/* Payment */
.fcs-style-8 #payment ul.payment_methods li label {
    background-color: #e0e5ec;
    border-radius: 12px;
    box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #ffffff;
    color: #4d4d4d;
    border: none;
}
.fcs-style-8 #payment ul.payment_methods li input:checked + label {
    box-shadow: inset 5px 5px 10px #bec3c9, inset -5px -5px 10px #ffffff;
    color: #007aff;
}

.fcs-style-8 #place_order {
    background: #e0e5ec; color: #007aff; font-weight: 800; border-radius: 50px;
    box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #ffffff;
}
.fcs-style-8 #place_order:hover {
    box-shadow: inset 5px 5px 10px #bec3c9, inset -5px -5px 10px #ffffff;
    transform: none;
}


/* ==========================================================================
   STYLE 9: BRUTALISM
   ========================================================================== */
.fcs-style-9 { background-color: #fff; }

.fcs-style-9 #customer_details {
    border: 4px solid #000; box-shadow: 10px 10px 0px #000;
    padding: 25px; background: #ffeb3b; /* Vàng chanh */
}
.fcs-style-9 .checkout-sidebar {
    border: 4px solid #000; box-shadow: 10px 10px 0px #000;
    padding: 25px; background: #ff4081; /* Hồng đậm */
}

.fcs-style-9 input.input-text, .fcs-style-9 select {
    border: 3px solid #000 !important; border-radius: 0; background: #fff;
    font-weight: 700; color: #000; letter-spacing: 1px;
}
.fcs-style-9 .fl-label { color: #000; font-weight: 900; text-transform: uppercase; }

.fcs-style-9 #payment ul.payment_methods li label {
    border: 3px solid #000; background: #fff; font-weight: 700;
}
.fcs-style-9 #payment ul.payment_methods li input:checked + label {
    background: #000; color: #fff;
}

.fcs-style-9 #place_order {
    background: #000; color: #fff; border: none; text-transform: uppercase; font-size: 20px;
}
.fcs-style-9 #place_order:hover {
    background: #333; transform: translate(2px, 2px);
}


/* ==========================================================================
   STYLE 10: GLASSMORPHISM - Đã Fix Gradient & Readability
   ========================================================================== */
/* Tạo background gradient cố định để tạo hiệu ứng kính */
.fcs-style-10 {
    background: linear-gradient(45deg, #FC466B, #3F5EFB);
    background-attachment: fixed;
    min-height: 100vh;
}

.fcs-style-10 #customer_details, 
.fcs-style-10 .checkout-sidebar {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 30px;
    color: #fff;
}

.fcs-style-10 h3, .fcs-style-10 label, .fcs-style-10 span, .fcs-style-10 p, .fcs-style-10 th, .fcs-style-10 td {
    color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* Bóng chữ để dễ đọc */
    font-weight: 600;
}

/* Input Glass */
.fcs-style-10 .fl-wrap input.input-text, 
.fcs-style-10 .fl-wrap select,
.fcs-style-10 .fl-wrap textarea {
    background: rgba(0, 0, 0, 0.2) !important; /* Nền tối nhẹ để tương phản */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 10px;
    font-weight: 600;
}
/* Fix autofill cho style 10 */
.fcs-style-10 input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,0.5) inset !important;
    -webkit-text-fill-color: #fff !important;
}

.fcs-style-10 .fl-wrap.fl-is-active input { background: rgba(0,0,0,0.4) !important; }
.fcs-style-10 .fl-wrap.fl-is-active .fl-label { color: #fff; font-weight: 800; text-transform: uppercase; }

.fcs-style-10 #payment ul.payment_methods li label {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff;
}
.fcs-style-10 #payment ul.payment_methods li input:checked + label {
    background: rgba(255,255,255,0.3); border: 1px solid #fff;
}

.fcs-style-10 #place_order {
    background: rgba(255,255,255,0.95); color: #3F5EFB; font-weight: 800; border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}