/* Updated 2026-09-24: this modal ("Order Timing") was mostly unstyled -
   the card itself (.hsotmodal) had no matching rule anywhere on this site
   (that class only exists in an unrelated, unloaded stylesheet), so it fell
   back to Bootstrap's plain white modal. Labels, the address input's
   underline, and the toggle's background were also literal black/white/gray
   instead of the theme. The --eld-* variables already in this file are
   exact aliases of the Nephew's Pizza palette (confirmed against
   NPB-StyleSheet.css's :root block), so this pass renames them to their
   --npb-* equivalents for clarity and adds real styling for the modal card,
   the date/time dropdowns' resting state, and the remaining plain-black/gray
   text and borders. No layout, markup, or JS logic changed. */

#orderTypeModal .modal-content {
    background: var(--npb-cream);
    border: 1px solid var(--npb-line);
    border-radius: 14px;
    box-shadow: var(--npb-shadow);
}

#orderTypeModal .modal-header {
    border-bottom: 1px solid var(--npb-line);
}

#OrderForTitle {
    color: var(--npb-ink);
    padding: 0;
    text-transform: capitalize;
}

#orderTypeModalLabel {
    color: var(--npb-forest);
    font-size: clamp(18px,3vw,28px);
}

.toggle-capsule {
    display: flex;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    background: var(--npb-paper);
    border: 1px solid var(--npb-gold);
    transition: all 0.3s ease;
}

    .toggle-capsule input[type="radio"] {
        display: none;
    }

input[type=radio] {
    appearance: none;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    border: 1px solid var(--npb-gold);
    border-radius: 50%;
    background-clip: content-box;
    padding: 2px;
}

.form-check-input:checked {
    background-color: var(--npb-gold-light);
    border-color: var(--npb-gold);
}

.toggle-capsule label {
    flex: 1;
    text-align: center;
    padding: 0.55rem 1rem;
    cursor: pointer;
    z-index: 2;
    margin: 0;
    color: var(--npb-ink);
    transition: color 0.3s;
    font-size: clamp(18px, 3vw, 18px);
}


input[type=radio] {
    /* appearance: none; */
    width: 16px;
    height: 16px;
    vertical-align: middle;
    border: 1px solid var(--npb-gold);
    border-radius: 50%;
    background-clip: content-box;
    padding: 2px;
}

.toggle-capsule input#OrderTypePickup:checked ~ label[for="OrderTypePickup"], .toggle-capsule input#OrderTypeDelivery:checked ~ label[for="OrderTypeDelivery"] {
    color: var(--npb-forest);
    font-size: 18px;
    font-weight: 400;
}

.toggle-capsule input#OrderTypePickup:checked ~ .slider {
    transform: translateX(0%);
}

.toggle-capsule input#OrderTypeDelivery:checked ~ .slider {
    transform: translateX(100%);
}

.toggle-capsule .slider {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 50% !important;
    background: var(--npb-gold-light);
    border-radius: 5px;
    transition: transform 0.3s;
    z-index: 1;
}

#OrderTypesBox {
    width: fit-content;
}

.liquid {
    background-color: var(--npb-gold-light);
    border: 2px solid var(--npb-gold);
    color: var(--npb-forest);
    font-size: clamp(14px,3vw,18px);
}

    .liquid:hover {
        background-color: var(--npb-gold);
        border: 2px solid var(--npb-gold);
        color: var(--npb-forest);
        transition: 0.3s ease-in-out;
    }

.btn-close {
    filter: brightness(1) invert(0);
}

#dateDropdown, #timeDropdown {
    margin-top: 0px !important;
}

.loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    border-radius: 10px;
}

.modal-dialog-scrollable .modal-body {
    overflow: hidden;
}

.Popupdatetime {
    color: var(--npb-ink) !important;
}

.inputText {
    width: 100%;
    border: none;
    outline: none;
    border-bottom: 1px solid var(--npb-line);
    background: none;
    color: var(--npb-ink);
    transition: border-color .2s ease;
}

    .inputText:focus {
        border-bottom: 1.5px solid var(--npb-gold);
    }

#deliveryAddressSection label {
    color: var(--npb-ink);
    font-weight: 600;
}

.pac-container {
    z-index: 11111111;
}

#datepicker-toggle, #dateDropdown, #timeDropdown {
    padding: 12px 0.25rem 9px 0.75rem !important;
}

#orderTypeModal {
    font-family: 'Inter', sans-serif;
    accent-color: var(--npb-gold);
}

    #orderTypeModal .form-select {
        border: 1.5px solid var(--npb-line);
        color: var(--npb-ink);
        background-color: #fff;
    }

        #orderTypeModal .form-select:focus {
            border-color: var(--npb-gold);
            box-shadow: 0 0 0 0.25rem var(--npb-gold-light);
        }