* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}

html:has(dialog[open]) {
    scrollbar-gutter: stable;
}

:root {
    --zest-green: rgb(47 236 135);
    --zest-dark-green: rgb(28 135 87);
    --zest-purple: rgb(45 41 77);
    --zest-light-purple: rgb(65 59 108);
    --club-zest-yellow: rgb(233 192 49);
    --club-zest-light-yellow: rgb(255 216 81);
    --grey: rgb(244 244 244);
    --dark-grey: rgb(220 220 220);
    --darker-grey: rgb(35 35 35);
    --dark-purple-transparent-80: rgb(45 41 75 / 0.8);
    --dark-purple-transparent-60: rgb(45 41 75 / 0.6);
    --black-30: rgb(0 0 0 / .3);
    --zest-warning: rgb(255 204 51);
    --zest-warning-muted: rgb(255 240 182);
    --zest-error: rgb(182 0 0);
    --zest-error-muted: rgb(253 227 227);
    --zest-error-light: rgb(255 95 95);
    --zest-confirm: rgb(0 104 0);
    --zest-confirm-muted: rgb(221 253 226);
    --zest-confirm-light: rgb(0 211 0);
    --zest-info: rgb(0 88 168);
    --zest-info-muted: rgb(230 243 255);
    --page-width: 1080px;
    --border-radius: 4px;
    --extra-extra-small: 4px;
    --extra-small: 8px;
    --small: 16px;
    --medium: 24px;
    --large: 32px;
    --extra-large: 40px;
    /*for tick boxes ect*/
    accent-color: var(--zest-green);
    --grid-item-width-80: 80px;
    --grid-item-width-104: 104px;
    --grid-item-width-120: 120px;
    --grid-item-width-180: 180px;
    --grid-item-width-232: 232px;
    --grid-item-width-288: 288px;
    --grid-item-width-336: 336px;
    --grid-item-width-352: 352px;
    --grid-item-width-400: 400px;
    --grid-item-width-504: 504px;
}

body {
    padding: 0;
    margin: 0;
    font-family: "Open Sans", Arial, Helvetica, serif;
    color: var(--zest-purple);
}

body:has(dialog[open]) {
    overflow: hidden;
}

/* Headings and text */
h1,
h2,
h3,
h4,
h5 {
    font-family: "League Spartan", Arial, Helvetica, serif;
    font-weight: bold;
}

h1 {
    font-size: 56px;
    line-height: 60px;
}

h1.hero-heading {
    font-size: 64px;
    line-height: 56px;
}

h2 {
    font-size: 40px;
    line-height: 44px;
}

h3 {
    font-size: 32px;
    line-height: 36px;
}

h4 {
    font-size: 24px;
    line-height: 28px;
}

h5 {
    font-size: 20px;
    line-height: 24px;
}

.no-hover {
    pointer-events: none;
}

/* Text colour */
p {
    font-size: 16px;
    line-height: 24px;
}

.white-text {
    color: white;
}

.list-style-none {
    list-style: none;
}

.info-text {
    color: var(--zest-info);
}

.info-text-muted {
    color: var(--zest-info-muted);
}

.warning-text {
    color: var(--zest-warning);
}

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

.purple-text {
    color: var(--zest-purple);
}

.yellow-text, .clubzest-yellow-text {
    color: var(--club-zest-yellow);
}

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

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

.error-text {
    color: var(--zest-error);
}

.error-text-light {
    color: var(--zest-error-light);
}

.clubzest-yellow-text {
    color: var(--club-zest-yellow);
}

.confirm-text {
    color: var(--zest-confirm);
}

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

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

.italic {
    font-style: italic;
}

.noselect-text {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    user-select: none;
}

.text-shadow {
    text-shadow: 1px 1px #000;
}

.copy-text {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 24px;
}

.large-font {
    font-weight: bold;
}

.large-font-regular,
.large-font {
    font-size: 24px;
    line-height: 32px;

}

.small-font {
    font-size: 14px;
    line-height: 24px;
}

.extra-small-font {
    font-size: 12px;
    line-height: 20px;
}

.center {
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.text-decoration-none {
    text-decoration: none;
}

.text-decoration-underline {
    text-decoration: underline;
    text-decoration-color: inherit;
}

.inline-block {
    display: inline-block;
}

.confirm-light {
    color: var(--zest-confirm-light);
}

/* Background colour */
.white-background {
    background-color: #FFFFFF;
}

.dark-purple-background-transparent-80 {
    background-color: var(--dark-purple-transparent-80);
}

.dark-purple-background-transparent-60 {
    background-color: var(--dark-purple-transparent-60);
}

.black-background-30 {
    background-color: var(--black-30);
}

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

.dark-grey-background {
    background-color: var(--darker-grey);
}

.purple-background {
    background-color: var(--zest-purple);
}

.zest-green-background {
    background-color: var(--zest-green);
}

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

.yellow-background {
    background-color: var(--club-zest-yellow);
}

.background-image {
    background-position: center;
    background-size: cover;
}

.background-image-top {
    background-size: cover;
    background-position: top;
}

/* SVG */
.svg-dark-green {
    filter: brightness(0) saturate(100%) invert(48%) sepia(96%) saturate(361%) hue-rotate(100deg) brightness(90%) contrast(92%);
}

.svg-white {
    filter: brightness(0) invert(1);
}

.svg-zest-green {
    filter: brightness(0) saturate(100%) invert(80%) sepia(16%) saturate(1918%) hue-rotate(86deg) brightness(97%) contrast(90%);
}

.svg-dark-grey {
    filter: brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(415%) hue-rotate(41deg) brightness(113%) contrast(73%);
}

.svg-dark-green {
    filter: brightness(0) saturate(100%) invert(48%) sepia(96%) saturate(361%) hue-rotate(100deg) brightness(90%) contrast(92%);
}

.svg-clubzest-yellow {
    filter: brightness(0) saturate(100%) invert(90%) sepia(14%) saturate(2486%) hue-rotate(341deg) brightness(100%) contrast(83%);
}

.svg-purple {
    filter: brightness(0) saturate(100%) invert(14%) sepia(36%) saturate(948%) hue-rotate(207deg) brightness(92%) contrast(91%);
}

.svg-info {
    filter: brightness(0) saturate(100%) invert(20%) sepia(64%) saturate(3215%) hue-rotate(194deg) brightness(93%) contrast(104%);
}

.svg-clubzest-yellow {
    filter: brightness(0) saturate(100%) invert(90%) sepia(14%) saturate(2486%) hue-rotate(341deg) brightness(100%) contrast(83%);
}

.svg-error {
    filter: brightness(0) saturate(100%) invert(13%) sepia(85%) saturate(3944%) hue-rotate(354deg) brightness(90%) contrast(119%);
}

.svg-confirm {
    filter: brightness(0) saturate(100%) invert(22%) sepia(39%) saturate(3963%) hue-rotate(99deg) brightness(96%) contrast(107%);
}

.background-image {
    background-position: center;
    background-size: cover;
}

.underline-dots {
    border-bottom: 2px dotted;
    border-color: inherit;

}

.full-border-radius {
    border-radius: var(--border-radius);
}

.left-border-radius {
    border-radius: 4px 0 0 4px;
}

.right-border-radius {
    border-radius: 0 4px 4px 0;
}

.top-border-radius {
    border-radius: 4px 4px 0 0;
}

.bottom-border-radius {
    border-radius: 0 0 4px 4px;
}

.full-border-radius {
    border-radius: var(--border-radius)
}

.full-circle {
    border-radius: 100%;
}

.circle {
    width: 80px;
    height: 80px;
}

[hidden] {
    display: none;
}

/* Design elements */

.hero-ticks {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    margin: 0;
}

.hero-ticks li {
    padding-left: 25px;
    background-image: url(/images/icons/tick_green.svg);
    background-repeat: no-repeat;
    background-position: 0 4px;
    list-style: none;
    display: flex;
    align-items: center;
    background-size: 17px;
}

.cookie-banner {
    z-index: 1000;
}

.box-shadow {
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 0.1);
}

.pointer {
    cursor: pointer
}

.green-ticks {
    margin-left: 16px;
}

.green-ticks li {
    padding: 0 0 8px 8px;
}

.green-ticks li::marker {
    content: url(/images/icons/tick_green.svg);
}

/* Containers */
.content-width {
    max-width: var(--page-width);
    margin: 0 auto;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.component-container {
    padding: 64px 0;
    margin: 64px auto;
}

.component-container-small {
    padding: 32px 0;
    margin: 32px auto;
}

.component-container-x-small {
    padding: 24px 0;
    margin: 24px auto;
}

.component-container-xx-small {
    padding: 16px 0;
    margin: 16px auto;
}

.inner-container {
    padding: 128px 0;
}

.inner-container-small {
    padding: 64px 0;
}

.inner-container-x-small {
    padding: 48px 0;
}

.inner-container-xx-small {
    padding: 32px 0;
}

.warning-box {
    background-color: var(--zest-warning-muted);
    border: 1px solid var(--zest-warning);
}

.info-box {
    background-color: var(--zest-info-muted);
    border: 1px solid var(--zest-info);
}

.error-box {
    background-color: var(--zest-error-muted);
    border: 1px solid var(--zest-error);
}

.confirm-notification {
    background-color: var(--zest-confirm-muted);
    border: 1px solid var(--zest-confirm);
    border-radius: var(--border-radius);
}

.banner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--zest-purple);
    opacity: .75;
    z-index: 1;
}

.banner-50::after {
    opacity: .50;
}

.banner {
    position: relative;
}

.banner > * {
    z-index: 2;
    position: relative;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.narrow-width {
    max-width: 600px;
}

.full-width {
    width: 100%;
}

.fit-content {
    width: fit-content;
}


.full-height {
    height: 100%;
}

.auto-height {
    height: auto;
}

.suppliers .grid {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(114px, 1fr));
    list-style: none;
}

.suppliers .grid li {
    color: var(--zest-purple);
    text-decoration: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 40px;
    justify-content: center;
}

.grid-item-80 {
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width-80), 1fr));
}

.grid-item-104 {
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width-104), 1fr));
}

.grid-item-120 {
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width-120), 1fr));
}

.grid-item-180 {
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width-180), 1fr));
}

.grid-item-232 {
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width-232), 1fr));
}

.grid-item-288 {
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width-288), 1fr));
}

.grid-item-336 {
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width-336), 1fr));
}

.grid-item-352 {
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width-352), 1fr));
}

.grid-item-400 {
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width-400), 1fr));
}

.grid-item-504 {
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width-504), 1fr));
}

/* Borders */
.grey-divider {
    border-bottom: 1px solid var(--dark-grey);
}

.light-grey-dashed-divider {
    border-bottom: 1px dashed var(--grey);
}

.border-grey {
    border: 1px solid var(--grey);
}

.border-dark-grey {
    border: 1px solid var(--dark-grey);
}

.border-darker-grey {
    border: 1px solid var(--darker-grey);
}

.border-green {
    border: 1px solid var(--zest-green);
}

.border-dark-green {
    border: 1px solid var(--zest-dark-green);
}

.border-right-dark-green {
    border-right: 1px solid var(--zest-dark-green);
}

.no-border-top {
    border-top: 0 !important;
}

.no-border-bottom {
    border-bottom: 0 !important;
}

.no-border-left {
    border-left: 0 !important;
}

.no-border-right {
    border-right: 0 !important;
}

.no-border {
    border: 0 !important;
}


/* Positions */
.relative {
    position: relative;
}

.box-shadow {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.border-box {
    box-sizing: border-box;
}

/* Margin top */
.mt-xxs {
    margin-top: var(--extra-extra-small);
}

.mt-xs {
    margin-top: var(--extra-small);
}

.mt-s {
    margin-top: var(--small);
}

.mt-m {
    margin-top: var(--medium);
}

.mt-l {
    margin-top: var(--large);
}

.mt-xl {
    margin-top: var(--extra-large);
}


/* Margin top & bottom */
.my-xxs {
    margin-top: var(--extra-extra-small);
    margin-bottom: var(--extra-extra-small);
}

.my-xs {
    margin-top: var(--extra-small);
    margin-bottom: var(--extra-small);
}

.my-s {
    margin-top: var(--small);
    margin-bottom: var(--small);
}

.my-m {
    margin-top: var(--medium);
    margin-bottom: var(--medium);
}

.my-l {
    margin-top: var(--large);
    margin-bottom: var(--large);
}

.my-xl {
    margin-top: var(--extra-large);
    margin-bottom: var(--extra-large);
}

/* Margin bottom */
.mb-xs,
.mb-xs-fixed {
    margin-bottom: var(--extra-small);
}

.mb-s,
.mb-s-fixed {
    margin-bottom: var(--small);
}

.mb-m,
.mb-m-fixed {
    margin-bottom: var(--medium);
}

.mb-l,
.mb-l-fixed {
    margin-bottom: var(--large);
}

.mb-xl,
.mb-xl-fixed {
    margin-bottom: var(--extra-large);
}

.mr-xs {
    margin-right: var(--extra-small);
}

.mr-xxs {
    margin-right: var(--extra-extra-small);
}

.mr-s {
    margin-right: var(--small);
}

.mr-m {
    margin-right: var(--medium);
}

.mr-l {
    margin-right: var(--large);
}

.mr-xl {
    margin-right: var(--extra-large);
}

/* Padding */
.p-xs,
.p-xs-fixed {
    padding: var(--extra-small);
}

.p-s,
.p-s-fixed {
    padding: var(--small);
}

.p-m,
.p-m-fixed {
    padding: var(--medium);
}

.p-l,
.p-l-fixed {
    padding: var(--large);
}

.p-xl,
.p-xl-fixed {
    padding: var(--extra-large);
}

/* Padding top & bottom */
.py-xxs {
    padding-top: var(--extra-extra-small);
    padding-bottom: var(--extra-extra-small);
}

.py-xs {
    padding-top: var(--extra-small);
    padding-bottom: var(--extra-small);
}

.py-s {
    padding-top: var(--small);
    padding-bottom: var(--small);
}

.py-m {
    padding-top: var(--medium);
    padding-bottom: var(--medium);
}

.py-l {
    padding-top: var(--large);
    padding-bottom: var(--large);
}

.py-xl {
    padding-top: var(--extra-large);
    padding-bottom: var(--extra-large);
}

.px-xxs {
    padding-left: var(--extra-extra-small);
    padding-right: var(--extra-extra-small);
}

.px-xs {
    padding-left: var(--extra-small);
    padding-right: var(--extra-small);
}

.px-s {
    padding-left: var(--small);
    padding-right: var(--small);
}

.px-m {
    padding-left: var(--medium);
    padding-right: var(--medium);
}

.px-l {
    padding-left: var(--large);
    padding-right: var(--large);
}

.px-xl {
    padding-left: var(--extra-large);
    padding-right: var(--extra-large);
}

/*Flex*/
.flex {
    display: flex;
}

.flex-align-top {
    align-items: flex-start;
}

.flex-align-end {
    align-items: flex-end
}

.flex-align-center {
    align-items: center;
}

.flex-align-stretch {
    align-items: stretch;
}

.flex-align-start {
    align-items: flex-start;
}

.flex-justify-start {
    justify-content: flex-start;
}

.flex-justify-center {
    justify-content: center;
}

.flex-justify-space-between,
.justify-space-between {
    justify-content: space-between;
}

.flex-justify-end {
    justify-content: flex-end;
}

.justify-items-center {
    justify-items: center;

}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-justify-around {
    justify-content: space-around;
}

.flex-column {
    flex-direction: column;
}

.justify-end {
    justify-content: flex-end;
}

.justify-space-evenly {
    justify-content: space-evenly;
}

.justify-space-around {
    justify-content: space-around;
}

.align-content-space-between {
    align-content: space-between
}

.align-content-space-evenly {
    align-content: space-evenly;
}

.align-items-start {
    align-items: start
}

/* Grid */
.grid {
    display: grid;
}

.grid-gap-xxs {
    grid-gap: var(--extra-extra-small);
}

.grid-gap-xs {
    grid-gap: var(--extra-small);
}

.grid-gap-s {
    grid-gap: var(--small);
}

.grid-gap-m {
    grid-gap: var(--medium);
}

.grid-gap-l {
    grid-gap: var(--large);
}

.grid-gap-xl {
    grid-gap: var(--extra-large);
}

.grid-row {
    grid-row: auto;
}

.grid-col {
    grid-column: auto;
}

.grid-align-space-between {
    align-content: space-between;
}

/*Layouts*/
.two-one-col-layout,
.two-one-col-layout-mobile-responsive {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.two-col-layout,
.two-col-layout-mobile-responsive {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.one-two-col-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.one-two-col-layout-wide-right {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

.three-col-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.three-col-layout-container {
    container-type: inline-size;
    container-name: threeColWidth;
}

@container threeColWidth (max-width: 500px) {
    .three-col-layout {
        display: flex;
        flex-direction: column;
    }
}

/* Buttons */
.button {
    max-width: 280px;
    padding: 16px 24px;
    font-size: 16px;
    font-family: "Open Sans", arial, serif;
    font-weight: bold;
    text-align: left;
    box-sizing: border-box;
    border-radius: var(--border-radius);
    text-decoration: none;
    cursor: pointer;
    height: 64px;
    display: flex;
    align-items: center;
    width: 100%;
}

.button-no-outline,
.button-no-outline:focus {
    outline: none;
    border: none;
}

.button:active {
    box-shadow: 6px 6px 10px -3px rgb(0 0 0 / 0.7) inset;
}

.primary.button {
    background-color: var(--zest-green);
    border: none;
}

.primary.button:hover {
    background-color: var(--zest-dark-green);
    color: white;
}

.primary.button:hover span::before,
.primary.button:hover span::after {
    background-color: white;
}

.secondary.button {
    background-color: var(--zest-purple);
    border: none;
}

.secondary.button:hover {
    background-color: var(--zest-light-purple);
}

.tertiary.button {
    background: none;
    border: 1px solid #ffffff;
    color: #ffffff;
}

.tertiary.button:hover {
    background: rgb(0 0 0 / 0.4);
}

.tertiary-purple.button {
    background: none;
    border: 1px solid var(--zest-purple);
    color: var(--zest-purple);
}

.tertiary-purple.button:hover {
    background: var(--dark-purple-transparent-80);
    color: white;
}

.primary.button:hover span,
.secondary.button span,
.tertiary.button span,
.tertiary-purple.button:hover span {
    color: white;
}

.secondary.button span::before,
.secondary.button span::after,
.tertiary.button span::before,
.tertiary.button span::after,
.tertiary-purple.button:hover span::before,
.tertiary-purple.button:hover span::after {
    background-color: white
}

.button span {
    position: relative;
    width: 100%;
    text-align: left;
    display: block;
    color: var(--zest-purple);
}

.button span::before {
    transform: rotate(40deg);
}

.button span::after {
    transform: rotate(-40deg);
}

.button span::before,
.button span::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 8px;
    height: 2px;
    margin-top: 0;
    margin-left: -8px;
    background-color: rgb(45 41 75 / 0.8);
    -webkit-transition: all 100ms ease-out;
    -moz-transition: all 100ms ease-out;
    transition: all 100ms ease-out;
    transform-origin: 100% 50%;
}

.mobile-only-button {
    display: none !important;
}

.social-links a {
    text-decoration: none;
}

.club-zest.button {
    background-color: var(--club-zest-yellow);
    border: none;
}

.club-zest.button:hover {
    background-color: var(--club-zest-light-yellow);
}

.club-zest.button span {
    color: var(--zest-purple);
}

.club-zest.button span::before,
.club-zest.button span::after {
    background-color: var(--zest-purple);
}

.border-button-hover {
    outline: solid 0 var(--zest-green);
    transition: outline 0.2s linear;
}

.border-button-hover:hover {
    outline-width: 4px;
}

.green-background-hover:hover {
    background-color: var(--zest-green);
}

/*Slider*/
.slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.slide-content {
    max-width: 600px;
}

.slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #bbb;
    margin: 0 5px;
    cursor: pointer;
}

.dot.active {
    background-color: #555;
}

/*FAQ's*/
.FAQ details > summary span::after {
    content: '+';
    font-size: 40px;
}

.FAQ details[open] > summary {
    margin: 0;
}

details.faq > summary span {
    font-size: 24px;
}

details.accordion > summary span {
    font-size: 24px;
}


details.accordion > summary span::after {
    content: '+';
}

details.accordion[open] > summary span::after {
    content: '-';
}

details.accordion[open] > summary {
    margin-bottom: 0;
}

details.faq h3,
details.accordion h3 {
    font-size: 24px;
}

details.faq ul,
details.accordion ul {
    margin-left: 24px;
}

details.faq p,
details.faq ul,
details.accordion p,
details.accordion ul {
    margin-bottom: 16px;
}

details.faq p:last-child,
details.faq ul:last-child,
details.accordion p:last-child,
details.accordion ul:last-child {
    margin-bottom: 0;
}

#faq-all-results div:nth-child(odd) > details summary {
    background-color: var(--zest-purple);
    color: white;
}

/* Forms */
.input-container {
    max-width: 500px;
    padding: 24px;
    height: 80px;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    outline: 0;
    margin-bottom: 32px;
    border: 2px solid var(--dark-grey);
    font-size: 14px;
    line-height: 12px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--zest-purple);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    position: relative;
}

.input-container.search {
    margin-bottom: 0;
    border-radius: 4px 0 0 4px;
    border-top: 2px solid #fff;
    border-right: 0;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    max-width: 400px;
    width: 100%;
}

.search-field-container button {
    cursor: pointer;
    background-color: var(--zest-green);
    outline: 0;
    border: 0;
    padding: 16px;
    border-radius: 0 4px 4px 0;
    width: 80px;
}

.input-container:has(select) {
    padding: 0;
}

.input-container:has(input[type="radio"]) {
    height: auto;
    margin-bottom: 0;
    max-width: 100%;
}

.input-container:has(input[type="radio"]) label {
    display: flex;
}

.input-container:has(input[type="radio"]) label input {
    width: auto;
    margin-right: var(--extra-extra-small);
}

.input-container select,
.input-container:has(select) > span:first-child {
    padding: 0 24px;
    position: absolute;
    top: 18px;
}


.input-container:has(input:focus),
.input-container:has(input:active),
.input-container:has(select:focus),
.input-container:has(select:active),
.input-container:has(textarea:focus),
.input-container:has(textarea:active),
label.radio:has(input:checked),
.booking-selection:has(select option:checked:not([value="0"])) {
    border: 2px solid var(--zest-green);
    background-color: var(--zest-confirm-muted);
    outline: 0;
}

input:-webkit-autofill:focus,
select:-webkit-autofill:focus,
textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--zest-confirm-muted) inset !important;
}

.input-container label {
    font-size: 14px;
}

.input-container input,
.input-container textarea,
.input-container select {
    font-family: "Open Sans", Arial, serif;
    display: block;
    color: var(--zest-purple);
    width: 100%;
    font-size: 16px;
    vertical-align: middle;
    outline: none;
    border: none;
    left: 0;
    right: 0;
    bottom: 0;
    margin-bottom: 0;
    background: none;
    box-sizing: border-box;
    border-radius: 4px;
}

.input-container select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E);
    background-repeat: no-repeat;
    background-position: calc(100% - 24px) 41px;
    height: 100%;
    padding-top: 19px;
    top: 0;
}

.form_fields__field--has_warning:has(select):after {
    content: '';
}

.input-container textarea,
.input-container:has(textarea) {
    height: 150px;
}

.error-message {
    color: var(--zest-error);
    position: absolute;
    top: calc(100% - -6px);
    left: 0;
    font-size: 12px;
}

.error-message.light {
    color: var(--zest-error-light);

}

.input-container:has(input[required]:user-invalid),
.input-container:has(select[required]:user-invalid),
.input-container:has(textarea[required]:user-invalid),
label.radio:has(input:user-invalid) {

    border: 2px solid var(--zest-error);
}

.input-container:has(input[required]:user-invalid):after,
.input-container:has(textarea[required]:user-invalid):after {
    content: '\2716';
    position: absolute;
    top: 38px;
    right: 24px;
    transform: translateY(-50%);
    color: var(--zest-error);
    font-size: 22px;
}

.input-container:has(input[required]:user-valid):after,
.input-container:has(textarea[required]:user-valid):after {
    content: '\2714';
    position: absolute;
    top: 40px;
    right: 24px;
    transform: translateY(-50%);
    color: var(--zest-confirm);
    font-size: 22px;

}

.input-container:has(input[required]:user-valid) .error-message,
.input-container:has(select[required]:user-valid) .error-message,
.input-container:has(textarea[required]:user-valid) .error-message {
    display: none;
}

.input-container:has(textarea[required]:user-valid):after {
    top: 30px;
    font-size: 20px;
}

.input-container:has(input[required]:user-valid),
.input-container:has(select[required]:user-valid),
.input-container:has(textarea[required]:user-valid) {
    border: 2px solid var(--zest-confirm);
}

.input-container:has(input[required]:user-invalid) .error-message,
.input-container:has(select[required]:user-invalid) .error-message,
.input-container:has(textarea[required]:user-invalid) .error-message {
    display: block;
}

.input-container:has(input:required) > span:first-child::after,
.input-container:has(textarea:required) span:first-child::after,
.input-container:has(select:required) span:first-child::after {
    content: '*';
    color: var(--zest-error);
    margin-left: 2px;
}

.input-container[hidden] {
    display: none;
}

.input-container select option {
    padding: 8px;
}

.dark-form-fields .input-container {
    background: var(--grey);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
}

.dark-form-fields input:-webkit-autofill,
.dark-form-fields input:-webkit-autofill:hover,
.dark-form-fields input:-webkit-autofill:focus,
.dark-form-fields textarea:-webkit-autofill,
.dark-form-fields textarea:-webkit-autofill:hover,
.dark-form-fields textarea:-webkit-autofill:focus,
.dark-form-fields select:-webkit-autofill,
.dark-form-fields select:-webkit-autofill:hover,
.dark-form-fields select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--grey) inset;
}

.mini-form.form-container {
    container-type: inline-size;
    container-name: quoteformWidth;
}

@container quoteformWidth (max-width: 400px) {
    .mini-form.form-container .two-one-col-layout {
        display: flex;
        flex-direction: column;
    }

    .mini-form.form-container .two-one-col-layout {
        grid-gap: 0;
    }

    .mini-form .input-container {
        margin-bottom: var(--small);
    }
}

.form-container .button-container p {
    text-align: right;
}

.form-container .button-container p a {
    color: var(--zest-green);
}

.form-container .button-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 8px;
}

@container formWidth (max-width: 400px) {
    .form-container .button-container {
        display: flex;
        flex-direction: column;
    }

    .form-container .button-container p {
        text-align: left;
    }
}

/*date picker*/

.close-button, .small-close-button, .clear-filters {
    border: 0;
    background: none;
    cursor: pointer;
    font-weight: bold;
    outline: 0;
}

.small-close-button:after {
    content: "❌";
    position: absolute;
    right: 16px;
    top: 16px;
}

.search_dates__field_group {
    display: flex;
    flex-direction: column;
}

.close-button span:after {
    content: '❌ Close';
    border: 1px solid var(--grey);
    padding: var(--extra-small) var(--small);
    border-radius: var(--border-radius);
    background-color: white;
}


.ui-datepicker-prev span,
.ui-datepicker-next span {
    display: none;
}


#pickup_date_modal,
#return_date_modal {
    min-height: 462px;
    min-width: 360px;
    max-width: 400px;
}


.ui-datepicker-header {
    background: var(--grey);
    color: var(--zest-purple);
    border: none;
    padding: var(--small);
    position: relative;
    border-top: 1px solid #fff;
}

.ui-datepicker-title {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}


.ui-datepicker-prev {
    left: var(--small);
    rotate: 180deg;
}

.ui-datepicker-next {
    right: var(--small);
}

/* 3. Style the Next button with a chevron image */
.ui-datepicker-next,
.ui-datepicker-prev {
    position: absolute;
    color: var(--zest-purple);
    cursor: pointer;
    background: url(/images/icons/chevron-icon.svg) no-repeat center !important;
    border: 0 !important;
    height: 24px;
    width: 24px;
    background-size: 15px !important;
}


.ui-datepicker-calendar {
    width: 100%;
    border-collapse: collapse;
}

.ui-datepicker-calendar th {
    padding: var(--extra-small) 0;
    font-size: 14px;
    color: var(--zest-purple);
    text-align: center;
}

.ui-datepicker-calendar td {
    padding: 0;
    text-align: center;
}


.ui-datepicker-calendar .ui-state-default {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 8px auto;
    border: 0;
    background: 0 0;
    color: var(--zest-purple);
    font-size: 16px;
    text-decoration: none !important;
    border-radius: 50%;
    transition: background-color .2s, color .2s;
}

.ui-datepicker-calendar .ui-state-default:hover {
    background: var(--zest-green);
    border-radius: 50%;
    cursor: pointer;
}

.ui-state-active,
.ui-datepicker-current-day .ui-state-default {
    background: var(--zest-dark-green) !important;
    border-radius: 50%;
    font-weight: bold;
    color: white;
}

.ui-datepicker-unselectable.ui-state-disabled {
    opacity: 0.3;
}

.ui-datepicker-calendar .ui-state-disabled span:hover {
    pointer-events: none;
    background-color: inherit;
    color: inherit;
}


label.input-container.location.return.relative:after {
    border-style: solid;
    border-width: 2px 2px 0 0;
    content: "";
    display: inline-block;
    height: 7px;
    right: 29px;
    position: absolute;
    transform: rotate(135deg);
    vertical-align: top;
    width: 7px;
    z-index: 0;
}

.pagination .pagination__pagination_items {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
}

.pagination_items__item {
    font-weight: bold;
    padding: 16px;
    border-radius: 100%;
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--zest-purple);
    color: white;
}

.pagination_items__item a {
    color: inherit;
    text-decoration: none;
}

.pagination_items__item--is_current {
    background-color: var(--zest-green);
    color: var(--zest-purple);
}

.pagination_items__item.pagination_items__item--next_page,
.pagination_items__item.pagination_items__item--previous_page {
    font-weight: normal;
}

/* Loader */
.loader {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    text-align: center;
    padding: var(--small);
    box-sizing: border-box;
}

.loader svg {
    display: inline-block;
    width: auto;
    max-width: 75px;
    height: auto;
    max-height: 100%;
}

.loader svg .pip.pip--navy {
    -webkit-animation-name: pip_opacity;
    -webkit-animation-duration: 1200ms;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-name: pip_opacity;
    animation-duration: 1200ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.loader:after {
    content: 'Loading...';
}

.loader svg .pip.pip--navy.pip--top_center {
    animation-delay: 0ms;
}

.loader svg .pip.pip--navy.pip--top_right {
    animation-delay: 200ms;
}

.loader svg .pip.pip--navy.pip--bottom_right {
    animation-delay: 400ms;
}

.loader svg .pip.pip--navy.pip--bottom_center {
    animation-delay: 600ms;
}

.loader svg .pip.pip--navy.pip--bottom_left {
    animation-delay: 800ms;
}

.loader svg .pip.pip--navy.pip--top_left {
    animation-delay: 1000ms;
}

@-webkit-keyframes pip_opacity {
    0% {
        opacity: 0;
    }

    33.33333% {
        opacity: 1;
    }

    66.66667% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes pip_opacity {
    0% {
        opacity: 0;
    }

    33.33333% {
        opacity: 1;
    }

    66.66667% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


/* Header */


header > a {
    padding: 8px 24px;
    height: 96px;
}

header > a picture {
    height: 80px;
}

header > a picture img {
    height: 64px;
}

.live-chat a:after,
.live-chat-text:after {
    content: "●";
    top: -6px;
    position: absolute;
    right: -11px;
    color: var(--zest-dark-green);
    animation: blink 2.2s infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}


.top-menu {
    right: 136px;
}

.top-menu nav {
    text-align: right;
    display: flex;
    justify-content: flex-end;
}

.top-menu p {
    height: 56px;
}

.top-menu nav ul {
    height: 40px;
}

.top-menu nav summary,
.menu__box summary {
    list-style: none;
    padding: 0 47px 0 21px;
    background-image: url("data:image/svg+xml,%3Csvg width='490' height='276' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M44.119 8.317L245 209.815 446.037 8.308c9.894-9.917 25.962-9.906 35.841.025 9.825 9.875 9.817 25.834-.016 35.7L254.916 271.717c-5.471 5.489-14.361 5.489-19.832 0L8.214 44.108c-9.872-9.904-9.858-25.932.03-35.82 9.91-9.908 25.98-9.896 35.875.029z' fill='%232D294B'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat, repeat;
    background-position: right 21px top 50%, 0 0;
    background-size: 13px auto, 100%;
}

.menu__box summary {
    padding-left: 0;
}

.top-menu nav details,
.menu__box details {
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
    line-height: 34px;
    position: relative;
    overflow: visible;
    cursor: pointer;
    color: var(--darker-grey);
}

#menu__toggle:checked ~ .menu__box summary {
    display: block;
}

.top-menu details summary span:nth-child(3)::before,
.menu__box details summary span:nth-child(3)::before {
    content: "(";
}

.top-menu details summary span:nth-child(3)::after,
.menu__box details summary span:nth-child(3)::after {
    content: ")";
}

.top-menu details div,
.menu__box details div {
    z-index: 4;
    position: absolute;
    left: 0;
    background-color: #fff;
    border: 1px solid #57536f;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    padding: 5px 0;
}

.top-menu details div button,
.menu__box details button {
    display: block;
    box-sizing: border-box;
    border: none;
    background: #fff;
    line-height: 34px;
    text-align: left;
    white-space: nowrap;
    width: 100%;
    padding: 0 21px;
    font-family: "Open Sans", Arial, Helvetica, serif;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    color: #2d294b;
    cursor: pointer;
}

.top-menu details div button:hover,
.menu__box details button:hover {
    background-color: #57536f;
    color: #fff;
}

.hamburger-menu {
    position: absolute;
    border-left: 1px solid var(--grey);
    height: 96px;
    z-index: 999;
    width: 96px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.hamburger-menu:hover {
    background-color: var(--grey);
}

.hamburger-menu nav summary,
.menu__box summary {
    display: none;
}

#menu__toggle {
    opacity: 0;
    right: 0;
}

#menu__toggle:checked + .menu__btn > span {
    transform: rotate(45deg);
}

#menu__toggle:checked + .menu__btn > span::before {
    top: 0;
    transform: rotate(0deg);
}

#menu__toggle:checked + .menu__btn > span::after {
    top: 0;
    transform: rotate(90deg);
}

#menu__toggle:checked ~ .menu__box > ul > li:first-child > a {
    font-size: 24px;
}

#menu__toggle:checked ~ .menu__box {
    width: 300px;
    height: auto;
    padding: 64px 24px 24px 24px;
    font-size: 16px;
    right: 0;
    opacity: 1;
}

.menu__box {
    position: absolute;
    top: 0;
    font-size: 0;
    right: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    list-style: none;
    background-color: #ECEFF1;
    transition-duration: .20s;
}

.menu__btn {
    position: absolute;
    width: 24px;
    height: 96px;
    cursor: pointer;
    z-index: 1;
    display: flex;
    align-items: center;
}

#menu__toggle {
    opacity: 0;
    right: 0;
    width: 96px;
    height: 96px;
    cursor: pointer;
    display: flex;
    align-content: center;
    align-items: center;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--darker-grey);
    transition-duration: .25s;
}

.menu__btn > span::before {
    content: '';
    top: -8px;
}

.menu__btn > span::after {
    content: '';
    top: 8px;
}

.menu__box ul {
    padding: 0;
    margin: 0 0 8px 0;
}

.menu__box ul li {
    list-style: none;
    padding-bottom: 8px;
}

.menu__box > ul > li:first-child > a {
    font-weight: bold;
    margin-bottom: 8px;
    display: inline-block;
    padding-bottom: 8px;
    width: 100%;
    border-bottom: 1px solid var(--dark-grey);
}

.menu__box li ul li {
    padding-bottom: 8px;
}

.menu__box li a {
    text-decoration: none;
    color: var(--zest-purple);
}

.menu__box li a:hover {
    text-decoration: underline;
}

.content-width.breadcrumbs {
    padding: 0 24px;
}

.breadcrumbs,
.breadcrumbs a {
    list-style: none;
    font-size: 14px;
    margin: 8px auto;
    color: var(--zest-purple);
}

.breadcrumbs ul li {
    display: inline;
}

.breadcrumbs ul li:after {
    content: ">";
    padding: 0 3px;
    font-size: 12px;
}

.breadcrumbs ul li:last-child:after {
    display: none;
}

.status {
    color: white;
    padding: 2px 16px;
    height: 24px;
    border-radius: 50px;
    font-size: 14px;
    display: flex;
    align-items: center;
    width: fit-content;
}

.status.status--pending {
    color: var(--zest-info);
    background-color: var(--zest-info-muted);
    border: 1px solid var(--zest-info);
}

.status.status--cancelled {
    color: var(--zest-error);
    background-color: var(--zest-error-muted);
    border: 1px solid var(--zest-error);
}

.status.status--confirmed {
    color: var(--zest-confirm);
    background-color: var(--zest-confirm-muted);
    border: 1px solid var(--zest-confirm);
}

/*Pop-up*/
.my-body-noscroll-class {
    overflow: hidden;
}

.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 0.7);
    z-index: 999;
    overflow: scroll;
    padding: 20px;
    box-sizing: border-box;
}

.popup-content {
    position: relative;
    max-width: 500px;
    width: 100%;
    box-sizing: border-box;
    margin: 8vh auto 0 auto;
}

.close-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
}

/* usp bar */
.usp-container {
    background-color: var(--zest-dark-green);
    color: white;
    container-type: inline-size;
    container-name: uspWidth;
}

.usp-container span {
    font-weight: bold;
}

.usp.grid-row {
    max-width: var(--page-width);
    margin: 0 auto;
}

.usp.grid-row .grid-item {
    padding: 16px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.usp.grid-row .grid-item img {
    margin-right: 8px;
}

.usp.grid-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

@container uspWidth (max-width: 750px) {
    .usp.grid-row .grid-item:nth-child(4) {
        display: none;
    }
}

@container uspWidth (max-width: 550px) {
    .usp.grid-row .grid-item:nth-child(3) {
        display: none;
    }
}

#payment_iframe {
    border: 0;
}

.alternating-table {
    border-collapse: collapse;
    border-spacing: 0;
}


.alternating-table tr th {
    background-color: var(--zest-green);
}

.alternating-table > tbody > tr:nth-child(odd) {
    background-color: var(--grey);
}

.alternating-table tr td,
table tr th {
    padding: 8px;
    border: 1px solid var(--grey);
}

/* Footer */
#envelope {
    margin-bottom: -110px;
    z-index: 0;
    display: block;
    position: relative;
}

#envelope img {
    transform: rotate(-15deg);
    margin-left: 20px;
}

#newsletter {
    position: relative;
    z-index: 1;
    container-type: inline-size;
    container-name: newsletterWidth;
}

#newsletter form {
    min-width: 300px;
}

#newsletter > div {
    display: grid;
    grid-template-columns: minmax(200px, 500px) 2fr;
    grid-gap: 64px;
}

@container newsletterWidth (max-width: 600px) {
    #newsletter > div {
        display: flex;
        flex-direction: column;
        grid-gap: 16px;
    }
}

footer {
    container-type: inline-size;
    container-name: footerWidth;
}

footer .grid-row {
    color: white;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22%, 192px));
    gap: 32px;
    justify-content: space-between;
}

footer .grid-row ul li {
    list-style: none;
    margin-bottom: 16px;
}

footer .grid-row a {
    color: white;
    text-decoration: none;
}

footer .grid-row a:hover {
    color: var(--zest-green);
}

footer .two-col-grid:nth-child(2) {
    color: white;
    border-bottom: 1px solid white;
    padding-bottom: 16px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

footer .two-col-grid a {
    text-decoration: none;
    color: white;
}

footer .two-col-grid:nth-child(3) {
    align-items: center;
}

footer .two-col-grid:nth-child(3) img {
    padding: 0 4px;
}

footer .three-col-grid {
    align-items: end;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}

footer .three-col-grid nav ul li {
    display: inline-block;
    margin-right: 16px;
}

footer .three-col-grid nav ul li a {
    color: white;
    font-size: 12px;
    text-decoration: 0;
}

footer .socials {
    display: flex;
    justify-content: space-between;
}

footer .socials .left > nav ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

footer .socials .left > p {
    font-size: 14px;
}

footer .socials .left > nav ul li a {
    color: #ffffff;
    list-style: none;
    text-decoration: none;
    font-size: 14px;
}

footer .socials .text-right a {
    width: 40px;
    height: 40px;
    display: inline-block;
    margin-right: 8px;
}

footer .socials .text-right a:last-child {
    margin-right: 0;
}

footer .socials .text-right a img {
    width: 100%;
}

@container footerWidth (max-width: 1080px) {
    footer .grid-row .text-right {
        text-align: left;
    }

}

@container footerWidth (max-width: 739px) {
    footer .three-col-grid {
        display: flex;
        flex-direction: column;
        grid-gap: 16px;
        align-items: flex-start;
    }

    footer .two-col-grid .text-right {
        text-align: left;
    }

    footer .two-col-grid > div:first-child {
        margin-bottom: 8px;
    }

    footer .socials {
        flex-direction: column;
        display: flex;
    }

    footer .socials nav.text-right {
        text-align: left;
        margin-top: 24px;
    }

    footer .two-col-grid:nth-child(2) {
        display: block;
    }
}

@container footerWidth (max-width: 470px) {
    footer .grid-row {
        grid-template-columns: repeat(auto-fill, minmax(100%, 192px));
    }
}

.zcr_tray {
    position: fixed;
    z-index: 900;
    top: 0;
    right: 100%;
    display: none;
    width: 100%;
    height: 100%;
    background-color: #F0F;
}

/*tick bullet component*/
.icon-bullets {
    display: flex;
    flex-direction: column;
}

.icon-bullets .icon-bullet {
    display: grid;
    grid-template-columns: 40px auto;
    grid-gap: 16px;
}

.icon-bullets .icon-bullet:last-child {
    margin-bottom: 0 !important;
}

.icon-bullets .icon-bullet .icon {
    border-radius: 100%;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.icon-bullets .icon-bullet .icon img {
    width: 16px;
}

/*Menu Tiles*/
.menu-tiles {
    container-type: inline-size;
    container-name: menutilesWidth;
}

.menu-tiles .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    grid-gap: 24px;
}

.menu-tiles .grid-container .grid-item {
    padding: 40px;
    position: relative;
    text-decoration: none;
}

.menu-tiles .grid-container .grid-item .icon {
    margin-bottom: 8px;
}

@container menutilesWidth (max-width: 480px) {
    .menu-tiles .grid-container {
        grid-gap: 24px;
    }
}

/*Modal*/
#confetti {
    overflow-y: hidden;
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    height: 100%;
    position: absolute;
    top: 0;
}

.modal-overlay {
    position: fixed;
    z-index: 10000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    overflow: auto;
    text-align: center;
    background: rgb(0 0 0 / 0.7);
}

.modal-content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #2D294D;
    padding: 60px 100px;
    z-index: 500;
    border: 4px solid #E9C031;
    border-radius: 5px;
    color: #fff;
}

.modal .close-modal {
    position: absolute;
    right: 0;
    top: 0;
    width: 32px;
    height: 32px;
    opacity: 0.3;
    cursor: pointer;
    background: none;
    border: 0;
    z-index: 100;
}

.modal .close-modal:focus-visible {
    outline: none;
}

.modal .close-modal:hover {
    opacity: 1;
}

.modal .close-modal:before,
.close-modal:after {
    position: absolute;
    content: ' ';
    height: 24px;
    width: 5px;
    border-radius: 5px;
    background-color: #ffffff;
    top: 5px;
    right: 15px;
}

.modal .close-modal:before {
    transform: rotate(45deg);
}

.modal .close-modal:after {
    transform: rotate(-45deg);
}

dialog {
    border: 0;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

dialog.modal-standard {
    max-width: var(--page-width);
    border-radius: 4px;
    box-sizing: border-box;
    margin: auto;
    border: 1px solid white;
    height: fit-content;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    outline: 0;
}

.modal-standard h4 {
    line-height: 16px;
}


#contact-us-modal,
#help-modal {
    max-width: 500px;
}

#confirm-add-topup,
#confirm-join-topup,
.modal-standard.club-zest {
    max-width: 600px;
}

#airport-modal label.input-container {
    margin-bottom: 0;
}


dialog.modal-standard:not([open]) {
    display: none;
}

dialog.modal-standard .head {
    flex-shrink: 0;
    display: flex;
    grid-gap: 24px;
    justify-content: space-between;
}

dialog.modal-standard .body {
    flex-grow: 1;
    overflow-y: auto;
    width: 100%;
}

dialog.modal {
    max-width: 900px;
    border-radius: 4px;
    overflow: hidden;
    padding: 48px;
    box-sizing: border-box;
    margin: auto;
    background-color: var(--zest-purple);
    color: white;
    border: 4px solid white;
    outline: 0;
    height: fit-content;
}

dialog.modal.success {
    background-color: var(--zest-confirm);
}

dialog.modal.warning {
    background-color: var(--zest-warning);
}

dialog.modal.error {
    background-color: var(--zest-error);
}

::backdrop {
    background-color: rgb(0 0 0 / 0.4);
    backdrop-filter: blur(1px);
}

.modal::-webkit-scrollbar {
    width: 8px;
}

.modal::-webkit-scrollbar-track {
    background: transparent;
}

.modal::-webkit-scrollbar-thumb {
    background: #888;
}

.modal::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.hint img {
    display: block;
    width: 14px;
    cursor: help;
}

.hint {
    display: inline-block;
    vertical-align: bottom;
}

.hint .tooltip {
    visibility: hidden;
    position: absolute;
    z-index: 1;
    padding: 20px 30px;
    background-color: #fff;
    border: 2px solid var(--zest-green);
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 0.15);
    color: var(--zest-purple);
    margin: 0 0 0 7px;
    font-size: 13px;
    top: 40px;
    width: 40ch;
}

.hint:hover .tooltip {
    visibility: visible;
}

/*Stats bar*/
.stats {
    container-type: inline-size;
    container-name: statsWidth;
}

.stats .grid-container .title {
    font-size: var(--large);
    font-weight: bold;
    font-family: "League Spartan", serif;
}

.stats .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
    grid-gap: 8px;
}

.stats .grid-container .grid-item {
    position: relative;
    text-decoration: none;
}

.stats .grid-container .grid-item h3 {
    margin-bottom: 0;
}

@container statsWidth (max-width: 480px) {
    .stats .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(159px, 1fr));
        grid-gap: 8px;
    }

    .stats .grid-container .title {
        font-size: var(--medium);
    }
}

/*Trust marks bar*/
.trust-marks {
    container-type: inline-size;
    container-name: trustmarkWidth;
}

.trust-marks .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    grid-gap: 16px;
}

.trust-marks .grid-container .grid-item {
    position: relative;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center
}

.trust-marks .grid-container .grid-item img {
    max-width: 120px;
}

@container trustmarkWidth (max-width: 480px) {
    .trust-marks .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(159px, 1fr));
        grid-gap: 8px;
    }
}


/*Desktop*/
@media (max-width: 1080px) {
    .top-menu {
        display: none;
    }

    #currency-menu {
        display: block;
    }

    .input-container {
        margin-bottom: 40px;
    }

    .form-container .warning {
        margin-top: -36px;
        height: 24px;
    }
}

/*Tablet*/
@media (max-width: 820px) {
    .mobile-only-button {
        display: flex !important;
    }

    .two-col-layout-mobile-responsive,
    .two-one-col-layout-mobile-responsive {
        display: flex;
        flex-direction: column;
    }

    .modal-content {
        padding: 40px 20px;
    }

    dialog {
        width: 90%;
    }

    .hint .tooltip {
        width: auto;
        margin-left: -70px;
    }

    .one-two-col-layout,
    .one-two-col-layout-wide-right {
        display: flex;
        flex-direction: column;
    }

    .purple-background-mobile {
        background-image: none !important;
        background: var(--zest-purple);
        color: white;
    }

    .one-two-col-layout {
        display: flex;
        flex-direction: column;
    }
}


/*Mobile*/
@media (max-width: 480px) {
    .menu-tiles .grid-container {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }

    .p-xs {
        padding: var(--extra-extra-small);
    }

    .p-s {
        padding: var(--extra-small);
    }

    .p-m {
        padding: var(--small);
    }

    .p-l {
        padding: var(--medium);
    }

    .p-xl {
        padding: var(--large);
    }

    .py-xs {
        padding-top: var(--extra-extra-small);
        padding-bottom: var(--extra-extra-small);
    }

    .py-s {
        padding-top: var(--extra-small);
        padding-bottom: var(--extra-small);
    }

    .py-m {
        padding-top: var(--small);
        padding-bottom: var(--small);
    }

    .py-l {
        padding-top: var(--medium);
        padding-bottom: var(--medium);
    }

    .py-xl {
        padding-top: var(--large);
        padding-bottom: var(--large);
    }

    .px-xs {
        padding-left: var(--extra-extra-small);
        padding-right: var(--extra-extra-small);
    }

    .px-s {
        padding-left: var(--extra-small);
        padding-right: var(--extra-small);
    }

    .px-m {
        padding-left: var(--small);
        padding-right: var(--small);
    }

    .px-l {
        padding-left: var(--medium);
        padding-right: var(--medium);
    }

    .px-xl {
        padding-left: var(--large);
        padding-right: var(--large);
    }

    .mb-xs {
        margin-bottom: var(--extra-extra-small);
    }

    .mb-s {
        margin-bottom: var(--extra-small);
    }

    .mb-m {
        margin-bottom: var(--small);
    }

    .mb-l {
        margin-bottom: var(--medium);
    }

    .mb-xl {
        margin-bottom: var(--large);
    }

    h1 {
        font-size: 40px;
        line-height: 48px;
    }

    h1.hero-heading {
        font-size: 58px;
        line-height: 50px;
    }


    h2 {
        font-size: 32px;
        line-height: 40px;
    }

    h3 {
        font-size: 24px;
        line-height: 32px;
    }

    h4 {
        font-size: 16px;
        line-height: 24px;
    }

    h5 {
        font-size: 14px;
        line-height: 18px;
    }

    p {
        font-size: 16px;
        line-height: 24px;
    }

    .component-container {
        padding: 48px 0;
        margin: 48px auto;
    }

    .component-container-small {
        padding: 16px 0;
        margin: 16px auto;
    }

    .component-container-x-small {
        padding: 8px 0;
        margin: 8px auto;
    }

    .component-container-xx-small {
        padding: 4px 0;
        margin: 4px auto;
    }

    .inner-container {
        padding: 40px 0;
    }

    .inner-container-small {
        padding: 32px 0;
    }

    .inner-container-x-small {
        padding: 24px 0;
    }

    .inner-container-xx-small {
        padding: 16px 0;
    }

    header > a {
        padding: 8px 24px;
    }

    .usp.grid-row {
        padding: 0 24px;
    }

    .button {
        width: 100%;
        max-width: 100%;
    }

    .usp-container span {
        font-weight: normal;
        font-size: 14px;
    }

    #payment_iframe {
        height: 674px;
    }

    .popup-content {
        margin: 0 auto;
    }

    .grid-item-120,
    .grid-item-180,
    .grid-item-232,
    .grid-item-288,
    .grid-item-336,
    .grid-item-352,
    .grid-item-400,
    .grid-item-504 {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }

    .flex-column-reverse-mobile {
        flex-direction: column-reverse;
    }
}