* {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

html {
    height: 100%;
}

.card-body{
    padding: 0px 0px !important;
}

/*Background color*/
#grad1 {
    background-color: #9C27B0;
    /*background-image: linear-gradient(120deg, #FF4081, #81D4FA);*/
}

/*form styles*/
#msform {
    text-align: center;
    position: relative;
    margin-top: 20px;
}

@media (max-width: 991px) {
    #msform {
        margin-top: 0;
    }
}

#msform .form-card {
    background: white;
    border: 0 none;
    border-radius: 0px;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    width: 94%;
    margin: 0 0 20px 3%;

    /*stacking fieldsets above each other*/
    position: relative;
}
#msform .form-card.costsummary {
    background: white;
    border: 0 none;
    border-radius: 0px;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
    padding: 0 0 0 0 !important;
    box-sizing: border-box;
    width: 94%;
    margin: 0 0 20px 3%;

    /*stacking fieldsets above each other*/
    position: relative;
}

#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;

    /*stacking fieldsets above each other*/
    position: relative;
}

/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
    display: none;
}

#msform fieldset .form-card {
    text-align: left;
}

#msform input, #msform textarea {
    border: 1px solid #ccc;
    box-sizing: border-box;
    /*font-family: montserrat;*/
    /*color: #2C3E50;*/
    letter-spacing: 1px;
}

#msform input:focus, #msform textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    outline-width: 0;
}

.form-select:focus {
    border-color: #EE690C !important;
    box-shadow: 0 0 0 .25rem rgb(245, 168, 112, .25) !important;
}

/*Blue Buttons*/
#msform .action-button {
    min-width: 100px;
    background: #EE690C;
    color: white;
    border: 0 none;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px 5px;
    margin: 10px 5px;
}

#msform .action-button:hover, #msform .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #EE690C;
}

/*Previous Buttons*/
#msform .action-button-previous {
    width: 100px;
    background: #ffffff;
    color: #EE690C;
    border: 1px solid #EE690C !important;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px 5px;
    margin: 10px 5px;
}

#msform .action-button-previous:hover, #msform .action-button-previous:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #EE690C;
}

/* Logged-in role indicator (customer / Hazel / admin) */
.createevent-role-badge {
    position: fixed;
    top: max(12px, env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    z-index: 1040;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFF0E6;
    color: #EE690C;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(238, 105, 12, 0.2);
    pointer-events: none;
    user-select: none;
}

/* Who is viewing this create-event page (gap before role badge: 12 + 30px badge + 20px pad) */
.createevent-presence-host {
    position: fixed;
    top: max(12px, env(safe-area-inset-top, 0px));
    right: max(72px, calc(12px + 30px + 20px + env(safe-area-inset-right, 0px)));
    z-index: 1040;
    max-width: min(300px, calc(100vw - 96px));
    pointer-events: auto;
}

.createevent-presence-panel {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    padding: 6px 10px 8px;
    font-size: 11px;
    line-height: 1.3;
    color: #333;
    border: 1px solid rgba(238, 105, 12, 0.25);
}

.createevent-presence-has-idle-guest .createevent-presence-panel {
    border-color: #e67e22;
    box-shadow: 0 2px 12px rgba(230, 126, 34, 0.35);
}

.createevent-presence-label {
    display: block;
    font-weight: 700;
    color: #EE690C;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.createevent-presence-stack {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    min-height: 28px;
    margin-bottom: 4px;
}

.createevent-presence-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    margin-left: -8px;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: default;
    position: relative;
}

.createevent-presence-stack .createevent-presence-avatar:first-child {
    margin-left: 0;
}

.createevent-presence-avatar.presence-avatar--self {
    outline: 2px solid #EE690C;
    outline-offset: 1px;
}

.createevent-presence-avatar.presence-avatar--idle {
    opacity: 0.75;
    box-shadow: 0 0 0 2px #f39c12;
}

.createevent-presence-avatar.presence-avatar--idle-long {
    opacity: 0.65;
    box-shadow: 0 0 0 2px #e74c3c;
}

.createevent-presence-detail {
    color: #555;
    font-size: 10px;
    word-break: break-word;
    line-height: 1.45;
}

.createevent-presence-detail-line {
    display: block;
    margin: 0 0 5px 0;
}

.createevent-presence-detail-line:last-child {
    margin-bottom: 0;
}

.createevent-presence-empty .createevent-presence-stack {
    display: none;
}

#createeventIdleLockModal .close,
#createeventIdleLockModal [data-dismiss="modal"],
#createeventIdleLockModal [data-bs-dismiss="modal"] {
    display: none !important;
}

#createeventIdleLockRefreshBtn {
    background-color: #EE690C !important;
    border-color: #EE690C !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#createeventIdleLockRefreshBtn:hover,
#createeventIdleLockRefreshBtn:focus {
    background-color: #D35C0A !important;
    border-color: #D35C0A !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px white, 0 0 0 3px #EE690C;
}

#createeventIdleLockRefreshBtn:active {
    background-color: #C45409 !important;
    border-color: #C45409 !important;
    color: #ffffff !important;
}

/* Above cost-breakdown (11050) and floor-layout (99999) overlays */
#createeventIdleLockModal.createevent-idle-lock-visible,
#createeventIdleLockModal.show {
    display: block !important;
    z-index: 200050 !important;
}

.createevent-idle-lock-backdrop,
#createeventIdleLockBackdrop {
    z-index: 200045 !important;
    opacity: 0.5;
}

#createeventIdleLockShield,
.createevent-idle-lock-shield {
    position: fixed;
    inset: 0;
    z-index: 200040 !important;
    background: transparent;
    pointer-events: auto;
}

body.createevent-guest-idle-locked #topmenu_holder,
body.createevent-guest-idle-locked #topmenu_holder *,
body.createevent-guest-idle-locked #createevent-presence-host,
body.createevent-guest-idle-locked #createevent-presence-host *,
body.createevent-guest-idle-locked .container-fluid,
body.createevent-guest-idle-locked #sticky-nav-bar,
body.createevent-guest-idle-locked #sticky-nav-bar *,
body.createevent-guest-idle-locked #commonCostSummarySticky,
body.createevent-guest-idle-locked #commonCostSummarySticky *,
body.createevent-guest-idle-locked #createevent-role-badge,
body.createevent-guest-idle-locked #progressbar,
body.createevent-guest-idle-locked #progressbar *,
body.createevent-guest-idle-locked #msform,
body.createevent-guest-idle-locked #msform * {
    pointer-events: none !important;
    user-select: none;
}

body.createevent-guest-idle-locked #createeventIdleLockModal,
body.createevent-guest-idle-locked #createeventIdleLockModal *,
body.createevent-guest-idle-locked #createeventIdleLockBackdrop,
body.createevent-guest-idle-locked .createevent-idle-lock-backdrop,
body.createevent-guest-idle-locked #createeventIdleLockShield,
body.createevent-guest-idle-locked .createevent-idle-lock-shield {
    pointer-events: auto !important;
}

/* Competing overlays must not cover the idle lock dialog */
body.createevent-guest-idle-locked #costBreakdownModal,
body.createevent-guest-idle-locked .cost-breakdown-overlay,
body.createevent-guest-idle-locked #floor_layout_modal {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Cost breakdown modal must sit above the mobile sticky summary bar */
body.cost-breakdown-open #sticky-nav-bar {
    z-index: 1 !important;
    pointer-events: none !important;
}

body.createevent-guest-idle-locked #sticky-nav-bar {
    z-index: auto !important;
}

body.createevent-guest-idle-locked #sticky-summary-toggle {
    z-index: auto !important;
}

body.createevent-guest-idle-locked #commonCostSummarySticky {
    z-index: auto !important;
}

body.createevent-guest-idle-locked {
    overflow: hidden;
}

@media (max-width: 576px) {
    .createevent-presence-host {
        right: max(66px, calc(8px + 30px + 16px + env(safe-area-inset-right, 0px)));
        max-width: calc(100vw - 72px);
    }
    .createevent-presence-detail {
        display: none;
    }
}

/* ── Sticky navigation bar ────────────────────────────────────────────── */
/* Hide per-fieldset nav bars – the global #sticky-nav-bar handles display.
   jQuery .trigger('click') fires handlers on display:none elements, so this
   is safe for delegation. */
.nav-buttons-bar {
    display: none !important;
}

/* Single global sticky bar lives outside the form at body level — immune to
   containing-block issues from transforms/filters inside fieldset content */
#sticky-nav-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    flex-direction: row;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px;
    /* padding: 10px 20px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    flex-wrap: wrap;
    touch-action: manipulation; */
    pointer-events: auto;
    min-height: 52px;
}

.minimal-height-select {
    height: 20px !important;
}

.minimal-height-select-space{
    padding: 0rem 1.75rem 0rem 0.25rem !important;
    height: 20px !important;
}

.icons {
    width: 14px !important;
    height: 14px !important;
    vertical-align: baseline;
}

.tooltip-item i{
    color: #EE690C !important;
    font-family: FontAwesome !important;
    font-style: normal !important;
}

/* Draft contract: inline "click here" in checkout note */
.createevent-draft-contract-line {
    display: inline;
}

button.createevent-draft-contract-trigger.btn-link,
#createeventDraftContractBtn.btn-link {
    display: inline;
    vertical-align: baseline;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: #EE690C !important;
    text-decoration: none !important;
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
}

button.createevent-draft-contract-trigger.btn-link:hover,
button.createevent-draft-contract-trigger.btn-link:focus,
button.createevent-draft-contract-trigger.btn-link:active,
#createeventDraftContractBtn.btn-link:hover,
#createeventDraftContractBtn.btn-link:focus,
#createeventDraftContractBtn.btn-link:active {
    color: #D35C0A !important;
    text-decoration: none !important;
    background: transparent;
    box-shadow: none;
}

button.createevent-draft-contract-trigger.btn-link:disabled,
#createeventDraftContractBtn.btn-link:disabled {
    color: #EE690C !important;
    opacity: 0.65;
    text-decoration: none !important;
}

@media (max-width: 991px) {
    #sticky-nav-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #sticky-nav-bar .sticky-btn-row {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        width: 100%;
    }

    #sticky-nav-bar .sticky-btn {
        width: calc(33.333% - 10px);
        min-width: 100px;
    }

    #sticky-summary-toggle {
        width: 90% !important;
    }

    #commonCostSummarySticky {
        width: 100% !important;
    }
}


body, html {
    min-height: 100%;
}

#sticky-nav-bar .sticky-btn {
    margin-top: 20px !important;
    min-width: 100px;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px 5px;
    margin: 10px 5px;
    font-size: 16px;
    border: none;
    white-space: nowrap;
}

/* Prev, Next, and Submit share the same action-button width — sized to the widest Next label */
#sticky-nav-bar .sticky-btn-prev,
#sticky-nav-bar .sticky-btn-next,
#sticky-nav-bar .sticky-btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 192px; /* desktop: fits "Save & Next Step" + arrow */
    box-sizing: border-box;
}

#sticky-nav-bar .sticky-btn-prev {
    background: #ffffff;
    color: #EE690C;
    border: 1px solid #EE690C !important;
}

#sticky-nav-bar .sticky-btn-next {
    background: #EE690C;
    color: #ffffff;
}

.sticky-next-label--short {
    display: none;
}

@media (max-width: 991px) {
    .sticky-next-label--full {
        display: none;
}

    .sticky-next-label--short {
        display: inline;
    }
}

#sticky-nav-bar .sticky-btn-submit {
    background: #EE690C;
    color: #ffffff;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

#sticky-nav-bar .sticky-btn:hover,
#sticky-nav-bar .sticky-btn:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #EE690C;
}

#sticky-nav-bar .sticky-btn-submit.disabled-style {
    cursor: not-allowed !important;
    background-color: #F3F4F6 !important;
    color: #9CA3AF !important;
    box-shadow: none !important;
    opacity: 1;
}

/* Enforce body-level sticky nav bar on top of all fieldsets for all steps */
/* body > #sticky-nav-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
} */

/* Bottom padding so page content is never hidden behind the sticky nav bar */
body {
    padding-bottom: 80px;
}

/* Compact bar on narrow viewports */
@media (max-width: 480px) {
    #sticky-nav-bar {
        gap: 8px;
        /* padding: 8px 12px !important;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; */
    }
}

/* Keep Previous + Save & Next inline from 411px down to 350px */
@media (max-width: 411px) {
    #sticky-nav-bar .sticky-btn-row {
        flex-wrap: nowrap !important;
        gap: 4px;
        box-sizing: border-box;
        padding-left: 8px;
        padding-right: 12px;
        margin-left: 0;
        margin-right: 0;
    }

    #sticky-nav-bar .sticky-btn-row .sticky-btn {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: auto !important;
    }

    #sticky-nav-bar .sticky-btn-prev,
    #sticky-nav-bar .sticky-btn-next,
    #sticky-nav-bar .sticky-btn-submit {
        min-width: 0;
        flex: 1 1 0;
    }

    #sticky-nav-bar .sticky-btn-next,
    #sticky-nav-bar .sticky-btn-submit {
        margin-right: 4px !important;
        padding-right: 8px !important;
    }

    #sticky-nav-bar .sticky-btn-prev img {
        margin-right: 4px !important;
    }

    #sticky-nav-bar .sticky-btn-next img {
        margin-left: 4px !important;
    }
}

@media (max-width: 350px) {
    #sticky-nav-bar .sticky-btn-row {
        gap: 2px;
        padding-left: 6px;
        padding-right: 10px;
        margin-left: 0;
        margin-right: 0;
    }

    #sticky-nav-bar .sticky-btn-row .sticky-btn {
        font-size: 14px;
    }

    #sticky-nav-bar .sticky-btn-next,
    #sticky-nav-bar .sticky-btn-submit {
        margin-right: 2px !important;
        padding-right: 6px !important;
    }

    #sticky-nav-bar .sticky-btn-prev img,
    #sticky-nav-bar .sticky-btn-next img {
        margin-left: 2px !important;
        margin-right: 2px !important;
    }
}

/* Mobile-only: show the global sticky nav and inline accordion cost summary */
@media (max-width: 991px) {
    /* keep sticky nav bar visible at bottom for small viewports */
    #sticky-nav-bar {
        display: flex !important;
        gap: 4px !important; /* tighter stack: summary panel ↔ nav buttons */
    }

    /* keep page content bottom padding for sticky nav bar same behavior as desktop */
    body {
        padding-bottom: 80px;
    }

    /* hide desktop sidebar summary in mobile view (this is not used) */
    #common_costsummary {
        display: none !important;
    }

    /* hide old placeholder wrapper in mobile view */
    #commonCostSummaryMobileWrapper {
        display: none !important;
    }

    /* sticky nav summary toggle button (mobile) */
    #sticky-summary-toggle {
        width: 90% !important;
        max-width: 90% !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        background-color: rgba(238, 105, 12, 0.5) !important;
        color: #000000 !important;
        border: 1px solid rgba(238, 105, 12, 0.7) !important;
        position: relative !important;
        z-index: 10001 !important;
    }

    /* sticky nav summary panel (mobile) */
    #commonCostSummarySticky {
        position: static !important; /* remove fixed behavior while opening */
        width: auto !important; /* fit to parent width */
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        z-index: 10001 !important;
        max-height: calc(100vh - 130px) !important;
        overflow-y: auto !important;
        background: #ffffff !important;
    }

    #commonCostSummarySticky .card_container,
    #commonCostSummarySticky .form-card,
    #commonCostSummarySticky .container,
    #commonCostSummarySticky .col-12 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Pull button row closer to the expanded cost summary (override wide sticky-btn margins) */
    #sticky-nav-bar .sticky-btn-row .sticky-btn {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }
}

/* Desktop-only: hide mobile accordion wrapper and mobile sticky summary panel */
@media (min-width: 992px) {
    #commonCostSummaryMobileWrapper,
    #commonCostSummarySticky {
        display: none !important;
    }
}

/* Non-desktop: hide duplicate cost summary title + divider from costsummary include */
@media (max-width: 991px) {
    .costsummary .card-title,
    .costsummary .hr {
        display: none !important;
    }
}

/* ── End sticky navigation bar ──────────────────────────────────────── */

/* Ensure sticky bar stays visible across all steps, especially catering */
#sticky-nav-bar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#msform .form-check-inline .form-check-input {
    margin-top: revert !important;
}

/*Dropdown List Exp Date*/
select.list-dt {
    border: none;
    outline: 0;
    border-bottom: 1px solid #ccc;
    padding: 2px 5px 3px 5px;
    margin: 2px;
}

select.list-dt:focus {
    border-bottom: 2px solid skyblue;
}

/*The background card*/
.card {
    z-index: 0;
    border: 1px solid transparent !important;
    border-radius: 0.5rem;
    position: relative;
}

/*Heading and label font sizes*/
h1{
    font-size: 25px !important;
}

h2 {
    font-size: 25px !important;
}

.col-form-label, .area-title, .card-title {
    font-size: 14px !important;
}

.col-form-label {
    padding-bottom: 0px !important;
}

.form-group {
    margin-bottom: 0px !important
}

.form-control, 
.form-card, 
.sc_caption, 
.accordion-body p, .accordion-body .form-check-label, .accordion-button,
.area-description, .area-list, .form-select, .form-control{
    font-size: 13px !important;
}

/*FieldSet headings*/
.fs-title {
    font-size: 18px !important;
    color: #2C3E50;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: left;
}

.select2-selection__rendered, .select2-selection select2-selection--single select2-selection--clearable{
    font-size: 13px !important;
}

.select2-container .select2-selection--single {
    height: 33.5px !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 33.5px !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    height: 33.5px !important;
}

.select2-results__option,
.select2-results__options {
    font-size: 13px !important;
}

table>tbody>tr>td {
    font-size: 13px !important;
}

/*progressbar*/
#progressbar {
    margin-bottom: 30px;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    flex-wrap: nowrap;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

#progressbar::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

#progressbar .active {
    color: #000000;
}

#progressbar li {
    list-style-type: none;
    font-size: 12px;
    flex: 0 0 auto;
    min-width: 100px;
    max-width: 120px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 0 6px;
    white-space: normal;
}

#progressbar li>strong {
    position: static;
    top: auto;
    left: 0px;
    margin: 0;
    background: #ffffff;
    padding: 0 4px;
    display: inline-block;
    font-size: 12px;
    line-height: 1.2;
    color: #000;
    text-align: left;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
}

/*Icons in the ProgressBar*/
#progressbar li[data-action="personal"]:before {
    font-family: FontAwesome;
    content: "1";
}

#progressbar li[data-action="event"]:before {
    font-family: FontAwesome;
    content: "2";
}

#progressbar li[data-action="venue"]:before {
    font-family: FontAwesome;
    content: "3";
}

#progressbar li[data-action="layout"]:before {
    font-family: FontAwesome;
    content: "4";
}

#progressbar li[data-action="rental"]:before {
    font-family: FontAwesome;
    content: "5";
}

#progressbar li[data-action="catering"]:before {
    font-family: FontAwesome;
    content: "6";
}

#progressbar li[data-action="service"]:before {
    font-family: FontAwesome;
    content: "7";
}

#progressbar li[data-action="addoninfo"]:before {
    font-family: FontAwesome;
    content: "8";
}

#progressbar li[data-action="checkout"]:before {
    font-family: FontAwesome;
    content: "9";
}


/*ProgressBar before any progress*/
#progressbar li:before {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 8px 0 0;
    outline: 9px solid #ffffff;
    padding: 2px;
    box-sizing: border-box;
}

/*ProgressBar connectors*/
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
}

/* center checkout fieldset content */
#checkout .card_container {
    display: flex;
    justify-content: center;
}

#checkout .form-card {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    box-sizing: border-box;
}

/*Color number of the step and the connector before it*/
#progressbar li.active:before, #progressbar li.active:after {
    background: #EE690C;
}

/*Color number of the step and the connector before it*/
#progressbar li.inactive:before, #progressbar li.inactive:after {
    background: #ebb48e;
}

/*Imaged Radio Buttons*/
.radio-group {
    position: relative;
    margin-bottom: 25px;
}

.radio {
    display:inline-block;
    width: 204;
    height: 104;
    border-radius: 0;
    background: lightblue;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    cursor:pointer;
    margin: 8px 2px; 
}

.radio:hover {
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);
}

.radio.selected {
    box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
    accent-color: #EE690C;
}

/*Fit image in bootstrap div*/
.fit-image{
    width: 100%;
    object-fit: cover;
}

/* Apply a specific color to all radio buttons */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border: 2px solid #adb5bd;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.15s ease-in-out;
}

input[type="radio"]:checked {
    border: 5px solid #EE690C;
    background-color: #fff;
}

input[type="radio"]:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(238, 105, 12, 0.25);
}

/* Apply a specific color to all checkboxes */
input[type="checkbox"] {
  accent-color: #EE690C; 
  width: 13px;
  height: 13px;
}

.sc_figure img{
    border-radius:8px !important;
}

.sc_figure input[type="checkbox"] {
  accent-color: #EE690C; 
  width: 16px;
  height: 16px;
}

.sc_figure input[type="checkbox"]:checked + img {
    border: 2px solid #EE690C !important;
}

.form-check-input:checked {
    background-color: #EE690C !important; 
    border: 1px solid #000000 !important; 
}

.form-check {
    min-height: 0 !important;
    margin-bottom: 0px !important;
}

.card-body-checkbox{
    padding-left: 20px  !important;
}
/* FROM ADDRENTAL PAGE */
.loader {
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('images/ajax-loader.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}

.clickable {  cursor: pointer;}

.orange-text {
    color: #EE690C !important;
    text-decoration: none !important;
}

/* Optional: Adjust vertical position of the icon if needed */
.material-symbols-outlined {
    font-size: 24px; /* Adjust size as needed */
    /* Add any other specific styling for the icon */
}

/* Base style for the enabled submit button color: #EE690C (Orange/Vermilion) */
#submitForm {
    background-color: #EE690C; 
    /* Set transition for smooth hover/disabled changes */
    transition: background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

/* Enabled Hover State (Slightly darker orange) */
#submitForm.enabled-style:hover {
    background-color: #D35C0A; /* Darker version of EE690C for hover feedback */
}

/* RECOMMENDED DISABLED STYLES: Light Gray Background, Medium Gray Text */
.disabled-style:disabled {
    cursor: not-allowed !important;
    background-color: #F3F4F6 !important; /* Very Light Gray */
    color: #9CA3AF !important; /* Medium Gray for legibility */
    box-shadow: none !important;
    opacity: 1; 
}

/* Style for fields that fail validation */
.validation-error {
    /* Make the border noticeable, usually red */
    border: 2px solid #dc3545 !important; 
    
    /* Optional: Add a subtle shadow for emphasis */
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.5); 
    
    /* Optional: Ensure the field looks the same if focused */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 
}

/* Added custom style Donald Laurel*/
figcaption.sc_caption {
    line-height: 18px;
    margin: 5px 0;
}
.space_contents_images {
    display: block;
    overflow: hidden;
}
.bullets {
    display: flex; 
    gap: 20px;
}

.sc_caption {
    text-align: center !important; /* Centers the text horizontally */
    display: block !important;      /* Ensures it behaves like a block element for alignment */
    width: 100% !important;        /* Spans the full width of the parent figure */
    margin-top: 5px !important;    /* Adds a little space between the image and the text */
    font-size: 14px !important;    /* Optional: adjust size as needed */
}

@media only screen and (max-width: 768px) {
    .bullets {
        display: unset !important;
    }
}

/* Override Bootstrap accordion chevron icon color to brand orange */
.accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23EE690C'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23EE690C'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* jQuery UI Datepicker - active/selected date highlight */
.ui-datepicker .ui-state-default.ui-state-active,
.ui-datepicker .ui-state-active {
    background: #EE690C !important;
    color: #FFFFFF !important;
    border-color: #EE690C !important;
}

@media only screen and (max-width: 768px) {
    .ui-datepicker,
    .ui-datepicker.ui-widget,
    .ui-timepicker-div {
        max-height: calc(100vh - 1rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .ui-datepicker {
        max-width: calc(100vw - 1rem);
    }

    .ui-datepicker .ui-datepicker-buttonpane {
        position: sticky;
        bottom: 0;
        background: #ffffff;
        z-index: 1;
    }
}

.locked-checkbox {
    pointer-events: none; /* User cannot click it */
    opacity: 0.7;        /* Visual cue it is locked */
}

body[data-collaburo-admin="1"] input[id^="services_delivery_small_"],
body[data-collaburo-admin="1"] input[id^="services_delivery_large_"] {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer;
}

.copy-booking-dates-btn {
    font-size: 12px;
    color: #EE690C !important;
    text-decoration: none !important;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    line-height: 1.2;
}

.copy-booking-dates-btn:hover,
.copy-booking-dates-btn:focus {
    color: #EE690C !important;
    text-decoration: none !important;
    outline: none;
    box-shadow: none;
}

/* 3rd-party (external) rental items — delivery truck + tooltip (see tooltip.php for popup rules) */
.collaburo-delivery-mytooltip {
    margin-left: 5px;
    vertical-align: middle;
}

.collaburo-delivery-mytooltip .tooltip-item {
    color: #EE690C;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: 0 2px;
    cursor: help;
}

.collaburo-delivery-tooltip-item .fa-truck {
    font-family: FontAwesome !important;
    font-style: normal;
    font-size: 14px;
    line-height: 1;
    display: inline-block;
    width: 14px;
    text-align: center;
}

figcaption.sc_caption .collaburo-delivery-mytooltip {
    display: inline-flex;
    margin-left: 4px;
    vertical-align: middle;
}

.event-insurance-banner > div > .event-insurance-banner__divider {
    display: block;
    margin: 0;
    border: 0;
    border-top: 1px solid #739FCE;
    opacity: 0.45;
}

.event-insurance-banner__footer {
    background-color: #F1FBFE;
    padding: 12px 16px;
}

.event-insurance-duuo-partner-badge {
    display: inline;
    background-color: #dc3545;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 1px 6px;
    border-radius: 4px;
    vertical-align: baseline;
    margin-right: 4px;
    white-space: nowrap;
}

.event-insurance-estimated-cost {
    margin-top: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.event-insurance-estimated-cost__label {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #75797D;
    text-transform: uppercase;
}

.event-insurance-estimated-cost__row {
    margin-top: 4px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 6px;
}

.event-insurance-estimated-cost__base {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #000;
    line-height: 1.2;
}

.event-insurance-estimated-cost__gst {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #75797D;
}

/* Full-page loader: hidden once CSS and the PHP document are ready */
body.createevent-page-loading {
    overflow: hidden;
}

body.createevent-page-loading .container-fluid,
body.createevent-page-loading #sticky-nav-bar,
body.createevent-page-loading #createevent-role-badge,
body.createevent-page-loading .createevent-presence-host {
    pointer-events: none;
    user-select: none;
}

#createevent-page-loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    background: rgba(255, 255, 255, 0.92);
    pointer-events: all;
    touch-action: none;
}

#createevent-page-loader.createevent-page-loader--hidden {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Locked / signed agreement: view-only createevent wizard */
body.createevent-readonly #msform fieldset .form-card {
    opacity: 0.96;
}
body.createevent-readonly #msform fieldset .form-card input:disabled,
body.createevent-readonly #msform fieldset .form-card select:disabled,
body.createevent-readonly #msform fieldset .form-card textarea:disabled {
    cursor: not-allowed;
    background-color: #f5f5f5;
}
body.createevent-readonly #submitForm,
body.createevent-readonly #sticky-submit-btn {
    opacity: 0.55;
    cursor: not-allowed !important;
}