@charset " utf-8";

/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
*,::before,::after{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}*{box-sizing:border-box}html,body{width:100%;height:100%}body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}img,svg{max-width:100%;vertical-align:middle}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}p:last-of-type{margin-bottom:0}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type='search']{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}

/* ________________________________________ VARIABLES ________________________________________ */
:root{
    /*Colors*/
    --color_white : #ffffff;
    --color_black : #222222;
    --color_raspberry: #7F1D49;
    --color_gold_flat: #DFB77C;
    --color_pink: #F3CED9;
    --color_pink_shade1: #DFC6D1;
    --color_magenta: #A61F7D;
    --color_navy: #2B3450;
    --color_coral: #F26F6A;
    --color_purple: #50284F;
    --color_teal: #067483;
    --color_gold: #A76D29;
    --color_brown: #843921;
    --color_gunmetal_flat: #39393A;
    --color_grey_medium: #7F7F7F;
    --color_grey_disabled: #D6D6D6;
    --color_cream: #FCFCF6;
    --color_cream_shade1: #F6F4EB;
    --color_cream_shade2: #EFDBBD;
    --color_success_green: #0E8151;
    --color_success_green_light: #E2FFF3;
    --color_error_red: #B6180C;
    --color_error_red_light: #FFE2DF;
    --color_focus_blue: #4A6FE2;

    /*Gradients*/
    --gradient_opal: linear-gradient(224deg, #FDECF3 0%, #F5E9F3 11%, #F8EFF2 23%, #FFFEF1 35%, #FBFBF1 48%, #EFF2F2 60%, #DCE4F4 71%, #FEE9DF 100%);
    --gradient_opal_soft: linear-gradient(57deg, #fdecf3b3 0%, #f5e9f3b3 11%, #f7edf1b3 23%, #fffef1b3 35%, #fbfbf1b3 48%, #eff2f2b3 60%, #dce4f4b3 71%, #fee9dfb3 100%);

    /*Media Queries*/
    --breakpoint_small: 375px;
    --breakpoint_medium: 600px;
    --breakpoint_large: 1000px;
    --breakpoint_xlarge: 1400px;

    /*Font Families*/
    --font_family_ivymode: 'ivymode', sans-serif;
    --font_family_mala: 'mala-extended', serif;
    --font_family_montserrat: 'montserrat', sans-serif;


    /*Font styles*/
    --font_body_tiny: 12px/17.4px var(--font_family_montserrat); letter-spacing:-0.12px;
    --font_body_small: 14px/20.3px var(--font_family_montserrat); letter-spacing:-0.14px;
    --font_body_regular: 16px/23.2px var(--font_family_montserrat); letter-spacing:-0.16px;
    --font_body_medium: 18px/26.1px var(--font_family_montserrat); letter-spacing:-0.18px;
    --font_body_large: 20px/29px var(--font_family_montserrat); letter-spacing:-0.2px;

    /*Links Styles*/
    --font_link_small: 700 14px/16.8px var(--font_family_mala);
    --font_link_large: 700 16px/19.2px var(--font_family_mala);


    /*Container*/
    --container_width:1200px;
    --container_padding:36px;


    /*Padding between blocks*/
    --section_padding_block:0;


    /*Buttons*/
    --button_color: var(--color_raspberry);
    --button_inset_color: rgb(127 29 73 / 50%); /*--color_rasberry @ 50%*/

    --header_height:110px;
}
/* UPDATE VARIABLES ON LARGE SCREENS */
@media (width >= 1000px) {
    :root{
        /*--header_height:117px;*/

        /*Padding between blocks*/
        /*--section_padding_block:60px;*/
    }
}


/* ________________________________________ TYPOGRAPHY _____________________________________ */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {margin:0 0 0 0;}
h1, .h1 { font-family: var(--font_family_ivymode); font-weight: 600; font-size: 67px; line-height: 77.06px; letter-spacing: 1.34px; }
h2, .h2 { font-family: var(--font_family_mala); font-weight: 700; font-size: 16px; line-height: 19.2px; letter-spacing: 2.24px; text-transform: uppercase; color: var(--color_raspberry); }
h3, .h3 { font-family: var(--font_family_ivymode); font-weight: 600; font-size:38px; line-height: 43.7px; letter-spacing: 0.76px; }
h4, .h4 { font-family: var(--font_family_ivymode); font-weight: 600; font-size:24px; line-height: 27.6px; letter-spacing: 0.48px; }
h5, .h5 { font-family: var(--font_family_ivymode); font-weight: 600; font-size:20px; line-height: 23px; letter-spacing: 0.4px; }
h6, .h6 { font-family: var(--font_family_mala); font-weight: 700; font-size: 16px; line-height: 19.2px; letter-spacing: 2.24px; text-transform: uppercase;}
@media (width >=1000px) {
    h1, .h1 { font-size:96px; line-height:110.4px; letter-spacing: 1.92px; }
    h2, .h2 { font-size:22px; line-height:32.5px; letter-spacing: 3.08px; }
    h3, .h3 { font-size:60px; line-height:69px; letter-spacing: 1.2px; }
    h4, .h4 { font-size:32px; line-height:36.8px; letter-spacing: 0.64px; }
    h5, .h5 { font-size:28px; line-height:32.2px; letter-spacing: 0.56px; }
    h6, .h6 { font-size:22px; line-height:32.5px; letter-spacing: 3.08px }
}


/* ________________________________________ UTILITY CLASSES _____________________________________ */
.font_body_tiny{ font:var(--font_body_tiny); letter-spacing:-0.12px; }
.font_body_small{ font:var(--font_body_small); letter-spacing:-0.14px; }
.font_body_regular{ font:var(--font_body_regular); letter-spacing:-0.16px; }
.font_body_medium{ font:var(--font_body_medium); letter-spacing:-0.18px; }
.font_body_large{ font:var(--font_body_large); letter-spacing:-0.2px; }
.font_weight_400{ font-weight:400;}
.font_weight_600{ font-weight:600;}
.font_weight_700{ font-weight:700;}
.font_link_small{ font: var(--font_link_small); letter-spacing:1.89px; }
.font_link_large{ font: var(--font_link_large); letter-spacing:2.16px; }


.color_white{color: #ffffff;}
.color_black{color: #222222;}
.color_raspberry{color: #7F1D49;}
.color_gold_flat{color: #DFB77C;}
.color_pink{color: #F3CED9;}
.color_pink_shade1{color: #DFC6D1;}
.color_magenta{color: #A61F7D;}
.color_navy{color: #2B3450;}
.color_coral{color: #F26F6A;}
.color_purple{color: #50284F;}
.color_teal{color: #067483;}
.color_gold{color: #A76D29;}
.color_brown{color: #843921;}
.color_gunmetal_flat{color: #39393A;}
.color_grey_medium{color: #7F7F7F;}
.color_grey_disabled{color: #D6D6D6;}
.color_cream{color: #FCFCF6;}
.color_cream_shade1{color: #F6F4EB;}
.color_cream_shade2{color: #EFDBBD;}
.color_success_green{color: #0E8151;}
.color_success_green_light{color: #E2FFF3;}
.color_error_red{color: #B6180C;}
.color_error_red_light{color: #FFE2DF;}
.color_focus_blue{color: #4A6FE2;}


/* ________________________________________ BASE STYLES __________________________________ */
body { background-color:var(--color_cream); color:var(--color_navy); font:16px/23.2px var(--font_family_montserrat); letter-spacing:-0.16px;}
p {margin:0 0 1em 0;}
p:last-of-type {margin:0;}
.container{
    margin: 0 auto;
    max-width: var(--container_width);
    padding-inline: var(--container_padding);
}s
p strong, p b {font-weight:600;}
button{
    cursor:pointer;
}
dialog{
    color: var(--color_navy);
    &[open]{
        animation: fade_in_dialog /*duration*/ 0.5s /*delay*/ 0s forwards;
    }
}
dialog::backdrop {
  background-color: #00000080;
}
@keyframes fade_in_dialog {
    0% { opacity:0; }
    100% { opacity:1; }
}
/*Hide body scrolling when a dialog is open*/
body:has(dialog[open]){
    overflow: hidden;
}
/*So svg strokes don't scale down*/
.block svg path{
    vector-effect: non-scaling-stroke;
}
/*So modal dialogs dont force scroll to top*/
body.modal-open {
    overflow: visible;
}



/* ________________________________________ LINKS & BUTTONS ______________________________ */
/*BUTTON*/
.button, a.button{
    background: transparent;
    border:1px solid;
    display: inline-block;
    color:var(--button_color);
    font-family: var(--font_family_mala);
    cursor:pointer;
    font-weight:700;
    padding:3px;
    text-decoration:none;
    width: fit-content;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 2.16px;
    line-height:1;
    white-space: nowrap;
    outline:0;
    transition: color 0.3s ease-in;
    text-align:center;
}
button svg, .button svg{
    pointer-events:none;
}
.button > span{
    border: 1px solid var(--button_inset_color);
    padding: 24px;
    display: block;
    white-space: nowrap;
}
/*Line animations on buttons*/
.button:before{
    content: '';
    display: block;
    position: absolute;
    background: var(--color_gold_flat);
    height: 1px;
    top: 3px;
    left: 3px;
    width: calc(100% - 7px);
    transition: transform .5s cubic-bezier(.71,.29,.18,.97);
    transform: scaleX(0);
    transform-origin: right;
    will-change: transform;
}
.button:after{
    content: '';
    display: block;
    position: absolute;
    background: var(--color_gold_flat);
    height: 1px;
    bottom: 3px;
    left: 3px;
    width: calc(100% - 7px);
    transition: transform .5s cubic-bezier(.71,.29,.18,.97);
    transform: scaleX(0);
    transform-origin: left;
}
.button > span:before{
    content: '';
    display: block;
    position: absolute;
    background: var(--color_gold_flat);
    height: calc(100% - 6px);
    top: 3px;
    left: 3px;
    width: 1px;
    transition: transform .5s cubic-bezier(.71,.29,.18,.97);
    transform: scaleY(0);
    transform-origin: bottom;
}
.button > span:after{
    content: '';
    display: block;
    position: absolute;
    background: var(--color_gold_flat);
    height: calc(100% - 6px);
    top: 3px;
    right: 3px;
    width: 1px;
    transition: transform .5s cubic-bezier(.71,.29,.18,.97);
    transform: scaleY(0);
    transform-origin: top;
}
/*Short Button*/
.button.short > span{
    padding:16px 24px;
    font-size: 14px;
}
/*Raspberry Button*/
.button.raspberry{
    --button_color:var(--color_raspberry);
    --button_inset_color: rgb(127 29 73 / 50%); /*--color_rasberry @ 50%*/
}
/*White Button*/
.button.white{
    --button_color:var(--color_cream);
    --button_inset_color: rgb(252 252 246 / 50%); /*--color_cream @ 50%*/
}
/*Gold Button*/
.button.gold{
    --button_color:var(--color_gold_flat);
    --button_inset_color: rgb(223 183 124 / 50%); /*--color_gold_flat @ 50%*/
}
/*Button hover - all buttons turn gold on hover*/
.button:is(:hover, :focus),
.button:is(.white, .raspberry):is(:hover,:focus){
    --button_color: var(--color_gold_flat);
}
.button:is(:hover,:focus):before{
    transform: scaleX(1);
}
.button:is(:hover,:focus):after{
    transform: scaleX(1);
}
.button:is(:hover,:focus) > span:before{
    transform: scaleY(1);
}
.button:is(:hover,:focus) > span:after{
    transform: scaleY(1);
}

/*Common Slider Controls*/
.slider_controls{
    position: absolute;
    bottom: 27px;
    left: 27px;
    z-index: 1;
    display: flex;
    gap: 4px;
    align-items: center;
    /*Small Screens - Smaller Buttons*/
    @media (width < 1000px) {
        bottom: 12px;
        left: 16px;
    }
}
/*Pager Buttons*/
.pager{
    display:flex;
    gap:3px;
    --color_bg:var(--color_raspberry);
    --color_fg:var(--color_gold_flat);
    --color_border:var(--color_raspberry);

    button{
        padding: 19px 18px;
        border: 1px solid var(--color_border);
        background: var(--color_bg);
        color: var(--color_fg);
        cursor: pointer;
        outline:0;
        transition: background 0.3s, border-color 0.3s, color 0.3s;
        /*Small Screens - Smaller Buttons*/
        @media (width < 1000px) {
            width: 58px;
            height: 45px;
            padding: 10px 10px 9px 13px;
        }
        /*Disabled Buttons*/
        &.swiper-button-disabled,
        &.swiper-button-disabled:is(:hover, :focus) {
            --color_bg:#E2E2E2!important;
            --color_fg:var(--color_grey_medium)!important;
            --color_border:var(--color_bg)!important;
        }
    }
    [value=prev]{
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
    }
    [value=next]{
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
    }
}
.pager.raspberry{
    --color_bg:var(--color_raspberry);
    --color_fg:var(--color_gold_flat);
    --color_border:var(--color_raspberry);
}
.pager.raspberry button:is(:hover, :focus){
    --color_bg:var(--color_cream);
    --color_fg:var(--color_raspberry);
    --color_border:var(--color_raspberry);
}
.pager.cream{
    --color_bg:var(--color_cream);
    --color_fg:var(--color_raspberry);
    --color_border:var(--color_gold_flat);
}
.pager.cream button:is(:hover, :focus){
    --color_bg:var(--color_raspberry);
    --color_fg:var(--color_gold_flat);
    --color_border:var(--color_raspberry);
}
button[value=fullscreen]{
    cursor: pointer;
    outline: 0;
    padding: 8px;
    background: transparent;
    border-radius: 5px;
    border: 1px solid transparent;
    transition: border-color 0.3s;
    /*Small Screens - Smaller Buttons*/
    @media (width < 1000px) {
        width: 42px;
        height: 42px;
    }
    svg{
        pointer-events: none;
        width: 100%;
        height: 100%;
    }
}
button[value=fullscreen]:is(:hover, :focus){
    border-color:var(--color_cream);
}



/*Inline Links*/
/*Font family "mala" is causing large focus outlines*/
nav a, nav a span{
    width:fit-content;
}
:is(p,form,ol,ul) a{
    color:var(--color_magenta);
    text-decoration: underline;
}
:is(p,form,ol,ul) a:hover{
    /*color:var(--color_navy);*/
    color:var(--color_raspberry);
}
:is(p,form,ol,ul) a:visited{
    /*Chris commented out, lets see if this breaks anything*/
    /*color:inherit;*/
}

/*Bold CTA Links*/
:is(.link_small, .link_large){
    display: flex;
    gap:8px;
    align-items:center;
    text-transform: uppercase;
    text-decoration: none;
    outline: none;
    cursor:pointer;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 10%;
    text-underline-offset: 25%;
    text-underline-position: from-font;
    line-height: 125%;

    /*Crop so arrow can grow*/
    span:nth-child(2){
        overflow: hidden;
    }
    svg{
        transform: translateX(-10px);
        transition: transform 0.2s ease-out;
    }
}
:is(.link_small, .link_large).reverse{
    /*Crop so arrow can grow*/
    span:nth-child(1){
        overflow: hidden;
    }
    span:nth-child(2){
        overflow: unset;
    }
    svg{
        transform: translateX(10px);
    }
}
.link_small{
    font: var(--font_link_small);
    letter-spacing:1.89px;
}
.link_large{
    font: var(--font_link_large);
    letter-spacing:2.16px;
}
:is(.link_small, .link_large):is(:hover, :focus),
a:is(:hover, :focus) :is(.link_small, .link_large){
    text-decoration-style: dotted;
    text-decoration-line: underline;

    svg{
        transform: unset;
    }
}





/* ________________________________________ FORMS ________________________________________ */
form{
    .field :is(input, textarea){
        background: transparent;
        border: 1px solid var(--color_navy);
        border-radius:0;
        padding: 13px 18px;
        color:var(--color_navy);
    }
    .field :is(input,textarea)::placeholder{
      opacity: 0.74;
      color: var(--color_grey_medium);
    }
    .field label{
        display: grid;
        gap: 8px;
    }
    .field label > span:first-child{
        color:var(--color_raspberry);
        font:600 14px/20.3px var(--font_family_montserrat); letter-spacing:-0.14px;
    }
    .field.checkboxes{
        position: relative;
    }
    .field.checkboxes > span:first-child {
        position: absolute;
        overflow: hidden;
        width: 0;
        height: 0;
    }
    label:is(.cms_checkbox, .cms_radio){
        grid-template-columns: 24px auto;
        color: var(--color_navy);
        cursor: pointer;
        gap: 8px;

        .input_wrap{
            width: 24px;
            height: 24px;
            position: relative;
            border: 1px solid var(--color_navy);

            &:has(input:checked){
                border: 0;
            }
        }
        .text_wrap{
            font-size: 12px;
            user-select: none;
        }

        .input_wrap input{
            width:0;
            height:0;
            position: absolute;
            opacity: 0;
        }
        .input_wrap input:checked + span{
            width: 100%;
            height: 100%;
            display: block;
            background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><rect width="24" height="24" fill="%237F1D49"/><path d="M5 11.875L10.125 17L20.125 7" stroke="white"/></svg>');
        }
    }


    @media (min-width: 1000px) {
        label:is(.cms_checkbox, .cms_radio){
            gap: 18px;
        }
    }
    /*Select*/
    .select_wrapper{
        position: relative;
        border:1px solid var(--color_navy);
    }
    .select_wrapper select{
        background: transparent;
        border: 0;
        width: 100%;
        height: 100%;
        appearance: none;
        padding: 14px 50px 14px 12px;
        border-radius: 0;
        color:var(--color_navy);
    }
    .select_wrapper:after {
        content: '';
        width: 20px;
        height: 46px;
        display: block;
        background: url('data:image/svg+xml,<svg width="22" height="12" viewBox="0 0 22 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L11 11L21 1" stroke="%232B3450"/></svg>') center no-repeat;
        position: absolute;
        right: 12px;
        top: 0;
        pointer-events: none;
        transform-origin: center;
        transition: transform 0.3s ease-in;
    }
    .select_wrapper:has(select:open):after{
        transform: rotate(180deg);
    }
    option {
        background-color:var(--color_cream);
    }
    /*Focus*/
    .field :is(input, textarea, select):focus {
        outline: 2px solid var(--color_focus_blue);
        outline-offset: -1px;
    }
    .input_wrap:has(input:focus) {
        outline: 2px solid var(--color_focus_blue);
        outline-offset: -1px;
    }
    /*Validation*/
    .f_error :is(input, textarea, select) {
        outline: 2px solid var(--color_error_red);
        outline-offset: -1px;
    }
    .f_error .input_wrap{
        outline: 2px solid var(--color_error_red);
        outline-offset: -1px;
    }
    .f_error_message {
        color: var(--color_error_red);
        display:flex;
        gap:8px;
        align-items:flex-start;
        margin-top: 8px;
        font:var(--font_body_small);
    }
    .f_error_message:before {
        content: url('data:image/svg+xml,<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.41667 13.2365C2.85833 13.2365 0 10.3782 0 6.81987C0 3.26153 2.85833 0.403198 6.41667 0.403198C9.975 0.403198 12.8333 3.26153 12.8333 6.81987C12.8333 10.3782 9.975 13.2365 6.41667 13.2365ZM7.29167 2.73653H5.54167V7.4032H7.29167V2.73653ZM6.41667 8.56987C5.775 8.56987 5.25 9.09487 5.25 9.73653C5.25 10.3782 5.775 10.9032 6.41667 10.9032C7.05833 10.9032 7.58333 10.3782 7.58333 9.73653C7.58333 9.09487 7.05833 8.56987 6.41667 8.56987Z" fill="%23B6180C"/></svg>');
        margin-top: 2px;
    }
}
/*Form Submitted*/
.form_submitted{
     .form_content {
        display: none;
    }
    .form_submit_status{
        padding-block: 100px;
        display: grid;
        text-align: center;
        place-items: center;
        gap: 38px;
        @media (min-width: 600px) {
            gap: 30px;
        }
    }
    .form_submit_status a {
        font-family: var(--font_family_mala);
        font-weight: 700;
        font-size: 16px;
        line-height: 19.2px;
        letter-spacing: 2.24px;
        text-transform: uppercase;
        color: var(--color_magenta);
    }
}




/* ________________________________________ STANDARD POPUP WITH SLIDER ______________________________ */
.block dialog.popup_gallery{
    border: 0;
    padding: 40px 0 0;
    /*aspect-ratio:2/1;*/
    background: transparent;
    max-width: 1150px;
    width: 100%;
    overflow: visible;

    .swiper-slide{
        object-fit: cover;
        user-select: none;
        aspect-ratio: 2 / 1.75;
        @media (min-width: 600px) {
            aspect-ratio: 2 / 1;
        }
        figure{
            margin:0;
            width: 100%;
            height: 100%;
        }
        img{
            object-fit: cover;
            object-position: center;
            width: 100%;
            height: 100%;
        }
    }

    figcaption{
        background: var(--color_navy);
        color: var(--color_gold_flat);
        padding: 8px 8px;
        text-align: center;
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    [value=close]{
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        color: var(--color_white);
        background: transparent;
        border: 0;
        width: 40px;
        height: 40px;
    }
    @media (min-width: 1000px) {
        [value=close]{
            right: -40px;
        }
    }
    .slider_controls{
        position: static;
        margin-top: 30px;
    }
    .pager{
        justify-content: space-between;
        width: 100%;
    }
}


/* ________________________________________ ROUNDED CORNERS ON MOST BLOCKS ______________________________ */
.block{
    --corner_size: 100px;
    --spacing_size: 100px;
}
.corner_wrap{
    position: relative;
    padding-block: var(--spacing_size);
    overflow: hidden;
    z-index:1;

    @media (width >= 1000px) {
        --corner_size: 200px;
    }
    &.top_left{
        padding-top: var(--spacing_size);
        border-top-left-radius:var(--corner_size);
    }
    &.top_right{
        padding-top: var(--spacing_size);
        border-top-right-radius:var(--corner_size);
    }
    &.bottom_left{
        padding-bottom: var(--spacing_size);
        border-bottom-left-radius:var(--corner_size);
    }
    &.bottom_right{
        padding-bottom: var(--spacing_size);
        border-bottom-right-radius:var(--corner_size);
    }
}
/*When this block has bottom corners, update the top of the next block*/
.umb-block-grid__layout-item:has(.bottom_left,.bottom_right) + .umb-block-grid__layout-item .block{
    margin-top: calc(var(--spacing_size) * -2);

    .corner_wrap{
        padding-top: calc(var(--spacing_size) * 3);
    }
}
/*When the next block has top corners, move it up*/
.umb-block-grid__layout-item:has(+ .umb-block-grid__layout-item :is(.top_left, .top_right)) + .umb-block-grid__layout-item .block {
    margin-top:calc(var(--spacing_size) * -2);
}
/*When the next block has top corners, update the bottom of this block*/
.umb-block-grid__layout-item:has(+ .umb-block-grid__layout-item :is(.top_left, .top_right)) .corner_wrap {
    padding-bottom: calc(var(--spacing_size) * 3);
}
/*Any block that has bottom borders, raise z-index*/
.umb-block-grid__layout-item:has(.bottom_left, .bottom_right){
    z-index:2;
    position: relative;
}
/*Update the z-index of this block when the next block is z-index:2*/
.umb-block-grid__layout-item:has(.bottom_left, .bottom_right):has(+ .umb-block-grid__layout-item :is(.bottom_left, .bottom_right)) {
    z-index: 3;
}




/* ________________________________________ CUSTOM SELECTION ______________________________ */
::selection {
    background: var(--color_gold_flat);
    color: var(--color_navy);
}



/* ________________________________________ CUSTOM SCROLLBAR ______________________________ */
/* ...Firefox */
* {scrollbar-width: 10px; scrollbar-color: var(--color_raspberry) var(--color_white);}
/* ...Chrome, Edge, and Safari */
*::-webkit-scrollbar {width: thin; height: thin;}
*::-webkit-scrollbar-track {background: var(--color_raspberry);background: transparent;}
*::-webkit-scrollbar-thumb {border-radius: 8px;border: 8px solid var(--color_white);border: 8px solid var(--color_primary);}

/* ---------------------------------------- CUSTOM BOOKING WIDGET ------------------------- */
.booking-widget-container {
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.33);

    .booking-widget {
        position: absolute;
        z-index: 9999;
        right: 16px;
        top: 16px;
        width: 100%;
        max-width: 400px;
        background-color: var(--color_cream_shade1);

        @media screen and (max-width: 768px) {
            right: 0;
            top: 0;
        }

        .close {
            margin: 16px;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 32px;
            color: var(--color_raspberry);

            &:hover {
                color: var(--color_magenta);
            }
        }

        .cta {
            margin-top: 24px;
        }

        a {
            color: var(--color_magenta);
            text-decoration: underline;
            text-transform: none;
        }

        .button {
            background-color: var(--color_raspberry);
            color: var(--color_gold_flat);
            width: 100%;
            text-decoration: none;

            span {
                font-family: var(--font_mala);
                font-size: 16px;
                font-weight: 700;
                text-transform: uppercase;
            }
        }

        .widget-header {
            padding: 48px 32px 0 32px;
            text-align: center;

            h3 {
                font-size: 32px;
                font-family: var(--font_family_ivymode);
                color: var(--color_navy);
            }

        }

        form {
            color: var(--color_navy);
            margin: 0;
        }

        .form-row {
            padding: 16px 32px;
        }

        label {
            display: block;
            color: var(--color_raspberry);
            text-align: center;
            text-transform: uppercase;
            font-size: 16px;
            font-weight: 700;
            font-family: var(--font_family_mala);
            letter-spacing: 2px;
            line-height: 120%;
        }

        .inputs {
            display: block;
            width: calc(100% - 64px);
            margin: 0 auto 16px auto;
            padding: 12px 8px;
            border: 1px solid var(--color_navy);
        }

        .input-field {
            font-size: 20px;
            text-align: center;
            width: 40px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            outline: none;
        }

        .input-container {
            width: 100%;
            display: flex;
            align-items: center;
            text-align: center;;

            .guests-input {
                width: calc(50% - 1px);
                border-right: 1px solid var(--color_navy);
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

            .beds-input {
                width: calc(50% - 1px);
                border-left: none;
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }

        .groups {
            text-align: center;

            p, a {
                font-size: 14px;
            }
        }

        .special-code {

            input {
                width: 100%;
                text-align: center;
                padding: 12px;
                margin-top: 16px;
                border-radius: 0;
                border: 1px solid var(--color_navy);

                &::placeholder {
                    color: var(--color_grey_medium);
                    font-size: 14px;
                }
            }
        }

    }

    .calendar {
        padding: 32px 0;
    }

    .ui-spinner {
        border: 0 !important;
        width: calc(100% - 16px);
        background-color: transparent;

        input {
            border: 0 !important;
            margin: 0 8px;
        }
    }
    .ui-spinner-button {
        border: 0;
        border-radius: 0 !important;
        background-color: transparent;
        width: 40px;
        height: 40px;
        z-index: 999;

        &:hover, &:active {
            background-color: var(--color_raspberry);
            color: #fff;
        }

        &.ui-spinner-down {
            left: 0;
            top: 0;
        }

        &.ui-spinner-right {
            right: 0;
            top: 0;
        }

        .ui-icon {

            &:hover, &:focus {
                background-image: url("https://www.songteller.com/css/jQuery-UI/1.13.2/images/ui-icons_ffffff_256x240.png");
            }
        }

    }

}

/* hide easepick cal icon */
#booking_form > div.calendar.form-row > span:nth-child(2) {
    display: none !important;
    visibility: hidden !important;
}