/* =========================================================
   BRAND CONDIVISO
   ========================================================= */
.jrental-shortcode-container {
    margin: 0px !important;
    padding-top: 16px;
}

.sup-brand-stack {
    display: flex;

    align-items: center;
    flex-direction: column;

    text-align: center;
}

.sup-brand-stack__mask {
    width: var(--sup-tiki-width);
}

.sup-brand-stack__logo {
    width: clamp(300px, 44vw, 620px);
    margin-top: clamp(22px, 4vw, 46px);
}

.sup-brand-stack__divider {
    width: min(76%, 450px);
    margin-top: 24px;
}

/* =========================================================
   HOME
   ========================================================= */

.sup-main {
    position: relative;
}

.sup-main > section {
    isolation: isolate;
    overflow: hidden;
}

.sup-main > section > .sup-container {
    position: relative;
    z-index: 2;
}

.sup-hero {
    position: relative;

    min-height: 100svh;

    background: var(--sup-cream);
}

.sup-hero::before,
.sup-section::before {
    position: absolute;
    z-index: 1;
    right: calc(var(--sup-pattern-width) + 2vw);
    bottom: clamp(24px, 5vw, 72px);

    width: clamp(150px, 18vw, 300px);
    aspect-ratio: 1;

    border: clamp(10px, 1.2vw, 20px) solid rgb(244 122 31 / 12%);
    border-radius: 50%;

    content: "";

    box-shadow:
        0 0 0 clamp(14px, 2vw, 34px) rgb(24 183 176 / 8%),
        0 0 0 clamp(34px, 4vw, 68px) rgb(230 59 46 / 6%);

    pointer-events: none;
}

.sup-hero::after,
.sup-section::after {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 50%;

    width: min(
        calc(100% - (2 * var(--sup-pattern-width)) - 32px),
        760px
    );
    height: clamp(32px, 5vw, 58px);

    background:
        url("../images/tribal-divider.png")
        center / contain
        no-repeat;

    content: "";

    opacity: 0.3;
    pointer-events: none;
    transform: translateX(-50%);
}

.sup-section--turquoise::before {
    top: clamp(90px, 12vw, 170px);
    right: auto;
    bottom: auto;
    left: calc(var(--sup-pattern-width) + 4vw);

    border-color: rgb(255 243 214 / 12%);

    box-shadow:
        0 0 0 clamp(14px, 2vw, 34px) rgb(8 127 131 / 12%),
        0 0 0 clamp(34px, 4vw, 68px) rgb(255 243 214 / 7%);
}

.sup-section--turquoise::after {
    filter: brightness(0) invert(1);
    opacity: 0.18;
    transform:
        translateX(-50%)
        rotate(180deg);
}

.sup-section--cream::before {
    right: calc(var(--sup-pattern-width) + 3vw);
    bottom: clamp(90px, 12vw, 160px);
}

.sup-hero__content {
    display: flex;

    min-height: 100svh;

    padding-bottom: clamp(80px, 11vw, 150px);

    align-items: center;
    flex-direction: column;

    text-align: center;
}

.sup-hero__intro {
    margin-top: 22px;
    text-transform: uppercase;
}

.sup-hero__intro h1 {
    margin: 0;

    font-size: clamp(1.45rem, 2.7vw, 2.35rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.11em;
}

.sup-hero__intro p {
    margin: 10px 0 0;

    font-size: clamp(1rem, 1.8vw, 1.4rem);
    font-weight: 800;
    letter-spacing: 0.1em;
}

.sup-wood-cta {
    display: inline-flex;

    min-height: 62px;

    margin-top: 38px;
    padding: 16px 42px;

    align-items: center;
    justify-content: center;

    border: 4px solid var(--sup-brown);

    background-color: var(--sup-orange);
    background-image: var(--sup-wood-grain);
    color: var(--sup-white);

    box-shadow:
        inset 0 4px 0 rgb(255 255 255 / 13%),
        inset 0 -7px 0 rgb(50 26 20 / 17%);

    clip-path: polygon(
        4% 5%,
        96% 0,
        100% 86%,
        93% 100%,
        3% 94%,
        0 16%
    );

    filter:
        drop-shadow(8px 9px 0 var(--sup-brown));

    font-size: clamp(0.95rem, 1.8vw, 1.2rem);
    font-weight: 900;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0 2px 0 rgb(50 26 20 / 58%);

    transform: rotate(-1deg);

    transition:
        transform 180ms ease,
        background-color 180ms ease;
}

.sup-wood-cta:hover,
.sup-wood-cta:focus-visible {
    background-color: var(--sup-coral);
    color: var(--sup-white) !important;

    outline: none;

    transform:
        rotate(1deg)
        translateY(-3px)
        scale(1.025);
}

.sup-wood-cta:any-link,
.sup-wood-cta:any-link:hover,
.sup-wood-cta:any-link:focus,
.sup-wood-cta:any-link:visited {
    color: var(--sup-white) !important;
    text-decoration: none !important;
}

/* =========================================================
   SEZIONI
   ========================================================= */

.sup-section {
    position: relative;

    min-height: 620px;

    padding-block: clamp(90px, 12vw, 170px);
}

.sup-section--turquoise {
    background: var(--sup-turquoise);
}

.sup-section--cream {
    background: var(--sup-cream);
}

.sup-section__header {
    text-align: center;
}

.sup-eyebrow {
    margin: 0 0 16px;

    color: var(--sup-coral);

    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.sup-section__header h2,
.sup-page-heading h1 {
    margin: 0;

    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: 0.96;
    text-transform: uppercase;
}

.sup-section__lead {
    max-width: 620px;

    margin: 32px auto 0;

    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 650;
    line-height: 1.65;
    text-align: center;
}

.sup-section__actions {
    margin-top: 40px;
    text-align: center;
}

.sup-card-grid {
    display: grid;

    margin-top: 60px;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}

.sup-card {
    padding: 30px 25px;

    border: 4px solid var(--sup-brown);
    border-radius: 14px;

    background: var(--sup-cream);

    box-shadow:
        8px 8px 0 var(--sup-brown);
}

.sup-card h3 {
    margin: 0 0 16px;

    font-size: 1.35rem;
    line-height: 1.05;
    text-transform: uppercase;
}

.sup-card p {
    margin: 0;
    line-height: 1.6;
}

/* =========================================================
   BOOKING E POLICIES
   ========================================================= */

.sup-booking-page {
    min-height: 100svh;
    background: var(--sup-cream);
}

body.sup-body--minimal-header .sup-site-canvas {
    overflow: visible;

    transform: none;
    transition: none;

    will-change: auto;
}

.sup-booking-header {
    position: sticky;
    z-index: 30;

    display: flex;
    min-height: 88px;

    padding:
        10px
        calc(var(--sup-pattern-width) + clamp(14px, 2vw, 26px));

    align-items: center;
    justify-content: space-between;

}

.sup-booking-header--standalone {
    justify-content: center;
}

.sup-booking-header--standalone
.sup-booking-header__brand {
    width: auto;
    min-width: 0;

    justify-content: center;
}

.sup-booking-header__brand {
    display: inline-flex;
    min-width: 0;

    align-items: center;

    gap: 10px;

    color: var(--sup-brown) !important;
    text-decoration: none !important;
}

.sup-booking-header__mask {
    width: auto;
    height: 120px;

    flex: 0 0 auto;
}

.sup-booking-header__logo {
    width: clamp(120px, 14vw, 162px);

    flex: 0 0 auto;

    object-fit: contain;
}

.sup-booking-progress ol {
    display: flex;

    margin: 0;
    padding: 0;

    align-items: center;

    gap: clamp(14px, 1.7vw, 26px);

    list-style: none;
}

.sup-booking-progress li {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: rgb(50 26 20 / 52%);
}

.sup-booking-progress a {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: inherit !important;
    text-decoration: none !important;
}

.sup-booking-progress li:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: calc(-1 * clamp(11px, 1.35vw, 20px));

    width: clamp(8px, 1vw, 15px);
    height: 3px;

    border-radius: 999px;

    background: rgb(50 26 20 / 18%);

    content: "";

    transform: translateY(-50%);
}

.sup-booking-progress span {
    display: inline-grid;
    width: 32px;
    height: 32px;

    place-items: center;

    border: 2px solid currentColor;
    border-radius: 50%;

    background: var(--sup-white);

    font-size: 0.8rem;
    font-weight: 900;
}

.sup-booking-progress strong {
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sup-booking-progress .is-current {
    color: var(--sup-coral);
}

.sup-booking-progress .is-complete {
    color: var(--sup-brown);
}

.sup-booking-progress .is-complete a {
    cursor: pointer;

    transition:
        color 160ms ease,
        transform 160ms ease;
}

.sup-booking-progress .is-complete a:hover,
.sup-booking-progress .is-complete a:focus-visible {
    color: var(--sup-coral) !important;
    outline: none;
    transform: translateY(-2px);
}

.sup-booking-progress .is-future a {
    cursor: default;
    pointer-events: none;
}

.sup-booking-progress .is-current span {
    border-color: var(--sup-brown);

    background: var(--sup-coral);
    color: var(--sup-white);

    box-shadow: 3px 3px 0 var(--sup-brown);
}

.sup-booking-page__content {
    min-height: calc(100svh - 88px);

    padding:
        clamp(14px, 2.5vw, 30px)
        0
        clamp(46px, 7vw, 90px);

    background: var(--sup-cream);
}

.sup-booking-page > .sup-booking-page__content {
    overflow: visible;
}

.sup-booking-shell {
    position: relative;
    z-index: 20;

    width: min(
        calc(
            100% -
            (2 * var(--sup-pattern-width)) -
            clamp(28px, 5vw, 70px)
        ),
        1180px
    );

    margin-inline: auto;

    overflow: visible;
}

.sup-booking-page .sup-booking-panel {

    padding: 0px;

    border-width: 3px;
    border-radius: 14px;

    box-shadow: 8px 9px 0 rgb(50 26 20 / 88%);
}

.sup-booking-form {
    width: 100%;
    min-height: inherit;

    overflow: visible;
}

.sup-inner-page__section {
    min-height: 100svh;

    padding-bottom: clamp(100px, 14vw, 190px);

    background: var(--sup-cream);
}

.sup-page-heading {
    max-width: 680px;

    margin: 36px auto 55px;

    text-align: center;
}

.sup-page-heading p:last-child {
    margin: 22px 0 0;

    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.6;
}

.sup-booking-panel,
.sup-content-panel {
    padding: clamp(24px, 5vw, 52px);

    border: 5px solid var(--sup-brown);
    border-radius: 18px;

    background: var(--sup-white);

    box-shadow:
        12px 12px 0 var(--sup-brown);
}

.sup-content-panel {
    line-height: 1.75;
}

.sup-content-panel h2 {
    margin-top: 2.2em;

    font-size: clamp(1.65rem, 3vw, 2.6rem);
    text-transform: uppercase;
}

.sup-content-panel h2:first-child {
    margin-top: 0;
}

/*
 * Gli elementi generati da JRental e dagli altri shortcode
 * mantengono gli stili forniti dai rispettivi plugin.
 * Il tema personalizza soltanto il contenitore esterno.
 */

@media (max-width: 1350px) {
    .sup-booking-progress strong {
        position: absolute;
        width: 1px;
        height: 1px;

        overflow: hidden;
        clip: rect(0, 0, 0, 0);

        white-space: nowrap;
    }

    .sup-booking-progress ol {
        gap: 18px;
    }

    .sup-booking-progress li:not(:last-child)::after {
        right: -14px;
        width: 10px;
    }
}

@media (max-width: 900px) {
    .jrental-shortcode-container {
        overflow: visible;
        overflow-x: visible;
        overflow-y: visible;
    }

    body.sup-body--minimal-header
    .jrental-mobile-checkout-bar,
    body.sup-body--minimal-header
    .jrental-mobile-checkout-actions[
        data-checkout-actions-floating="1"
    ] {
        position: fixed !important;
        z-index: 90 !important;

        top: auto !important;
        right: calc(var(--sup-pattern-width) + 9px) !important;
        bottom: max(
            12px,
            env(safe-area-inset-bottom, 0px)
        ) !important;
        left: calc(var(--sup-pattern-width) + 9px) !important;

        width: auto !important;
        max-width: none !important;
        margin-inline: 0 !important;

        box-sizing: border-box;

        transform: none !important;
        transition:
            opacity 120ms ease,
            visibility 0s linear;
    }

    body.sup-body--minimal-header
    .jrental-mobile-checkout-bar--details-floating {
        position: absolute !important;

        display: none !important;
        visibility: hidden !important;

        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        pointer-events: none !important;
    }

    body.sup-body--minimal-header.sup-booking-section-ended
    .jrental-mobile-checkout-bar:not(
        .jrental-mobile-checkout-bar--details-floating
    ),
    body.sup-body--minimal-header.sup-booking-section-ended
    .jrental-mobile-checkout-actions[
        data-checkout-actions-floating="1"
    ] {
        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;
    }

    .sup-booking-end-sentinel {
        width: 100%;
        height: 1px;

        pointer-events: none;
    }

    .sup-card-grid {
        grid-template-columns: 1fr;
    }

    .sup-booking-header {
        min-height: 78px;

        padding-block: 8px;
    }

    .sup-booking-header__mask {
        height: 56px;
    }

    .sup-booking-header__logo {
        width: 96px;
    }

    .sup-booking-progress strong {
        position: absolute;
        width: 1px;
        height: 1px;

        overflow: hidden;
        clip: rect(0, 0, 0, 0);

        white-space: nowrap;
    }

    .sup-booking-progress ol {
        gap: 18px;
    }

    .sup-booking-progress li:not(:last-child)::after {
        right: -14px;
        width: 10px;
    }

    .sup-booking-page__content {
        min-height: calc(100svh - 78px);
    }

}

@media (max-width: 640px) {
    .sup-booking-header {
        min-height: 68px;

        padding:
            7px
            calc(var(--sup-pattern-width) + 9px);
    }

    .sup-booking-header__brand {
        gap: 5px;
    }

    .sup-booking-header__mask {
        height: 48px;
    }

    .sup-booking-header__logo {
        width: 96px;
        max-height: none;

        flex-shrink: 0;
    }

    .sup-booking-progress ol {
        gap: 15px;
    }

    .sup-booking-progress li {
        gap: 0;
    }

    .sup-booking-progress li:not(:last-child)::after {
        right: -12px;
        width: 9px;
        height: 2px;
    }

    .sup-booking-progress span {
        width: 27px;
        height: 27px;

        font-size: 0.7rem;
    }

    .sup-booking-progress strong {
        position: absolute;
        width: 1px;
        height: 1px;

        overflow: hidden;
        clip: rect(0, 0, 0, 0);

        white-space: nowrap;
    }

    .sup-booking-page__content {
        min-height: calc(100svh - 68px);
        padding-top: 10px;
    }

    .sup-booking-shell {
        width: calc(
            100% -
            (2 * var(--sup-pattern-width)) -
            18px
        );
    }

    .sup-booking-page .sup-booking-panel {

        padding: 0px;

        border-width: 2px;
        border-radius: 10px;

        box-shadow: 5px 6px 0 rgb(50 26 20 / 88%);
    }

    .sup-hero::before,
    .sup-section::before {
        opacity: 0.65;
    }

    .sup-hero::after,
    .sup-section::after {
        width: calc(100% - (2 * var(--sup-pattern-width)) - 20px);
    }

    .sup-hero__content {
        min-height: 760px;
        padding-bottom: 90px;
    }

    .sup-brand-stack__logo {
        width: min(86vw, 370px);
    }

    .sup-brand-stack__divider {
        width: min(76vw, 330px);
    }

    .sup-section {
        min-height: auto;
        padding-block: 85px;
    }

    .sup-booking-panel,
    .sup-content-panel {
        padding: 22px 16px;

        border-width: 3px;

        box-shadow:
            6px 6px 0 var(--sup-brown);
    }
}

@media (max-width: 520px) {
    .sup-booking-header {
        min-height: 122px;

        padding:
            7px
            calc(var(--sup-pattern-width) + 9px)
            9px;

        align-items: stretch;
        flex-direction: column;
        justify-content: center;

        gap: 6px;
    }

    .sup-booking-header__brand {
        width: 100%;
        min-width: max-content;

        justify-content: center;

        gap: 7px;
    }

    .sup-booking-header__mask {
        width: auto;
        height: 80px;

        flex: 0 0 auto;
    }

    .sup-booking-header__logo {
        width: 108px;
        min-width: 108px;
        height: auto;

        flex: 0 0 108px;
    }

    .sup-booking-progress {
        width: 100%;
    }

    .sup-booking-progress ol {
        width: 100%;

        justify-content: center;
    }

    .sup-booking-page__content {
        min-height: calc(100svh - 122px);
    }

    .sup-booking-header--standalone {
        min-height: 68px;

        align-items: center;
        flex-direction: row;
    }

    .sup-booking-header--standalone
    .sup-booking-header__brand {
        width: auto;
        min-width: 0;
    }

    .sup-booking-header--standalone
    + .sup-booking-page__content {
        min-height: calc(100svh - 68px);
    }
}