.confirmation-page {
    /* Explicit width for the same reason as .reserve-page (properties/reserve.css): without it
       this block sizes to its content and can be wider than a phone screen. 40px = side padding. */
    width: calc(100% - 40px);
    max-width: 700px;
    margin: 0 auto;
    padding: 40px 20px var(--primary-margin-bottom);
    text-align: center;
}

.confirmation-page h1 {
    margin-bottom: 48px;
}

/* Wraps Booking Reference + the optional Platform Reference (2026-09-06, per Thomas - shown
   alongside it, same visual treatment, only for an actual platform booking with one on file) so
   they sit centered next to each other with a real gap instead of relying on inline-flex's own
   whitespace-based spacing between two adjacent siblings. Carries the 48px bottom margin itself
   (see the container-scoped override below) rather than each chip carrying its own - two chips
   each with their own margin-bottom stacked into a much bigger gap between them specifically once
   a narrow viewport wrapped them onto separate lines (caught live 2026-09-06). */
.confirmation-references {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 48px;
}

.confirmation-reference {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(44, 121, 185, 0.08);
    border: 1px solid rgba(44, 121, 185, 0.18);
    border-radius: 12px;
    padding: 14px 32px;
    margin-bottom: 48px;
}

/* Inside the wrapper, the wrapper's own margin-bottom above is the only one that should count -
   otherwise each chip's individual margin stacks on top of it, worst-case (wrapped onto separate
   lines on a narrow viewport) leaving a much bigger gap between the two chips than intended. */
.confirmation-references .confirmation-reference {
    margin-bottom: 0;
}

.confirmation-reference-label {
    font-family: var(--secondary-font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--secondary-color);
}

.confirmation-reference-value {
    font-family: var(--primary-font);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--primary-color);
    letter-spacing: 0.05em;
}

.confirmation-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}

.confirmation-summary-dates {
    margin-bottom: 32px;
}

.confirmation-group-note {
    text-align: center;
    color: rgb(100, 100, 100);
    font-size: 0.9rem;
    margin: -4px 0 24px;
}

.confirmation-group-note a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.confirmation-group-note a:hover {
    text-decoration: underline;
}

.confirmation-page .currency-toggle {
    margin-bottom: 20px;
}

.confirmation-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: rgba(44, 121, 185, 0.08);
    border: 1px solid rgba(44, 121, 185, 0.18);
    border-radius: 12px;
    padding: 8px 20px;
    line-height: 1.2;
}

.confirmation-chip-label {
    font-family: var(--secondary-font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--secondary-color);
}

.confirmation-chip-value {
    font-family: var(--primary-font);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
}

.confirmation-chip-arrow {
    color: rgb(180, 180, 180);
    font-size: 1.3rem;
}

.confirmation-breakdown {
    max-width: 420px;
    margin: 0 auto 32px;
    text-align: left;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    padding: 16px 0;
}

.confirmation-breakdown-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    font-size: 0.95rem;
    color: rgb(80, 80, 80);
}

.confirmation-breakdown-total {
    font-family: var(--primary-font);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
    border-top: 1px solid #ebebeb;
    margin-top: 4px;
    padding-top: 12px;
}

.confirmation-breakdown-note {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed #ebebeb;
    font-size: 0.85rem;
    color: rgb(130, 130, 130);
}

.pay-extras-breakdown {
    max-width: 420px;
    margin: 24px auto 0;
    text-align: left;
    border-top: 1px solid #ebebeb;
    padding-top: 16px;
}

.pay-extras-breakdown-title {
    font-family: var(--secondary-font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--secondary-color);
    margin: 0 0 8px;
}

.pay-extras-breakdown-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    font-size: 0.95rem;
    color: rgb(80, 80, 80);
}

.pay-extras-breakdown-total {
    font-family: var(--primary-font);
    font-size: 1.2rem;
    font-weight: 600;
    color: rgb(60, 60, 60);
    border-top: 1px solid #ebebeb;
    margin-top: 4px;
    padding-top: 12px;
}

.pay-extras-breakdown-note {
    margin-top: 8px;
    font-size: 0.85rem;
    color: rgb(130, 130, 130);
}

/* Combined balance checkout for a multi-property stay (2026-09-15) - the guest pays one total,
   but still sees which apartment each part of it belongs to. Deliberately reuses
   .pay-extras-breakdown's proportions so the two stacked blocks read as one column. */
.pay-legs-breakdown {
    max-width: 420px;
    margin: 24px auto 0;
    text-align: left;
    border-top: 1px solid #ebebeb;
    padding-top: 16px;
}

.pay-legs-breakdown-title {
    font-family: var(--secondary-font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--secondary-color);
    margin: 0 0 8px;
}

.pay-legs-breakdown-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    font-size: 0.95rem;
    color: rgb(80, 80, 80);
}

/* The currency-split fallback: two apartments frozen in different currencies can't share one
   order, so each gets its own bordered panel and its own checkout button. */
.pay-leg-panel {
    max-width: 420px;
    margin: 24px auto 0;
    padding: 20px;
    border: 1px solid rgb(214, 226, 238);
    border-radius: 8px;
    background: rgb(247, 250, 253);
}

.pay-leg-title {
    font-family: var(--secondary-font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--secondary-color);
    margin: 0 0 8px;
}

/* .reserve-form-submit is width:100% but content-box, so its 48px of horizontal padding is added
   ON TOP of the container width - inside this panel's own padding that overflowed the border by
   27px at phone width (measured, not guessed). Scoped here rather than adding box-sizing to
   .reserve-form-submit itself, which is shared by every reserve form on the site. The button label
   carries a property name, so it also has to be allowed to wrap. */
.pay-leg-panel .pay-button {
    box-sizing: border-box;
    max-width: 100%;
    white-space: normal;
}

/* Lead-in line above a stacked set of panels. (Previously used by the retired Wise block; kept
   because the currency-split fallback needs the same "read this first" treatment.) */
.pay-instructions-lead {
    color: var(--primary-color);
    font-weight: 600;
    max-width: 420px;
    margin: 20px auto 0;
}

.confirmation-message {
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.7;
    font-size: 0.95rem;
    color: rgb(80, 80, 80);
}

/* Multi-property Manage Booking hub landing page - one .stay-leg-card per apartment, replacing
   the single _confirmation_details.html block a normal (single-property) booking's hub still
   uses. Stacks to one column below 768px, same breakpoint .manage-hub-layout already uses. */
.stay-legs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 0 auto 32px;
    max-width: 640px;
}

.stay-leg-card {
    flex: 1 1 260px;
    text-align: left;
    background: rgba(44, 121, 185, 0.05);
    border: 1px solid rgba(44, 121, 185, 0.18);
    border-radius: 12px;
    padding: 16px 20px;
}

.stay-leg-card-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

.stay-leg-card-property {
    font-family: var(--primary-font);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary-color);
}

.stay-leg-card-dates {
    font-size: 0.85rem;
    color: rgb(100, 100, 100);
}

/* No margin-bottom: the status line is the card's last element now, so the card's own 16px
   bottom padding is the whole gap. It used to carry 12px to separate itself from a
   "Manage this apartment" link below it; once that link was removed (2026-09-14) the margin
   survived as dead space, leaving the card visibly bottom-heavy - measured 17px above the
   heading against 29px below the status text. */
.stay-leg-card-status {
    font-size: 0.9rem;
    color: rgb(80, 80, 80);
}

.stay-leg-card-status-cancelled {
    color: var(--status-booked-color, #c1554f);
    font-weight: 600;
}

/* Multi-property Manage Booking hub - Holiday Info sections (Amenities, Last Days & Check-out,
   Location & Check-in), one .stay-leg-section per apartment inside a details-page. A purely
   structural wrapper (margin: 0, no padding/border of its own) - ALL visible spacing comes from
   its .details-section children's own `margin: 40px 0` (details.css), the same as anywhere else
   on this page, so two adjacent .details-section blocks always end up 40px(collapsed margin) +
   1px(border) + 40px(padding) apart regardless of whether a .stay-leg-section wrapper happens to
   sit between them.

   Real bug found live (2026-09-14, per Thomas - "it looks off"): giving the wrapper its OWN
   `margin: 40px 0` (an earlier version of this rule) double-counted spacing at every apartment
   boundary - the wrapper's own margin doesn't collapse through once it also carries a divider's
   border+padding, so its first child's own 40px top margin became a genuinely separate, additional
   gap on top of the wrapper's own 40px+border+40px - visibly more space at apartment boundaries
   than at plain within-apartment ones. Zeroing the wrapper's own margin, and zeroing whichever
   child/element starts a divider-bearing boundary's OWN top margin (the `> :first-child` / bare
   `.details-section` rules below), makes every boundary's math identical again.

   The cross-class rules (.details-section + .stay-leg-section / .stay-leg-section + .details-section)
   are a SEPARATE real bug also found live: manage_location.html mixes bare .details-section blocks
   (Directions, Good to know, House rules - shared, not per-leg) with .stay-leg-section-wrapped
   per-apartment blocks in the same flat sibling sequence, and a plain CSS adjacent-sibling selector
   only ever matches same-class siblings - so the boundary from "Directions" into the first
   apartment, and from the last apartment into "Good to know", both silently had NO divider at all
   until these were added. */
.stay-leg-section {
    text-align: left;
    margin: 40px 0;
}

/* margin-top: 0 on both rules below - the wrapper's own baseline top margin (needed for a
   standalone/first .stay-leg-section, e.g. Guest Registrations' very first apartment right after
   the page's own intro paragraph) is redundant once a divider already exists here, and left
   in would have doubled up with the divider's own padding-top. */
.stay-leg-section + .stay-leg-section,
.details-section + .stay-leg-section {
    border-top: 1px solid #ebebeb;
    padding-top: 40px;
    margin-top: 0;
}

/* Same redundant-margin problem one level deeper - once the wrapper above has its own border,
   margin no longer collapses through it, so the wrapper's first child would otherwise contribute
   an extra, unwanted 40px of its own on top of the wrapper's already-correct divider spacing. */
.stay-leg-section + .stay-leg-section > :first-child,
.details-section + .stay-leg-section > :first-child {
    margin-top: 0;
}

/* One level deeper again - measured live (2026-09-14): with the .details-section above at
   margin/border/padding: 0 (the :first-child case), .details-section-title's own margin-top
   (13.6px, details.css doesn't reset it - every other heading on the page relies on it staying
   INSIDE its own box as normal breathing room above the text) had nothing left to collapse
   against, so it leaked upward and added itself on top of the divider's own 40px padding -
   apartment-boundary gaps measured 94.6px against every other boundary's clean 40.0px. */
.stay-leg-section + .stay-leg-section > :first-child > .details-section-title,
.details-section + .stay-leg-section > :first-child > .details-section-title {
    margin-top: 0;
}

.stay-leg-section + .details-section {
    border-top: 1px solid #ebebeb;
    padding-top: 40px;
    margin-top: 0;
}

.stay-leg-section-title {
    font-family: var(--primary-font);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
}

/* The merged Optional Extras page reads as three distinct groups (2026-09-15, per Thomas): the
   party's airport transfers, then one block per apartment. Deliberately its own container rather
   than reusing .stay-leg-section - that class's adjacency rules are finely tuned divider maths
   shared with Guest Registrations and Location & Check-in (see the block above), and widening
   them to carry a bordered panel too would put those pages at risk for no benefit.

   An enclosing panel rather than just a heading, because the sections inside already have their
   own headings - without a boundary the apartment's five sub-sections read as a continuation of
   whatever came before. */
.extras-group {
    text-align: left;
    margin: 32px 0;
    padding: 4px 24px 24px;
    border: 1px solid rgb(222, 232, 242);
    border-radius: 10px;
    background: rgb(251, 253, 255);
}

/* margin-bottom carries the ENTIRE gap to whatever comes after (2026-09-16, per Thomas) - see the
   rule below that zeroes every first section's own top spacing so nothing else can add to or
   shrink this. Kept as one plain number here, rather than reconstructed from
   collapsed-margin/border/padding-top the way an inter-extra boundary is, because the content
   directly after this header varies (an apartment panel's first section starts with a
   .details-section-title, the Airport Transfers panel's own section has no title at all).

   52px, not the ~92px an earlier version of this rule used - that number measured from the
   PREVIOUS section's own bottom edge (Late Checkout's), which sits a further 40px of blank space
   BEFORE the next section's divider line actually starts (its own margin-top, collapsed against
   Late Checkout's margin-bottom) - not from the line itself. Measuring from the divider line
   itself (the next section's own border-top) down to its heading is really only ~52px (1px border
   + 40px padding-top + the title's own ~13.6px margin-top, all left un-zeroed there) - confirmed
   live, per Thomas's question about exactly this after the 92px version still looked uneven. */
.extras-group-header {
    margin: 0 0 52px;
    padding: 16px 0 12px;
    border-bottom: 1px solid rgb(228, 236, 244);
}

/* text-align is set explicitly, not left to inherit from .extras-group: a bare `h2 { text-align:
   center }` element rule exists globally, and a directly-matching rule always beats an inherited
   value no matter how specific the ancestor's selector is. Measured, not guessed. */
.extras-group-title {
    font-family: var(--primary-font);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
    text-align: left;
    margin: 0;
}

.extras-group-subtitle {
    margin: 4px 0 0;
    font-family: var(--secondary-font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--secondary-color);
}

/* The header's own margin-bottom above is the WHOLE gap - so the first section itself, and its
   title if it has one, must be zeroed here, or their own natural top margin (collapsing with the
   header's) would only matter when it's LARGER than 52px, but would otherwise add nothing useful
   and leaves the door open to it one day exceeding 52px and silently growing the gap again. */
.extras-group > .details-section:first-of-type,
.extras-group .details-form > .details-section:first-of-type,
/* :first-of-type matches the HIDDEN Cot & High Chair section when it's hidden, so the first
   section the guest can actually see needs the same treatment - otherwise it keeps its own extra
   40px on top of the header's 52px. */
.extras-group .details-form > .details-section-hidden + .details-section {
    margin-top: 0;
}

.extras-group > .details-section:first-of-type > .details-section-title,
.extras-group .details-form > .details-section:first-of-type > .details-section-title,
.extras-group .details-form > .details-section-hidden + .details-section > .details-section-title {
    margin-top: 0;
}

@media (max-width: 560px) {
    /* Side padding is the first thing to give at phone width - the forms inside are already tight. */
    .extras-group {
        padding-left: 14px;
        padding-right: 14px;
    }
}

.manage-message {
    max-width: 480px;
    margin: 0 auto 48px;
    line-height: 1.7;
    font-size: 1em;
    color: rgb(80, 80, 80);
}

.manage-form {
    max-width: 380px;
    margin: 0 auto;
    text-align: left;
}

.reserve-form-row {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reserve-form-row label {
    font-family: var(--secondary-font);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--secondary-color);
}

.manage-input {
    padding: 10px 12px;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: var(--primary-color, #2c79b9);
}

.manage-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.reserve-input {
    padding: 10px 12px;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: var(--primary-color, #2c79b9);
}

.reserve-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.reserve-form-cancel {
    display: block;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    margin: 12px auto 0;
    background: var(--status-booked-color, #c1554f);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 14px 24px;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.reserve-form-cancel:hover {
    background: #a8433d;
}

.reserve-form-error {
    margin: 0;
    font-size: 0.82rem;
    color: var(--status-booked-color, #c1554f);
}

.reserve-form-errors {
    max-width: 380px;
    margin: 0 auto 20px;
    background: var(--status-booked-bg, #fbe4e4);
    color: var(--status-booked-color, #c1554f);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.9rem;
}

.reserve-form-errors p {
    margin: 0;
}

.reserve-form-submit {
    width: 100%;
    background: var(--primary-color, #2c79b9);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.2s;
}

.reserve-form-submit:hover {
    background: var(--primary-color-dark, #1f5f93);
}

.conditions-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px var(--primary-margin-bottom);
}

.conditions-page h1 {
    display: inline-block;
    font-size: clamp(1.8rem, 5vw + 1rem, 3.2rem);
    margin-bottom: 64px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(159, 111, 0, 0.25);
}

.conditions-intro {
    text-align: left;
    max-width: 520px;
    margin: 0 0 20px;
    line-height: 1.7;
    font-family: var(--primary-font);
    font-size: 1.05em;
    color: rgb(80, 80, 80);
}

.conditions-list {
    margin: 0;
    padding: 0 0 0 20px;
}

.conditions-list li {
    line-height: 1.8;
    font-family: var(--primary-font);
    font-size: 1rem;
    color: rgb(80, 80, 80);
    margin-bottom: 16px;
}

/* Full legal Terms and Conditions page - shares .conditions-page's container/h1, adds its own
   section headings/paragraphs since that page is a short bullet list, not prose (2026-09-13). */
.terms-page h2 {
    font-family: var(--secondary-font);
    font-size: 1.25rem;
    margin: 40px 0 12px;
}

.terms-page p {
    line-height: 1.7;
    font-family: var(--primary-font);
    font-size: 1rem;
    color: rgb(80, 80, 80);
    margin: 0 0 16px;
}

.reserve-back-link {
    display: inline-block;
    color: var(--primary-color);
    font-family: var(--secondary-font);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.reserve-back-link:hover {
    text-decoration: underline;
}

/* display:flex (not inline-flex) deliberately - this sits directly before a .pay-button
   (also inline-level, see its own rule below) on every payment page (pay.html, balance_pay.html,
   tourist_tax_pay.html, manage_supplementary_pay.html) with nothing block-level forcing a line
   break between them, so two adjacent inline-flex/inline-block boxes were free to share one line
   instead of each getting its own centered row - found 2026-09-06 verifying manage_supplementary_
   pay.html, confirmed live on the other three too. Block-level still reads as centered on screen
   since .confirmation-page's text-align:center has no bearing on a flex container's own children -
   align-items:center here does that job instead. */
.pay-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 24px;
}

.pay-amount-label {
    font-family: var(--secondary-font);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--secondary-color);
}

.pay-amount-value {
    font-family: var(--primary-font);
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.pay-countdown {
    margin: 0 0 24px;
    font-size: 0.9rem;
    color: rgb(110, 110, 110);
}

#pay-countdown-time {
    font-weight: 700;
    color: var(--primary-color);
}

.pay-button {
    display: inline-block;
    max-width: 380px;
    margin: 0 auto 12px;
    text-decoration: none;
    text-align: center;
}

.pay-instructions {
    max-width: 420px;
    margin: 0 auto 20px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgb(110, 110, 110);
}

.pay-cancel-form {
    margin: 28px 0 0;
}

.pay-cancel-button {
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
    color: var(--status-booked-color, #c1554f);
    font-family: var(--secondary-font);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
}

.pay-cancel-button:hover {
    text-decoration: underline;
}

/* Manage Booking hub sidebar layout - manage_hub.html, manage_guests.html,
   manage_arrival_departure.html and manage_extras.html only. */
.manage-hub-layout {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px var(--primary-margin-bottom);
    /* body is itself a column flexbox (see main/style.css) - a flex item with auto side-margins
       sizes to fit its content instead of stretching to fill (auto margins take priority over
       align-items:stretch), so without width:100% this silently shrank to whatever the sidebar +
       wrapped-heading minimum required (~818px) rather than actually reaching its own 1100px cap -
       caught live 2026-09-06 as "Manage Your Booking" wrapping onto two lines despite plenty of
       room in the viewport. box-sizing: border-box so max-width/width agree with padding included,
       matching how the rest of this rule already reads. */
    box-sizing: border-box;
}

.manage-hub-sidebar {
    flex: 0 0 220px;
    position: sticky;
    top: 24px;
}

.manage-hub-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #ffffff;
    border: 1px solid rgba(44, 121, 185, 0.14);
    border-radius: 12px;
    padding: 12px;
}

.manage-hub-nav-group-label {
    font-family: var(--secondary-font);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(160, 160, 160);
    padding: 10px 14px 2px;
}

.manage-hub-nav-group-label:first-child {
    padding-top: 2px;
}

.manage-hub-nav-link {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: var(--secondary-font);
    font-size: 0.9rem;
    font-weight: 600;
    color: rgb(90, 90, 90);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background-color 0.2s, color 0.2s;
}

.manage-hub-nav-link:hover {
    background: rgba(44, 121, 185, 0.06);
    color: var(--primary-color-dark);
}

button.manage-hub-nav-link {
    /* Django 5's LogoutView is POST-only (owners/urls.py), so Log out is a <button> inside a
       form, not an <a> - reset the button-specific defaults a browser would otherwise add on top
       of the shared rules above. */
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
}

.manage-hub-nav-link-active {
    background: rgba(44, 121, 185, 0.1);
    border-left-color: var(--primary-color);
    color: var(--primary-color-dark);
}

.manage-hub-nav-link-cta {
    margin-top: 8px;
    background: var(--secondary-color-soft);
    color: var(--secondary-color);
    border-left-color: var(--secondary-color);
}

.manage-hub-nav-link-cta:hover {
    background: var(--secondary-color-soft-dark);
}

.manage-hub-nav-link-danger {
    margin-top: 4px;
    background: rgba(193, 85, 79, 0.08);
    color: var(--status-booked-color, #c1554f);
    border-left-color: var(--status-booked-color, #c1554f);
}

.manage-hub-nav-link-danger:hover {
    background: rgba(193, 85, 79, 0.16);
}

.manage-hub-nav-link-danger.manage-hub-nav-link-active {
    background: rgba(193, 85, 79, 0.16);
    color: var(--status-booked-color, #c1554f);
}

.manage-hub-content {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

/* Hub landing page's progress checklist (2026-09-16) - reuses the same status-color vocabulary as
   the availability calendar (--status-available-* and --status-booked-* variables) rather than
   introducing new colours, so "done"/"not done" reads consistently with the rest of the site.
   Lives inside the
   "What's next"/"Getting ready for your stay" panel, directly under its (left-aligned) heading -
   left-aligned (not centered) to match that panel's own text-align. margin-top: 24px here, not a
   margin-top: 8px "on top of" .details-section-title's 16px margin-bottom as first tried - adjacent
   block margins collapse to the larger of the two, not their sum, so an 8px addition against a
   16px neighbour was silently absorbed (2026-09-16, per Thomas: "a little more space between the
   header and the chips" - the previous attempt visibly hadn't moved). 24px is the real, larger
   value the collapse settles on, not extra room stacked on the header's own 16px gap - every other
   section-title-to-content pairing on this page still uses that unchanged 16px.

   Wraps to a second row rather than forcing one line (tried nowrap + overflow-x, matching the
   mobile sidebar nav's own pattern, but it clipped Tourist Tax with no visible scroll affordance
   at Thomas's real window width - reverted, 2026-09-16, per Thomas: "this is arguably worse").
   Still, five chips only missed fitting on one row by ~12px at that width (measured via
   getBoundingClientRect, not eyeballed) - the gap/padding below are trimmed just enough to close
   that, wrap staying on as a safety net for a narrower window rather than clipping again. */
.hub-progress {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 24px;
    margin-bottom: 32px;
}

.hub-progress-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--status-booked-bg, #fbe4e4);
    color: var(--status-booked-color, #c1554f);
    border-radius: 999px;
    padding: 8px 14px;
    font-family: var(--secondary-font);
    font-size: 0.82rem;
    font-weight: 700;
}

.hub-progress-item-done {
    background: var(--status-available-bg, #e5f4ec);
    color: var(--status-available-color, #2f8f5b);
}

.hub-progress-icon {
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .manage-hub-layout {
        flex-direction: column;
        gap: 16px;
        margin: 20px auto;
    }

    .manage-hub-sidebar {
        flex: 0 0 auto;
        position: static;
        width: 100%;
    }

    /* The layout's align-items: flex-start made this column size to its content once stacked:
       wider than a small phone on Optional Extras, and narrower than the screen (so parked on the
       left) on short tabs like Tourist Tax. Stretch it to the screen instead (2026-10-04). */
    .manage-hub-content {
        align-self: stretch;
    }

    /* "Registrations" alone is wider than a 320px screen at the full heading size. Scales down
       only below about 394px; 3.2em (main/style.css's h1) everywhere else. */
    .manage-hub-content > h1 {
        font-size: min(3.2em, 13vw);
    }

    .manage-hub-nav {
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding: 8px;
    }

    /* The group heading doesn't fit the horizontal-scroll row layout below 768px (there's no
       sensible place to break the row for it) - items stay grouped in source order, just without
       the visible label at this width; the CTA/danger colour-coding already still tells Pay
       Balance/Cancel apart from everything else. */
    .manage-hub-nav-group-label {
        display: none;
    }

    .manage-hub-nav-link {
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
    }

    .manage-hub-nav-link-active {
        border-left-color: transparent;
        border-bottom-color: var(--primary-color);
    }

    .manage-hub-nav-link-cta {
        border-bottom-color: var(--secondary-color);
    }

    .manage-hub-nav-link-danger {
        border-bottom-color: var(--status-booked-color, #c1554f);
    }
}

/* Multi-property Cancel Booking - one selectable row per apartment (2026-09-15). A party can
   cancel all or some of their apartments, so this is a checkbox list rather than the single
   property/dates summary a one-apartment cancellation still shows. */
.cancel-leg-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1px solid rgba(44, 121, 185, 0.18);
    border-radius: 10px;
    background: rgba(44, 121, 185, 0.05);
    cursor: pointer;
}

.cancel-leg-option-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cancel-leg-option-property {
    font-family: var(--primary-font);
    font-weight: 600;
    color: var(--primary-color);
}

.cancel-leg-option-dates,
.cancel-leg-option-note {
    font-size: 0.85rem;
    color: rgb(100, 100, 100);
}

.stay-leg-card-credit {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    color: rgb(120, 120, 120);
}

/* Collapsible per-apartment availability on the merged Edit Dates page (2026-09-15). The summary
   reuses .details-section-title, whose 16px margin-bottom would otherwise leave a gap under a
   CLOSED disclosure - so it's zeroed on the summary itself and restored only once open. */
.calendar-disclosure-summary {
    cursor: pointer;
    margin-bottom: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgb(214, 226, 238);
    border-radius: 6px;
    background: rgb(247, 250, 253);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.calendar-disclosure-summary:hover,
.calendar-disclosure-summary:focus-visible {
    background: rgb(238, 245, 251);
    border-color: var(--primary-color);
}

.calendar-disclosure-summary::-webkit-details-marker {
    display: none;
}

/* Own marker, so it matches the site's own type rather than the browser's default triangle.
   A bordered circular badge rather than a bare '+' character (2026-09-15, per Thomas: the plain
   glyph was too easy to miss next to the uppercase heading) - a round target reads as a control,
   where a loose punctuation mark reads as decoration. flex-shrink guards the circle against being
   squashed into an oval by a long property name on a narrow screen. */
.calendar-disclosure-summary::before {
    content: '+';
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
    /* '+' has more ink below its crossbar than above in this face, so centring it by line-box
       alone leaves it sitting low. Nudged up rather than letter-spaced. */
    padding-bottom: 3px;
    color: var(--primary-color);
}

.calendar-disclosure[open] > .calendar-disclosure-summary {
    margin-bottom: 16px;
}

.calendar-disclosure[open] > .calendar-disclosure-summary::before {
    content: '\2212';  /* minus */
    padding-bottom: 2px;
}


/* Deposit payment page (pay.html): the stay's total first, then one unmistakable "to pay today"
   panel directly above the button, with extras moved below it - a guest used to see the extras'
   own "Total" as the last figure before "Pay now" and read it as the amount being charged
   (2026-10-04, per Thomas). */
.pay-total-breakdown {
    max-width: 420px;
    margin: 28px auto 0;
    text-align: left;
}

.pay-total-breakdown-total {
    border-top: 1px solid #ebebeb;
    margin-top: 4px;
    padding-top: 12px;
    font-weight: 600;
    color: rgb(60, 60, 60);
}

.pay-today {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    max-width: 420px;
    margin: 20px auto 20px;
    padding: 20px 24px;
    border: 2px solid var(--primary-color);
    border-radius: 12px;
    background: #f3f8fc;
}

.pay-today .pay-amount-value {
    font-size: 2.4rem;
    line-height: 1.1;
}

.pay-today-note {
    font-size: 0.9rem;
    color: rgb(90, 90, 90);
}

.pay-extras-later {
    margin-top: 36px;
    opacity: 0.85;
}

.pay-extras-later .pay-extras-breakdown-note {
    margin: 0 0 8px;
}

.pay-extras-later-total {
    border-top: 1px solid #ebebeb;
    margin-top: 4px;
    padding-top: 10px;
    font-weight: 600;
}

/* The reference, apartment(s) and dates on every payment page (_pay_summary.html), stacked to the same 420px column as the
   figures below them (their edges line up with the breakdown and the "to pay today" panel)
   instead of a wider row of loose chips that overhung it. */
.pay-summary {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px 8px;
    max-width: 420px;
    margin: 0 auto 8px;
}

.pay-summary .confirmation-reference,
.pay-summary .pay-summary-property {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.pay-summary .confirmation-reference {
    display: flex;
    padding: 12px 20px;
}

.pay-summary .confirmation-chip {
    padding: 10px 12px;
    min-width: 0;
}

.pay-summary .confirmation-chip-value {
    font-size: 1.05rem;
}

/* ...and the button to that same column's width (it was a few pixels wider than the panel
   above it). */
.pay-summary ~ .pay-button {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
}

/* The same panel on the confirmation page and the Guest Suite's Booking tab
   (_confirmation_details.html): room before the thank-you line when there are no cost figures in
   between (a platform booking), and the two-apartment note kept to the column. */
.pay-summary + .confirmation-message,
.pay-summary + .cancel-warning {
    margin-top: 28px;
}

.pay-summary + .confirmation-group-note {
    max-width: 420px;
    margin: 14px auto 18px;
}

/* Guest Suite > Tourist Tax (manage_tourist_tax.html): the figures, the status line and the
   explanation, each on the payment pages' 420px column under the summary panel. */
.tourist-tax-breakdown {
    margin: 16px auto 24px;
}

.tourist-tax-breakdown + .tourist-tax-breakdown {
    margin-top: -8px;
}

.tourist-tax-status {
    max-width: 420px;
    margin: 0 auto 24px;
    font-size: 0.95rem;
    color: rgb(80, 80, 80);
}

.tourist-tax-status-paid {
    box-sizing: border-box;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(46, 139, 87, 0.1);
    color: rgb(34, 110, 68);
    font-weight: 600;
}

.tourist-tax-note {
    max-width: 420px;
    margin: 24px auto 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgb(120, 120, 120);
}

.tourist-tax-note a {
    color: var(--primary-color);
    font-weight: 600;
}