/* Frontend Custom CSS - Improved UI/UX with standard color scheme */

/* Primary color: #233e78 (blue) */
/* Secondary color: #cd203b (red) */

/* Card headers and buttons */
.card-header.bg-primary {
    background-color: #233e78 !important;
}

.card-header.bg-success {
    background-color: #cd203b !important;
}

.btn-primary {
    background-color: #233e78 !important;
    border-color: #233e78 !important;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #1a2f5c !important;
    border-color: #1a2f5c !important;
}

.btn-outline-primary {
    color: #233e78 !important;
    border-color: #233e78 !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: #233e78 !important;
    color: #fff !important;
}

/* Text colors */
.text-primary {
    color: #233e78 !important;
}

/* Form elements */
.form-check-input:checked {
    background-color: #233e78 !important;
    border-color: #233e78 !important;
}

/* ===== GLOBAL FORM ELEMENTS STYLING ===== */

/* ===== BẮT ĐẦU KHỐI CSS ĐÃ NÂNG CẤP ===== */
/* ===== Upgraded Button-Style Radio Buttons with Shadow/Hover Effects ===== */
.form-check.custom-radio {
    padding-left: 0 !important;
    margin-bottom: 10px !important;
    display: inline-block !important;
    margin-right: 10px !important;
}

.form-check.custom-radio .form-check-input {
    display: none !important;
}

.form-check.custom-radio .form-check-label {
    display: block !important;
    padding: 10px 20px !important;
    background-color: #ffffff !important;
    border: 1px solid #e9ecef !important; /* Viền xám nhạt */
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    font-weight: 500 !important;
    color: #333 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important; /* Thêm bóng đổ mặc định */
}

/* Hiệu ứng khi di chuột */
.form-check.custom-radio .form-check-label:hover {
    transform: translateY(-2px) !important; /* Hiệu ứng nhấc lên */
    box-shadow: 0 5px 12px rgba(0,0,0,0.1) !important; /* Bóng đổ đậm hơn */
    border-color: #dee2e6 !important;
}

/* Hiệu ứng khi được chọn */
.form-check.custom-radio .form-check-input:checked + .form-check-label {
    background-color: #cd203b !important; /* Màu đỏ (màu phụ) */
    color: white !important;
    border-color: #cd203b !important;
    transform: translateY(-2px) !important; /* Giữ trạng thái được nhấc lên */
    box-shadow: 0 5px 15px rgba(205, 32, 59, 0.35) !important; /* Bóng đổ màu đỏ rõ rệt */
}

/* CSS cho phần giá tiền bên trong nút (nếu có) */
.form-check.custom-radio .form-check-label span {
    color: #cd203b !important;
    transition: all 0.2s ease !important;
}
.form-check.custom-radio .form-check-input:checked + .form-check-label span {
    color: white !important;
}
/* ===== KẾT THÚC KHỐI CSS ĐÃ NÂNG CẤP ===== */


/* Force radio buttons to stay in a single row */
.row.radio-button-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    margin-bottom: 15px !important;
    scrollbar-width: none !important; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none !important; /* Hide scrollbar for IE and Edge */
}

.row.radio-button-row::-webkit-scrollbar {
    display: none !important; /* Hide scrollbar for Chrome, Safari, and Opera */
}

.radio-button-row .col-auto {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding-right: 10px !important;
}


/* ===== BẮT ĐẦU: CSS CHO NÚT GẠT (TOGGLE) - PHIÊN BẢN NHỎ GỌN ===== */
.form-check.form-switch {
    padding-left: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.form-switch .form-check-input {
    width: 42px !important;              /* Kích thước mới, nhỏ hơn */
    height: 24px !important;
    cursor: pointer !important;
    border-radius: 24px !important;
    position: relative !important;
    background-image: none !important;
    transition: background-color 0.2s ease-in-out !important;
    vertical-align: middle;
    margin-top: 0 !important; /* Remove default top margin */
}

/* Nút tròn bên trong (handle) */
.form-switch .form-check-input::after {
    content: '' !important;
    position: absolute !important;
    top: 1px !important; /* GIÁ TRỊ ĐÚNG LÀ 2PX */
    left: 2px !important;
    width: 20px !important;
    height: 20px !important;
    background-color: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
    transition: transform 0.2s ease-in-out !important;
}

/* Trạng thái TẮT (OFF) */
.form-switch .form-check-input {
    background-color: #e9e9eb !important;
    border: 1px solid #e1e1e6 !important;
}

/* Trạng thái BẬT (ON) */
.form-switch .form-check-input:checked {
    background-color: #34c759 !important;
    border-color: #34c759 !important;
}

/* Di chuyển nút tròn khi BẬT */
.form-switch .form-check-input:checked::after {
    transform: translateX(18px) !important;
}

/* Bỏ hiệu ứng focus mặc định để giữ sự tối giản */
.form-switch .form-check-input:focus {
    box-shadow: none !important;
    border-color: #d0d0d5 !important;
}
.form-switch .form-check-input:checked:focus {
    border-color: #34c759 !important;
}
/* ===== KẾT THÚC: CSS CHO NÚT GẠT (TOGGLE) - PHIÊN BẢN NHỎ GỌN ===== */


/* Special styling for passenger insurance toggle */
#passenger_toggle {
    border: 2px solid #d0d0d0 !important; /* Thicker border for passenger insurance toggle */
}

#passenger_toggle:checked {
    border: 2px solid #233e78 !important;
    box-shadow: 0 0 6px rgba(35, 62, 120, 0.4) !important;
}

/* Card headers with icons */
.card-header.bg-primary i,
.card-header.bg-danger i {
    margin-right: 0.5rem !important;
}

.card-header.d-flex.justify-content-between.align-items-center {
    display: flex !important;
    align-items: center !important;
}

/* Alert boxes */
.alert-info {
    background-color: #e8edf7 !important;
    border-color: #c5d0e6 !important;
    color: #233e78 !important;
}

.alert-warning {
    background-color: #fff5f6 !important;
    border-color: #ffd6db !important;
    color: #cd203b !important;
}

.alert-danger {
    background-color: #ffeaed !important;
    border-color: #ffc5cc !important;
    color: #cd203b !important;
}

/* Icons */
.fa-info-circle, .fa-shield-alt, .fa-bolt, .fa-headset {
    color: #233e78 !important;
}

.fa-exclamation-triangle {
    color: #cd203b !important;
}

/* Benefits list */
.benefits-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    list-style-type: none;
}

.benefits-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #233e78;
    font-weight: bold;
}

/* Total price */
.total-price {
    padding: 1rem;
    border-radius: 0.375rem;
    background-color: #f8f9fa;
}

/* Improve card appearance */
.card {
    border-radius: 0.5rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    border: 1px solid #e9ecef;
}

.card-header {
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
}

/* Improve form spacing */
.form-check {
    margin-bottom: 0.5rem;
}

/* ===== GLOBAL STYLING FOR ALL FRONTEND PAGES ===== */

/* Primary and secondary colors */
:root {
    --primary-color: #233e78; /* Blue */
    --primary-color-light: #3a5ca0;
    --primary-color-dark: #1a2f5c;
    --secondary-color: #cd203b; /* Red */
    --secondary-color-light: #e13d56;
    --secondary-color-dark: #a91930;
}

/* Apply consistent styling to all buttons */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-color-dark) !important;
    border-color: var(--primary-color-dark) !important;
}

.btn-secondary, .btn-danger {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.btn-secondary:hover, .btn-secondary:focus,
.btn-danger:hover, .btn-danger:focus {
    background-color: var(--secondary-color-dark) !important;
    border-color: var(--secondary-color-dark) !important;
}

.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Consistent text colors */
.text-primary {
    color: var(--primary-color) !important;
}

.text-secondary, .text-danger {
    color: var(--secondary-color) !important;
}

/* Background colors */
.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-secondary, .bg-danger {
    background-color: var(--secondary-color) !important;
}

/* Card styling */
.card {
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.card-header {
    padding: 1rem 1.25rem !important;
    font-weight: 600 !important;
}

.card-header.bg-primary {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.card-header.bg-danger {
    background-color: var(--secondary-color) !important;
    color: white !important;
}

/* Form controls */
.form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(35, 62, 120, 0.25) !important;
}

/* Progress bars */
.progress-bar {
    background-color: var(--primary-color) !important;
}

/* Links */
a {
    color: var(--primary-color) !important;
    text-decoration: none !important;
}

a:hover {
    color: var(--primary-color-dark) !important;
    text-decoration: none !important;
}

/* Global rule to ensure no underlines on any links */
a, a:hover, a:focus, a:active,
.nav-link, .nav-link:hover, .nav-link:focus, .nav-link:active,
.list-group-item, .list-group-item:hover, .list-group-item:focus, .list-group-item:active,
.footer a, .footer a:hover, .footer a:focus, .footer a:active {
    text-decoration: none !important;
}

/* Tailwind-specific classes to override hover underline */
.hover\:underline, .hover\:underline:hover,
.hover\:text-decoration-underline, .hover\:text-decoration-underline:hover,
.hover\:no-underline:hover, .no-underline:hover {
    text-decoration: none !important;
}

/* Bootstrap navbar specific overrides */
.navbar .nav-link,
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link:active,
.navbar-nav .nav-item .nav-link,
.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item .nav-link:focus,
.navbar-nav .nav-item .nav-link:active {
    text-decoration: none !important;
}

/* Step indicators for wizard */
.step-indicator.active {
    color: var(--primary-color) !important;
    font-weight: 600 !important;
}

/* Price text */
.price, .text-price {
    color: var(--secondary-color) !important;
    font-weight: 600 !important;
}

/* Consistent font styling */
body, .form-control, .btn {
    font-family: 'Roboto', 'Segoe UI', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600 !important;
    color: #333 !important;
}

/* ===== SECTION TITLES STYLING ===== */

/* Card headers with colored backgrounds */
.card-header.bg-primary {
    background-color: var(--primary-color) !important;
    color: white !important;
    border-bottom: none !important;
}

.card-header.bg-danger,
.card-header.bg-secondary {
    background-color: var(--secondary-color) !important;
    color: white !important;
    border-bottom: none !important;
}

/* Section titles inside cards */
.card-header h4 {
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    margin-bottom: 0 !important;
    color: white !important;
}

/* Icons in section headers */
.card-header i {
    margin-right: 0.5rem !important;
    font-size: 1.2rem !important;
}

/* Section sub-headings */
.card-body h5 {
    color: var(--primary-color) !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    margin-bottom: 1rem !important;
}

/* Section sub-headings in accident insurance section */
#accident_section h5 {
    color: var(--secondary-color) !important;
}

/* Section titles outside of cards */
.section-title {
    color: var(--primary-color) !important;
    font-weight: 600 !important;
    font-size: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 2px solid var(--primary-color-light) !important;
}

/* Page titles */
.page-title {
    color: var(--primary-color) !important;
    font-weight: 700 !important;
    font-size: 1.75rem !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
}

/* ===== STANDARDIZED BUTTON STYLING ===== */

/* Standard button sizing */
.btn {
    padding: 0.5rem 1.25rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    border-radius: 0.375rem !important;
    transition: all 0.2s ease-in-out !important;
    font-weight: 500 !important;
}

/* Large buttons */
.btn-lg {
    padding: 0.75rem 1.5rem !important;
    font-size: 1.125rem !important;
    border-radius: 0.5rem !important;
}

/* Small buttons */
.btn-sm {
    padding: 0.25rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.25rem !important;
}

/* Consistent styling for primary buttons */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-color-dark) !important;
    border-color: var(--primary-color-dark) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Consistent styling for secondary buttons */
.btn-secondary, .btn-danger {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.btn-secondary:hover, .btn-secondary:focus,
.btn-danger:hover, .btn-danger:focus {
    background-color: var(--secondary-color-dark) !important;
    border-color: var(--secondary-color-dark) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Consistent styling for outline buttons */
.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--primary-color) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Wizard navigation buttons */
.wizard-navigation .btn {
    min-width: 150px !important;
    text-align: center !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 1.125rem !important;
    border-radius: 0.5rem !important;
    margin: 0 5px !important;
}

.wizard-navigation {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 15px 0 !important;
}

/* Footer specific link styling */
.footer a {
    color: #ffffff !important;
}

.footer a:hover {
    color: var(--accent-color) !important;
}

/* Card header text color fix for better readability */
.card-header.bg-primary h5,
.card-header.bg-primary h4,
.card-header.bg-primary h3,
.card-header.bg-primary {
    color: #ffffff !important;
}

/* Logout button styling */
.btn-danger {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Ensure text-danger is always red, even when bold or in other contexts */
.text-danger,
.text-danger.fw-bold,
td.text-danger,
td.text-danger.fw-bold,
span.text-danger,
span.text-danger.fw-bold,
div.text-danger,
div.text-danger.fw-bold {
    color: #cd203b !important;
}

/* Additional specific rule for table cells with text-danger class */
table td.text-danger,
table td.text-danger.fw-bold,
.table td.text-danger,
.table td.text-danger.fw-bold,
.table > tbody > tr > td.text-danger,
.table > tbody > tr > td.text-danger.fw-bold {
    color: #cd203b !important;
}