.modal-header, .modal-footer {
    border-top: none !important;
    border-bottom: none !important;
}

/* NOTE: these CSS variables are specific to the design given */
:root {
    --color-offwhite: #F0F0F0;
    --color-neutral: #FAFAFA;
    --color-gunmetal-dark: #303E49;
    --color-gunmetal: #202830;
    --color-gunmetal-light: #E6EBEF;
    --color-gunmetal-lighter: #EFF2F5;
    --color-grey: #666666;
    --color-darkgrey: #333333;
    --color-lightgrey: #CCCCCC;
    --color-neutral-grey: #B3B3B3;
    --color-teal: #428082;
    --color-navy: #303E49;
    --color-light-green: #EFF5E5;
    --color-dark-green: #658433;
}

/* TODO: use these CSS variables in our project, they will be overwritten for custom theming */
:root {
    /* General theme */
    --body-bg-color: var(--color-offwhite);
    --header-bg-color: #FFFFFF;

    --primary-text-color: var(--color-darkgrey);
    --secondary-text-color: var(--color-gunmetal);
    --tertiary-text-color: var(--color-grey);

    /* Accordion theme */
    --accordion-header-closed-bg-color: #FFFFFF;
    --accordion-body-closed-bg-color: #FFFFFF;
    --accordion-header-open-bg-color: #FFFFFF;
    --accordion-body-open-bg-color: #FFFFFF;
    --booking-summary-bg-color: #FFFFFF;

    /* Button theme */
    --button-text-color: #FFFFFF;
    --button-bg-color: var(--color-teal);
    --button-disabled-bg-color: var(--color-teal);
    --button-border-color: var(--color-teal);
    --button-hover-text-color: #FFFFFF;
    --button-hover-bg-color: #5E8E8F;
    --button-hover-border-color: #5E8E8F;

    --anchor-text-color: var(--color-teal);

    /* Progress bar theme */
    --progress-active-color: var(--color-lightgrey);
    --progress-complete-color: var(--button-bg-color);
    --progress-pending-color: #E5E5E5;
    --booking-complete-check-bg-color: #8DB847;
    
    /* Form theme */
    --form-check-bg-color: var(--color-teal);
    --input-border-color: var(--color-neutral-grey);
    --input-feedback-font-size: var(--font-size-xs);

    /* Annotated progress bar */
    --annotated-progress-bar-incomplete-color: #E3EED3;
    --annotated-progress-bar-complete-color: #8DB847;
    --share-button-bg-color: var(--color-gunmetal-dark);

    --payment-selector-active-bg-color: var(--color-navy);

    --thank-you-bg-color: var(--color-gunmetal-lighter);
    --thank-you-text-color: #546D82;
    
    --mobile-booking-summary-bg-color: var(--color-primary);
    --input-border-radius: 4px;


    /* Font theme */
    --font-family-body: "Cabin", sans-serif;
    --font-family-display: "Josefin sans", sans-serif;

    --font-size-xl: 1.3125rem;
    --font-size-lg: 1.125rem;
    --font-size-md: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-xs: 0.75rem;
    --font-size-xxs: 0.625rem;
}

/* TEXT UTILITIES */
.font-display {
    font-family: var(--font-family-display);
}

.font-body {
    font-family: var(--font-family-body);
}

.text-xl {
    font-size: var(--font-size-xl);
}

.text-lg {
    font-size: var(--font-size-lg);
}

.text-md {
    font-size: var(--font-size-md);
}

.text-sm {
    font-size: var(--font-size-sm); 
}

.text-xs {
    font-size: var(--font-size-xs);
}

.text-xxs {
    font-size: var(--font-size-xxs);
}


.atb-text-primary-color {
    color: var(--primary-text-color);
}

.atb-text-secondary-color {
    color: var(--secondary-text-color);
}

.atb-text-tertiary-color {
    color: var(--tertiary-text-color);
}

.text-grey {
    color: var(--color-grey);
}

.text-gunmetal {
    color: var(--color-gunmetal);
}

.text-dark-green {
    color: var(--color-dark-green);
}

.atb-anchor-text-color {
    color: var(--anchor-text-color);
}

.atb-anchor-text-color:hover {
    opacity: 0.8;
}

/* GLOBAL */

body {
    background-color: var(--body-bg-color);
    font-family: var(--font-family-body);
}

a {
    color: var(--anchor-text-color);
}

a:hover {
    opacity: 0.8;
}

h2 {
    color: var(--primary-text-color);
}

h3 {
    font-size: var(--font-size-lg);
    color: var(--primary-text-color);
    font-weight: 500;
}

header {
    background-color: var(--header-bg-color);
    height: 90px;
}

textarea.form-control,
input.form-control {
    border-color: var(--input-border-color);
    border-radius: 3px;
    padding: 8px 16px;
    color: var(--primary-text-color);
}

input.form-control:disabled {
    background-color: var(--body-bg-color);
    color: gray;
}

.atb-validation-message {
    font-size: var(--input-feedback-font-size);
    font-weight: 500;
    margin-top: 8px;
    margin-left: 4px;
}

.atb-add-discount .invalid-feedback {
    display: unset;
    color: var(--bs-form-invalid-color);
}

.atb-add-discount .valid-feedback {
    display: unset;
    color: var(--bs-form-valid-color);
}


textarea.form-control {
    height: 115px;
    max-height: 115px;
}

.flip-x {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

@media only screen and (max-width: 767px) {
    .sticky-top {
        position: inherit;
    }
}

hr {
    margin-top: 24px;
    margin-bottom: 24px;
    color: var(--color-offwhite);
    opacity: 1;
}

.atb-checkout-body .form-check-input:checked {
    background-color: var(--form-check-bg-color);
    border-color: var(--form-check-bg-color);
}

.atb-checkout-body .form-check-input {
    border: 2px solid var(--color-neutral-grey);
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
}

/* PROGRESS BAR */
.atb-progress .progress-stacked {
    height: .5rem;
    background-color: transparent;
}
.atb-progress .progress {
    height: .5rem;
}

.progress-bar {
    background-color: var(--progress-pending-color);
}

.atb-progress-active {
    background-color: var(--progress-active-color);
}
.atb-progress-complete {
    background-color: var(--progress-complete-color);
}



/* CHECKOUT ALERT */
.atb-checkout-alert {
  padding-left: 32px;
  padding-right: 32px;
  gap: 1rem;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border: var(--bs-accordion-border-width) solid
    var(--bs-accordion-border-color);
}

/* CHECKOUT ACCORDION */
.atb-checkout-accordion {
    --bs-accordion-border-width: 0px;
    --bs-accordion-border-radius: var(--bs-border-radius-lg) !important;
    --bs-accordion-inner-border-radius: var(--bs-border-radius-lg) !important;
}

/* This button is hidden by default but is revealed when the checkout stage is completed */
.atb-stage-edit {
    color: var(--color-teal);
    cursor: pointer;
    display: none;
}

.atb-checkout-accordion .accordion-button.atb-checkout-accordion-button {
    padding: 20px 32px;
    opacity: 0.6;
    transition: all 0.2s ease-in;
    /* font-size: var(--font-size-lg); */
}

.atb-checkout-accordion .accordion-button.atb-checkout-accordion-button .atb-accordion-title-text {
    display: block;
    font-size: var(--font-size-lg);
    color: var(--primary-text-color);
    margin-top: 2px;
    margin-bottom: 0px;
    transition: font-size 0.2s ease-in;
}

.atb-checkout-accordion .accordion-button.atb-checkout-accordion-button:not(:disabled) {
    cursor: pointer;
}

/* CHECKOUT STAGE - COMPLETE */
.atb-checkout-accordion .atb-checkout-accordion-item.complete .atb-checkout-accordion-button {
    opacity: 1;
    background-color: var(--color-neutral);
}

.atb-checkout-accordion .atb-checkout-accordion-item.complete .atb-stage-edit {
    display: block;
}


/* CHECKOUT STAGE - ACTIVE */ 
.atb-checkout-accordion .accordion-button.atb-checkout-accordion-button:not(.collapsed) {
    padding-top: 40px;
    padding-bottom: 0px;
    padding-left: 32px;
    padding-right: 32px;
    opacity: 1;
    
    color: var(--primary-text-color);
    /* font-size: var(--font-size-xl); */
}

.atb-checkout-accordion .accordion-button.atb-checkout-accordion-button:not(.collapsed) .atb-accordion-title-text {
    font-family: var(--font-family-display);
    font-weight: 500;
    font-size: var(--font-size-xl);
}

/* TODO: Roll back to this if the h1 element screws up the accordion button */
/* .atb-accordion-title {
    font-family: var(--font-family-display);
    font-weight: 500;    
    font-size: var(--font-size-xl);
} */

.accordion-body.atb-checkout-accordion-body {
    background-color: white;
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 40px;
}

.accordion-button:focus {
    box-shadow: none !important;
}

/* Ensure keyboard focus on the accordion headers is clearly visible, since the default box-shadow is removed above */
.atb-checkout-accordion-button:focus-visible {
    outline: 3px solid var(--color-navy);
    outline-offset: 2px;
}

/* Sets the background of the accordion to white when not collapsed, instead of the default blue */
.atb-checkout-accordion-button:not(.collapsed) {
    background-color: white;
}

/* Hides the default chevron */
.atb-checkout-accordion-button::after {
    display: none;
}

.accordion-button:hover {
    cursor: default;
}

.atb-stage-edit {
    cursor: pointer;
}

.atb-checkout-accordion-item {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.atb-checkout-accordion-item.disabled {
    box-shadow: none;
    opacity: 0.5;
}

/* The stage number is hidden by default and revealed when the stage is completed */
.atb-stage-number {
    height: 24px; 
    width: 24px;
    background-color: var(--color-gunmetal-light);
}

.atb-checkout-accordion-item.complete .atb-stage-number {
    display: none;
}

.atb-stage-check {
    font-size: var(--font-size-sm);
    font-weight: bold;
    color: green;
    
    display: none;
}

.atb-checkout-accordion-item.complete .atb-stage-check {
    display: block;
}

.atb-stage-edit {
    position: absolute;
    right: 0px;
}

.atb-btn-primary {
    color: var(--button-text-color);
    background-color: var(--button-bg-color);
    border-color: var(--button-border-color);
}

.atb-btn-primary:disabled {
    color: var(--button-text-color);
    background-color: var(--button-bg-color);
    border-color: var(--button-border-color);
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(50%) brightness(80%);
    pointer-events: none;
}

.atb-btn-primary:hover,
.atb-btn-primary:focus,
.atb-btn-primary:active,
.btn:first-child:active {
    color: var(--button-hover-text-color);
    background-color: var(--button-hover-bg-color);
    border-color: var(--button-hover-border-color);
}

.atb-btn-secondary {
  background-color: #E5E7EB; /* light gray */
  color: #374151;           /* dark gray */
  border: none;
}

.atb-btn-secondary:hover,
.atb-btn-secondary:focus {
  background-color: #D1D5DB; /* hover gray */
}


/* GENERAL THUMBNAIL */

/* Using a thumbnail wrapper to create a zooming effect on the image within */
.atb-checkout-thumbnail-wrapper {
    position: relative;
    height: 78px;
    width: 78px;
    min-width: 78px;
    overflow: hidden;
    border-radius: 4px;
} 

.atb-checkout-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.2s ease-out;
}

/* TODO: this effect causes slight jitter and needs to be fixed before reintroduced */
.atb-checkout-thumbnail-wrapper:hover .atb-checkout-thumbnail {
    transform: scale(1.1);
}

#atb-calendar-btn {
    color: var(--primary-text-color);
}

#atb-calendar-btn i {
    color: var(--anchor-text-color);
}

/* BOOKING SUMMARY */
#atb-summary {
    background-color: white;
}

/* MINI ACCORDION COMPONENT */
.atb-mini-accordion {
    --bs-accordion-border-width: 0px;
    --bs-accordion-active-color: var(--primary-text-color);
    background-color: inherit;
}

.atb-mini-accordion .accordion-item .accordion-header span {
    color: var(--primary-text-color);
}

.atb-mini-accordion-body {
    background-color: inherit;
}

/* Sets the background of the accordion to white when not collapsed, instead of the default blue */
.atb-mini-accordion-button:not(.collapsed) {
    background-color: inherit;
}

.atb-mini-accordion-button {
    display: inline-flex;
    font-weight: 500;
    width: auto;
}

.atb-mini-accordion-button:hover {
    cursor: pointer;
}

.atb-mini-accordion-button::after {
    margin-left: 4px;
    --bs-accordion-btn-icon-width: 12px;
    --bs-accordion-btn-icon-height: 12px;
}

.atb-mini-accordion-button.no-items::after{
    display: none;
}


.atb-mini-accordion .accordion-header span {
    font-size: var(--font-size-sm);
}


#atb-summary.cbp-spmenu-bottom.cbp-spmenu-open  {
    background-color: white;    
    color: var(--primary-text-color);
}

/* CUSTOM DROPDOWN COMPONENT */
.atb-select-input {
    caret-color: transparent;
    cursor: pointer;
}


.atb-summary-row-border {
    border-top: 1px solid var(--color-offwhite);
}

.atb-select-dropdown {
    z-index: 1000;
    max-height: 200px;
    overflow-y: hidden;
    list-style: none;
    top: 100%; 
    margin-top: 8px;
}

.atb-select-dropdown input {
    padding: 16px 12px;
    border-radius: 8px;
    background-color: #f8f9fa;
    border: 1px var(--input-border-color) solid;
    width: calc(98% - 16px);
}

.atb-dropdown-ul {
    overflow-y: auto;
    max-height: 140px;
}

input.atb-dropdown-search {
    padding: 8px;
    padding-left: 32px;
}

.atb-select-option {
    cursor: pointer;
    color: var(--primary-text-color);
}

.atb-select-option:hover {
    background-color: #f8f9fa; /* Bootstrap hover background */
}

.translate-y-middle-fix {
    top: 50%; /* Vertically center */
    transform: translateY(-50%); /* Adjust to center */
}

.atb-dropdown {
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
}

/* Mimicking bootstrap's 'invalid' styling for the dropdown */
.atb-dropdown.is-invalid {
    border: 1px solid var(--bs-form-invalid-border-color);
}

input.atb-select-input {
    border-width: unset;
    border-style: unset;
    border-color: unset;
    border-radius: var(--input-border-radius);
    padding: unset;
    padding-top: 12px;
    padding-bottom: 12px;
}

input[type="checkbox"].readonly-check {
    pointer-events: none;
}

input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.atb-dropdown::after {
    content: '';
    cursor: pointer;
    display: block;
    width: 16px; /* Chevron size */
    height: 16px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    transform-origin: center;
}

.atb-dropdown.is-invalid::after {
    content: '';
    cursor: pointer;
    display: block;
    width: 16px; /* Chevron size */
    height: 16px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    transform-origin: center;
}

/* Add rotation to chevron on open */
.atb-dropdown.open::after {
    transform: translateY(-50%) rotate(180deg); 
}

/* EXTRAS BLOCK COMPONENT */
.atb-extra h4 {
    font-size: var(--font-size-md);
    margin-bottom: .5rem;
    line-height: 1.5rem;
}

.atb-extra p {
    font-size: var(--font-size-sm);
    margin-bottom: .45rem;
    line-height: 1.25rem;
    color: var(--secondary-text-color);
}

/* only target regular extras, not so called heading/text 'extras' */
.atb-addon.atb-extra p {
    max-width: 374px;
}

.atb-addon.atb-extra.atb-addon-heading p {
    max-width: unset;
}

.atb-extra .atb-extra-price,
.atb-addon .atb-extra-price {
    font-size: var(--font-size-sm);
    line-height: 1.25rem;
    font-weight: 500;
}

.atb-extra h4 .required {
    font-size: var(--font-size-lg);
}

/* extras check boxes */
.atb-extra .form-check-input:checked,
.atb-checkbox .form-check-input:checked {
    background-color: var(--form-check-bg-color);
    border-color: var(--form-check-bg-color);
}

.atb-extra .form-check-input,
.atb-checkbox .form-check-input {
    border: 2px solid var(--color-neutral-grey);
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
}


/* STEPPER COMPONENT */

.atb-stepper .counter {
    background-color: transparent;
    color: var(--primary-text-color);
    width: 48px;
    text-align: center;    
    border: 0px;
}

.atb-stepper button {
    width: 48px;
    height: 48px;
    background-color: transparent;    
    border: none;
}

.atb-stepper button:not([disabled]) {
    color: var(--primary-text-color);
}

.atb-stepper button:hover {
    background-color: var(--color-neutral);
}

.atb-stepper span.atb-extra-availability {
    font-size: var(--font-size-sm);
    color: #C6C6C6;
    margin-left: 8px;
}

.atb-stepper span.atb-stepper-description {
    font-size: var(--font-size-sm);
    color: var(--secondary-text-color);
}

.atb-stepper.atb-addon label {
    max-width: 374px;
}

.atb-stepper.atb-addon span {
    margin-bottom: .5rem;
}

.atb-stepper.atb-addon .atb-stepper-type {
    /* display: flex; */
    font-weight: 500;
}

.atb-stepper.atb-party .atb-stepper-type {
    color: var(--primary-text-color);
}

.separator {
    border-bottom: 1px solid var(--color-offwhite);
}

/* PAYMENT SELECTOR COMPONENT */

/* DEFAULT STYLE */
.atb-payment-plan-selector .atb-payment-plan {
    background-color: white;
    color: var(--color-navy);
    cursor: pointer;
}

.atb-payment-plan-selector .atb-payment-plan p {
    margin-bottom: 0;
}

.atb-payment-plan-selector .atb-payment-plan h3 {
    color: var(--color-navy);
}

.atb-payment-plan-selector .atb-payment-plan .form-check .form-check-input {
    float: none;
    margin: 0;
    border-width: 3px;
    background-color: transparent;
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    border-color: var(--color-neutral-grey);
}

/* "SELECTED" STYLE */
.atb-payment-plan-selector .atb-payment-plan.selected {
    --bs-border-color: var(--payment-selector-active-bg-color);
    background-color: var(--payment-selector-active-bg-color);
    color: var(--color-gunmetal-lighter);
}

.atb-payment-plan-selector .atb-payment-plan.selected h3 {
    color: var(--color-gunmetal-lighter);
}

.atb-payment-plan-selector .atb-payment-plan.selected .form-check-input {
    border-color: white;
}

.atb-payment-plan-selector .atb-payment-plan.selected .form-check-input:checked {
    border-color: white;
}

/* Ensure keyboard focus on the payment plan radios is clearly visible against any background */
.atb-payment-plan-selector .form-check-input:focus-visible {
    outline: 3px solid var(--color-navy);
    outline-offset: 2px;
}

/* ADD DISCOUNT CODE COMP */
/* No underline/anchor styling - this is a button that triggers an action, not a link to another page */
.atb-add-discount .atb-add-discount-btn {
    color: var(--primary-text-color);
}

.atb-add-discount .atb-discount-tag .close-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-neutral-grey);
}

.atb-add-discount .atb-discount-tag {
    background-color: var(--color-light-green);
    font-size: var(--font-size-xs);
    color: var(--color-dark-green);
    padding: 4px 6px;
}

.atb-discount-input-field button {        
    border: 1px solid var(--input-border-color);
    border-left: 0px;
    color: var(--button-bg-color);
}

/* When is-invalid is applied to the input field, the button's border should also change colour */
.atb-discount-input-field input.is-invalid+button {
    border: 1px solid var(--bs-form-invalid-border-color);
    border-left: 0px;
    color: var(--bs-form-invalid-border-color);
}

/* When valid, change the buttons border color */
.atb-discount-input-field input.is-valid+button {
    border: 1px solid var(--bs-form-valid-border-color);
    border-left: 0px;
    color: var(--bs-form-valid-border-color);
}

.atb-discount-input-field button:hover {
    background-color: var(--button-bg-color);
    opacity: .9;
}

/* DRAW COMPONENT */
.drawer {
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

/* TODO: I'm not sure if setting to 800px will have side-effects */
.drawer.open {
    max-height: 800px;
    opacity: 1;
}

.atb-discount-input-field input.form-control:focus {
    box-shadow: inset 0 0 0 .15rem rgba(13, 110, 253, .25);
}

/* LOGIN/SIGN-UP FORM */

/* NOTE: We need to reuse this id because it's being targetted in JQUERY */
/* unsetting styling from the original checkout stylesheets */
#atb-existing-customer {
    all: unset;
}

#atb-new-customer {
    all: unset;
}

#atb-main-party-section .col-12,
#atb-existing-customer .col-12,
#atb-new-customer .col-12 {
    padding-left: 0px;
    padding-right: 0px;
}

.atb-input-field {
    border-color: var(--input-border-color);
}

/* FORM INPUT (YOUR PARTY) */
.iti {
    display: block !important;
}

.logo {
    height: auto; 
    width: auto;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
}

.logo.progress-logo {
    max-height: 75px;
    margin-bottom: 24px;
}

input.form-control.age {
    max-width: 82px;
}

/* BOOKING SUMMARY */
/* NOTE: this backdrop is used to dim the background when the mobile is active */
.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* dim effect */
    z-index: 10;
}

/* NOTE: Summary will change height and become a drawer on mobile*/
#atb-summary {
    z-index: 1000;
    height: 64px;
    transition: all 0.2s ease;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    min-height: 0;
}

#atb-summary-label {
    background-color: unset;
    width: 100%;
    height: 64px;
    max-width: unset;
}

#atb-mobile-menu-drawer {
    position: fixed;
    background-color: var(--button-bg-color);
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    max-width: unset;
}

#atb-mobile-menu-close-btn {
    position: absolute;
    z-index: 1010;
    top: 12px; 
    right: 12px;
    height: 24px;
    width: 24px;
    border: 1px solid #f0f0f0;
    background-color: white;
    color: #666666;
    border-radius: 50%;
    padding: 0px;
}

#atb-summary-section {
    margin-bottom: unset;
}

#atb-summary-label-cost {
    font-size: var(--font-size-lg);
    padding-top: 0px;
    padding-bottom: 0px;
}

#atb-summary hr {
    margin-top: 16px;
    margin-bottom: 16px;
}

.atb-chip {
    font-size: var(--font-size-xxs);
    border: 1px solid var(--color-lightgrey);
    border-radius: 8px;
    color: #333333;
    padding: 3px 5px;    
}

.atb-chip.inverted {
    color: white;
}

.atb-chip.discount {
    border: 1px solid var(--color-dark-green);
    border-radius: 4px;
    color: var(--color-dark-green);
    text-transform: uppercase;
    text-wrap: nowrap;
    padding: 1px 2px;
    margin-left: 2px;
}

#atb-summary-label-text {
    font-size: unset;
    gap: 4px;
    color: white;
    cursor: pointer;
    padding: 0px;
}

#atb-summary-label-text .chevron {
    width: 14px;
    height: 14px;
    transform-origin: center;
    transition: transform 0.3s ease;
}

#atb-summary-label.active #atb-summary-label-text .chevron {
    transform: rotate(180deg);
}


/* BOOKING COMPLETE */
.atb-booking-complete-thank-you {
    background-color: var(--thank-you-bg-color);
    color: var(--secondary-text-color);
}

.atb-booking-complete-thank-you h3 {
    color: var(--thank-you-text-color);
}

/* BOOKING COMPLETE - ANNOTATED PROGRESS BAR*/
.atb-annotated-progress-bar {
    height: 6px;
    width: 100%;
    background-color: var(--annotated-progress-bar-incomplete-color);
}

.atb-annotated-progress-bar .progress {  
    height: 100%;
    width: 0px;
    background-color: var(--annotated-progress-bar-complete-color);           
    transition: width .8s ease-out;
}

.step-node {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.atb-annotated-progress-bar .step-node-circle {
    width: 24px; 
    height: 24px;
    background-color: var(--annotated-progress-bar-incomplete-color);
    z-index: 1;
}

.atb-annotated-progress-bar .step-node.complete .step-node-circle {
    background-color: var(--annotated-progress-bar-complete-color);
}

.atb-annotated-progress-bar .step-node-icon {
    font-size: var(--font-size-xs);
}

.step-node-text {
    position: absolute;
    white-space: nowrap;
    text-align: center;
    font-size: var(--font-size-sm);
}

.step-node-text.top {
    top: -35px;
}

.step-node-text.bottom {
    bottom: -50px;
    font-size: var(--font-size-xs);
}


/* "SHARE YOUR STAY" TEMPLATE */
.atb-text-copy {
    border: 1px solid var(--color-gunmetal-dark);
    overflow: hidden;
}

.atb-copy-text-btn {
    max-width: 76px;
    width: 76px;
    background-color: var(--color-gunmetal-dark);
}

.atb-copy-text-btn:hover {
    opacity: 0.8;
}


.faded-bg {
    position: absolute;
    top: 0; 
    right: 0;
    pointer-events: none;
    background: linear-gradient(to left, white, transparent);
}

.atb-share-links {
    color: var(--anchor-text-color);
}

.atb-share-links a {
    cursor: pointer;
}

.atb-customer-service-links span.atb-customer-service-pill {
    width: 72px;
    height: 72px;
    min-width: 72px;
    background-color: var(--color-gunmetal-dark);
}

/* .atb-customer-service-panel {
    max-width: 344px;
} */

.form-control.is-valid {
    background-image: none !important; /* Remove Bootstrap's default tick */
}


/* TODO: Rewvisit this, as we'll want consistent checkmarks across checkout 
Add Font Awesome check icon */
/* .was-validated .form-control:valid::after, 
.form-control.is-valid::after {
    content: "\f00c"; 
    font-family: "Font Awesome 6 Free";
    font-weight: 900; 
    color: #28a745;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
} */


.container-cs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* 16px gap between the divs */
    justify-content: center; /* Centers divs when they stack */
}
  
.box {
    width: calc(50% - 8px);
    max-width: 344px;
    padding: 24px;
    box-sizing: border-box; /* Ensures padding is included in width */
}

#atb-summary.complete {
    position: relative;
    top: 0;
    height: unset;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.atb-location-dropdown {
    display: flex;
    align-items: center;
}

/* Fullscreen Overlay */
#atb-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0.95;
    z-index: 9999;
}

#atb-loading-overlay-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0.95;
    z-index: 9999;
}

#atb-loading-content {
    width: unset;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-top: 5px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

#atb-scroll-down-indicator {
    width: 32px; 
    height: 32px; 
    border: none; 
    background-color: var(--button-bg-color);
    animation: bounce-down 1s ease-in-out infinite;
}

/* XCOVER bookng protect / Cancellation insurance */
.atb-cancellation-insurance img {
    max-width: 100px;
}

/* Motorhome */
.atb-motorhome-card {
    max-width: 825px;
    /* max-height: 176px; */
}

/* XCOVER */
/* body .tp-widget-wrapper .profile-url {
    flex-direction: row-reverse;
}

body .tp-widget-stars {
    width: 110px;
    margin: unset;
    margin-left: 10px;
} */

.atb-cancellation-reasons {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.atb-cancellation-reasons li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.atb-cancellation-reasons i {
  color: #198754;
  margin-top: 0.2rem; 
}

.responsive-rounded {
    border-radius: 8px; 
}

#atb-multi-booking-accordion .accordion-button:not(.collapsed) {
    --bs-accordion-active-bg: #f7f4f4;
}

.atb-delete-booking-btn {
    background-color: transparent;
    border: none;
}

.atb-delete-booking-btn:hover svg path {
    fill: red;
}

@keyframes bounce-down {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(6px);
    }
}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


@media (max-width: 640px) {
    .box {
        width: 100%; /* Full width on mobile */
    }
}

/* MEDIA QUERIES */
@media only screen and (min-width: 768px) {
    #atb-summary {
      position: sticky;
      top: 110px;       
      height: auto;
      bottom: 0;
      left: 0;
    }
}


/*  TODO: Can possibly be removed now? Had a use when the layout was more nested */
@media (max-width: 767.98px) {
    /* #atb-summary is a fixed 64px bar pinned to the bottom of the viewport on mobile/zoomed
       layouts. Without this, scrolling a focused element into view can leave it hidden behind
       the bar (WCAG 2.4.11 Focus Not Obscured). */
    html {
        scroll-padding-bottom: 64px;
    }

    /* Reserve real scroll space below the main content so it can be scrolled clear of the
       fixed "Open summary" bar, which otherwise permanently covers the last 64px of the page
       at 200%/400% zoom (WCAG 1.4.4 / 1.4.10). */
    .atb-body.container {
        padding-bottom: 64px;
    }

    .responsive-rounded {
        border-radius: 8px 8px 0px 0px;
    }

    /* .atb-extra p {
        max-width: 290px;
    } */

    /* .atb-stepper.atb-addon label {
        max-width: 120px;
    } */
}

@media (max-width: 576px) {
    .atb-annotated-progress-bar {
        height: 440px;
        width: 6px;    
        background-color: var(--annotated-progress-bar-incomplete-color);    
    }
    
    .atb-annotated-progress-bar .progress {  
        height: 0%;
        width: 6px;
        background-color: var(--annotated-progress-bar-complete-color);           
        transition: height .8s ease-out;
    }
    
    .step-node {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 24px;
        height: 24px;
        right: 10px;
    }
    
    .atb-annotated-progress-bar .step-node-circle {
        width: 24px; 
        height: 24px;
        background-color: var(--annotated-progress-bar-incomplete-color);
        z-index: 1000;
    }
    
    .atb-annotated-progress-bar .step-node.complete .step-node-circle {
        background-color: var(--annotated-progress-bar-complete-color);
    }
    
    .atb-annotated-progress-bar .step-node-icon {
        font-size: var(--font-size-xs);
    }

    .step-node-text {
        position: absolute;
        white-space: nowrap;
        text-align: left;
        font-size: var(--font-size-sm);
        left: 40px;
    }

    .step-node-text.bottom {
        bottom: -40px;
        font-size: var(--font-size-xs);
    }
    
    .step-node-text.top {
        top: 0px;
    }
}