/* 
==============================================
Global Stylesheet for Superspeed Orlando
==============================================
*/

/* 
----------------------------------------------
I. ROOT & THEME VARIABLES
----------------------------------------------
*/
:root {
    /* Theme Colors */
    --primary-red: #CB0808;
    --dark-red: #a50606;
    --color-success: #198754;
    --color-warning: #ffc107;
    --color-info: #0dcaf0;
    --color-dark: #333333;

    /* Background & Surface Colors */
    --light-bg: #f8f9fa;
    --surface: #ffffff;
    --bg-grey: #000000;
    --bg-grey: #9B9EA1;
    --color-white: #ffffff;

    /* Text Colors */
    --text-dark: #212529;
    --text-secondary: #6c757d;
    --text-light: #ffffff;

    /* Utility Colors */
    --color-border: #dee2e6;
    --color-backdrop: rgba(0, 0, 0, 0.7);
    --color-disabled-bg: #e9ecef;

    /* Effects */
    --shadow-hover: 0 1rem 3rem rgba(0, 0, 0, 0.15);
    --transition-pop: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* 
----------------------------------------------
II. GLOBAL ELEMENT & UTILITY STYLES
----------------------------------------------
*/
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    /* background-color: var(--light-bg) !important; */
}

/* Remove border-radius from all elements for a consistent sharp look */
* {
    border-radius: 0 !important;
}

h1, h5, .navbar-brand, .text-ci-red {
    color: var(--primary-red);
}

/* Explicitly set font for navbar-brand to ensure consistency */
.navbar-brand {
    font-family: Arial, sans-serif;
    font-size: 20px; /* Explicitly set to 20px */
    font-weight: bold; /* Make it bold for prominence */
}

.text-black {
    color: var(--text-dark) !important;
}

.text-danger {
    color: var(--primary-red) !important;
}

.text-primary {
    color: var(--primary-red) !important;
}

.bg-primary {
    background-color: var(--primary-red) !important;
    color: var(--color-white) !important; /* Ensure text is readable */
}


/* 
----------------------------------------------
III. COMPONENT STYLES (Buttons, Badges, Alerts)
----------------------------------------------
*/
.btn {
    font-size: 16px;
    font-family: Arial, sans-serif !important; /* Ensure all buttons use Arial font */
}

.btn-danger,
.btn-success {
    background-color: var(--primary-red);
    border-color: var(--primary-red);
    color: var(--color-white);
}

.btn-danger:hover,
.btn-success:hover {
    background-color: var(--dark-red);
    border-color: var(--dark-red);
    color: var(--color-white);
}

.btn-outline-danger {
    color: var(--primary-red);
    border-color: var(--primary-red);
}

.btn-outline-danger:hover {
    background-color: var(--primary-red);
    color: white;
}

.badge {
    font-size: 16px;
    font-weight: 400;
}

.badge.bg-danger {
    background-color: var(--primary-red) !important;
    color: white;
}

.alert-danger {
    background-color: var(--primary-red) !important;
    color: white;
    border-color: var(--primary-red);
}

/* 
----------------------------------------------
IV. ADMIN-SPECIFIC STYLES
----------------------------------------------
*/

/* Admin layout and typography */
.admin-body {
    padding-top: 70px; /* Offset fixed-top navbar */
}

.form-label.required:after {
    content: " *";
    color: var(--primary-red);
}

/* Admin Tables */
.table th, .table td {
    font-size: 18px;
    vertical-align: middle;
}

.table thead {
    background-color: #343a40;
    color: white;
}
.table th,
.table td strong {
    font-weight: normal !important; /* Override default bold styling */
}
/*
 * Fix for DataTables sorting icon breaking text-center alignment.
 * This adjusts the padding on centered, sortable headers to ensure the text remains centered.
 */
.table th.text-center.sorting,
.table th.text-center.sorting_asc,
.table th.text-center.sorting_desc {
    padding-left: 26px; /* Match the default padding-right to balance the cell */
}

/*
 * Fix for stacked Bootstrap modals. When a second modal is opened,
 * this ensures its backdrop appears correctly above the first modal.
 */
.modal-open .modal-backdrop.show:nth-of-type(2) {
    z-index: 1056;
}





/* Admin Dashboard Cards */
.manager-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid var(--color-border);
}
.manager-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.manager-card .card-body {
    color: var(--text-dark);
}
.manager-card .card-title i {
    color: var(--primary-red);
}

/* Admin Pagination */
.pagination .page-item.active .page-link {
    background-color: var(--primary-red);
    border-color: var(--primary-red);
    color: white;
}
.pagination .page-link {
    color: var(--primary-red);
}
.pagination .page-link:hover {
    background-color: #e9ecef;
}
.page-link.disabled, .disabled > .page-link {
    color: #6c757d;
}

/* 
----------------------------------------------
V. FULLCALENDAR OVERRIDES
----------------------------------------------
*/
.fc-event { cursor: pointer; }
.fc-timegrid-slot-label-cushion, .fc-timegrid-event-harness { cursor: pointer; }
.fc-daygrid-event { white-space: normal; width: 100%; margin-bottom: 2px !important; }
.fc-daygrid-day-frame { padding: 5px; }
.fc-col-header-cell-cushion { color: var(--primary-red) !important; text-decoration: none; }
.badge.fc-event-title { font-size: 16px !important; line-height: 1.5; padding: 0.4em 0.6em; }
.fc-daygrid-day-number {
    color: var(--primary-red);
    text-decoration: none; /* Remove underline if it's a link */
}


/* 
----------------------------------------------
VI. MISCELLANEOUS & PAGE-SPECIFIC
----------------------------------------------
*/

/* Login/Reset Password Pages */
body.login-body { 
    background-color: var(--bg-grey) !important; 
    color: var(--text-light); 
}
.login-container { max-width: 400px; margin: 100px auto 0; }
.login-card-header { background-color: var(--primary-red); color: white; font-weight: bold; }
.login-body .card { background-color: var(--bg-light); color: var(--text-light); }
.login-logo-card {
    background-color: rgba(255, 255, 255, 0.75) !important;
    border: none;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
}
.login-body .form-control {
    background-color: #333;
    color: var(--text-light);
    border-color: #444;
}
.login-card-body a { color: var(--text-light); }

/* Cancellation Policy Page */
.cancellation-container { max-width: 800px; background-color: #fff; padding: 30px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }

/* Cart Summary Box */
.cart-summary-box {
    background-color: var(--bg-grey);
    color: var(--text-light);
    padding: 1.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.cart-summary-box .text-secondary {
    color: var(--text-light) !important;
}

/* Make cart summary full-width on mobile */
@media (max-width: 991.98px) {
    .cart-summary-box {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }
}

/* Reduce size of cart item delete button on mobile */
@media (max-width: 575.98px) {
    #cartContent .btn-outline-danger {
        padding: 0.1rem 0.4rem;
        font-size: 0.8rem;
        margin-top: 0.5rem;
        margin-right: 0.5rem;
    }
}

/*
==============================================
VII. ADMIN-SPECIFIC FORM STYLES
==============================================
*/
.admin-body .form-check-input:checked,
.login-body .form-check-input:checked {
    background-color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
}

/* Ensure the checkmark/dot inside the checkbox/radio is also styled correctly */
.admin-body .form-check-input:checked[type=checkbox],
.login-body .form-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

@media (max-width: 575px) {
    .btn-header{
        font-size:14px;
        padding: 0.375rem 0.6rem; /* Adjust padding */
    }
    #btn-gift-card-header{
        width:100%;
        background-color: white !important;
    }
    #headerCartButton{
        width:100%;
    }
    .header-mobile-w-50{
        width:50%;
    }

}
@media (min-width: 576px) {
    .btn-header{
        font-size:20px;
    }
    .div-multidiscount-promo{
        margin: auto;
        width: 100%;
    }
    .div-multidiscount-promo p{
        font-size: 18px;
    }
    .div-multidiscount-promo small{
        font-size:16px;
        text-align:center;
    }
}

@media (max-width: 767px) {
    #categoryHeaderImage{
        height: 164px;
    }
}

@media (min-width: 768px) {
    .multibooking-paragraph{
        margin-left: 88px;
    }
    #categoryHeaderImage{
        height: 664px;
    }
}

.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #CB0808;
}

        .bg-grey{
            background-color: #9B9EA1 !important;
        }