/* Layered after style.css — project overrides (loads last). */

/* Global layout tokens (scripts.js may still override after measure). Kept here so a client paste into style.css cannot drop these. */
:root {
  --menu: 138px;
  --height: 100vh;
}

@keyframes experience-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.experience-skeleton-shimmer {
    animation: experience-skeleton-shimmer 1.15s ease-in-out infinite;
    background: linear-gradient(
        90deg,
        #eceff1 0%,
        #f5f7f8 45%,
        #eceff1 100%
    );
    background-size: 200% 100%;
    border-radius: 20px;
}

.experience-skeleton-image {
    border-radius: 8px;
    height: 200px;
    width: 100%;
}

.experience-skeleton-line {
    height: 14px;
    margin-top: 12px;
}

.experience-skeleton-line--lg {
    width: 88%;
}

.experience-skeleton-line--md {
    margin-top: 16px;
    width: 42%;
}

.experience-skeleton-line--sm {
    width: 36%;
}

.experience-skeleton-line--xs {
    width: 28%;
}

.experience-skeleton-card .experience-skeleton-line {
    margin-top: 10px;
}

/* Calendar planner drag/resize affordances */
.home .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .slider .slides .slide .day .experiences .experience.editable {
    cursor: grab;
    touch-action: pan-y;
}

.home .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .slider .slides .slide .day .experiences .experience.editable:active {
    cursor: grabbing;
}

.home .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .slider .slides .slide .day .experiences .experience .drag-handle {
    align-items: center;
    color: #1D2E36;
    display: flex;
    font-size: 11px;
    justify-content: center;
    left: 0;
    opacity: 0;
    pointer-events: auto;
    height: 14px;
    position: absolute;
    right: 0;
    transition: opacity 0.2s ease;
    z-index: 12;
}

.home .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .slider .slides .slide .day .experiences .experience .drag-handle.top {
    cursor: ns-resize;
    top: 0;
}

.home .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .slider .slides .slide .day .experiences .experience .drag-handle.bottom {
    bottom: 0;
    cursor: ns-resize;
}

.home .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .slider .slides .slide .day .experiences .experience .drag-handle.move {
    cursor: grab;
    top: 50%;
    transform: translateY(-50%);
}

.home .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .slider .slides .slide .day .experiences .experience:hover .drag-handle {
    opacity: 1;
}

.calendar-dragging .home .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .slider .slides .slide .day .experiences .experience.editable,
.calendar-dragging .category .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .slider .slides .slide .day .experiences .experience.editable,
.calendar-dragging .wishlist .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .day .experiences .experience.editable {
    touch-action: none;
}

@media (hover: none) and (pointer: coarse) {
    .home .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .slider .slides .slide .day .experiences .experience .drag-handle,
    .category .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .slider .slides .slide .day .experiences .experience .drag-handle,
    .wishlist .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .day .experiences .experience .drag-handle {
        opacity: 1;
    }
}

.category .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .slider .slides .slide .day .experiences .experience.editable {
    cursor: grab;
    touch-action: pan-y;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .slider .slides .slide .day .experiences .experience.editable:active {
    cursor: grabbing;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .slider .slides .slide .day .experiences .experience .drag-handle {
    align-items: center;
    color: #1D2E36;
    display: flex;
    font-size: 11px;
    justify-content: center;
    left: 0;
    opacity: 0;
    pointer-events: auto;
    height: 14px;
    position: absolute;
    right: 0;
    transition: opacity 0.2s ease;
    z-index: 12;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .slider .slides .slide .day .experiences .experience .drag-handle.top {
    cursor: ns-resize;
    top: 0;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .slider .slides .slide .day .experiences .experience .drag-handle.bottom {
    bottom: 0;
    cursor: ns-resize;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .slider .slides .slide .day .experiences .experience .drag-handle.move {
    cursor: grab;
    top: 50%;
    transform: translateY(-50%);
}

.category .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .slider .slides .slide .day .experiences .experience:hover .drag-handle {
    opacity: 1;
}

.wishlist .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .day .experiences .experience.editable {
    cursor: grab;
    touch-action: pan-y;
}

.wishlist .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .day .experiences .experience.editable:active {
    cursor: grabbing;
}

.wishlist .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .day .experiences .experience .drag-handle {
    align-items: center;
    color: #1D2E36;
    display: flex;
    font-size: 11px;
    justify-content: center;
    left: 0;
    opacity: 0;
    pointer-events: auto;
    height: 14px;
    position: absolute;
    right: 0;
    transition: opacity 0.2s ease;
    z-index: 12;
}

.wishlist .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .day .experiences .experience .drag-handle.top {
    cursor: ns-resize;
    top: 0;
}

.wishlist .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .day .experiences .experience .drag-handle.bottom {
    bottom: 0;
    cursor: ns-resize;
}

.wishlist .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .day .experiences .experience .drag-handle.move {
    cursor: grab;
    top: 50%;
    transform: translateY(-50%);
}

.wishlist .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .day .experiences .experience:hover .drag-handle {
    opacity: 1;
}

/* Calendar + wishlist: one absolute row so both icons share the same top edge. */
.home .experiences .content .sections .section.three .list .content .blocks .block .experiences .blocks .block .experience .blocks .block .banner .blocks .block[data-block='1AAA'] .blocks[data-blocks='5'],
.category .experiences .content .sections .section.three .list .content .blocks .block .experiences .blocks .block .experience .blocks .block .banner .blocks .block[data-block='1AAA'] .blocks[data-blocks='5'] {
    align-items: flex-start;
    display: flex;
    float: none;
    height: 22px;
    justify-content: space-between;
    left: 22px;
    pointer-events: none;
    position: absolute;
    right: 22px;
    top: 20px;
    width: auto;
    z-index: 10;
}

@media (max-width: 1250px) {
    .home .experiences .content .sections .section.three .list .content .blocks .block .experiences .blocks .block .experience .blocks .block .banner .blocks .block[data-block='1AAA'] .blocks[data-blocks='5'],
    .category .experiences .content .sections .section.three .list .content .blocks .block .experiences .blocks .block .experience .blocks .block .banner .blocks .block[data-block='1AAA'] .blocks[data-blocks='5'] {
        left: 20px;
        right: 20px;
        top: 18px;
    }
}

@media (max-width: 750px) {
    .home .experiences .content .sections .section.three .list .content .blocks .block .experiences .blocks .block .experience .blocks .block .banner .blocks .block[data-block='1AAA'] .blocks[data-blocks='5'],
    .category .experiences .content .sections .section.three .list .content .blocks .block .experiences .blocks .block .experience .blocks .block .banner .blocks .block[data-block='1AAA'] .blocks[data-blocks='5'] {
        left: 18px;
        right: 18px;
        top: 16px;
    }
}

.home .experiences .content .sections .section.three .list .content .blocks .block .experiences .blocks .block .experience .blocks .block .banner .blocks .block[data-block='1AAA'] .blocks[data-blocks='5'] > .block,
.category .experiences .content .sections .section.three .list .content .blocks .block .experiences .blocks .block .experience .blocks .block .banner .blocks .block[data-block='1AAA'] .blocks[data-blocks='5'] > .block {
    flex: 0 0 22px;
    float: none;
    height: 22px;
    margin: 0;
    pointer-events: auto;
    position: static;
    width: 22px;
}

.home .experiences .content .sections .section.three .list .content .blocks .block .experiences .blocks .block .experience .blocks .block .banner .blocks .block[data-block='1AAA'] .blocks[data-blocks='5'] .icons,
.category .experiences .content .sections .section.three .list .content .blocks .block .experiences .blocks .block .experience .blocks .block .banner .blocks .block[data-block='1AAA'] .blocks[data-blocks='5'] .icons {
    cursor: pointer;
    float: none;
    height: 22px;
    left: auto;
    position: relative;
    right: auto;
    top: 0;
    width: 22px;
}

/* Migrated from public/style.css when switching to client baseline. */
.home .experiences .content .sections .section.three .calendar .blocks .block .blocks .block .blocks .block:nth-child(1) {
    margin: 0 20px 0 0;
}

.home .experiences .content .sections .section.three .calendar .blocks .block .blocks .block .actions .blocks .block[data-block='1BB'] .button.circle.alt:first-child {
    margin: 0 6px 0 0;
}

.home .experiences .content .sections .section.three .calendar .blocks .block .blocks .block .actions .blocks .block .button.circle.alt .icon.alt {
    font-size: 14px;
    line-height: 14px;
    top: calc(50% - 1px);
}

.home .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .labels .slider .slides .slide .label .blocks {
    position: relative;
}

.home .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .labels .slider .slides .slide .label .blocks .block:nth-child(1) {
    position: relative;
}

.home .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .labels .slider .slides .slide .label .blocks .block:nth-child(2) {
    right: 6px;
    position: absolute;
    top: 0;
}

.home .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .blocks .block .days .slider .slides .slide .day .times .time:hover .button.circle.alt {
    opacity: 1;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .blocks .block .blocks .block:nth-child(1) {
    margin: 0 20px 0 0;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .blocks .block .buttons {
    float: left;
    margin: 3px 0;
    width: 100%;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .blocks .block .buttons .blocks {
    display: block;
    float: right;
    width: auto;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .blocks .block .buttons .blocks .block:first-child {
    float: left;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .blocks .block .buttons .blocks .block .button.small:nth-child(2) {
    display: none;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .blocks .block .buttons .blocks .block:first-child .button.small.active ~ .list {
    display: block;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .blocks .block .buttons .blocks .block:first-child .list {
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    right: 0;
    top: 42px;
    width: 100px;
    z-index: 50;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .blocks .block .buttons .blocks .block:first-child .list:before {
    background: #FFFFFF;
    content: '';
    height: 2px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    width: 100%;
    z-index: 1;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .blocks .block .buttons .blocks .block:first-child .list ul {
    background: #FFFFFF;
    border: 1px solid #F7F7F8;
    border-radius: 6px;
    box-sizing: border-box;
    float: left;
    list-style: none;
    margin: 0;
    padding: 15px 18px;
    position: relative;
    width: 100px;
    z-index: 10;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .blocks .block .buttons .blocks .block:first-child .list ul li {
    cursor: pointer;
    float: left;
    font-size: 12px;
    letter-spacing: -0.005em;
    line-height: 19px;
    transition: all 0.2s ease 0s;
    -webkit-transition: all 0.2s ease 0s;
    width: 100%;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .blocks .block .buttons .blocks .block:first-child .list ul li:hover {
    color: #74D2DE;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .blocks .block .buttons .blocks .block:last-child {
    float: right;
    margin: 0 5px 0 0;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .blocks .block .buttons .blocks .block:last-child .button.circle.alt:first-child {
    margin: 0 6px 0 0;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .labels .slider .slides .slide .label .blocks {
    position: relative;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .labels .slider .slides .slide .label .blocks .block:nth-child(1) {
    position: relative;
}

.category .experiences .content .sections .section.three .calendar .blocks .block .dates .blocks .block .labels .slider .slides .slide .label .blocks .block:nth-child(2) {
    right: 6px;
    position: absolute;
    top: 0;
}

.availability .content .sections .section.one .blocks .block:nth-child(2) {
    float: right;
    left: 0;
    position: sticky;
    top: 0;
}

.account .bookings .panel .content .sections .section.two .blocks .block .bookings .blocks .block .booking:last-child {
    margin: 0;
}

.account .experience .panel .content .sections .section.three .blocks .block .form .tabs .tab[data-tab='Overview'] .fields .fieldset[data-fieldset='5'] .blocks .block[data-block='1BA'] {
    margin: 0 0 18px;
    position: relative;
}

/* Global website review carousel — hidden per client request (experience detail reviews unchanged) */
body.home #__next > section.reviews,
body.category #__next > section.reviews,
body.wishlist #__next > section.reviews,
body.resources #__next > section.reviews,
body.confirmation #__next > section.reviews {
    display: none !important;
}

/* Empty fields showed the label and the placeholder stacked on top of each other.
   style.css paints placeholders fully opaque (`input::placeholder { color: … !important }`)
   and parks the field label in the same spot until it floats up, and the label only
   floats once the container is marked `data-input="focus"` — which happens on focus or
   when the field has a value. So every untouched field with a placeholder rendered two
   lines of text over one another; the host form's Spanish section made it obvious
   because every field there is empty and every placeholder is a full sentence.

   Reveal the placeholder only once the label has moved out of the way. Nothing else
   changes: a focused or filled field looks exactly as before. */
.input:not([data-input='focus']) input::placeholder,
.input:not([data-input='focus']) textarea::placeholder,
.textarea:not([data-input='focus']) input::placeholder,
.textarea:not([data-input='focus']) textarea::placeholder {
    opacity: 0;
}

.input input::placeholder,
.input textarea::placeholder,
.textarea input::placeholder,
.textarea textarea::placeholder {
    transition: opacity 0.2s ease 0s;
    -webkit-transition: opacity 0.2s ease 0s;
}

/* ---------------------------------------------------------------------------
   Mobile menu drawer: stop the bottom links colliding with the nav.

   The drawer pins "Account / FAQs / Concierge / Contact" to its floor with
   position:absolute; bottom:40px, while the nav above it flows from the top and
   nothing scrolls (the drawer is top:70px; bottom:0 with overflow visible).
   That held while the nav was short. Adding the "Coming soon" destinations made
   it tall enough to reach the floor, and on a 620px-tall handset the two print
   over each other — "Account" lands on top of the last city, 54px of overlap.

   Rather than shorten the nav (the destinations are the point) the drawer is
   made to behave like a drawer: a scrolling column, with the bottom links as
   the last item in it instead of a layer floating over it.

   flex:1 on the nav is what preserves the original look — it grows to fill the
   spare room, so when the content is short the bottom links still sit at the
   floor exactly as before. They only move up, and the column only scrolls, once
   there is genuinely too much to fit.

   The opacity fade on the bottom links is left alone; only their positioning
   changes, so the drawer still animates open the way it did.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .menu .content .sections .section.two .blocks[data-blocks='1'] {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .menu .content .sections .section.two .blocks .block[data-block='1'] {
        flex: 1 0 auto;
        height: auto;
        /* The category sub-panel slides in absolutely positioned against this
           block, so it still needs a full-height box to slide within. */
        min-height: 100%;
    }

    .menu .content .sections .section.two .blocks .block[data-block='2'],
    .menu[data-action='3'] .content .sections .section.two .blocks .block[data-block='2'],
    .menu[data-action='4'] .content .sections .section.two .blocks .block[data-block='2'] {
        position: static;
        flex: 0 0 auto;
        width: 100%;
        margin-top: 28px;
        padding-bottom: 40px;
    }
}

/* ---------------------------------------------------------------------------
   Calendar: date jump + working week arrows.

   The arrows were bare divs bound by the legacy Swiper to the strip of day
   labels — it slid the labels and never touched the date range, so the grid
   below stayed put and the buttons looked dead. They are React's now, and they
   carry data-nav rather than data-action precisely so Swiper cannot claim them
   back or paint its own `disabled` class over them.

   The date control next to them exists because reaching September through a
   seven-day arrow is nine clicks. It is a native date input wearing the site's
   pill: the field itself is stretched invisibly over the pill so a tap anywhere
   on it opens the OS picker, which is the control people already know.
   --------------------------------------------------------------------------- */
.jc-cal-nav {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: flex-end;
}

/* The theme floats these two, which wrapped them onto separate rows once the
   date pill joined the row. Inside this bar they are a flex pair. */
.jc-cal-nav .buttons {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    float: none;
    gap: 8px;
    width: auto;
}

.jc-cal-nav .buttons .button {
    float: none;
    margin: 0;
}




/* Invisible, but covering the pill, so the tap target is the whole control
   rather than a small native glyph. */

@media (max-width: 750px) {
    .jc-cal-nav {
        gap: 8px;
    }

    /* The date reads on the labels underneath; on a narrow header the pill only
       needs to be tappable, not verbose. */
    .jc-cal-jump-text {
        display: none;
    }

    .jc-cal-jump {
        padding: 9px 12px;
    }
}

/* ---------------------------------------------------------------------------
   Admin tab bar: park it under the site header, not behind it.

   The header is sticky at top:0, 75px tall (70 below 750px) and sits at
   z-index 500. A tab bar also pinned to 0 therefore slid straight underneath it
   and vanished on scroll, which read as the whole panel having lost its
   alignment. Offsetting by the header's own height keeps the two stacked.

   The negative side margins with matching padding let the white background run
   to the edge of the container's gutter, so cards scrolling past do not show
   through beside the bar.
   --------------------------------------------------------------------------- */
.jc-admin-tabs {
    top: 75px;
}

@media (max-width: 750px) {
    .jc-admin-tabs {
        top: 70px;
    }
}

/* ---------------------------------------------------------------------------
   Account panel: say whose account this is.

   The sidebar listed the sections and nothing else — no name, no address — so
   with two accounts open, which is exactly how anyone tests a shared calendar,
   there was no way to tell which one you were looking at.
   --------------------------------------------------------------------------- */
.jc-account-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 10px 0 4px;
}

.jc-account-name {
    color: #101820;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

/* Breaks anywhere: an address is one long unbroken token and the sidebar is
   narrow, so without this it pushes the column wider than its container. */
.jc-account-email {
    color: #757576;
    font-size: 12px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ---------------------------------------------------------------------------
   Calendar on a phone: the grid gets the screen.

   These live here and not in calendar.css because calendar.css is only loaded
   on pages that ask for it — the account panel does, the homepage does not.
   Every rule written there for the homepage planner was dead code, which is
   why the intro kept overlapping after it was supposedly fixed. The offending
   `top: 50%` comes from style.css.

   The intro block is hidden outright rather than untangled: on a phone the
   explanation belongs in the one-time dialog, and the grid needs the height.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* !important, deliberately. style.css reaches this block through a chain
       beginning `.home .experiences .content .sections .section.three`, which
       outweighs anything sane written here — and the same block is reached by
       three different page-level prefixes, so matching them all would mean
       three copies of the same rule. This is the honest way to win it. */
    .calendar .content .blocks .block .blocks .block .blocks .block[data-block='1AB'] {
        display: none !important;
    }

    /* Centred, and its own row, so the date control is the obvious way to move
       the calendar rather than something tucked beside two small arrows. */
    .jc-cal-nav {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    .jc-cal-jump {
        order: -1;
        flex: 1 0 100%;
        justify-content: center;
    }

    /* The label is what makes it legible as a date picker; hiding it left a
       bare icon nobody reads as clickable. */
    .jc-cal-jump-text {
        display: inline;
    }
}

/* Desktop: centre it too. Same reasoning — it is the primary control. */
.jc-cal-nav {
    justify-content: center;
}

/* ---------------------------------------------------------------------------
   Calendar navigation: centre the block, not just its contents.

   `justify-content: center` was already on the bar and did nothing visible,
   because the block holding it is floated right and only as wide as its
   contents — centring inside a narrow box centres nothing. The block itself has
   to span the calendar first.

   !important for the same reason as the intro block: style.css reaches this
   through a page-level chain that outweighs anything written here.
   --------------------------------------------------------------------------- */
.calendar [data-block='1BB'] {
    float: none !important;
    width: 100% !important;
}

.calendar [data-block='1BB'] .jc-cal-nav {
    justify-content: center;
    width: 100%;
}

/* ---------------------------------------------------------------------------
   Header: the account icon says whether you are signed in.

   With a profile photo it becomes the photo. Without one it becomes the same
   figure filled — the icon font has no filled variant, so "filled" is the
   glyph knocked out of a solid disc, which reads the same way and needs no new
   asset. Signed out it stays the plain outline it always was.

   Sized to the row's other glyphs (21px) so nothing shifts when it changes.
   --------------------------------------------------------------------------- */
header .icon.four .action .icon .jc-avatar {
    border-radius: 50%;
    display: block;
    height: 20px;
    object-fit: cover;
    width: 20px;
}

header .icon.four .action .icon i.jc-account-filled {
    align-items: center;
    background: #101820;
    border-radius: 50%;
    color: #FFFFFF;
    display: inline-flex;
    font-size: 12px;
    height: 20px;
    justify-content: center;
    width: 20px;
}

/* ---------------------------------------------------------------------------
   Calendar: the month, stated once.

   Seven labels reading "Tue 8 Sep, Wed 9 Sep, Thu 10 Sep" repeat the same word
   seven times and crowd out the number anyone is actually reading. It goes
   above the row instead, and spans two names only when the week genuinely
   crosses a month.
   --------------------------------------------------------------------------- */
/* Lifted into the row that holds share, bin and add, centred across the
   calendar. Left in normal flow it landed on its own line 32px below them,
   which is a second row of chrome for one control.

   Absolute rather than a float or a margin: this template floats labels inside
   the calendar at width:100%, so `margin: 0 auto` does nothing at all — the
   button measured 366px wide and 374px off centre before this. */
.jc-cal-month {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 30;
    float: none !important;
    margin: 0 !important;
    max-width: 300px !important;
    width: 100% !important;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #E6E6E7;
    border-radius: 999px;
    color: #101820;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 500;
    gap: 8px;
    justify-content: center;
    letter-spacing: 0.04em;
    margin: 0 auto 10px;
    max-width: 320px;
    min-height: 38px;
    padding: 8px 22px;
    position: relative;
    text-transform: uppercase;
    width: 100%;
}

.jc-cal-month:hover {
    border-color: #101820;
}

.jc-cal-month i {
    font-size: 15px;
    opacity: 0.7;
}

/* Stretched invisibly over the pill so a tap anywhere on it opens the picker. */
.jc-cal-month input[type='date'] {
    border: none;
    cursor: pointer;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

@media (max-width: 750px) {
    .jc-cal-month {
        max-width: 210px !important;
    }
}

/* ---------------------------------------------------------------------------
   Calendar: give it edges, a visible scrollbar, and a day row that stays put.

   Three complaints, one cause each:

   - "no se ve el límite del calendario". The scroll container had a 1px border
     in a colour close to white, so the grid appeared to bleed into the page
     with no sense of where it ends.
   - "el scroll a derecha es tan pequeño o parcialmente invisible". The default
     overlay scrollbar on this platform is a thin ghost; on a control whose
     whole job is scrolling, it needs to be visible.
   - "desaparece la barra de días". It is already sticky, but transparent — so
     the hours scrolled straight through it and it read as gone. A solid
     background and a rule underneath is what makes sticky look sticky.
   --------------------------------------------------------------------------- */
/* The date button positions against this row, so it has to be the reference. */
section.calendar .actions {
    position: relative;
}

section.calendar .content {
    border: 1px solid #E2E2E4 !important;
    border-radius: 14px !important;
    max-height: 76vh !important;
    scrollbar-color: #B9B9BC #F2F2F3;
    scrollbar-width: auto;
}

section.calendar .content::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

section.calendar .content::-webkit-scrollbar-track {
    background: #F2F2F3;
    border-radius: 8px;
}

section.calendar .content::-webkit-scrollbar-thumb {
    background: #B9B9BC;
    border: 3px solid #F2F2F3;
    border-radius: 8px;
}

section.calendar .content::-webkit-scrollbar-thumb:hover {
    background: #8E8E92;
}

/* The sticky day row needs to be opaque, or the hours slide through it. */
section.calendar [data-block='2A'] {
    background: #FFFFFF !important;
    box-shadow: 0 1px 0 #EDEDEE;
    z-index: 20;
}

/* ---------------------------------------------------------------------------
   Calendar header: one line — actions left, dates centred, arrows right.

   The date control had grown into a 38px-tall pill on its own row, taller than
   every other control around it. It should read like the date field in the
   search bar at the top of the page: same height as its neighbours, sentence
   case, quiet.
   --------------------------------------------------------------------------- */
section.calendar .actions {
    min-height: 40px;
}

.calendar [data-block='1BB'] {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    float: none !important;
    width: auto !important;
}

.jc-cal-month {
    font-size: 13px !important;
    font-weight: 400 !important;
    gap: 7px !important;
    letter-spacing: 0 !important;
    max-width: none !important;
    min-height: 34px !important;
    padding: 0 16px !important;
    text-transform: none !important;
    white-space: nowrap;
    width: auto !important;
}

.jc-cal-month i {
    font-size: 14px;
}

/* ---------------------------------------------------------------------------
   Calendar blocks: the close button goes to the top-right corner.

   It sat under the title at the bottom left, inside the text column, where it
   both crowded the name and looked like part of it.
   --------------------------------------------------------------------------- */
section.calendar .experience {
    position: relative;
}

section.calendar .experience .blocks .block[data-block='2BBB'] {
    position: absolute !important;
    right: 4px !important;
    top: 4px !important;
    width: auto !important;
    z-index: 25;
}

section.calendar .experience .blocks .block[data-block='2BBB'] .icon {
    opacity: 0.55;
}

section.calendar .experience:hover .blocks .block[data-block='2BBB'] .icon {
    opacity: 1;
}

/* Room for it, so a long title never runs under the button. */
section.calendar .experience .blocks .block[data-block='2BBA'] {
    padding-right: 22px;
}

/* The theme absolutely positions spans inside the calendar, which took the date
   text out of flow — the button sized to its icon alone, 48px wide with the
   label hanging invisibly outside it. Back into the flow, and matched to the
   34px of every other control on the row. */
.jc-cal-month span {
    display: inline !important;
    left: auto !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
}

.jc-cal-month {
    height: 34px !important;
    min-height: 34px !important;
}

/* ---------------------------------------------------------------------------
   Admin: the metric row spans the page.

   The five figures collapsed into a single 115px column pinned to the right —
   the shape a floated, shrink-to-fit container makes, and with
   minmax(140px, 1fr) inside 115px the grid can only produce one column.

   The layout therefore cannot live in an inline style, because the width and
   the float have to be won back from the theme, and only !important does that.
   --------------------------------------------------------------------------- */
main.admin .jc-admin-metrics {
    clear: both !important;
    display: grid !important;
    float: none !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    width: 100% !important;
}

main.admin .jc-admin-metrics > * {
    float: none !important;
    width: auto !important;
}

/* ---------------------------------------------------------------------------
   Admin tabs: same collapse the metric row had.

   The theme floats blocks inside the panel and shrinks them to their content,
   which is what folded the metrics into a 115px column — and does the same to
   the tab strip, leaving the tabs squeezed or unreachable. One host reported
   being unable to open them at all.
   --------------------------------------------------------------------------- */
main.admin .jc-admin-tabs {
    clear: both !important;
    float: none !important;
    width: 100% !important;
}

main.admin .jc-admin-tabs > button {
    flex: 0 0 auto !important;
    float: none !important;
    width: auto !important;
}

/* Count of what is waiting, beside "Bookings" in the account menu. */
.jc-nav-badge {
    background: #74D2DE;
    border-radius: 999px;
    color: #101820;
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    line-height: 17px;
    margin-left: 7px;
    min-width: 18px;
    padding: 0 5px;
    text-align: center;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Host requests panel: sit in the column, not across the page.

   It borrows section.panel so the theme's own width and padding apply, and
   only needs a card of its own plus separation from the Bookings panel below.
   --------------------------------------------------------------------------- */
.jc-host-requests .content > div {
    background: #FFFFFF;
    border: 1px solid #EDEDEE;
    border-radius: 16px;
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 24px 28px;
    width: 100%;
}

@media (max-width: 750px) {
    .jc-host-requests .content > div {
        padding: 18px 16px;
    }
}

/* ---------------------------------------------------------------------------
   Payouts panel: text that stacks instead of overlapping.

   The theme lifts `.title` by half its height to centre it — right when a title
   is alone in its block, wrong here, where paragraphs follow it and the heading
   lands in the middle of them. Same fault as the calendar intro, same fix, and
   the paragraphs get their own spacing rather than sitting flush.
   --------------------------------------------------------------------------- */
#payouts .title {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    margin: 0 0 10px !important;
}

#payouts .text p {
    float: none !important;
    margin: 0 0 8px !important;
    position: static !important;
    width: auto !important;
}

#payouts .text p:last-child {
    margin-bottom: 0 !important;
}

/* The requests panel now lives inside the single account panel, so it only
   needs to be a full-width card at the top of it. */
.jc-host-requests {
    box-sizing: border-box;
    float: left;
    padding: 0 0 4px;
    width: 100%;
}

.jc-host-requests > div {
    background: #FFFFFF;
    border: 1px solid #EDEDEE;
    border-radius: 16px;
    box-sizing: border-box;
    margin: 25px 0 0;
    padding: 22px 24px;
    width: 100%;
}

@media (max-width: 750px) {
    .jc-host-requests > div {
        padding: 18px 16px;
    }
}

/* ---------------------------------------------------------------------------
   Dialog buttons the theme cannot reshape.

   Inline styles were not enough: this dialog renders inside the account panel,
   where anchors and buttons pick up the theme's own sizing — the primary
   action came out as a teal ellipse and the secondary drifted out of the row.
   Everything that decides the shape is stated here and enforced.
   --------------------------------------------------------------------------- */
.jc-dlg-btn {
    align-items: center;
    background: #FFFFFF !important;
    border: 1px solid #E6E6E7 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    color: #5A5A5C !important;
    cursor: pointer;
    display: inline-flex !important;
    float: none !important;
    font-family: inherit;
    font-size: 14px !important;
    font-weight: 400 !important;
    height: auto !important;
    justify-content: center;
    line-height: 1.2 !important;
    margin: 0 !important;
    min-height: 40px !important;
    min-width: 0 !important;
    padding: 0 20px !important;
    position: static !important;
    text-decoration: none !important;
    transform: none !important;
    white-space: nowrap;
    width: auto !important;
}

.jc-dlg-btn--go {
    background: #74D2DE !important;
    border-color: #74D2DE !important;
    color: #101820 !important;
    font-weight: 500 !important;
}

.jc-dlg-btn:hover {
    border-color: #101820 !important;
}

.jc-dlg-btn--go:hover {
    background: #5FC6D4 !important;
    border-color: #5FC6D4 !important;
}

/* ---------------------------------------------------------------------------
   Header row: everything on one optical line.

   Measured, not eyeballed: the icons8 glyphs are 22px tall and the theme
   centres them with a -12px offset, so the 20px flag and the 15px menu lines
   settled 1px low. A pixel sounds like nothing and is exactly the amount that
   makes a row of icons look sloppy.
   --------------------------------------------------------------------------- */
header .jc-flag-lg {
    position: relative;
    top: -1px;
}

/* The menu lines are already centred with top:50% and a translate, so setting
   `top` here removed that centring and dropped them 37px. Nudged with a margin
   instead, which the transform leaves alone. */
header .content .sections .section.three .blocks .block .icons .icon[data-icon='1'] .lines {
    margin-top: -1px;
}

/* The count of what is waiting, on the account icon. Same shape and size as the
   bag's badge, mirrored to the opposite side so the two never read as one. */
header .icon.four .action .jc-account-number {
    background: #74D2DE;
    border-radius: 50%;
    color: #101820;
    font-size: 0.5em;
    font-weight: 490;
    height: 16px;
    left: auto;
    line-height: 15px;
    position: absolute;
    right: calc(50% + 0.05em);
    text-align: center;
    top: calc(50% - 16px);
    width: 16px;
    z-index: 10;
}