/*
 * Costa Tropical Stays: the shell (page, header, footer) and the kit components. Values come only from
 * stays-tokens.css. Breakpoints: 640px (sm), 768px (md), 1024px (lg) and 1220px (nav), see the tokens file.
 * States drawn at rest for /dev/stays-kit use .is-hover / .is-focus next to the real :hover / :focus-visible.
 */

/* ---------- Page ---------- */

.st-page,
.st-page *,
.st-page *::before,
.st-page *::after {
    box-sizing: border-box;
}

.st-page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--st-white);
    color: var(--st-text);
    font-family: var(--st-font-text);
    font-size: var(--st-text-base);
    line-height: var(--st-leading-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

:where(.st-page) :where(h1, h2, h3) {
    margin: 0;
    font-family: var(--st-font-display);
    font-weight: var(--st-weight-semibold);
    line-height: var(--st-leading-tight);
    color: var(--st-ink);
    letter-spacing: var(--st-tracking-display);
}

:where(.st-page) :where(p) {
    margin: 0;
}

.st-page a {
    color: var(--st-sea);
    text-underline-offset: 0.18em;
}

.st-page a:hover {
    color: var(--st-sea-hover);
}

.st-page :focus-visible,
.st-page .is-focus {
    outline: var(--st-focus-width) solid var(--st-focus-color);
    outline-offset: var(--st-focus-offset);
}

.st-page img,
.st-page svg {
    max-width: 100%;
}

.st-main {
    flex: 1 0 auto;
}

.st-main:focus {
    outline: none;
}

.st-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.st-skip:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.st-skip:focus {
    position: absolute;
    z-index: var(--st-z-toast);
    top: var(--st-space-2);
    left: var(--st-space-4);
    display: inline-flex;
    align-items: center;
    min-height: var(--st-tap);
    padding: 0 var(--st-space-4);
    border-radius: var(--st-radius-md);
    background: var(--st-sea);
    color: var(--st-white);
    font-weight: var(--st-weight-semibold);
}

.st-container {
    max-width: var(--st-page-max);
    margin: 0 auto;
    padding-inline: var(--st-gutter);
}

.st-section {
    max-width: var(--st-page-max);
    margin: 0 auto;
    padding: var(--st-space-18) var(--st-gutter);
}

.st-section--centered {
    display: flex;
    justify-content: center;
}

/* ---------- Header (Main board; menu button below 1220px, Mobile board below 640px) ---------- */

.st-header {
    position: relative;
    z-index: var(--st-z-header);
    background: var(--st-white);
    border-bottom: 1px solid var(--st-line);
}

.st-header__bar {
    max-width: var(--st-page-max);
    margin: 0 auto;
    padding: var(--st-space-3) var(--st-gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--st-space-3) var(--st-space-8);
}

.st-brand {
    display: flex;
    align-items: center;
    gap: var(--st-space-3);
    min-height: var(--st-tap);
    border-radius: var(--st-radius-sm);
    text-decoration: none;
}

.st-brand__mark {
    flex: none;
    color: var(--st-gold);
}

.st-brand__text {
    display: flex;
    flex-direction: column;
    line-height: var(--st-leading-tight);
}

.st-brand__name {
    font-family: var(--st-font-display);
    font-weight: var(--st-weight-semibold);
    font-size: var(--st-text-2xl);
    letter-spacing: var(--st-tracking-display);
    color: var(--st-ink);
}

/* The lockup words ("Stays", "Costa Tropical Real Estate") are the brand mark in --st-gold, a logotype exempt from
   contrast (GD ruling F-302). Like a logo image they are aria-hidden and carry a text alternative: the brand
   link's aria-label in the header, a visually hidden copy in the footer. */
.st-brand__stays {
    font-style: italic;
    font-weight: var(--st-weight-regular);
    color: var(--st-gold);
}

.st-brand__part-of {
    /* Wraps as two whole pieces: "part of" and the agency name, which never breaks. */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.35em;
    margin-top: var(--st-space-1);
    font-size: var(--st-text-caps);
    letter-spacing: var(--st-tracking-caps);
    text-transform: uppercase;
    color: var(--st-muted);
}

.st-brand__agency {
    font-size: var(--st-text-caption);
    font-weight: var(--st-weight-bold);
    white-space: nowrap;
    color: var(--st-gold);
}

.st-brand:hover .st-brand__name {
    color: var(--st-sea);
}

.st-header__menu-button {
    display: none;
}

.st-header__menu {
    display: flex;
    align-items: center;
    gap: var(--st-space-4);
}

.st-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--st-space-1) var(--st-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-page .st-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--st-tap);
    padding: 0 var(--st-space-1);
    border-radius: var(--st-radius-sm);
    color: var(--st-ink);
    font-size: var(--st-text-md);
    font-weight: var(--st-weight-medium);
    text-decoration: none;
}

.st-page .st-nav__link:hover {
    color: var(--st-sea);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.45em;
}

.st-nav__sign-in {
    margin-left: var(--st-space-2);
}

.st-lang {
    position: relative;
}

.st-lang__toggle {
    display: none;
}

.st-js .st-lang__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--st-space-2);
    height: var(--st-tap);
    padding: 0 var(--st-space-4);
    border: 1px solid var(--st-line-strong);
    border-radius: var(--st-radius-pill);
    background: var(--st-white);
    color: var(--st-ink);
    font: var(--st-weight-medium) var(--st-text-sm) / 1 var(--st-font-text);
    cursor: pointer;
}

.st-js .st-lang__toggle:hover {
    border-color: var(--st-field);
    background: var(--st-off-white);
}

.st-lang__chevron {
    transition: transform var(--st-duration) var(--st-ease);
}

.st-lang__toggle[aria-expanded="true"] .st-lang__chevron {
    transform: rotate(180deg);
}

.st-lang__heading {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.st-lang__list {
    display: none;
    position: absolute;
    z-index: var(--st-z-popover);
    top: calc(100% + var(--st-space-2));
    right: 0;
    min-width: 13rem;
    margin: 0;
    padding: var(--st-space-2);
    list-style: none;
    background: var(--st-white);
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    box-shadow: var(--st-shadow-overlay);
}

.st-lang__list.is-open {
    display: block;
}

.st-page .st-lang__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--st-space-3);
    min-height: var(--st-tap);
    padding: 0 var(--st-space-3);
    border-radius: var(--st-radius-md);
    color: var(--st-ink);
    text-decoration: none;
}

.st-page .st-lang__option:hover {
    background: var(--st-sand);
    color: var(--st-ink);
}

.st-page .st-lang__option[aria-current="true"] {
    color: var(--st-sea);
    font-weight: var(--st-weight-semibold);
}

/* Phone lockup (Mobile board): smaller mark and type. */
@media (max-width: 639.98px) {
    .st-brand {
        gap: var(--st-space-2);
    }

    .st-brand__mark {
        width: var(--st-brand-mark-phone-width);
        height: var(--st-brand-mark-phone-height);
    }

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

    .st-brand__part-of {
        margin-top: var(--st-space-half);
        font-size: var(--st-text-2xs);
    }

    .st-brand__agency {
        font-size: var(--st-text-caps);
    }
}

/* Below the width where the longest language (German) fits the header on one row, the navigation and the
   languages move behind the menu button. Measured: 1202px of content plus a desktop scrollbar. */
@media (max-width: 1219.98px) {
    .st-header__bar {
        flex-wrap: nowrap;
        min-height: var(--st-header-height);
        padding-block: var(--st-space-1);
    }

    .st-js .st-header__menu-button {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: var(--st-tap);
        height: var(--st-tap);
        margin-right: calc(var(--st-space-2) * -1);
        padding: 0;
        border: 0;
        border-radius: var(--st-radius-md);
        background: none;
        color: var(--st-ink);
        cursor: pointer;
    }

    .st-header__menu-close,
    .st-header__menu-button[aria-expanded="true"] .st-header__menu-open {
        display: none;
    }

    .st-header__menu-button[aria-expanded="true"] .st-header__menu-close {
        display: block;
    }

    .st-header__menu {
        flex-direction: column;
        align-items: stretch;
        gap: var(--st-space-6);
        padding: var(--st-space-2) var(--st-gutter) var(--st-space-6);
    }

    .st-js .st-header__menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--st-header-height));
        overflow-y: auto;
        background: var(--st-white);
        border-bottom: 1px solid var(--st-line);
        box-shadow: var(--st-shadow-overlay);
    }

    .st-js .st-header__menu.is-open {
        display: flex;
    }

    /* Without script there is no menu button: the panel takes its own full-width row under the brand. */
    html:not(.st-js) .st-header__bar {
        flex-wrap: wrap;
    }

    html:not(.st-js) .st-header__menu {
        flex-basis: 100%;
        padding-inline: 0;
    }

    .st-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .st-page .st-nav__link {
        width: 100%;
        min-height: var(--st-control);
        padding: 0;
        border-bottom: 1px solid var(--st-line);
        border-radius: 0;
        font-size: var(--st-text-base);
    }

    .st-nav__sign-in {
        margin: var(--st-space-4) 0 0;
    }

    .st-nav__sign-in .st-btn {
        width: 100%;
        height: var(--st-control);
    }

    .st-js .st-lang__toggle {
        display: none;
    }

    .st-lang__heading {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        margin-bottom: var(--st-space-2);
        font-size: var(--st-text-sm);
        font-weight: var(--st-weight-semibold);
        color: var(--st-ink);
    }

    .st-lang__list,
    .st-lang__list.is-open {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--st-space-2);
        position: static;
        min-width: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .st-page .st-lang__option {
        border: 1px solid var(--st-line);
    }
}

/* Tablet: the menu opens as a panel at the right edge, not across the whole width. */
@media (min-width: 640px) and (max-width: 1219.98px) {
    .st-js .st-header__menu {
        left: auto;
        width: min(24rem, 100%);
        border-left: 1px solid var(--st-line);
        border-bottom-left-radius: var(--st-radius-lg);
    }
}

/* ---------- Footer (Main board) ---------- */

.st-footer {
    border-top: 1px solid var(--st-line);
    background: var(--st-white);
}

/* Three columns, brand | links | languages, in every language: a long list wraps inside its own column, so the
   row keeps the Main board arrangement. Auto tracks shrink towards their content's narrowest width only when
   the row is too long. */
.st-footer__main {
    max-width: var(--st-page-max);
    margin: 0 auto;
    padding: var(--st-space-10) var(--st-gutter);
    display: grid;
    grid-template-columns: max-content auto auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--st-space-6) var(--st-space-8);
}



.st-footer__brand {
    display: flex;
    align-items: center;
    gap: var(--st-space-3);
}

.st-footer__name {
    font-family: var(--st-font-display);
    font-weight: var(--st-weight-semibold);
    font-size: var(--st-text-lg);
    line-height: var(--st-leading-snug);
    color: var(--st-ink);
}

.st-footer__part-of,
.st-footer__sentence {
    font-size: var(--st-text-sm);
    color: var(--st-text);
}

.st-footer__agency {
    color: var(--st-gold);
    font-weight: var(--st-weight-bold);
    white-space: nowrap;
}

/* The lists are lines of inline links, so a list that needs two lines splits evenly (balance) instead of
   leaving one link alone on the second. */
.st-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
    text-wrap: balance;
}

.st-footer__list > li {
    display: inline;
}

.st-footer__list > li:not(:last-child) {
    margin-inline-end: var(--st-space-5);
}

.st-footer__languages .st-footer__list {
    text-align: end;
}

.st-footer__languages .st-footer__list > li:not(:last-child) {
    margin-inline-end: var(--st-space-3);
}

.st-page .st-footer__link,
.st-page .st-footer__language {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--st-tap);
    min-height: var(--st-tap);
    border-radius: var(--st-radius-sm);
}

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

.st-page .st-footer__language {
    font-size: var(--st-text-sm);
    color: var(--st-muted);
    text-decoration: none;
}

.st-page .st-footer__language:hover {
    color: var(--st-ink);
    text-decoration: underline;
}

.st-page .st-footer__language[aria-current="true"] {
    color: var(--st-ink);
    font-weight: var(--st-weight-semibold);
}

.st-footer__company {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--st-space-3);
    padding: var(--st-space-8) var(--st-gutter) var(--st-space-10);
    border-top: 1px solid var(--st-line);
    background: var(--st-off-white);
    text-align: center;
}

.st-footer__company-of {
    font-size: var(--st-text-xs);
    letter-spacing: var(--st-tracking-caps-wide);
    text-transform: uppercase;
    color: var(--st-muted);
}

.st-footer__agency-logo {
    display: block;
    width: 132px;
    height: auto;
}

.st-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 var(--st-space-4);
    font-size: var(--st-text-caption);
    color: var(--st-muted);
}

/* Tablet: the brand takes the first row, links and languages share the second. */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .st-footer__main {
        grid-template-columns: auto auto;
    }

    .st-footer__brand {
        grid-column: 1 / -1;
    }
}

/* Phone: the three stack; links in two columns, languages in three, so no item is left alone on a row. */
@media (max-width: 639.98px) {
    .st-footer__main {
        grid-template-columns: minmax(0, 1fr);
        padding-block: var(--st-space-8);
    }

    .st-footer__list,
    .st-footer__languages .st-footer__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 var(--st-space-4);
    }

    .st-footer__languages .st-footer__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        text-align: start;
    }

    .st-footer__list > li:not(:last-child),
    .st-footer__languages .st-footer__list > li:not(:last-child) {
        margin-inline-end: 0;
    }

    .st-page .st-footer__link,
    .st-page .st-footer__language {
        justify-content: flex-start;
    }
}

/* ---------- Home: opening band ---------- */

.st-hero {
    background: var(--st-sand);
}

.st-hero__inner {
    max-width: var(--st-page-max);
    margin: 0 auto;
    padding: var(--st-space-14) var(--st-gutter) var(--st-space-18);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--st-space-10);
}

.st-hero__text {
    flex: 1 1 30rem;
    min-width: 0;
}

.st-hero__status {
    display: inline-flex;
    align-items: center;
    gap: var(--st-space-2);
    margin-bottom: var(--st-space-5);
    padding: var(--st-space-1) var(--st-space-3);
    border-radius: var(--st-radius-pill);
    background: var(--st-white);
    color: var(--st-gold-text);
    font-size: var(--st-text-sm);
    font-weight: var(--st-weight-semibold);
}

.st-page .st-hero__title {
    max-width: 18ch;
    font-size: var(--st-text-display);
    line-height: var(--st-leading-display);
    letter-spacing: var(--st-tracking-hero);
}

.st-hero__lead {
    max-width: var(--st-measure);
    margin-top: var(--st-space-5);
    font-size: var(--st-text-lg);
    color: var(--st-text);
}

.st-hero__note {
    max-width: var(--st-measure);
    margin-top: var(--st-space-3);
    color: var(--st-text);
}

.st-hero__arch {
    flex: 0 1 20rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--st-hero-arch-height);
    border-radius: var(--st-radius-pill) var(--st-radius-pill) var(--st-radius-xl) var(--st-radius-xl);
    background: var(--st-deep);
}

.st-hero__mark {
    color: var(--st-gold-on-dark);
}

@media (max-width: 639.98px) {
    .st-hero__inner {
        padding-block: var(--st-space-8) var(--st-space-10);
        gap: var(--st-space-8);
    }

    .st-hero__arch {
        display: none;
    }
}

/* ---------- Home: areas, how booking works, for owners (Main board) ---------- */

.st-page .st-section__heading {
    margin-bottom: var(--st-space-6);
    font-size: var(--st-text-3xl);
}

.st-areas__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--st-space-6) var(--st-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-areas__item {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-1);
    padding-top: var(--st-space-4);
    border-top: 2px solid var(--st-line);
    font-size: var(--st-text-md);
}

.st-page .st-areas__name {
    font-size: var(--st-text-xl);
    line-height: var(--st-leading-snug);
}

.st-how {
    background: var(--st-deep);
    color: var(--st-on-deep);
}

.st-page .st-how .st-section__heading {
    margin-bottom: var(--st-space-2);
    color: var(--st-white);
}

.st-how__lead {
    max-width: var(--st-measure);
    margin-bottom: var(--st-space-10);
}

.st-how__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--st-space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-how__step {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-2);
}

.st-how__number {
    font-family: var(--st-font-display);
    font-size: var(--st-text-4xl);
    line-height: var(--st-leading-tight);
    color: var(--st-gold-on-dark);
}

.st-page .st-how__title {
    font-family: var(--st-font-text);
    font-size: var(--st-text-lg);
    letter-spacing: normal;
    color: var(--st-white);
}

.st-owners__panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--st-space-8);
    padding: var(--st-space-10);
    border-radius: var(--st-radius-xl);
    background: var(--st-sand);
}

.st-owners__text {
    flex: 1 1 26rem;
    min-width: 0;
}

.st-owners__text p {
    max-width: var(--st-measure);
    margin-top: var(--st-space-3);
}

.st-page .st-owners__heading {
    font-size: var(--st-text-3xl);
    line-height: var(--st-leading-snug);
}

@media (max-width: 639.98px) {
    .st-section {
        padding-block: var(--st-space-14);
    }

    .st-owners__panel {
        padding: var(--st-space-6);
    }

    .st-owners__panel .st-btn {
        width: 100%;
    }
}

/* ---------- Kit: buttons ---------- */

.st-page .st-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--st-space-2);
    min-height: var(--st-control);
    padding: 0 var(--st-space-6);
    border: 1px solid transparent;
    border-radius: var(--st-radius-md);
    font: var(--st-weight-semibold) var(--st-text-base) / 1.2 var(--st-font-text);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--st-duration) var(--st-ease), border-color var(--st-duration) var(--st-ease), color var(--st-duration) var(--st-ease);
}

.st-page .st-btn--pill {
    min-height: var(--st-tap);
    padding: 0 var(--st-space-5);
    border-radius: var(--st-radius-pill);
    font-size: var(--st-text-md);
}

.st-page .st-btn--block {
    width: 100%;
}

.st-page .st-btn--primary {
    background: var(--st-sea);
    color: var(--st-white);
}

.st-page .st-btn--primary:hover,
.st-page .st-btn--primary.is-hover {
    background: var(--st-sea-hover);
    color: var(--st-white);
}

.st-page .st-btn--dark {
    background: var(--st-ink);
    color: var(--st-white);
}

.st-page .st-btn--dark:hover,
.st-page .st-btn--dark.is-hover {
    background: var(--st-deep);
    color: var(--st-white);
}

.st-page .st-btn--danger {
    background: var(--st-red);
    color: var(--st-white);
}

.st-page .st-btn--danger:hover,
.st-page .st-btn--danger.is-hover {
    background: var(--st-red-hover);
    color: var(--st-white);
}

.st-page .st-btn--ghost {
    border-color: var(--st-ink);
    background: var(--st-white);
    color: var(--st-ink);
}

.st-page .st-btn--ghost:hover,
.st-page .st-btn--ghost.is-hover {
    background: var(--st-sand);
    color: var(--st-ink);
}

.st-page .st-btn--link {
    min-height: var(--st-tap);
    padding: 0 var(--st-space-1);
    background: none;
    color: var(--st-sea);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.st-page .st-btn--link:hover,
.st-page .st-btn--link.is-hover {
    color: var(--st-sea-hover);
    text-decoration-thickness: 2px;
}

.st-page .st-btn:disabled {
    border-color: var(--st-line);
    background: var(--st-line);
    color: var(--st-muted);
    cursor: not-allowed;
}

.st-page .st-btn--link:disabled {
    border-color: transparent;
    background: none;
    text-decoration: none;
}

/* ---------- Kit: fields ---------- */

.st-field {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-2);
    min-width: 0;
}

.st-field__label {
    font-size: var(--st-text-sm);
    font-weight: var(--st-weight-semibold);
    color: var(--st-ink);
}

.st-field__hint {
    font-size: var(--st-text-sm);
    color: var(--st-muted);
}

.st-field__error {
    display: flex;
    gap: var(--st-space-2);
    font-size: var(--st-text-sm);
    font-weight: var(--st-weight-medium);
    color: var(--st-red);
}

.st-page .st-input,
.st-page .st-select {
    width: 100%;
    height: var(--st-control);
    padding: 0 var(--st-space-3);
    border: 1px solid var(--st-field);
    border-radius: var(--st-radius-md);
    background: var(--st-white);
    color: var(--st-ink);
    font: var(--st-weight-regular) var(--st-text-base) / 1.2 var(--st-font-text);
}

.st-page .st-input::placeholder {
    color: var(--st-muted);
    opacity: 1;
}

.st-page .st-input:hover,
.st-page .st-input.is-hover,
.st-page .st-select:hover,
.st-page .st-select.is-hover {
    border-color: var(--st-muted);
}

.st-page .st-input:focus-visible,
.st-page .st-input.is-focus,
.st-page .st-select:focus-visible,
.st-page .st-select.is-focus {
    border-color: var(--st-sea);
    outline-offset: 0;
}

.st-page .st-input[aria-invalid="true"],
.st-page .st-select[aria-invalid="true"] {
    border-color: var(--st-red);
    background: var(--st-red-wash-soft);
}

.st-page .st-input:disabled,
.st-page .st-select:disabled {
    border-color: var(--st-line);
    background: var(--st-off-white);
    color: var(--st-muted);
    cursor: not-allowed;
}

.st-select-wrap {
    position: relative;
    display: block;
}

.st-page .st-select {
    padding-right: var(--st-space-10);
    appearance: none;
    cursor: pointer;
}

.st-select-wrap__chevron {
    position: absolute;
    top: 50%;
    right: var(--st-space-3);
    transform: translateY(-50%);
    color: var(--st-ink);
    pointer-events: none;
}

/* ---------- Kit: date range (the calendar itself is themed in stays-datepicker.css) ---------- */

.st-dates {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--st-space-2);
    min-width: 0;
}

.st-dates__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--st-field);
    border-radius: var(--st-radius-md);
    background: var(--st-white);
}

.st-page .st-dates__field {
    display: flex;
    align-items: center;
    gap: var(--st-space-3);
    min-height: 3.5rem;
    min-width: 0;
    padding: var(--st-space-2) var(--st-space-3);
    border: 0;
    border-radius: var(--st-radius-md);
    background: none;
    color: var(--st-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.st-dates__field + input + .st-dates__field {
    border-left: 1px solid var(--st-field);
    border-radius: 0 var(--st-radius-md) var(--st-radius-md) 0;
}

.st-page .st-dates__field:hover {
    background: var(--st-off-white);
}

.st-page .st-dates__field.is-active {
    box-shadow: inset 0 -3px 0 var(--st-sea);
}

.st-dates__icon {
    flex: none;
    color: var(--st-sea);
}

.st-dates__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: var(--st-leading-snug);
}

.st-dates__label {
    font-size: var(--st-text-xs);
    font-weight: var(--st-weight-semibold);
    color: var(--st-ink);
}

.st-dates__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--st-text);
}

.st-dates--error .st-dates__fields {
    border-color: var(--st-red);
    background: var(--st-red-wash-soft);
}

.st-dates__calendar--popover {
    position: absolute;
    z-index: var(--st-z-popover);
    top: calc(3.5rem + var(--st-space-2));
    left: 0;
    box-shadow: var(--st-shadow-overlay);
    translate: var(--st-dates-shift, 0) 0;
}

/* ---------- Kit: guest picker ---------- */

.st-guests {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.st-guests__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--st-space-2);
    width: 100%;
    margin-bottom: var(--st-space-2);
    padding: 0;
    font-size: var(--st-text-sm);
    font-weight: var(--st-weight-semibold);
    color: var(--st-ink);
}

.st-guests__total {
    font-weight: var(--st-weight-regular);
    color: var(--st-muted);
}

.st-guests__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--st-space-4);
    padding: var(--st-space-3) 0;
    border-top: 1px solid var(--st-line);
}

.st-guests__name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: var(--st-leading-snug);
}

.st-guests__name label {
    font-weight: var(--st-weight-semibold);
    color: var(--st-ink);
}

.st-guests__hint {
    font-size: var(--st-text-sm);
    color: var(--st-muted);
}

.st-stepper {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--st-space-2);
}

.st-page .st-stepper__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--st-tap);
    height: var(--st-tap);
    padding: 0;
    border: 1px solid var(--st-field);
    border-radius: var(--st-radius-pill);
    background: var(--st-white);
    color: var(--st-ink);
    cursor: pointer;
}

.st-page .st-stepper__button:hover {
    border-color: var(--st-ink);
}

.st-page .st-stepper__button:disabled {
    border-color: var(--st-line);
    color: var(--st-field);
    cursor: not-allowed;
}

.st-page .st-stepper__value {
    width: var(--st-tap);
    height: var(--st-tap);
    padding: 0;
    border: 0;
    background: none;
    color: var(--st-ink);
    font: var(--st-weight-semibold) var(--st-text-base) / 1 var(--st-font-text);
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.st-stepper__value::-webkit-inner-spin-button,
.st-stepper__value::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* ---------- Kit: card ---------- */

.st-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius-lg);
    background: var(--st-white);
    color: var(--st-text);
}

.st-page .st-card--link {
    text-decoration: none;
    color: var(--st-text);
}

.st-card--link:hover,
.st-card--link.is-hover {
    border-color: var(--st-line-strong);
    box-shadow: var(--st-shadow-raised);
}

.st-page .st-card--link:hover .st-card__title,
.st-page .st-card--link.is-hover .st-card__title {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.st-card__media {
    aspect-ratio: 4 / 3;
    background: var(--st-sand);
}

.st-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.st-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-1);
    padding: var(--st-space-4) var(--st-space-5) var(--st-space-5);
}

.st-card__kicker {
    font-size: var(--st-text-sm);
    font-weight: var(--st-weight-semibold);
    color: var(--st-gold-text);
}

.st-page .st-card__title {
    font-size: var(--st-text-xl);
    line-height: 1.25;
    letter-spacing: 0;
}

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

.st-card__footer {
    margin-top: var(--st-space-2);
    color: var(--st-ink);
}

/* ---------- Kit: step list ---------- */

.st-steps {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-steps__item {
    position: relative;
    display: flex;
    gap: var(--st-space-4);
    padding-bottom: var(--st-space-5);
}

.st-steps__item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 1.75rem;
    bottom: 0.25rem;
    left: 0.8125rem;
    width: 2px;
    background: var(--st-line);
}

.st-steps__item--done:not(:last-child)::before {
    background: var(--st-sea);
}

.st-steps__mark {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid var(--st-field);
    border-radius: var(--st-radius-pill);
    background: var(--st-white);
    color: var(--st-white);
}

.st-steps__item--done .st-steps__mark {
    border-color: var(--st-sea);
    background: var(--st-sea);
}

.st-steps__item--todo .st-steps__mark {
    border-color: var(--st-sea);
}

.st-steps__item--later .st-steps__mark {
    border-style: dashed;
    color: var(--st-muted);
}

.st-steps__item--failed .st-steps__mark {
    border-color: var(--st-red);
    background: var(--st-red);
}

.st-steps__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: var(--st-leading-snug);
}

.st-steps__title {
    font-weight: var(--st-weight-semibold);
    color: var(--st-ink);
}

.st-steps__status {
    font-size: var(--st-text-sm);
    color: var(--st-muted);
}

.st-steps__item--done .st-steps__status {
    color: var(--st-sea);
}

.st-steps__item--failed .st-steps__status {
    font-weight: var(--st-weight-semibold);
    color: var(--st-red);
}

.st-steps__detail {
    margin-top: var(--st-space-1);
    font-size: var(--st-text-sm);
    color: var(--st-text);
}

/* ---------- Kit: alert ---------- */

.st-alert {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--st-space-3) var(--st-space-4);
    padding: var(--st-space-4) var(--st-space-5);
    border: 1px solid var(--st-red);
    border-radius: var(--st-radius-lg);
    background: var(--st-red-wash);
    color: var(--st-ink);
}

.st-alert__icon {
    flex: none;
    margin-top: 1px;
    color: var(--st-red);
}

.st-alert__body {
    flex: 1 1 16rem;
    min-width: 0;
}

.st-alert__title {
    font-weight: var(--st-weight-semibold);
    color: var(--st-red);
}

.st-alert__text {
    margin-top: var(--st-space-1);
    font-size: var(--st-text-md);
    color: var(--st-ink);
}

.st-alert__action {
    flex: none;
    align-self: center;
}

.st-page .st-alert .st-btn--ghost {
    min-height: var(--st-tap);
    border-color: var(--st-red);
    background: var(--st-white);
    color: var(--st-red);
}

.st-page .st-alert .st-btn--ghost:hover {
    background: var(--st-red-wash-soft);
}

/* ---------- Kit: header badge ---------- */

.st-page .st-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--st-tap);
    height: var(--st-tap);
    border-radius: var(--st-radius-pill);
    color: var(--st-ink);
}

.st-page .st-badge:hover {
    background: var(--st-sand);
    color: var(--st-ink);
}

.st-badge__count {
    position: absolute;
    top: var(--st-space-1);
    right: var(--st-space-half);
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 var(--st-space-1);
    border: 2px solid var(--st-white);
    border-radius: var(--st-radius-pill);
    background: var(--st-red);
    color: var(--st-white);
    font-size: var(--st-text-xs);
    font-weight: var(--st-weight-bold);
    line-height: 1rem;
    text-align: center;
}

/* ---------- Kit: empty / error state ---------- */

.st-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--st-space-3);
    max-width: 30rem;
    padding: var(--st-space-10) var(--st-space-6);
    text-align: center;
}

.st-state__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: var(--st-space-2);
    border-radius: var(--st-radius-pill);
    background: var(--st-sand);
    color: var(--st-sea);
}

.st-state--error .st-state__mark {
    background: var(--st-red-wash);
    color: var(--st-red);
}

.st-page .st-state__title {
    font-size: var(--st-text-2xl);
    line-height: var(--st-leading-snug);
}

.st-page h1.st-state__title {
    font-size: var(--st-text-3xl);
}

.st-state__text {
    max-width: 26rem;
    margin-bottom: var(--st-space-3);
}

/* ---------- Kit: loading skeleton ---------- */

.st-skeleton {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--st-space-6);
}

.st-skeleton__item {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-2);
}

.st-skeleton__block {
    display: block;
    height: 0.875rem;
    border-radius: var(--st-radius-sm);
    background: linear-gradient(90deg, var(--st-line) 0%, var(--st-sand) 50%, var(--st-line) 100%);
    background-size: 200% 100%;
    animation: st-shimmer var(--st-duration-shimmer) ease-in-out infinite;
}

.st-skeleton__block--media {
    height: auto;
    aspect-ratio: 4 / 3;
    margin-bottom: var(--st-space-2);
    border-radius: var(--st-radius-lg);
}

.st-skeleton__block--short {
    width: 35%;
}

.st-skeleton__block--medium {
    width: 70%;
}

.st-skeleton--lines {
    display: flex;
    flex-direction: column;
}

@keyframes st-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .st-skeleton__block {
        animation: none;
    }
}

/* ---------- Kit: toast ---------- */

.st-toast-region {
    position: fixed;
    z-index: var(--st-z-toast);
    left: 50%;
    bottom: var(--st-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--st-space-2);
    width: min(28rem, calc(100% - 2 * var(--st-gutter)));
    transform: translateX(-50%);
}

.st-toast {
    display: flex;
    align-items: center;
    gap: var(--st-space-3);
    padding: var(--st-space-2) var(--st-space-2) var(--st-space-2) var(--st-space-4);
    border-radius: var(--st-radius-lg);
    background: var(--st-ink);
    color: var(--st-white);
    box-shadow: var(--st-shadow-overlay);
    animation: st-toast-in var(--st-duration) var(--st-ease);
}

.st-toast__icon {
    flex: none;
    color: var(--st-gold-on-dark);
}

.st-toast--error {
    border-inline-start: var(--st-space-1) solid var(--st-red-on-dark);
}

.st-toast--error .st-toast__icon {
    color: var(--st-red-on-dark);
}

.st-toast__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--st-text-md);
}

.st-page .st-toast__close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--st-tap);
    height: var(--st-tap);
    padding: 0;
    border: 0;
    border-radius: var(--st-radius-md);
    background: none;
    color: var(--st-white);
    cursor: pointer;
}

.st-page .st-toast__close:focus-visible {
    outline-color: var(--st-focus-color-on-deep);
    outline-offset: -2px;
}

@keyframes st-toast-in {
    from { opacity: 0; transform: translateY(var(--st-space-2)); }
    to { opacity: 1; transform: none; }
}

/* ---------- Kit: dialog ---------- */

.st-dialog {
    width: min(30rem, calc(100% - 2 * var(--st-gutter)));
    padding: 0;
    border: 0;
    border-radius: var(--st-radius-xl);
    background: var(--st-white);
    color: var(--st-text);
    box-shadow: var(--st-shadow-overlay);
}

.st-dialog::backdrop {
    background: var(--st-scrim);
}

.st-dialog[open] {
    animation: st-toast-in var(--st-duration) var(--st-ease);
}

.st-dialog__panel {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-4);
    padding: var(--st-space-6);
}

.st-dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--st-space-4);
}

.st-page .st-dialog__title {
    padding-top: var(--st-space-2);
    font-size: var(--st-text-2xl);
    line-height: var(--st-leading-snug);
}

.st-page .st-dialog__close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--st-tap);
    height: var(--st-tap);
    margin: calc(var(--st-space-2) * -1) calc(var(--st-space-2) * -1) 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--st-radius-pill);
    background: none;
    color: var(--st-ink);
    cursor: pointer;
}

.st-page .st-dialog__close:hover {
    background: var(--st-sand);
}

.st-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--st-space-3);
    margin-top: var(--st-space-2);
}

@media (max-width: 639.98px) {
    .st-dialog__actions .st-btn {
        flex: 1 1 100%;
    }
}