/* ==========================================================================
   CampKing Smart Stay  -  Guest PWA
   Design language: warm-camp terracotta, forest canopy depth, woven-canvas
   structural motif. Display type carries personality; body type stays
   workmanlike and legible; mono type marks operational data (codes, times).
   ========================================================================== */

/* The five Appearance Studio families are packaged with the plugin. This
   keeps font switching immediate in Live Preview and avoids a third-party
   font request from the guest's device. Variable files cover every weight
   exposed by Appearance Studio without separate downloads. */
@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/PlusJakartaSans-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/DMSans-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
}

@font-face {
    font-family: "Work Sans";
    src: url("../fonts/WorkSans-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
}

.ckss-guest-pwa-host,
body.ckss-guest-pwa-standalone {
    /* Color  -  "Espresso & Brass": deep espresso primary, warm brass accent,
       clean ivory surfaces. Replaces the previous muddy tan/rust palette
       with a richer, higher-contrast premium hospitality identity that
       still reads as warm (appropriate for a glamping/resort product)
       rather than a cold corporate theme. */
    --ck-clay: #2b211a;
    --ck-clay-dark: #1a1410;
    --ck-clay-light: #6b5138;
    --ck-canopy: #33402f;
    --ck-canopy-dark: #232b20;
    --ck-hero-start: #2b211a;
    --ck-hero-end: #140f0b;
    --ck-stay-card-bg: #6f5847;
    --ck-stay-card-text: #fff9f2;
    --ck-sand: #c9a45c;
    --ck-sand-light: #e6cf9e;
    --ck-bark: #4a4038;
    --ck-paper: #faf7f2;
    --ck-paper-warm: #f3ead9;
    --ck-surface: #ffffff;
    --ck-surface-sunk: #f1ece1;
    --ck-border: #e6dccb;
    --ck-border-strong: #d8c9ae;
    --ck-ink: #1c1712;
    --ck-ink-soft: #5a5044;
    --ck-ink-muted: #75695c;
    --ck-success: #4d7a52;
    --ck-success-soft: #e7efe3;
    --ck-danger: #a23f37;
    --ck-danger-soft: #f7e8e5;
    --ck-info: #5b6f8c;
    --ck-info-soft: #e9eef4;
    --ck-warning: #b8823a;
    --ck-warning-soft: #f7ecd9;

    /* Elevation - five steps, nothing else. sm/card/float/md/lg cover every
       surface in the app; --ck-shadow-clay is the one deliberate exception
       for elements sitting directly on the clay hero gradient. */
    --ck-shadow-sm: 0 1px 2px rgba(28, 23, 18, 0.06), 0 1px 1px rgba(28, 23, 18, 0.04);
    --ck-shadow-card: 0 8px 20px rgba(29, 24, 18, 0.04);
    --ck-shadow-float: 0 16px 36px rgba(29, 24, 18, 0.07);
    --ck-shadow-md: 0 8px 24px rgba(28, 23, 18, 0.10), 0 2px 8px rgba(28, 23, 18, 0.06);
    --ck-shadow-lg: 0 20px 48px rgba(28, 23, 18, 0.18), 0 6px 16px rgba(28, 23, 18, 0.08);
    --ck-shadow-clay: 0 12px 24px rgba(43, 33, 26, 0.28);

    /* Radius - one dominant radius (10px) for cards/images/buttons/inputs,
       18px reserved for sheets only. Large, bouncy corners read as
       playful/consumer-app; a boutique-hotel product wants corners quiet
       enough that they support the content instead of announcing
       themselves. */
    --ck-radius-xl: 18px;
    --ck-radius-lg: 10px;
    --ck-radius-md: 10px;
    --ck-radius-sm: 8px;
    --ck-radius-pill: 999px;

    /* Type scale - a deliberate 6-step scale (hero/title/subtitle/body/
       label/caption) instead of the dozens of one-off pixel sizes this
       stylesheet accumulated over time. Every new heading/label should pick
       one of these, not invent a new number. */
    --ck-text-hero: 34px;
    --ck-text-title: 22px;
    --ck-text-subtitle: 17px;
    --ck-text-body: 15px;
    --ck-text-label: 12px;
    --ck-text-caption: 11px;

    /* Motion */
    --ck-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ck-fast: 140ms;
    --ck-base: 240ms;
    --ck-slow: 420ms;

    /* Layout */
    --ck-max-width: 420px;
    --ck-gutter: 20px;
    --ck-content-gap: 20px;
    --ck-screen-padding: 16px;
    --ck-card-padding: 16px;
    --ck-button-height: 50px;
    --ck-font-body: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --ck-font-heading: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --ck-font-size-base: 16px;
    --ck-radius-input: 10px;
    --ck-radius-search: 48px;
    --ck-search-height: 50px;
    --ck-nav-height: 72px;
    --ck-nav-radius: 20px;
    --ck-nav-blur: 24px;
    --ck-nav-background: #ffffff;
    --ck-nav-active-background: #2b211a;
    --ck-nav-active-color: #ffffff;
    --ck-nav-inactive-color: #75695c;
    --ck-nav-font: var(--ck-font-body);
    --ck-nav-font-weight: 700;
    --ck-nav-label-size: 12px;
    --ck-nav-icon-size: 23px;
    --ck-nav-item-gap: 5px;
    --ck-nav-padding: 8px;
    --ck-nav-side-margin: 16px;
    --ck-nav-bottom-margin: 12px;
    --ck-page-animation: ckss-screen-in;

    /* Legacy aliases kept for any inline references */
    --ckss-primary: var(--ck-clay);
    --ckss-dark: var(--ck-ink);
    --ckss-bg: var(--ck-paper);
}

.ckss-guest-pwa-host .ckss-privacy-notice,
body.ckss-guest-pwa-standalone .ckss-privacy-notice {
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    background: var(--ck-surface);
    overflow: hidden;
}

.ckss-guest-pwa-host .ckss-privacy-notice summary,
body.ckss-guest-pwa-standalone .ckss-privacy-notice summary {
    cursor: pointer;
    padding: 14px 16px;
    color: var(--ck-ink);
    font-weight: 750;
}

.ckss-guest-pwa-host .ckss-privacy-notice div,
body.ckss-guest-pwa-standalone .ckss-privacy-notice div {
    padding: 0 16px 16px;
    color: var(--ck-ink-soft);
    font-size: 13px;
    line-height: 1.7;
}

.ckss-guest-pwa-host,
.ckss-guest-pwa-host *,
.ckss-guest-pwa-host *::before,
.ckss-guest-pwa-host *::after {
    box-sizing: border-box;
}

body.ckss-guest-pwa-standalone {
    background: var(--ck-paper);
    color: var(--ck-ink);
    font-family: var(--ck-font-body);
    font-size: var(--ck-font-size-base);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

.ckss-guest-pwa-host,
.ckss-guest-pwa-host * {
    box-sizing: border-box;
}

.ckss-guest-pwa-host {
    background: var(--ck-paper);
    color: var(--ck-ink);
    font-family: var(--ck-font-body);
    line-height: 1.55;
    margin: 0 auto;
    max-width: var(--ck-max-width);
    min-height: 100vh;
    overflow-x: hidden;
    padding: 0;
    position: relative;
}

/* The host block sits inside whatever WordPress theme/page template embeds
   the shortcode - block themes (Twenty Twenty-Five etc.) apply their own
   "global styles" side padding to normal content blocks, which would
   otherwise show up as an inescapable gutter around the app that no
   Appearance Studio setting can remove. On phone-width viewports the app
   is meant to be edge-to-edge regardless of the host theme, so break out
   of the parent's box using the viewport-relative margin trick. Wider
   viewports intentionally keep the centered "phone card" look, so the
   breakout only applies below the default app width. */
@media (max-width: 480px) {
    .ckss-guest-pwa-host {
        /* !important is required here: WordPress block themes (Twenty
           Twenty-Five and others) apply their own
           ".is-layout-constrained > :where(...)" rule with
           "margin-left/right: auto !important" to every normal content
           block, which otherwise always wins this tug-of-war regardless of
           selector specificity or source order. */
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        max-width: 100vw !important;
        width: 100vw !important;
    }
}

.ckss-mono {
    font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
    letter-spacing: 0.01em;
}

.ckss-guest-pwa-host h1,
.ckss-guest-pwa-host h2,
.ckss-guest-pwa-host h3,
.ckss-guest-pwa-host h4 {
    font-family: var(--ck-font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0;
    /* No color here on purpose: body/.ckss-guest-pwa-host already set
       color: var(--ck-ink) as the page default, so headings inherit it
       automatically in normal contexts. Dark hero/card containers
       (.ckss-hero, .ckss-home-hero, .ckss-home-staycard, etc.) each set
       their own light `color` - an explicit color here would win over that
       inheritance and make every heading inside a dark container invisible
       regardless of what the container asks for. This exact regression
       shipped once already (a heading-color fix here broke every hero
       title); don't reintroduce it. */
}

.ckss-guest-pwa-host p {
    margin: 0;
}

.ckss-guest-pwa-host a {
    color: inherit;
}

.ckss-guest-pwa-host button {
    font-family: inherit;
}

.ckss-guest-pwa-host ::selection {
    background: var(--ck-clay);
    color: #fff;
}

.ckss-guest-pwa-host :focus-visible {
    outline: 2px solid var(--ck-clay);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .ckss-guest-pwa-host *,
    .ckss-guest-pwa-host *::before,
    .ckss-guest-pwa-host *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

.ckss-app-shell {
    min-height: 100vh;
    padding-inline: var(--ck-screen-padding);
    position: relative;
    padding:0px;
}

.ckss-mobile-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: calc(var(--ck-nav-height) + 34px + env(safe-area-inset-bottom));
}

/* ==========================================================================
   Offline / connectivity
   ========================================================================== */

.ckss-offline-banner {
    background: var(--ck-clay-dark);
    color: #f4ede0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 10px 16px;
    position: sticky;
    text-align: center;
    top: 0;
    z-index: 40;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.ckss-btn {
    align-items: center;
    background: var(--ck-surface);
    border: 1.5px solid var(--ck-border-strong);
    border-radius: var(--ck-radius-pill);
    color: var(--ck-ink);
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 7px;
    justify-content: center;
    line-height: 1.2;
    min-height: var(--ck-button-height);
    padding: 11px 18px;
    transition: transform var(--ck-fast) var(--ck-ease), box-shadow var(--ck-fast) var(--ck-ease), background var(--ck-fast) var(--ck-ease), border-color var(--ck-fast) var(--ck-ease);
}

.ckss-btn:active {
    transform: scale(0.97);
}

.ckss-btn--primary {
    background: var(--ck-clay);
    border-color: var(--ck-clay);
    box-shadow: var(--ck-shadow-clay);
    color: #fff;
}

.ckss-btn--primary:hover {
    background: var(--ck-clay-dark);
    border-color: var(--ck-clay-dark);
}

.ckss-btn--secondary {
    background: var(--ck-surface);
    border-color: var(--ck-border-strong);
    color: var(--ck-ink);
}

.ckss-btn--secondary:hover {
    background: var(--ck-paper-warm);
}

.ckss-btn--danger {
    background: var(--ck-danger-soft);
    border-color: transparent;
    color: var(--ck-danger);
}

.ckss-btn--danger:hover {
    background: #f0d6d1;
}

.ckss-btn--block {
    min-height: 46px;
    width: 100%;
}

.ckss-btn--mini {
    border-radius: var(--ck-radius-sm);
    font-size: 12.5px;
    padding: 8px 13px;
}

.ckss-icon-btn {
    align-items: center;
    background: var(--ck-surface);
    border: 1.5px solid var(--ck-border-strong);
    border-radius: var(--ck-radius-pill);
    color: var(--ck-ink);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    height: 38px;
    justify-content: center;
    transition: transform var(--ck-fast) var(--ck-ease), background var(--ck-fast) var(--ck-ease);
    width: 38px;
}

.ckss-icon-btn:active {
    transform: scale(0.92);
}

.ckss-icon-btn--light {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
}

.ckss-icon-btn--light:hover {
    background: rgba(255, 255, 255, 0.26);
}

.ckss-link-btn {
    background: none;
    border: 0;
    color: var(--ck-clay);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 0;
    white-space: nowrap;
}

.ckss-link-btn--center {
    display: block;
    margin: 4px auto 0;
    text-align: center;
}

.ckss-link-btn--light {
    color: #fff;
    opacity: 0.86;
}

/* ==========================================================================
   Inputs
   ========================================================================== */

.ckss-input,
.ckss-textarea,
select.ckss-input {
    background: var(--ck-surface);
    border: 1.5px solid var(--ck-border-strong);
    border-radius: var(--ck-radius-input);
    color: var(--ck-ink);
    font-family: inherit;
    font-size: 15px;
    padding: 13px 15px;
    transition: border-color var(--ck-fast) var(--ck-ease), box-shadow var(--ck-fast) var(--ck-ease);
    width: 100%;
}

.ckss-input:focus,
.ckss-textarea:focus {
    border-color: var(--ck-clay);
    box-shadow: 0 0 0 4px rgba(156, 75, 63, 0.12);
    outline: none;
}

.ckss-input--search {
    background: var(--ck-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2393897a' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 16px center;
    border-radius: var(--ck-radius-search);
    min-height: var(--ck-search-height);
    padding-left: 48px;
    padding-right: 16px;
}

.ckss-textarea {
    min-height: 96px;
    resize: vertical;
}

.ckss-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ckss-field span:first-child {
    color: var(--ck-ink-soft);
    font-size: 13px;
    font-weight: 700;
}

.ckss-inline-form {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ==========================================================================
   Hero / Landing screen
   ========================================================================== */

.ckss-screen {
    animation: var(--ck-page-animation) var(--ck-base) var(--ck-ease);
    display: flex;
    flex-direction: column;
    gap: var(--ck-gutter);
    padding: 0 var(--ck-screen-padding) 28px;
    
}

@keyframes ckss-screen-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ckss-screen-soft-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes ckss-screen-lift {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.ckss-hero {
    background:
        radial-gradient(circle at 18% -10%, rgba(199, 168, 124, 0.35), transparent 46%),
        linear-gradient(165deg, var(--ck-hero-start) 0%, var(--ck-hero-start) 52%, var(--ck-hero-end) 100%);
    border-radius: 0 0 var(--ck-radius-xl) var(--ck-radius-xl);
    color: #fdf9f2;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 calc(-1 * var(--ck-screen-padding));
    padding: calc(30px + env(safe-area-inset-top)) var(--ck-screen-padding) 34px;
    position: relative;
}

.ckss-hero h1 {
    font-size: var(--ck-text-hero);
    letter-spacing: -0.015em;
    line-height: 1.08;
}

.ckss-hero--arrival {
    background-position: center;
    background-size: cover;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0;
    min-height: 100dvh;
    padding: calc(28px + env(safe-area-inset-top)) clamp(20px, 5vw, 28px) calc(28px + env(safe-area-inset-bottom));
}

.ckss-hero--arrival-clean {
    align-items: stretch;
    background: #f4f1eb;
    color: var(--ck-ink);
    justify-content: center;
}

.ckss-arrival-app-icon {
    align-items: center;
    align-self: center;
    background: transparent;
    display: flex;
    height: clamp(132px, 38vw, 168px);
    justify-content: center;
    margin-bottom: clamp(24px, 7vh, 42px);
    width: clamp(132px, 38vw, 168px);
}

.ckss-arrival-app-icon img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.ckss-arrival-app-icon .ckss-brand-mark {
    color: var(--ck-clay);
    font-size: 24px;
    text-align: center;
}

.ckss-hero-arrival__copy {
    margin-bottom: 22px;
}

.ckss-hero-arrival__copy h1 {
    color: #fff;
    font-size: var(--ck-text-hero);
    letter-spacing: -0.015em;
    line-height: 1.1;
    text-shadow: 0 2px 18px rgba(20, 15, 11, 0.44);
}

.ckss-hero--arrival-clean .ckss-hero-arrival__copy h1 {
    color: var(--ck-ink);
    text-shadow: none;
}

.ckss-hero-arrival__copy p {
    color: rgba(253, 249, 242, 0.82);
    font-size: var(--ck-text-body);
    line-height: 1.5;
    margin-top: 8px;
    max-width: 34ch;
}

.ckss-hero--arrival-clean .ckss-hero-arrival__copy p {
    color: var(--ck-ink-muted);
}

.ckss-hero--arrival-clean > .ckss-link-btn--center {
    color: var(--ck-ink-soft);
}

.ckss-link-btn--light {
    color: rgba(253, 249, 242, 0.82);
}

.ckss-hero p {
    color: rgba(253, 249, 242, 0.8);
    font-size: var(--ck-text-body);
    line-height: 1.5;
    margin-top: 2px;
    max-width: 32ch;
}

.ckss-hero--compact {
    border-radius: var(--ck-radius-lg);
    margin: 0;
    padding: 22px var(--ck-gutter);
}

.ckss-hero--compact h1 {
    font-size: var(--ck-text-title);
}

.ckss-hero--expired {
    border-radius: var(--ck-radius-lg);
    margin: 0;
}

.ckss-hero--loading {
    align-items: center;
    background: #f4f1eb;
    border-radius: 0;
    color: var(--ck-ink);
    justify-content: center;
    margin: 0;
    min-height: 100dvh;
    padding: calc(32px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom));
    text-align: center;
}

.ckss-hero--loading h1 {
    color: var(--ck-ink);
    font-size: var(--ck-text-title);
    margin-top: 12px;
}

.ckss-hero--loading p {
    color: var(--ck-ink-muted);
    max-width: 30ch;
}

.ckss-status-pill {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--ck-radius-pill);
    font-size: var(--ck-text-caption);
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 6px 13px;
    text-transform: uppercase;
}

.ckss-status-pill--success {
    background: var(--ck-success-soft);
    border-color: transparent;
    color: var(--ck-success);
}

.ckss-status-pill--danger {
    background: var(--ck-danger-soft);
    border-color: transparent;
    color: var(--ck-danger);
}

.ckss-status-pill--info {
    background: var(--ck-info-soft);
    border-color: transparent;
    color: var(--ck-info);
}

.ckss-brand-mark {
    align-items: center;
    display: flex;
    gap: 9px;
}

.ckss-brand-mark--hero {
    color: var(--ck-sand-light);
}

.ckss-brand-mark--logo {
    align-items: center;
    aspect-ratio: 1 / 1;
    display: flex;
    flex: 0 1 auto;
    height: min(var(--ck-logo-height, 36px), 20.625vw, 67.5px);
    overflow: hidden;
    width: auto;
}

.ckss-brand-mark--logo img {
    border-radius: var(--ck-radius-sm);
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.ckss-icon-svg {
    display: inline-block;
    flex-shrink: 0;
    height: 20px;
    width: 20px;
}

.ckss-icon-btn .ckss-icon-svg {
    height: 18px;
    width: 18px;
}

.ckss-bottom-nav__icon .ckss-icon-svg {
    height: 22px;
    width: 22px;
}

/* ==========================================================================
   Panels
   ========================================================================== */

.ckss-panel {
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    box-shadow: var(--ck-shadow-sm);
    padding: var(--ck-card-padding);
}


.ckss-panel--service-detail .ckss-service-meta p {
    color: var(--ck-ink-soft);
    font-size: 13.5px;
    line-height: 1.5;
}

.ckss-panel__header {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.ckss-panel__header h2 {
    font-size: var(--ck-text-subtitle);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ckss-panel h2 {
    font-size: var(--ck-text-subtitle);
    margin-bottom: 6px;
}


.ckss-muted {
    color: var(--ck-ink-muted);
    font-size: 13.5px;
}

/* ==========================================================================
   Scan CTA + camera scanner (landing screen)
   ========================================================================== */

.ckss-scan-cta {
    align-items: center;
    background: rgba(255, 250, 242, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: var(--ck-radius-lg);
    box-shadow: 0 14px 32px rgba(20, 15, 11, 0.24);
    color: var(--ck-clay-dark);
    cursor: pointer;
    display: flex;
    gap: 13px;
    margin: 0;
    padding: 15px;
    text-align: left;
    transition: transform var(--ck-fast) var(--ck-ease);
    width: 100%;
}

.ckss-scan-cta:active {
    transform: scale(0.98);
}

.ckss-scan-cta__icon {
    align-items: center;
    background: #f1e7d8;
    border-radius: var(--ck-radius-md);
    display: flex;
    flex-shrink: 0;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.ckss-scan-cta__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ckss-scan-cta__text strong {
    font-family: var(--ck-font-body);
    font-size: var(--ck-text-subtitle);
    line-height: 1.2;
}

.ckss-scan-cta__text span {
    color: rgba(43, 33, 26, 0.68);
    font-size: var(--ck-text-label);
    line-height: 1.4;
}

.ckss-scan-panel__manual {
    margin-top: 12px;
}

.ckss-hero--arrival > .ckss-link-btn--center {
    margin-top: 14px;
    padding: 8px 4px;
}

.ckss-scanner-overlay {
    align-items: center;
    background: rgba(15, 12, 9, 0.94);
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: center;
    left: 0;
    padding: calc(20px + env(safe-area-inset-top)) 24px calc(20px + env(safe-area-inset-bottom));
    position: fixed;
    right: 0;
    top: 0;
    z-index: 80;
}

.ckss-scanner-overlay__header {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    justify-content: space-between;
    width: 100%;
}

.ckss-scanner-overlay__viewport {
    aspect-ratio: 4 / 5;
    background: #000;
    border-radius: var(--ck-radius-lg);
    overflow: hidden;
    position: relative;
    width: min(88vw, 380px);
}

.ckss-scanner-overlay__viewport video {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.ckss-scanner-overlay__frame {
    aspect-ratio: 1;
    left: 10%;
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
}

.ckss-scanner-overlay__frame span {
    border-color: var(--ck-sand-light);
    border-style: solid;
    border-width: 0;
    height: 32px;
    position: absolute;
    width: 32px;
}

.ckss-scanner-overlay__frame span:nth-child(1) {
    border-top-width: 3px;
    border-left-width: 3px;
    border-top-left-radius: 10px;
    left: 0;
    top: 0;
}

.ckss-scanner-overlay__frame span:nth-child(2) {
    border-top-width: 3px;
    border-right-width: 3px;
    border-top-right-radius: 10px;
    right: 0;
    top: 0;
}

.ckss-scanner-overlay__frame span:nth-child(3) {
    border-bottom-width: 3px;
    border-left-width: 3px;
    border-bottom-left-radius: 10px;
    bottom: 0;
    left: 0;
}

.ckss-scanner-overlay__frame span:nth-child(4) {
    border-bottom-width: 3px;
    border-right-width: 3px;
    border-bottom-right-radius: 10px;
    bottom: 0;
    right: 0;
}

/* ==========================================================================
   Feature cards (landing)
   ========================================================================== */

.ckss-feature-row {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.ckss-feature-card {
    background: var(--ck-paper-warm);
    border-radius: var(--ck-radius-md);
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 12px;
}

.ckss-feature-card strong {
    font-size: 12.5px;
}

.ckss-feature-card span {
    color: var(--ck-ink-soft);
    font-size: 11px;
    line-height: 1.4;
}

/* ==========================================================================
   Home screen  -  hero / banner slider
   ========================================================================== */

.ckss-hero-slideshow__track {
    inset: 0;
    position: absolute;
}

.ckss-hero-slideshow__slide {
    background-position: center;
    background-size: cover;
    inset: 0;
    opacity: 0;
    position: absolute;
    transition: opacity 1.1s ease-in-out;
}

.ckss-hero-slideshow__slide.is-active {
    opacity: 1;
}

.ckss-home-hero--slideshow {
    background: var(--ck-clay-dark);
}

.ckss-hero-slideshow__gallery-cta {
    align-items: center;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--ck-radius-pill);
    bottom: 16px;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 11.5px;
    font-weight: 600;
    gap: 6px;
    padding: 7px 13px;
    position: absolute;
    right: var(--ck-gutter);
    z-index: 2;
}

.ckss-hero-slideshow__gallery-cta .ckss-icon-svg {
    height: 15px;
    width: 15px;
}

.ckss-lightbox {
    align-items: center;
    background: rgba(15, 12, 9, 0.94);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 85;
}

.ckss-lightbox__image {
    border-radius: var(--ck-radius-md);
    max-height: 78vh;
    max-width: 100%;
    object-fit: contain;
}

.ckss-lightbox__close {
    position: absolute;
    right: 18px;
    top: calc(18px + env(safe-area-inset-top));
}

.ckss-lightbox__prev,
.ckss-lightbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.ckss-lightbox__prev {
    left: 12px;
}

.ckss-lightbox__next {
    right: 12px;
}

.ckss-lightbox__caption {
    bottom: calc(24px + env(safe-area-inset-bottom));
    color: #fff;
    font-size: 13px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}

.ckss-home-hero {
    background:
        radial-gradient(circle at 68% 16%, rgba(199, 168, 124, 0.24), transparent 22%),
        linear-gradient(165deg, var(--ck-hero-start) 0%, var(--ck-hero-start) 46%, var(--ck-hero-end) 100%);
    border-radius: 0 0 var(--ck-radius-xl) var(--ck-radius-xl);
    color: #fff;
    min-height: 220px;
    overflow: hidden;
    padding: calc(20px + env(safe-area-inset-top)) calc(var(--ck-gutter) + 2px) 24px;
    position: relative;
}

.ckss-home-hero::before {
    background: linear-gradient(180deg, rgba(17, 11, 7, 0.04) 0%, rgba(17, 11, 7, 0.5) 100%);
    content: "";
    inset: 0;
    position: absolute;
}

.ckss-home-hero__overlay {
    background: linear-gradient(180deg, transparent 0%, rgba(6, 18, 10, 0.45) 100%);
    inset: 0;
    position: absolute;
}

.ckss-home-hero__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    padding-inline: 8px;
    position: relative;
    z-index: 1;
}

.ckss-home-hero--slider {
    background: var(--ck-ink);
    padding: 0;
}

.ckss-home-hero--slider::before {
    content: none;
}

.ckss-banner-slider__track {
    display: flex;
    height: 100%;
    transition: transform var(--ck-slow) var(--ck-ease);
    width: 100%;
}

.ckss-banner-slide {
    background-color: var(--ck-ink);
    background-position: center;
    background-size: cover;
    box-sizing: border-box;
    display: flex;
    flex: 0 0 100%;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    padding: calc(20px + env(safe-area-inset-top)) var(--ck-gutter) 26px;
    position: relative;
    width: 100%;
}

.ckss-banner-slide__overlay {
    inset: 0;
    position: absolute;
    transition: background-color var(--ck-base) ease-out;
}

.ckss-banner-slide__top {
    padding-inline: 4px;
    position: relative;
    z-index: 1;
}

.ckss-banner-slide__content {
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-inline: 4px;
    position: relative;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.ckss-banner-slide__content h1 {
    font-size: 23px;
}

.ckss-banner-slide__subtitle {
    font-size: 15px;
    font-weight: 600;
    opacity: 0.94;
}

.ckss-banner-slide__description {
    font-size: 13.5px;
    max-width: 320px;
    opacity: 0.86;
}

.ckss-banner-slide__cta {
    align-self: flex-start;
    margin-top: 14px;
}

.ckss-banner-slide--align-center .ckss-banner-slide__content {
    align-items: center;
    text-align: center;
}

.ckss-banner-slide--align-center .ckss-banner-slide__cta {
    align-self: center;
}

.ckss-banner-slide--align-right .ckss-banner-slide__content {
    align-items: flex-end;
    text-align: right;
}

.ckss-banner-slide--align-right .ckss-banner-slide__cta {
    align-self: flex-end;
}

.ckss-banner-slider__dots {
    bottom: 16px;
    display: flex;
    gap: 6px;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 2;
}

.ckss-banner-slider__dot {
    background: rgba(255, 255, 255, 0.42);
    border: 0;
    border-radius: var(--ck-radius-pill);
    height: 6px;
    padding: 0;
    transition: background var(--ck-base), width var(--ck-base);
    width: 6px;
}

.ckss-banner-slider__dot.is-active {
    background: #fff;
    width: 20px;
}

/* ==========================================================================
   Summary strip, content stack
   ========================================================================== */

.ckss-summary-strip {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    margin-top: -26px;
    position: relative;
    z-index: 3;
}

.ckss-summary-card {
    background: var(--ck-surface);
    border-radius: var(--ck-radius-md);
    box-shadow: var(--ck-shadow-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
}

.ckss-summary-card span {
    color: var(--ck-ink-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ckss-summary-card strong {
    font-family: "IBM Plex Mono", monospace;
    font-size: 15px;
}

.ckss-content-stack {
    display: grid;
    gap: var(--ck-content-gap);
    margin-top: 4px;
    padding-bottom: 8px;
}

.ckss-content-stack--lifted {
   
    position: relative;
    z-index: 2;
}

.ckss-category-section {
    display: grid;
    gap: 10px;
}

.ckss-category-section__header {
    align-items: baseline;
    display: flex;
    gap: 8px;
}

.ckss-category-section__header h3 {
    font-size: 15px;
}

.ckss-category-section__header span {
    color: var(--ck-ink-muted);
    font-size: 12px;
}

/* ==========================================================================
   Explore - magazine-style rails
   ========================================================================== */

.ckss-explore-section {
    display: grid;
    gap: 12px;
}

.ckss-explore-section__header strong {
    font-family: var(--ck-font-heading);
    font-size: 17px;
}

.ckss-explore-rail {
    display: flex;
    gap: 12px;
    margin: 0 calc(var(--ck-screen-padding) * -1);
    overflow-x: auto;
    padding: 2px var(--ck-screen-padding) 10px;
    scroll-padding-left: var(--ck-screen-padding);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.ckss-explore-rail::-webkit-scrollbar {
    display: none;
}

.ckss-explore-card {
    background: var(--ck-surface);
    border-radius: var(--ck-radius-lg);
    box-shadow: var(--ck-shadow-card);
    cursor: pointer;
    flex: 0 0 78%;
    max-width: 320px;
    overflow: hidden;
    scroll-snap-align: start;
    text-align: left;
    transition: transform var(--ck-fast) var(--ck-ease);
}

.ckss-explore-card:active {
    transform: scale(0.98);
}

.ckss-explore-card__media {
    aspect-ratio: 4 / 3;
    position: relative;
    width: 100%;
}

/* One consistent photo grade across every piece of demo/service photography
   (Explore cards, service rows, request cards, sheets, gallery) - the source
   images come from different real-world resorts with different lighting, so
   without this the app reads as a stock-photo grab bag rather than one
   destination. A single warm, slightly-contrasty grade unifies them. */
.ckss-explore-card__media img,
.ckss-service-row__media img,
.ckss-request-card__media img,
.ckss-service-card__visual img,
.ckss-service-media img,
.ckss-sheet__media img,
.ckss-lightbox__image {
    filter: saturate(1.08) contrast(1.05) brightness(0.99) sepia(0.06);
}

.ckss-explore-card__media img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.ckss-explore-card__media-fallback {
    align-items: center;
    background: var(--ck-surface-sunk);
    display: flex;
    font-size: 34px;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.ckss-explore-card__scrim {
    background: linear-gradient(0deg, rgba(20, 15, 10, 0.82) 0%, rgba(20, 15, 10, 0.32) 55%, transparent 100%);
    bottom: 0;
    color: #fff;
    display: grid;
    gap: 2px;
    left: 0;
    padding: 28px 14px 12px;
    position: absolute;
    right: 0;
}

.ckss-explore-card__scrim strong {
    font-family: var(--ck-font-heading);
    font-size: 16px;
}

.ckss-explore-card__scrim span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
}

.ckss-explore-card__body {
    display: grid;
    gap: 10px;
    padding: 12px 14px 14px;
}

.ckss-explore-card__body p {
    color: var(--ck-ink-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 13px;
    line-height: 1.45;
    overflow: hidden;
}

.ckss-explore-card__cta {
    align-items: center;
    color: var(--ck-clay-dark);
    display: inline-flex;
    font-family: var(--ck-font-heading);
    font-size: 13px;
    font-weight: 600;
    gap: 4px;
}

.ckss-explore-card__cta svg {
    height: 14px;
    width: 14px;
}

.ckss-promo-banner {
    align-items: center;
    background: linear-gradient(120deg, var(--ck-clay-light) 0%, var(--ck-clay-dark) 100%);
    border-radius: var(--ck-radius-lg);
    color: #fff;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 18px 20px;
}

.ckss-promo-banner strong {
    display: block;
    font-family: var(--ck-font-heading);
    font-size: 15.5px;
}

.ckss-promo-banner span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
}

.ckss-promo-banner .ckss-btn {
    flex-shrink: 0;
}

/* ==========================================================================
   Service cards
   ========================================================================== */

.ckss-service-stack {
    display: grid;
    gap: 10px;
}

.ckss-service-stack--compact {
    gap: 8px;
}

.ckss-service-card {
    align-items: center;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 11px 12px;
    text-align: left;
    transition: border-color var(--ck-fast) var(--ck-ease), transform var(--ck-fast) var(--ck-ease), box-shadow var(--ck-fast) var(--ck-ease);
    width: 100%;
}

.ckss-service-card:hover {
    border-color: var(--ck-clay-light);
    box-shadow: var(--ck-shadow-sm);
}

.ckss-service-card:active {
    transform: scale(0.99);
}

.ckss-service-card__visual,
.ckss-service-media {
    align-items: center;
    border-radius: var(--ck-radius-sm);
    display: flex;
    flex-shrink: 0;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.ckss-service-card__visual .ckss-icon-svg,
.ckss-service-media .ckss-icon-svg {
    height: 19px;
    width: 19px;
}

.ckss-panel--service-detail .ckss-service-media .ckss-icon-svg {
    height: 26px;
    width: 26px;
}

.ckss-service-card__visual--warm,
.ckss-service-media--warm {
    background: var(--ck-danger-soft);
    color: var(--ck-clay);
}

.ckss-service-card__visual--forest,
.ckss-service-media--forest {
    background: var(--ck-success-soft);
    color: var(--ck-canopy);
}

.ckss-service-card__visual--gold,
.ckss-service-media--gold {
    background: var(--ck-warning-soft);
    color: var(--ck-warning);
}

.ckss-service-card__visual--mist,
.ckss-service-media--mist {
    background: var(--ck-info-soft);
    color: var(--ck-info);
}

.ckss-service-card__visual--ember,
.ckss-service-media--ember {
    background: rgba(201, 164, 92, 0.16);
    color: var(--ck-clay-dark);
}

.ckss-service-card__visual--image,
.ckss-service-media--image {
    overflow: hidden;
    padding: 0;
}

.ckss-service-card__visual--image img,
.ckss-service-media--image img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.ckss-service-card__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ckss-service-card__text strong {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ckss-service-card__chevron {
    align-items: center;
    color: var(--ck-ink-muted);
    display: flex;
    flex-shrink: 0;
}

.ckss-service-card__chevron .ckss-icon-svg {
    height: 16px;
    width: 16px;
}

.ckss-service-meta {
    color: var(--ck-ink-muted);
    font-size: 11.5px;
}

.ckss-service-meta h1 {
    color: var(--ck-ink);
}

/* ==========================================================================
   Search / chips
   ========================================================================== */

.ckss-search-row {
    margin-bottom: 2px;
}

.ckss-chip-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

.ckss-chip-row::-webkit-scrollbar {
    display: none;
}

/* Keep enough trailing scroll space for the final category to be centred
   after selection instead of remaining pinned against the right edge. */
.ckss-chip-row::after {
    content: "";
    flex: 0 0 max(24px, calc(50% - 28px));
}

.ckss-chip {
    background: var(--ck-surface);
    border: 1.5px solid var(--ck-border-strong);
    border-radius: var(--ck-radius-pill);
    color: var(--ck-ink-soft);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    scroll-snap-align: center;
    transition: background var(--ck-fast) var(--ck-ease), border-color var(--ck-fast) var(--ck-ease), color var(--ck-fast) var(--ck-ease), transform var(--ck-fast) var(--ck-ease);
    white-space: nowrap;
}

.ckss-chip--active {
    background: var(--ck-clay);
    border-color: var(--ck-clay);
    color: #fff;
}

.ckss-chip:active {
    transform: scale(0.95);
}

.ckss-tab-row {
    background: var(--ck-surface-sunk);
    border-radius: var(--ck-radius-pill);
    display: flex;
    gap: 4px;
    padding: 4px;
}

.ckss-tab-row .ckss-chip {
    border: 0;
    flex: 1;
    text-align: center;
}

.ckss-tab-row .ckss-chip--active {
    box-shadow: var(--ck-shadow-sm);
}

/* ==========================================================================
   Request cards / timeline
   ========================================================================== */

.ckss-request-stack {
    display: grid;
    gap: 10px;
}

.ckss-request-card {
    align-items: center;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 14px;
    text-align: left;
    transition: opacity var(--ck-fast) var(--ck-ease), transform var(--ck-fast) var(--ck-ease);
    width: 100%;
}

.ckss-request-card--done {
    opacity: 1;
}
.ckss-request-card--status-created,.ckss-request-card--status-requested { background:#fffaf3; border-color:#ead7bd; }
.ckss-request-card--status-accepted,.ckss-request-card--status-acknowledged { background:#f7efe3; border-color:#d9bd98; }
.ckss-request-card--status-preparing,.ckss-request-card--status-in_progress,.ckss-request-card--status-on_the_way { background:#fff5e7; border-color:#ead0a7; }
.ckss-request-card--status-driver_assigned,.ckss-request-card--status-en_route,.ckss-request-card--status-arrived { background:#f3ece5; border-color:#cfb9a7; }
.ckss-request-card--status-need_more_time,.ckss-request-card--status-escalated { background:#fff1e8; border-color:#e6c3ad; }
.ckss-request-card--status-completed,.ckss-request-card--status-delivered,.ckss-request-card--status-resolved { background:#f1ede4; border-color:#cbbda6; }
.ckss-request-card--status-cancelled,.ckss-request-card--status-rejected { background:#f5ece7; border-color:#d6b8aa; }

.ckss-request-card:active {
    transform: scale(0.98);
}

.ckss-request-card__media {
    background: var(--ck-surface-sunk);
    border-radius: var(--ck-radius-md);
    flex-shrink: 0;
    height: 56px;
    overflow: hidden;
    width: 56px;
}

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

.ckss-request-card__media-fallback {
    align-items: center;
    color: var(--ck-clay);
    display: flex;
    height: 100%;
    justify-content: center;
}

.ckss-request-card__media-fallback .ckss-icon-svg {
    height: 22px;
    width: 22px;
}

.ckss-request-card__content {
    display: grid;
    flex: 1;
    gap: 3px;
    min-width: 0;
}

.ckss-request-card__title {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.ckss-request-card__title strong {
    font-size: var(--ck-text-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ckss-request-card__status {
    color: var(--ck-ink-soft);
    font-size: var(--ck-text-label);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ckss-request-summary {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 6px;
}

.ckss-timeline {
    display: grid;
    gap: 0;
}

.ckss-timeline__item {
    display: flex;
    gap: 14px;
    padding-bottom: 20px;
    position: relative;
}

.ckss-timeline__item:last-child {
    padding-bottom: 0;
}

.ckss-timeline__item:not(:last-child)::before {
    background: var(--ck-border-strong);
    bottom: 0;
    content: "";
    left: 8px;
    position: absolute;
    top: 22px;
    width: 2px;
}

.ckss-timeline__marker {
    align-items: center;
    background: var(--ck-success);
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    height: 18px;
    justify-content: center;
    margin-top: 1px;
    width: 18px;
    z-index: 1;
}

.ckss-timeline__marker svg {
    height: 11px;
    width: 11px;
}

.ckss-timeline__body {
    display: grid;
    gap: 2px;
}

.ckss-timeline__body strong {
    font-size: 13.5px;
}

.ckss-timeline__body span {
    color: var(--ck-ink-muted);
    font-size: 12px;
}

/* ==========================================================================
   Skeleton loading states
   ========================================================================== */

.ckss-skeleton-grid {
    display: grid;
    gap: 10px;
}

.ckss-skeleton-card {
    animation: ckss-shimmer 1.6s ease-in-out infinite;
    background: linear-gradient(100deg, var(--ck-surface-sunk) 30%, var(--ck-border) 50%, var(--ck-surface-sunk) 70%);
    background-size: 200% 100%;
    border-radius: var(--ck-radius-md);
    height: 64px;
}

.ckss-skeleton-card--wide {
    height: 110px;
}

@keyframes ckss-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* ==========================================================================
   Bottom navigation  -  floating lantern-capsule (signature element)
   ========================================================================== */

.ckss-bottom-nav {
    background: var(--ck-surface);
    border-top: 1px solid var(--ck-border);
    bottom: 0;
    box-shadow: 0 -4px 16px rgba(36, 28, 21, 0.06);
    display: flex;
    left: 0;
    max-width: var(--ck-max-width);
    margin: 0 auto;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    position: fixed;
    right: 0;
    z-index: 30;
}

.ckss-bottom-nav__item {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--ck-ink-muted);
    cursor: pointer;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    min-width: 0;
    padding: 6px 2px;
    transition: color var(--ck-fast) var(--ck-ease), transform var(--ck-fast) var(--ck-ease);
}

.ckss-bottom-nav__item:active {
    transform: scale(0.92);
}

.ckss-bottom-nav__item--active {
    color: var(--ck-clay);
}

.ckss-bottom-nav__icon {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
}

.ckss-bottom-nav__badge {
    background: var(--ck-danger, #d64545);
    border: 2px solid var(--ck-surface, #fff);
    border-radius: 999px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    height: 18px;
    min-width: 18px;
    padding: 0 4px;
    position: absolute;
    right: -10px;
    top: -8px;
}
.ckss-service-row.is-unavailable,.ckss-explore-card.is-unavailable { cursor:not-allowed; filter:grayscale(.75); opacity:.52; }
.ckss-service-row.is-unavailable .ckss-service-row__chevron { display:none; }
.ckss-avatar--image { position:relative; overflow:hidden; }
.ckss-avatar--image img { width:100%; height:100%; object-fit:cover; }
.ckss-avatar--image span { position:absolute; right:2px; bottom:2px; display:flex; align-items:center; justify-content:center; width:22px; height:22px; border:2px solid #fff; border-radius:50%; background:#7a5d45; color:#fff; font-size:8px; font-weight:800; }
.ckss-category-section__header strong,.ckss-explore-section__header strong { display:inline-flex; align-items:center; min-height:28px; margin-top:18px; padding:5px 11px; border-radius:999px; background:#eee4da; color:#5f4938; font-size:12px; letter-spacing:.02em; }
.ckss-category-section:nth-child(4n+2) .ckss-category-section__header strong,.ckss-explore-section:nth-child(4n+2) .ckss-explore-section__header strong { background:#e7efe7; color:#45604a; }
.ckss-category-section:nth-child(4n+3) .ckss-category-section__header strong,.ckss-explore-section:nth-child(4n+3) .ckss-explore-section__header strong { background:#f5e8e3; color:#775044; }
.ckss-category-section:nth-child(4n+4) .ckss-category-section__header strong,.ckss-explore-section:nth-child(4n+4) .ckss-explore-section__header strong { background:#f1edda; color:#6b613a; }
.ckss-service-tag { display:inline-flex; align-items:center; width:max-content; max-width:100%; min-height:20px; padding:3px 8px; border-radius:999px; background:#f2e8dd; color:#755b45; font-size:9px; font-weight:800; letter-spacing:.035em; line-height:1; text-transform:uppercase; }
.ckss-request-card__content > .ckss-service-tag { margin:4px 0 3px; }
.ckss-category-section__header,.ckss-explore-section__header { margin-top:7px; }
.ckss-availability-note { align-items:center; color:#765b43 !important; display:inline-flex; gap:6px; font-weight:700; white-space:normal !important; }
.ckss-availability-note::before { animation:ckss-availability-blink 1.45s ease-in-out infinite; background:#d58b49; border-radius:50%; content:""; flex:0 0 7px; height:7px; width:7px; }
@keyframes ckss-availability-blink { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(213,139,73,.25); } 50% { opacity:.42; box-shadow:0 0 0 4px rgba(213,139,73,.08); } }
@media (prefers-reduced-motion:reduce) { .ckss-availability-note::before { animation:none; } }
.ckss-history-accordion { display:grid; gap:10px; }.ckss-history-toggle { align-items:center; background:var(--ck-nav-active-background,var(--ck-clay)); border:1px solid var(--ck-nav-active-background,var(--ck-clay)); border-radius:14px; color:var(--ck-nav-active-color,#fff); display:flex; gap:9px; justify-content:center; min-height:46px; padding:10px 14px; width:100%; }.ckss-history-toggle strong { align-items:center; background:var(--ck-nav-background,var(--ck-surface)); color:var(--ck-nav-inactive-color,var(--ck-ink)); border-radius:999px; display:flex; font-size:10px; height:22px; justify-content:center; min-width:22px; }.ckss-history-toggle .ckss-icon-svg { height:15px; width:15px; }.ckss-history-accordion__body { animation:ckss-history-open .22s ease; } @keyframes ckss-history-open { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
.ckss-history-toggle.is-open .ckss-icon-svg { transform:rotate(90deg); }
.ckss-rating-card,.ckss-author-card { border:1px solid var(--ck-border); border-radius:20px; box-shadow:var(--ck-shadow-sm); padding:18px; }.ckss-rating-card { background:linear-gradient(145deg,#fffaf3,#fff); }.ckss-rating-card__eyebrow,.ckss-author-card__eyebrow { color:var(--ck-clay); font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }.ckss-rating-card h2,.ckss-author-card h2 { margin:5px 0 6px; font-size:19px; }.ckss-rating-card > p,.ckss-author-card > p { color:var(--ck-ink-muted); font-size:12px; line-height:1.55; }.ckss-rating-stars { display:grid; grid-template-columns:repeat(5,38px); gap:3px; margin:12px 0; width:max-content; max-width:100%; }.ckss-rating-star { align-items:center; appearance:none; background:#f5ede2; border:1px solid #e6d8c5; border-radius:11px; color:#b9aa98; cursor:pointer; display:flex; font-size:21px; height:38px; justify-content:center; line-height:1; margin:0; padding:0; width:38px; }.ckss-rating-star.is-selected { background:#f1d9ad; border-color:#d8aa61; color:#9a641e; }.ckss-rating-card form { display:grid; gap:10px; }.ckss-rating-card textarea { box-sizing:border-box; border:1px solid var(--ck-border); border-radius:12px; padding:10px; resize:vertical; width:100%; }.ckss-rating-thanks { margin-top:12px; padding:12px; border-radius:13px; background:#f4eee5; }.ckss-rating-thanks p { margin:4px 0 0; color:var(--ck-ink-muted); font-size:12px; }.ckss-rating-links,.ckss-author-card__links { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }.ckss-rating-links a,.ckss-author-card__links a { padding:7px 10px; border-radius:999px; background:#fff; color:var(--ck-clay-dark); font-size:11px; font-weight:700; text-decoration:none; }.ckss-author-card { background:linear-gradient(145deg,#2f261f,#4b382a); color:#fff; }.ckss-author-card h2 { color:#fff; }.ckss-author-card > p,.ckss-author-card small { color:rgba(255,255,255,.76); }.ckss-author-card__links a { background:rgba(255,255,255,.12); color:#fff; }.ckss-author-card small { display:block; margin-top:12px; font-size:10px; line-height:1.5; }
.ckss-logout-button { box-sizing:border-box; font-size:13px; font-weight:700; margin:0; }.ckss-logout-button .ckss-icon-svg { flex:0 0 auto; }

/* Keep every profile element inside the phone viewport, including long status labels. */
.ckss-screen,.ckss-content-stack,.ckss-profile-history,.ckss-request-stack,.ckss-request-card { max-width:100%; min-width:0; }
.ckss-screen--profile { overflow-x:hidden; width:100%; }
.ckss-request-card { overflow:hidden; }
.ckss-request-card__title { display:grid; grid-template-columns:minmax(0,1fr) auto; }
.ckss-request-card__title .ckss-status-pill { box-sizing:border-box; flex:0 1 auto; font-size:9px; max-width:108px; overflow:hidden; padding:5px 9px; text-overflow:ellipsis; white-space:nowrap; }
.ckss-profile-history .ckss-panel__header { align-items:flex-start; min-width:0; }
.ckss-profile-history .ckss-panel__header h2 { flex:1 1 auto; min-width:0; white-space:normal; }
.ckss-profile-history .ckss-panel__header > span { flex:0 0 auto; font-size:11px; white-space:nowrap; }
@media (max-width:360px) { .ckss-rating-stars { grid-template-columns:repeat(5,34px); }.ckss-rating-star { height:34px; width:34px; } }

/* Third-party Telegram/chat widgets must not float over the Guest PWA. */
body.ckss-guest-pwa-standalone a[href*="t.me"],body.ckss-guest-pwa-standalone a[href*="telegram.me"],body.ckss-guest-pwa-standalone [aria-label*="telegram" i],body.ckss-guest-pwa-standalone [class*="telegram" i],body.ckss-guest-pwa-standalone [id*="telegram" i],body.ckss-guest-pwa-standalone .joinchat,body.ckss-guest-pwa-standalone .chaty,body.ckss-guest-pwa-standalone .chaty-widget,body.ckss-guest-pwa-standalone .ht-ctc-chat,body.ckss-guest-pwa-standalone .wptelegram-widget,body.ckss-guest-pwa-standalone .tg_float { display:none !important; visibility:hidden !important; }
.ckss-home-staycard__hero--slideshow { position:relative; overflow:hidden; }.ckss-home-staycard__hero--slideshow .ckss-hero-slideshow__track,.ckss-home-staycard__hero--slideshow .ckss-hero-slideshow__slide { position:absolute; inset:0; }.ckss-home-staycard__shade { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(20,20,18,.04),rgba(20,20,18,.55)); }.ckss-home-staycard__brand { position:relative; z-index:2; }.ckss-home-staycard__hero--empty { align-items:flex-end; background:linear-gradient(135deg,#d8cbbb,#a9937d); display:flex; justify-content:space-between; }.ckss-home-staycard__hero--empty > span { color:#fff; font-size:10px; max-width:140px; text-align:right; }

.ckss-bottom-nav__icon .ckss-icon-svg {
    height: 20px;
    width: 20px;
}

.ckss-bottom-nav__item span:last-child {
    font-size: 9.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}


/* ==========================================================================
   Topbar (inner screens)
   ========================================================================== */

.ckss-topbar {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding-top: calc(18px + env(safe-area-inset-top));
}

.ckss-topbar--solid {
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    box-shadow: var(--ck-shadow-sm);
    margin-bottom: 4px;
    padding: 13px 18px;
}

.ckss-title-stack {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
}

.ckss-title-stack span {
    color: var(--ck-ink-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ckss-title-stack strong {
    font-family: var(--ck-font-heading);
    font-size: 17px;
}

.ckss-brand-row {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding-inline: 8px;
}

.ckss-search-row,
.ckss-chip-row,
.ckss-service-stack,
.ckss-request-stack,
.ckss-summary-strip,
.ckss-content-stack > .ckss-panel,
.ckss-content-stack > .ckss-promo-banner,
.ckss-content-stack > .ckss-tab-row {
    width: 100%;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.ckss-form {
    display: grid;
    gap: 12px;
}

.ckss-form--request {
    margin-top: 4px;
}

/* ==========================================================================
   Stay summary / metrics / profile
   ========================================================================== */

.ckss-stay-summary {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 16px;
}

.ckss-stay-summary > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ckss-stay-summary span {
    color: var(--ck-ink-muted);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ckss-stay-summary strong {
    font-family: "IBM Plex Mono", monospace;
    font-size: 13px;
}

.ckss-profile-hero {
    align-items: center;
    background-color: var(--ck-canopy-dark);
    background-position: center;
    background-size: cover;
    border-radius: 0 0 var(--ck-radius-xl) var(--ck-radius-xl);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 calc(-2 * var(--ck-screen-padding));
    padding: calc(30px + env(safe-area-inset-top)) var(--ck-gutter) 30px;
    text-align: center;
}

.ckss-profile-row {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 0;
}

.ckss-avatar {
    align-items: center;
    background: var(--ck-sand-light);
    border-radius: 50%;
    color: var(--ck-clay-dark);
    display: flex;
    font-family: var(--ck-font-heading);
    font-size: 22px;
    font-weight: 600;
    height: 64px;
    justify-content: center;
    width: 64px;
}

.ckss-list-panel {
    display: grid;
}

.ckss-list-row {
    align-items: center;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--ck-border);
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    justify-content: space-between;
    padding: 15px 2px;
    text-align: left;
    width: 100%;
}

.ckss-list-row:last-child {
    border-bottom: 0;
}

.ckss-list-row--static {
    cursor: default;
}

.ckss-list-row strong {
    font-weight: 400;
}

.ckss-progress {
    background: var(--ck-surface-sunk);
    border-radius: var(--ck-radius-pill);
    height: 6px;
    margin-bottom: 8px;
    overflow: hidden;
}

.ckss-progress > span {
    background: var(--ck-clay);
    border-radius: var(--ck-radius-pill);
    display: block;
    height: 100%;
    transition: width var(--ck-slow) var(--ck-ease);
}

.ckss-metadata-line {
    color: var(--ck-ink-muted);
    font-size: 12px;
}

.ckss-metadata-line span + span::before {
    content: "\2022";
    margin: 0 6px;
}

/* ==========================================================================
   Request detail - hero, staff line, timeline
   ========================================================================== */

.ckss-request-hero {
    background-color: var(--ck-clay-dark);
    background-position: center;
    background-size: cover;
    border-radius: var(--ck-radius-lg);
    display: flex;
    align-items: flex-end;
    min-height: 190px;
    padding: var(--ck-card-padding);
    position: relative;
}

.ckss-request-hero--muted {
    filter: grayscale(0.4);
    opacity: 0.85;
}

.ckss-request-hero__icon {
    align-items: center;
    color: var(--ck-sand);
    display: flex;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 28px;
}

.ckss-request-hero__icon svg {
    height: 46px;
    width: 46px;
}

.ckss-request-hero__copy strong {
    color: #fff;
    display: block;
    font-family: var(--ck-font-heading);
    font-size: var(--ck-text-title);
    margin-bottom: 4px;
}

.ckss-request-hero__copy p {
    color: rgba(255,255,255,0.86);
    font-size: 15px;
    font-weight: 600;
}

.ckss-request-hero__badge {
    align-items: center;
    animation: ckss-toast-pop 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
    background: var(--ck-success);
    border-radius: 50%;
    color: #fff;
    display: flex;
    height: 40px;
    justify-content: center;
    position: absolute;
    right: var(--ck-card-padding);
    top: var(--ck-card-padding);
    width: 40px;
}

.ckss-request-hero__badge svg {
    height: 20px;
    width: 20px;
}

.ckss-request-staffline {
    align-items: center;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    display: flex;
    gap: 12px;
    padding: 12px 14px;
}

.ckss-request-staffline__avatar {
    align-items: center;
    background: var(--ck-clay);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.ckss-request-staffline strong {
    display: block;
    font-size: 14px;
}

.ckss-request-staffline span {
    color: var(--ck-ink-muted);
    font-size: 12px;
}

.ckss-timeline__marker--current {
    background: var(--ck-clay);
    box-shadow: 0 0 0 4px var(--ck-clay-light, rgba(156, 75, 63, 0.18));
}

/* ==========================================================================
   Empty states / toasts
   ========================================================================== */

.ckss-empty-state {
    align-items: center;
    color: var(--ck-ink-muted);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 48px 20px;
    text-align: center;
}

.ckss-empty-state .dashicons {
    color: var(--ck-border-strong);
    font-size: 34px;
    height: 34px;
    width: 34px;
}

.ckss-empty-state h3 {
    color: var(--ck-ink);
    font-size: 16px;
}

.ckss-empty-state p {
    font-size: 13px;
    max-width: 30ch;
}

.ckss-toast {
    background: var(--ck-ink);
    border-radius: var(--ck-radius-md);
    bottom: calc(96px + env(safe-area-inset-bottom));
    box-shadow: var(--ck-shadow-lg);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    left: 50%;
    max-width: calc(100% - 40px);
    opacity: 0;
    padding: 13px 18px;
    position: fixed;
    text-align: center;
    transform: translate(-50%, 10px);
    transition: opacity var(--ck-base) var(--ck-ease), transform var(--ck-base) var(--ck-ease);
    z-index: 90;
}

.ckss-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.ckss-toast--danger {
    background: var(--ck-danger);
}

.ckss-toast--info {
    background: var(--ck-info);
}

.ckss-toast--success {
    background: var(--ck-success);
}

.ckss-toast__icon {
    align-items: center;
    animation: ckss-toast-pop 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-flex;
    margin-right: 6px;
    vertical-align: -3px;
}

.ckss-toast__icon svg {
    height: 16px;
    width: 16px;
}

@keyframes ckss-toast-pop {
    from { transform: scale(0.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   Screen-specific helpers
   ========================================================================== */

.ckss-screen--boot,
.ckss-screen--landing,
.ckss-screen--checkin,
.ckss-screen--expired {
    padding: 0;
}

.ckss-screen--boot {
    background: #f4f1eb;
    min-height: 100dvh;
}

.ckss-screen--detail .ckss-panel {
    margin-top: 14px;
}

/* ==========================================================================
   Responsive ceiling (tablet / desktop preview of the guest app)
   ========================================================================== */

@media (min-width: 640px) {
    .ckss-guest-pwa-host {
        border-left: 1px solid var(--ck-border);
        border-right: 1px solid var(--ck-border);
        box-shadow: var(--ck-shadow-lg);
        min-height: 100vh;
    }
}

/* ==========================================================================
   2026 Luxury Redesign Overrides
   ========================================================================== */

.ckss-guest-pwa-host {
    background: var(--ck-paper);
}

.ckss-screen--landing {
    padding-top: 0px;
}

.ckss-home-shell {
    display: grid;
    gap: 18px;
}

.ckss-home-topbar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-top: 6px;
}

.ckss-home-topbar__copy {
    display: grid;
    gap: 2px;
}

.ckss-home-topbar__copy span {
    color: var(--ck-ink-soft);
    font-size: 13px;
}

.ckss-home-topbar__copy strong {
    font-family: var(--ck-font-heading);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.ckss-home-avatar {
    align-items: center;
    background: rgba(26, 25, 22, 0.9);
    border: 0;
    border-radius: var(--ck-radius-pill);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.ckss-home-avatar--image {
    background: var(--ck-surface-sunk);
    border: 2px solid var(--ck-surface);
    box-shadow: var(--ck-shadow-sm);
    overflow: hidden;
    padding: 0;
}

.ckss-home-avatar--image img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.ckss-home-staycard__grid span {
    color: var(--ck-stay-card-text);
    font-size: var(--ck-text-caption);
    opacity: .72;
}

.ckss-home-staycard {
    background: var(--ck-stay-card-bg);
    border-radius: var(--ck-radius-xl);
    color: var(--ck-stay-card-text);
    overflow: hidden;
}

.ckss-home-staycard__hero {
    background-position: center;
    background-size: cover;
    min-height: 150px;
    padding: var(--ck-card-padding);
}

.ckss-home-staycard__body {
    display: grid;
    gap: 18px;
    padding: var(--ck-card-padding);
}

.ckss-home-staycard__stay {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.ckss-home-staycard__stay strong {
    color: var(--ck-stay-card-text);
    font-family: var(--ck-font-heading);
    font-size: 21px;
}

.ckss-home-staycard__stay span {
    color: var(--ck-stay-card-text);
    font-size: 12.5px;
    opacity: .72;
    text-align: right;
}

.ckss-home-staycard__grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, 1fr);
}

.ckss-home-staycard__grid strong {
    color: var(--ck-stay-card-text);
    display: block;
    font-size: var(--ck-text-body);
    margin-top: 4px;
}

.ckss-home-staycard__grid small {
    color: var(--ck-stay-card-text);
    font-size: var(--ck-text-caption);
    opacity: .66;
}

.ckss-home-staycard__help {
    display: flex;
    gap: 8px;
}

.ckss-home-help-pill {
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--ck-radius-pill);
    color: var(--ck-stay-card-text);
    display: inline-flex;
    font-family: var(--ck-font-heading);
    font-size: 12.5px;
    font-weight: 600;
    gap: 6px;
    padding: 8px 14px;
    text-decoration: none;
    transition: transform var(--ck-fast) var(--ck-ease);
}

.ckss-home-help-pill svg {
    height: 15px;
    width: 15px;
}

.ckss-home-help-pill--danger {
    background: rgba(196, 88, 62, 0.28);
    border-color: rgba(196, 88, 62, 0.5);
}

.ckss-home-help-pill:active {
    transform: scale(0.94);
}



.ckss-home-section {
    display: grid;
    gap: 12px;
}

.ckss-home-shortcuts {
    display: grid;
    gap: 12px;
}

/* ==========================================================================
   Service rows - compact Uber-Eats/Swiggy-style row: a small 70x70 image,
   name + one-line description/ETA, chevron, entire row tappable. Replaces
   the earlier large-tile version - that read well for one or two services,
   but a real property has a dozen+ and needs density, not a scroll-heavy
   feed of hero photos. Used for both Home's Quick Access and the Requests
   screen's service list.
   ========================================================================== */

/* A real card (border + radius + shadow), not a bare-bones list row - the
   stack around it (.ckss-service-stack) already puts a 10px gap between
   rows, so without its own radius/border each row read as an unstyled
   floating slab instead of a card. */
.ckss-service-row {
    align-items: center;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    box-shadow: var(--ck-shadow-card);
    cursor: pointer;
    display: grid;
    gap: 12px;
    grid-template-columns: 70px 1fr 20px;
    padding: 10px 12px;
    text-align: left;
    transition: opacity var(--ck-fast) var(--ck-ease), transform var(--ck-fast) var(--ck-ease);
    width: 100%;
}

.ckss-service-row:active {
    opacity: 0.7;
    transform: scale(0.98);
}

.ckss-service-row__media {
    background: var(--ck-surface-sunk);
    border-radius: var(--ck-radius-lg);
    flex-shrink: 0;
    height: 70px;
    overflow: hidden;
    width: 70px;
}

.ckss-service-row__media img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.ckss-service-row__media-fallback {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
}

.ckss-service-row__media-fallback .ckss-icon-svg {
    height: 26px;
    width: 26px;
}

.ckss-service-row__text {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.ckss-service-row__text strong {
    font-size: var(--ck-text-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ckss-service-row__text .ckss-metadata-line {
    color: var(--ck-ink-soft);
    font-size: var(--ck-text-label);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ckss-price-tag {
    background: var(--ck-sand-light);
    border-radius: var(--ck-radius-pill);
    color: var(--ck-clay-light);
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    justify-self: start;
    letter-spacing: 0.02em;
    padding: 3px 10px;
    width: fit-content;
}

.ckss-price-tag--free {
    background: var(--ck-success-soft);
    color: var(--ck-success);
}

.ckss-service-row__chevron {
    color: var(--ck-ink-muted);
    display: flex;
}

.ckss-service-row__chevron .ckss-icon-svg {
    height: 16px;
    width: 16px;
}

/* ==========================================================================
   Quick-request bottom sheet - the "tap, optional note, submit, done" flow.
   No screen navigation happens for this; it overlays whatever the guest was
   already looking at and closes back to it.
   ========================================================================== */

.ckss-sheet-backdrop {
    align-items: flex-end;
    background: rgba(20, 15, 11, 0.5);
    bottom: 0;
    display: flex;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 60;
}

.ckss-sheet {
    animation: ckss-sheet-up 380ms cubic-bezier(0.34, 1.42, 0.64, 1);
    background: var(--ck-surface);
    border-radius: var(--ck-radius-xl) var(--ck-radius-xl) 0 0;
    margin: 0 auto;
    max-width: var(--ck-max-width);
    max-height: 86dvh;
    overflow-y: auto;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    position: relative;
    width: 100%;
}

.ckss-sheet__close {
    align-items: center;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(245, 241, 235, 0.94);
    border: 1px solid rgba(62, 49, 39, 0.10);
    border-radius: 999px;
    color: var(--ck-ink);
    display: flex;
    height: 34px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 14px;
    top: 14px;
    width: 34px;
    z-index: 3;
}

.ckss-sheet__close svg { height: 16px; width: 16px; }
.ckss-sheet__close path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.ckss-sheet__close:active { opacity: .68; transform: scale(.94); }

@keyframes ckss-sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.ckss-sheet__handle {
    background: var(--ck-border-strong);
    border-radius: var(--ck-radius-pill);
    height: 4px;
    margin: 10px auto 6px;
    width: 36px;
}

.ckss-sheet__media {
    aspect-ratio: 16 / 9;
    background: var(--ck-surface-sunk);
    display: grid;
    overflow: hidden;
    place-items: center;
    width: 100%;
}

.ckss-sheet__media img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.ckss-sheet__body {
    display: grid;
    gap: 14px;
    padding: 18px 20px 10px;
}

.ckss-sheet__body h2 {
    font-size: var(--ck-text-title);
}

.ckss-topbar--minimal {
    background: transparent;
    min-height: 46px;
    padding-bottom: 4px;
    padding-top: 6px;
}

/* The search input itself (.ckss-input--search) already has its own
   background/border/radius - this wrapper used to add a second translucent
   bordered box around it, which read as a container-inside-a-container.
   It's pure layout now; the input is the only visible surface. */

.ckss-service-card,
.ckss-request-card,
.ckss-list-row,
.ckss-panel,
.ckss-promo-banner,
.ckss-tab-row {
    border-color: rgba(230, 224, 214, 0.85);
    border-radius: var(--ck-radius-lg);
    box-shadow: var(--ck-shadow-card);
}

.ckss-service-card {
    align-items: center;
    background: rgba(255,255,255,0.92);
    grid-template-columns: 58px 1fr 22px;
    min-height: 92px;
    padding: 16px;
}

.ckss-service-card__visual {
    border-radius: var(--ck-radius-lg);
    height: 58px;
    width: 58px;
}

.ckss-panel--list,
.ckss-panel--reading,
.ckss-form--luxury {
    background: rgba(255,255,255,0.92);
}

.ckss-request-stack--timeline {
    gap: 12px;
}

/* ==========================================================================
   Profile - inset grouped lists (Apple Wallet / Airbnb account style)
   ========================================================================== */

.ckss-inset-group {
    display: grid;
    gap: 8px;
}

.ckss-inset-group__header {
    color: var(--ck-ink-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0 4px;
    text-transform: uppercase;
}

.ckss-inset-group__body {
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    box-shadow: var(--ck-shadow-card);
    overflow: hidden;
}

.ckss-inset-row {
    align-items: center;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--ck-border);
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 12px;
    padding: 13px 14px;
    text-align: left;
    text-decoration: none;
    transition: opacity var(--ck-fast) var(--ck-ease);
    width: 100%;
}

.ckss-guest-pwa-host button.ckss-inset-row,.ckss-guest-pwa-host a.ckss-inset-row,.ckss-guest-pwa-host div.ckss-inset-row {
    appearance:none;
    box-sizing:border-box;
    font-family:var(--ck-font-body) !important;
    font-size:inherit !important;
    line-height:normal !important;
    margin:0 !important;
    min-height:62px !important;
    padding:13px 14px !important;
}

.ckss-inset-group__body .ckss-inset-row:last-child {
    border-bottom: 0;
}

.ckss-stay-countdown {
    background: var(--ck-paper-warm);
    background: linear-gradient(135deg, var(--ck-paper-warm), color-mix(in srgb, var(--ck-warning-soft) 72%, #fff 28%));
    display: grid;
    gap: 14px;
    padding: 15px 14px 16px;
}

.ckss-stay-countdown__heading {
    align-items: center;
    display: flex;
    gap: 12px;
}

.ckss-stay-countdown__heading > span:last-child {
    display: grid;
    gap: 2px;
}

.ckss-stay-countdown__heading strong {
    color: var(--ck-ink);
    font-size: 14.5px;
}

.ckss-stay-countdown__heading small {
    color: var(--ck-ink-soft);
    font-size: 12.5px;
}

.ckss-stay-countdown__values {
    align-items: start;
    display: grid;
    gap: 5px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
}

.ckss-stay-countdown__values > i {
    color: var(--ck-warning);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25;
}

.ckss-stay-countdown__unit {
    align-items: center;
    display: grid;
    gap: 3px;
    justify-items: center;
    min-width: 0;
}

.ckss-stay-countdown__unit strong {
    color: var(--ck-clay);
    font-size: clamp(18px, 5.5vw, 23px);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.ckss-stay-countdown__unit small {
    color: var(--ck-ink-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ckss-payment-note {
    border-bottom: 1px solid var(--ck-border);
    font-size: 13px;
    margin: 0;
    padding: 12px 14px;
}

.ckss-payment-qr {
    border-bottom: 1px solid var(--ck-border);
    display: flex;
    justify-content: center;
    padding: 18px;
}

.ckss-payment-qr img {
    border-radius: var(--ck-radius-md);
    height: 180px;
    width: 180px;
    object-fit: contain;
}

.ckss-inset-row:active {
    opacity: 0.65;
}

.ckss-inset-row--disabled {
    cursor: default;
    opacity: 0.5;
}

.ckss-inset-row--disabled:active {
    opacity: 0.5;
}

.ckss-inset-row--danger:not(.ckss-inset-row--disabled) .ckss-inset-row__text strong {
    color: var(--ck-danger);
}

.ckss-inset-row--quiet {
    justify-content: center;
    margin : 0 0 0 0; 
}

.ckss-inset-row--quiet .ckss-inset-row__text {
    flex: 0 0 auto;
}

.ckss-inset-row--quiet .ckss-inset-row__text strong {
    color: var(--ck-ink-muted);
    font-weight: 600;
}

.ckss-inset-row__icon {
    align-items: center;
    border-radius: var(--ck-radius-sm);
    display: flex;
    flex-shrink: 0;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.ckss-inset-row__icon svg {
    height: 18px;
    width: 18px;
}

.ckss-inset-row__icon--clay { background: var(--ck-paper-warm); color: var(--ck-clay); }
.ckss-inset-row__icon--info { background: var(--ck-info-soft); color: var(--ck-info); }
.ckss-inset-row__icon--gold { background: var(--ck-warning-soft); color: var(--ck-warning); }
.ckss-inset-row__icon--success { background: var(--ck-success-soft); color: var(--ck-success); }
.ckss-inset-row__icon--danger { background: var(--ck-danger-soft); color: var(--ck-danger); }
.ckss-inset-row__icon--muted { background: var(--ck-surface-sunk); color: var(--ck-ink-muted); }

.ckss-inset-row__text {
    display: grid;
    flex: 1 1 auto;
    gap: 1px;
    min-width: 0;
}

.ckss-inset-row__text strong {
    font-size: 14.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ckss-inset-row__text span {
    color: var(--ck-ink-soft);
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ckss-inset-row__chevron {
    color: var(--ck-ink-soft);
    flex-shrink: 0;
}

.ckss-inset-row__chevron svg {
    height: 16px;
    width: 16px;
}

.ckss-profile-hero--luxury {
    background-image:
        radial-gradient(circle at 18% -10%, rgba(199, 168, 124, 0.28), transparent 46%),
        linear-gradient(165deg, var(--ck-hero-start) 0%, var(--ck-hero-start) 52%, var(--ck-hero-end) 100%);
}


.ckss-bottom-nav {
    /* A floating pill with zero side inset (screen_padding set to 0 for an
       edge-to-edge layout) reads as a visual glitch - rounded corners with
       nothing beside them to "float" against. The nav keeps at least 10px on
       each side regardless of screen_padding, using CSS max() so a larger
       configured padding still wins when set. */
    backdrop-filter: blur(var(--ck-nav-blur));
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(230, 224, 214, 0.88);
    
    bottom: calc(14px + env(safe-area-inset-bottom));
    box-shadow: var(--ck-shadow-float);
    left: max(10px, var(--ck-screen-padding));
    min-height: var(--ck-nav-height);
    padding: 8px;
    position: fixed;
    right: max(10px, var(--ck-screen-padding));
    width: auto;
}

.ckss-bottom-nav__item {
    border-radius: var(--ck-radius-pill);
    min-height: 52px;
}

.ckss-bottom-nav__item--active {
    background: rgba(20, 20, 18, 0.92);
    color: #fff;
}

.ckss-bottom-nav__item--active .ckss-bottom-nav__icon {
    background: rgba(255,255,255,0.14);
}

.ckss-input,
.ckss-textarea,
.ckss-form select {
    border-radius: var(--ck-radius-input);
}

@media (max-width: 520px) {
    .ckss-home-staycard__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ========================================================================== 
   Production consistency fixes
   These selectors deliberately include the app host so WordPress global
   styles cannot resize app controls after this stylesheet has loaded.
   ========================================================================== */

.ckss-guest-pwa-host .ckss-bottom-nav {
    align-items: center;
    background: var(--ck-nav-background);
    background: color-mix(in srgb, var(--ck-nav-background) 88%, transparent);
    border-radius: var(--ck-nav-radius);
    bottom: calc(var(--ck-nav-bottom-margin) + env(safe-area-inset-bottom));
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(var(--ck-nav-columns, 4), minmax(0, 1fr));
    left: 50%;
    margin: 0;
    max-width: calc(var(--ck-max-width) - (var(--ck-nav-side-margin) + var(--ck-nav-side-margin)));
    height: var(--ck-nav-height);
    min-height: var(--ck-nav-height);
    padding: var(--ck-nav-padding);
    right: auto;
    transform: translateX(-50%);
    width: calc(100% - (var(--ck-nav-side-margin) + var(--ck-nav-side-margin)));
    
}

.ckss-guest-pwa-host .ckss-bottom-nav__item {
    align-self: stretch;
    border-radius: min(14px, var(--ck-nav-radius));
    color: var(--ck-nav-inactive-color);
    font-family: var(--ck-nav-font);
    gap: var(--ck-nav-item-gap);
    height: 100%;
    justify-content: center;
    min-height: 0;
    padding: 0 4px;
}

.ckss-guest-pwa-host .ckss-bottom-nav__item span:last-child {
    display: block;
    font-size: var(--ck-nav-label-size);
    font-weight: var(--ck-nav-font-weight);
    line-height: 1.15;
    letter-spacing: 0;
}

.ckss-guest-pwa-host .ckss-bottom-nav__icon .ckss-icon-svg {
    height: var(--ck-nav-icon-size);
    width: var(--ck-nav-icon-size);
}

.ckss-guest-pwa-host .ckss-bottom-nav__item .ckss-bottom-nav__badge {
    align-items:center;
    background:#e53935 !important;
    border:2px solid var(--ck-nav-background, #fff);
    border-radius:999px;
    box-shadow:0 2px 7px rgba(177,25,25,.32);
    color:#fff !important;
    display:flex !important;
    font-family:Arial,sans-serif;
    font-size:10px !important;
    font-weight:800 !important;
    height:19px;
    justify-content:center;
    line-height:1 !important;
    min-width:19px;
    overflow:visible !important;
    padding:0 4px;
    position:absolute;
    right:-12px;
    top:-9px;
    white-space:nowrap;
    width:auto;
    z-index:4;
}

.ckss-media-fallback__icon {
    align-items: center;
    color: var(--ck-ink-muted);
    display: flex;
    inset: 0;
    justify-content: center;
    position: absolute;
}

.ckss-media-fallback__icon .ckss-icon-svg {
    height: 24px;
    width: 24px;
}

.ckss-launch-mark {
    align-items: center;
    background: transparent;
    border-radius: 50%;
    display: flex;
    height: clamp(124px, 34vw, 156px);
    justify-content: center;
    padding: 0;
    width: clamp(124px, 34vw, 156px);
}

.ckss-launch-mark img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.ckss-information-detail {
    display: grid;
    gap: 18px;
    padding: clamp(18px, 5vw, 24px);
}

.ckss-information-detail__section {
    display: grid;
    gap: 10px;
}

.ckss-information-detail__overview {
    border-bottom: 1px solid var(--ck-border);
    padding-bottom: 18px;
}

.ckss-information-detail__eyebrow {
    color: var(--ck-clay-light);
    font-size: var(--ck-text-caption);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ckss-information-detail h2 {
    color: var(--ck-ink);
    font-size: var(--ck-text-subtitle);
    line-height: 1.25;
}

.ckss-information-detail p,
.ckss-information-detail li {
    color: var(--ck-ink-muted);
    font-size: var(--ck-text-body);
    line-height: 1.58;
}

.ckss-information-detail ul {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ckss-information-detail li {
    padding-left: 24px;
    position: relative;
}

.ckss-information-detail li::before {
    background: var(--ck-sand);
    border-radius: 50%;
    content: "";
    height: 8px;
    left: 2px;
    position: absolute;
    top: .62em;
    width: 8px;
}

.ckss-information-detail__note {
    background: var(--ck-paper-warm);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    display: grid;
    gap: 5px;
    padding: 15px 16px;
}

.ckss-information-detail__note strong {
    color: var(--ck-ink);
    font-size: var(--ck-text-label);
}

.ckss-guest-pwa-host .ckss-bottom-nav__item--active .ckss-bottom-nav__icon {
    background: transparent;
}

.ckss-guest-pwa-host .ckss-bottom-nav__item--active {
    background: var(--ck-nav-active-background);
    color: var(--ck-nav-active-color);
}

.ckss-guest-pwa-host .ckss-home-staycard__body {
    gap: 14px;
}

.ckss-guest-pwa-host .ckss-home-staycard__help {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.ckss-guest-pwa-host .ckss-home-help-pill {
    border-radius: 12px;
    font-size: 11px;
    gap: 5px;
    justify-content: center;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 0 8px !important;
    text-align: center;
    white-space: nowrap;
    width: 100%;
}

/* Install guidance is intentionally inside the PWA host so no theme or
   cache plugin can restyle it. Installed/standalone mode removes it. */
.ckss-install-banner {
    align-items: center;
    background: #fffaf4;
    border: 1px solid #e2cfb8;
    border-radius: 14px;
    box-shadow: var(--ck-shadow-md);
    display: grid;
    gap: 10px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    left: 50%;
    max-width: calc(var(--ck-max-width) - 24px);
    padding: 10px 32px 10px 12px;
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    transform: translateX(-50%);
    width: calc(100% - 24px);
    z-index: 1200;
}

.ckss-install-banner > span {
    align-items: center;
    background: #efe2d3;
    border-radius: 10px;
    color: var(--ck-clay);
    display: flex;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.ckss-install-banner strong,
.ckss-install-banner small { display: block; }
.ckss-install-banner strong { color: var(--ck-ink); font-size: 12px; }
.ckss-install-banner small { color: var(--ck-ink-muted); font-size: 10px; margin-top: 2px; }
.ckss-install-banner__action {
    background: var(--ck-clay);
    border: 0;
    border-radius: 999px;
    color: #fff;
    font: 700 11px/1 var(--ck-font-body);
    min-height: 34px;
    padding: 0 14px;
}

.ckss-install-banner .ckss-install-banner__dismiss {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--ck-ink-muted);
    display: flex;
    height: 26px;
    justify-content: center;
    min-height: 0;
    padding: 0;
    position: absolute;
    right: 3px;
    top: 3px;
    width: 26px;
}

.ckss-install-banner__dismiss svg { height: 14px; width: 14px; }
.ckss-install-banner__dismiss path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }

.ckss-install-guide .ckss-sheet__body { padding-top: 18px; }
.ckss-install-guide__icon {
    align-items: center;
    background: var(--ck-surface-sunk);
    border-radius: 14px;
    color: var(--ck-clay);
    display: flex;
    height: 48px;
    justify-content: center;
    width: 48px;
}
.ckss-install-guide__icon svg { height: 24px; width: 24px; }
.ckss-install-guide ol { color: var(--ck-ink); margin: 16px 0; padding-left: 23px; }
.ckss-install-guide li { line-height: 1.5; margin: 9px 0; padding-left: 4px; }

.ckss-bank-details {
    background: var(--ck-surface-sunk);
    border-radius: 13px;
    margin: 8px 12px 12px;
    overflow: hidden;
}

.ckss-bank-details__title {
    align-items: center;
    display: flex;
    gap: 10px;
    padding: 13px 14px 10px;
}

.ckss-bank-details__title > svg { color: var(--ck-clay); height: 22px; width: 22px; }
.ckss-bank-details__title span,
.ckss-bank-details__title strong,
.ckss-bank-details__title small { display: block; }
.ckss-bank-details__title strong { color: var(--ck-ink); font-size: 13px; }
.ckss-bank-details__title small { color: var(--ck-ink-muted); font-size: 10.5px; margin-top: 2px; }

.ckss-bank-table { border-top: 1px solid var(--ck-border); }
.ckss-bank-table__row {
    align-items: center;
    border-bottom: 1px solid var(--ck-border);
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) 38px;
    min-height: 58px;
    padding: 9px 10px 9px 14px;
}
.ckss-bank-table__row:last-child { border-bottom: 0; }
.ckss-bank-table__row span,
.ckss-bank-table__row small,
.ckss-bank-table__row strong { display: block; min-width: 0; }
.ckss-bank-table__row small { color: var(--ck-ink-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.ckss-bank-table__row strong { color: var(--ck-ink); font-size: 13px; margin-top: 3px; overflow-wrap: anywhere; }
.ckss-bank-table__row button {
    align-items: center;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: 10px;
    color: var(--ck-clay);
    display: flex;
    height: 36px;
    justify-content: center;
    padding: 0;
    width: 36px;
}
.ckss-bank-table__row button svg { height: 17px; width: 17px; }
.ckss-wifi-sheet__icon {
    align-items: center;
    background: var(--ck-paper-warm);
    border-radius: 14px;
    color: var(--ck-clay);
    display: flex;
    height: 48px;
    justify-content: center;
    width: 48px;
}
.ckss-wifi-sheet .ckss-bank-table { background: var(--ck-surface-sunk); border-radius: 13px; margin: 14px 0; overflow: hidden; }

.ckss-guest-pwa-host .ckss-screen--requests .ckss-content-stack,
.ckss-guest-pwa-host .ckss-screen--explore .ckss-content-stack,
.ckss-guest-pwa-host .ckss-screen--profile .ckss-content-stack {
    gap: 14px;
}

.ckss-guest-pwa-host .ckss-topbar--minimal {
    border: 0;
    border-bottom: 1px solid var(--ck-border);
    border-radius: 0;
    box-shadow: none;
    margin: 0 calc(-1 * var(--ck-screen-padding));
    min-height: 62px;
    padding: calc(12px + env(safe-area-inset-top)) var(--ck-screen-padding) 10px;
}

.ckss-guest-pwa-host .ckss-title-stack span {
    font-size: 10px;
}

.ckss-guest-pwa-host .ckss-title-stack strong {
    font-size: 19px;
}

.ckss-guest-pwa-host .ckss-search-row--floating {
    margin: 0;
}

.ckss-guest-pwa-host input.ckss-input--search {
    appearance: none !important;
    background-color: var(--ck-surface) !important;
    background-position: 15px center !important;
    border: 1px solid var(--ck-border-strong) !important;
    border-radius: var(--ck-radius-search) !important;
    box-shadow: var(--ck-shadow-sm);
    font-size: 14px !important;
    height: var(--ck-search-height) !important;
    line-height: 1.2 !important;
    min-height: var(--ck-search-height) !important;
    padding: 0 16px 0 46px !important;
    width: 100% !important;
}

.ckss-guest-pwa-host .ckss-chip-row {
    gap: 8px;
    margin: 0;
    padding: 0 0 4px;
}

.ckss-guest-pwa-host .ckss-chip {
    border-radius: 12px;
    font-size: 11px;
    height: 44px;
    line-height: 1 !important;
    min-height: 44px !important;
    padding: 0 15px !important;
    margin: 0 !important;
}

.ckss-guest-pwa-host .ckss-tab-row {
    align-items: center;
    border-radius: 12px;
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: 58px;
    padding: 6px;
}

.ckss-guest-pwa-host .ckss-tab-row .ckss-chip {
    border-radius: 9px;
    height: 46px;
    min-height: 46px !important;
    padding: 0 7px !important;
    width: 100%;
}

.ckss-guest-pwa-host .ckss-panel__header h2 {
    font-size: 18px;
}

.ckss-guest-pwa-host .ckss-profile-hero--luxury {
    align-items: stretch;
    background-image: linear-gradient(145deg, var(--ck-hero-start), var(--ck-hero-end));
    border-radius: 0 !important;
    margin: 0 calc(-1 * var(--ck-screen-padding));
    min-height: 168px;
    padding: calc(24px + env(safe-area-inset-top)) var(--ck-screen-padding) 28px;
    text-align: left;
}

.ckss-guest-pwa-host .ckss-profile-row h1 { color: #fff; }
.ckss-guest-pwa-host .ckss-profile-row p { color: rgba(255,255,255,.82); }

.ckss-guest-pwa-host .ckss-profile-history {
    display: grid;
    gap: 10px;
}

.ckss-guest-pwa-host .ckss-media-fallback {
    background: linear-gradient(135deg, var(--ck-surface-sunk), var(--ck-paper-warm));
    position: relative;
}

.ckss-guest-pwa-host .ckss-media-fallback::after {
    color: var(--ck-ink-muted);
    content: "";
    font-size: 10px;
    inset: 0;
    display: grid;
    place-items: center;
    position: absolute;
}

.ckss-guest-pwa-host .ckss-profile-hero__eyebrow {
    color: rgba(255, 255, 255, 0.68);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ckss-guest-pwa-host .ckss-profile-row {
    justify-content: flex-start;
    padding: 4px 0 0;
}

@media (max-width: 360px) {
    .ckss-guest-pwa-host .ckss-home-help-pill {
        font-size: 10px;
    }
}

/* Compact guided education for resort owners and guests. */
.ckss-education-help {
    align-items: center;
    animation: ckss-help-breathe 3.6s ease-in-out infinite;
    background: linear-gradient(145deg, var(--ck-clay-light), var(--ck-clay-dark));
    border: 1px solid rgba(255,255,255,.52);
    border-radius: 999px;
    bottom: calc(var(--ck-nav-height) + var(--ck-nav-bottom-margin) + env(safe-area-inset-bottom) + 18px);
    box-shadow: 0 8px 22px rgba(71, 42, 28, .2), 0 0 0 0 rgba(190, 122, 78, .2);
    color: #fffaf4;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: 6px;
    min-height: 38px;
    padding: 5px 12px 5px 6px;
    position: fixed;
    right: max(18px, calc((100vw - var(--ck-max-width)) / 2 + 18px));
    z-index: 48;
}

.ckss-education-help > span {
    align-items: center;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    display: inline-flex;
    font-size: 14px;
    font-weight: 850;
    height: 27px;
    justify-content: center;
    width: 27px;
}

.ckss-education-help > span.has-image {
    background: rgba(255,255,255,.92);
    overflow: hidden;
}

.ckss-education-help > span.has-image img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.ckss-education-help strong {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .035em;
}

@keyframes ckss-help-breathe {
    0%, 68%, 100% { box-shadow: 0 8px 22px rgba(71,42,28,.2), 0 0 0 0 rgba(190,122,78,.18); transform: translateY(0); }
    78% { box-shadow: 0 10px 24px rgba(71,42,28,.24), 0 0 0 7px rgba(190,122,78,0); transform: translateY(-2px); }
}

.ckss-education-layer {
    align-items: flex-end;
    background: linear-gradient(180deg, rgba(38,27,20,.08), rgba(38,27,20,.32));
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    overflow: hidden;
    padding: 18px 16px calc(var(--ck-nav-height) + var(--ck-nav-bottom-margin) + env(safe-area-inset-bottom) + 16px);
    position: fixed;
    right: 0;
    top: 0;
    z-index: 210;
}

.ckss-education-bubble {
    --ck-education-accent: var(--ck-clay);
    --ck-education-tail: var(--ck-surface-sunk);
    background: linear-gradient(145deg, var(--ck-paper-warm), var(--ck-surface-sunk));
    border: 1px solid var(--ck-border-strong);
    border-radius: 24px 24px 9px 24px;
    box-shadow: 0 20px 55px rgba(51,34,24,.25);
    color: var(--ck-ink);
    height: auto;
    max-height: none;
    max-width: 374px;
    overflow: visible;
    padding: 18px;
    position: relative;
    width: min(100%, 374px);
    z-index: 2;
}

.ckss-education-bubble--theme {
    --ck-education-accent: var(--ck-clay);
    --ck-education-tail: var(--ck-surface-sunk);
    background: linear-gradient(145deg, var(--ck-paper-warm), var(--ck-surface-sunk));
}

.ckss-education-bubble::after {
    border-left: 14px solid transparent;
    border-top: 16px solid var(--ck-education-tail);
    bottom: -13px;
    content: "";
    position: absolute;
    right: 22px;
}

.ckss-education-close {
    align-items: center;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: 50%;
    color: #4f3a30;
    cursor: pointer;
    display: flex;
    height: 30px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 14px;
    top: 14px;
    width: 30px;
}

.ckss-education-close svg { height: 14px; width: 14px; }
.ckss-education-bubble__top { align-items:center; display:flex; gap:8px; padding-right:38px; }
.ckss-education-number {
    align-items:center;
    background:var(--ck-education-accent);
    border-radius:50%;
    color:#fff;
    display:inline-flex;
    font-size:12px;
    font-weight:850;
    height:30px;
    justify-content:center;
    width:30px;
}
.ckss-education-count { color:var(--ck-education-accent); font-size:11px; font-weight:850; letter-spacing:.06em; }
.ckss-education-eyebrow { color:var(--ck-education-accent); display:block; font-size:10px; font-weight:850; letter-spacing:.09em; margin-top:12px; text-transform:uppercase; }
.ckss-education-bubble h2 { color:var(--ck-ink); font-size:20px; line-height:1.18; margin:5px 0 7px; }
.ckss-education-bubble > p { color:var(--ck-ink-soft); font-size:12px; line-height:1.55; margin:0; }

.ckss-education-brand { align-items:center; display:flex; gap:9px; margin:13px 0 4px; }
.ckss-education-brand__mark { color:var(--ck-education-accent); display:flex; width:38px; }
.ckss-education-brand__mark svg { display:block; width:100%; }
.ckss-education-brand > span:last-child { display:flex; flex-direction:column; min-width:0; }
.ckss-education-brand strong { color:var(--ck-ink); font-size:14px; line-height:1.1; }
.ckss-education-brand small { color:var(--ck-ink-muted); font-size:8px; line-height:1.35; margin-top:2px; }

.ckss-education-enquiry {
    align-items:center;
    background:var(--ck-education-accent);
    border-radius:10px;
    color:#fff !important;
    display:flex;
    font-size:11px;
    font-weight:800;
    justify-content:space-between;
    margin-top:12px;
    padding:10px 12px;
    text-decoration:none;
}
.ckss-education-enquiry svg { height:14px; width:14px; }

.ckss-education-dots { display:flex; gap:5px; justify-content:center; margin:14px 0 10px; }
.ckss-education-dots span { background:rgba(62,43,32,.18); border-radius:99px; height:4px; transition:width .2s ease,background .2s ease; width:8px; }
.ckss-education-dots span.is-active { background:var(--ck-education-accent); width:22px; }
.ckss-education-actions { display:grid; gap:8px; grid-template-columns:1fr 1fr; }
.ckss-education-actions button { background:var(--ck-surface); border:1px solid var(--ck-border); border-radius:10px; color:var(--ck-ink); cursor:pointer; font:inherit; font-size:11px; font-weight:800; min-height:38px; }
.ckss-education-actions button.is-primary { background:var(--ck-education-accent); border-color:transparent; color:#fff; }
.ckss-education-actions button:disabled { cursor:default; opacity:.42; }
.ckss-education-powered { color:#765f52; display:block; font-size:8px; line-height:1.45; margin:10px auto 0; max-width:280px; text-align:center; }
.ckss-education-powered a { color:inherit; font-weight:850; }

@media (max-width: 380px) {
    .ckss-education-layer { padding-inline:11px; }
    .ckss-education-bubble { border-radius:20px 20px 8px 20px; padding:16px; }
    .ckss-education-bubble h2 { font-size:18px; }
}

@media (max-height: 620px) {
    .ckss-education-layer { padding-bottom: calc(var(--ck-nav-height) + env(safe-area-inset-bottom) + 8px); }
    .ckss-education-bubble { padding: 13px 15px; }
    .ckss-education-bubble h2 { font-size:17px; margin-block:3px 5px; }
    .ckss-education-bubble > p { font-size:11px; line-height:1.4; }
    .ckss-education-brand { margin-top:8px; }
    .ckss-education-eyebrow { margin-top:8px; }
    .ckss-education-dots { margin:9px 0 7px; }
    .ckss-education-actions button { min-height:34px; }
    .ckss-education-powered { margin-top:6px; }
}

@media (prefers-reduced-motion: reduce) {
    .ckss-education-help { animation:none; }
    .ckss-education-dots span { transition:none; }
}

/* ==========================================================================
   Media Studio ratio fidelity

   These boxes intentionally match the pixel ratios requested in Media Studio.
   With a correctly sized upload, cover/contain no longer removes any artwork.
   ========================================================================== */

.ckss-home-staycard__hero,
.ckss-home-hero--slideshow,
.ckss-home-hero--slider,
.ckss-request-hero {
    aspect-ratio: 16 / 9;
    min-height: 0;
}

.ckss-home-staycard__hero {
    width: 100%;
}

.ckss-home-hero--slideshow,
.ckss-home-hero--slider {
    height: auto;
    width: 100%;
}

.ckss-banner-slide {
    height: 100%;
    min-height: 0;
}

.ckss-hero-slideshow__slide,
.ckss-banner-slide,
.ckss-request-hero,
.ckss-profile-hero {
    background-repeat: no-repeat;
}

.ckss-guest-pwa-host .ckss-profile-hero--luxury {
    aspect-ratio: 16 / 7;
    min-height: 0;
    overflow: hidden;
    padding: calc(12px + env(safe-area-inset-top)) var(--ck-screen-padding) 14px;
    width: calc(100% + (2 * var(--ck-screen-padding)));
}

.ckss-sheet--request.has-media {
    padding-top: 0;
}

.ckss-sheet--request.has-media .ckss-sheet__media {
    border-radius: var(--ck-radius-xl) var(--ck-radius-xl) 0 0;
    margin: 0;
}

.ckss-sheet--request.has-media .ckss-sheet__close {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 18px rgba(36, 27, 20, 0.18);
}

/* Home slideshow branding and direct navigation. */
.ckss-home-staycard__brand {
    left: 16px;
    position: absolute;
    top: 14px;
    z-index: 3;
}

.ckss-home-staycard__brand .ckss-brand-mark--logo {
    aspect-ratio: 1 / 1;
    height: clamp(78px, 23vw, 104px);
    max-width: 104px;
    width: clamp(78px, 23vw, 104px);
}

.ckss-slideshow-controls {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    left: 12px;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
}

.ckss-slideshow-controls button {
    align-items: center;
    -webkit-appearance: none;
    appearance: none;
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    backdrop-filter: blur(14px) saturate(135%);
    background: linear-gradient(145deg, rgba(74, 57, 44, 0.28), rgba(38, 29, 23, 0.16));
    border: 1px solid rgba(255, 250, 242, 0.38);
    border-radius: 50%;
    box-shadow:
        0 7px 24px rgba(28, 20, 15, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    color: #fffdf9;
    display: flex;
    height: 36px;
    justify-content: center;
    margin: 0;
    padding: 0;
    text-shadow: 0 1px 4px rgba(31, 22, 16, 0.48);
    transition: background var(--ck-fast) ease, opacity var(--ck-fast) ease, transform var(--ck-fast) ease;
    width: 36px;
}

.ckss-slideshow-controls button:hover {
    background: linear-gradient(145deg, rgba(91, 68, 51, 0.36), rgba(43, 31, 24, 0.22));
}

.ckss-slideshow-controls button:active {
    opacity: .76;
    transform: scale(.92);
}

.ckss-slideshow-controls .ckss-icon-svg {
    height: 17px;
    width: 17px;
}

.ckss-startup-recovery {
    align-self: center;
    display: grid;
    gap: 12px;
    margin: auto 16px;
    text-align: center;
}

.ckss-startup-recovery h1,
.ckss-startup-recovery p {
    margin: 0;
}

.ckss-startup-recovery p {
    color: var(--ck-ink-muted);
    line-height: 1.55;
}

.ckss-screen--demo-entry {
    align-content: start;
    background: var(--ck-paper);
    display: grid;
    min-height: 100dvh;
    padding: 0 0 28px;
}

.ckss-demo-entry__hero {
    background-position: center;
    background-size: cover;
    color: #fffdf9;
    display: grid;
    gap: 10px;
    min-height: 330px;
    padding: max(24px, env(safe-area-inset-top)) 22px 30px;
}

.ckss-demo-entry__hero .ckss-brand-mark--logo {
    height: 82px;
    margin-bottom: auto;
    width: 82px;
}

.ckss-demo-entry__app-icon {
    align-items: center;
    background: #f4f1eb;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 50%;
    box-shadow: 0 10px 28px rgba(24,18,13,.2);
    display: flex;
    height: clamp(104px, 30vw, 128px);
    justify-content: center;
    margin-bottom: auto;
    padding: 6px;
    width: clamp(104px, 30vw, 128px);
}

.ckss-demo-entry__app-icon img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.ckss-demo-entry__eyebrow {
    color: rgba(255, 253, 249, .78);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.ckss-demo-entry__hero h1,
.ckss-demo-entry__hero p {
    margin: 0;
}

.ckss-demo-entry__hero h1 {
    color: #fff;
    font-family: var(--ck-font-heading);
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.04;
    max-width: 360px;
}

.ckss-demo-entry__hero p {
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    line-height: 1.55;
    max-width: 380px;
}

.ckss-demo-entry__form {
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: 22px;
    box-shadow: var(--ck-shadow-md);
    display: grid;
    gap: 16px;
    margin: -20px 16px 0;
    padding: 20px;
    position: relative;
    z-index: 2;
}

.ckss-demo-entry__form > div:first-child {
    align-items: flex-start;
    display: flex;
    gap: 11px;
}

.ckss-demo-entry__form > div:first-child strong,
.ckss-demo-entry__form > div:first-child small {
    display: block;
}

.ckss-demo-entry__form > div:first-child small,
.ckss-demo-entry__privacy {
    color: var(--ck-ink-muted);
    font-size: 11px;
    line-height: 1.5;
    margin-top: 3px;
}

.ckss-demo-entry__step {
    align-items: center;
    background: var(--ck-sand-light);
    border-radius: 50%;
    color: var(--ck-clay);
    display: flex;
    flex: 0 0 28px;
    font-size: 12px;
    font-weight: 800;
    height: 28px;
    justify-content: center;
}

.ckss-demo-consent {
    align-items: flex-start;
    background: var(--ck-surface-sunk);
    border-radius: 13px;
    color: var(--ck-ink-soft);
    display: flex;
    font-size: 11px;
    gap: 9px;
    line-height: 1.5;
    padding: 11px;
}

.ckss-demo-consent input {
    flex: 0 0 auto;
    height: 18px;
    margin: 1px 0 0;
    width: 18px;
}

.ckss-demo-simulator-note {
    align-items: center;
    background: linear-gradient(135deg, #f4eadc, #fffaf3);
    border: 1px solid #ddc7aa;
    border-radius: 14px;
    color: #5d4837;
    display: flex;
    gap: 11px;
    padding: 11px 12px;
}

.ckss-demo-simulator-note > span {
    background: #8f674a;
    border-radius: 999px;
    color: #fff;
    flex: 0 0 auto;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .07em;
    padding: 5px 8px;
    text-transform: uppercase;
}

.ckss-demo-simulator-note strong,
.ckss-demo-simulator-note small {
    display: block;
}

.ckss-demo-simulator-note small {
    color: #7c6857;
    font-size: 10px;
    line-height: 1.4;
    margin-top: 2px;
}

/* Configurable service merchandising labels. */
.ckss-service-row {
    grid-template-columns: 70px minmax(0, 1fr) auto;
}

.ckss-service-row__actions {
    align-items: center;
    display: flex;
    justify-content: center;
    min-width: 20px;
    width: 20px;
}

.ckss-service-row__offer {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    margin: 2px 0 3px;
    min-height: 24px;
    min-width: 0;
    width: 100%;
}

.ckss-promo-label {
    align-items: center;
    background: var(--ck-promo-bg, #A86F48);
    box-shadow: 0 5px 14px rgba(55, 38, 25, 0.16);
    color: var(--ck-promo-text, #fff);
    display: inline-flex;
    font-size: 9px;
    font-weight: 850;
    justify-content: center;
    letter-spacing: .035em;
    box-sizing: border-box;
    flex: 0 0 auto;
    height: 28px;
    line-height: 1;
    max-width: 156px;
    overflow: hidden;
    padding: 0 11px;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    width: max-content;
}

.ckss-promo-label--row {
    box-shadow: 0 4px 10px rgba(55, 38, 25, 0.13);
    box-sizing: border-box;
    font-size: 8px;
    letter-spacing: .045em;
    height: 26px;
    line-height: 1;
    max-width: min(100%, 156px);
    min-height: 26px;
    padding: 0 10px;
}

.ckss-promo-label--pill { border-radius: 999px; }
.ckss-promo-label--rounded { border-radius: 8px; }
.ckss-promo-label--rectangle { border-radius: 2px; }
.ckss-promo-label--ribbon {
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%, 9px 50%);
    padding-inline: 18px;
}

.ckss-promo-label--media {
    max-width: 108px;
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 3;
}

@media (max-width: 360px) {
    .ckss-home-staycard__brand .ckss-brand-mark--logo { height: 76px; max-width: 76px; width: 76px; }
    .ckss-service-row { grid-template-columns: 64px minmax(0, 1fr) 20px; gap: 9px; }
    .ckss-service-row__media { height: 64px; width: 64px; }
    .ckss-promo-label--row { max-width: min(100%, 140px); }
}

/* Final safe-area overrides: these intentionally follow every ratio and
   Appearance Studio rule so zero custom padding cannot touch phone edges. */
.ckss-screen--home {
    padding-left: max(14px, var(--ck-screen-padding), env(safe-area-inset-left));
    padding-right: max(14px, var(--ck-screen-padding), env(safe-area-inset-right));
}

.ckss-guest-pwa-host .ckss-profile-hero--luxury {
    padding-left: max(16px, var(--ck-screen-padding), env(safe-area-inset-left));
    padding-right: max(16px, var(--ck-screen-padding), env(safe-area-inset-right));
}

.ckss-screen--detail > .ckss-topbar--solid {
    margin-top: calc(14px + env(safe-area-inset-top));
}