/*
Theme Name: Camping Portal Theme
Description: Public-facing site (search, listings, booking flow) for the camping marketplace. Pairs with the Camping Portal CRM plugin, which owns all data and business logic. This theme should stay a thin presentation layer only.
Version: 0.1.0
Requires PHP: 8.1
Text Domain: camping-portal
*/

/* ==========================================================================
   Design tokens
   Palette grounded in camping: pine forest, tent canvas, campfire ember —
   not the generic cream/terracotta or near-black/neon defaults.
   ========================================================================== */

:root {
    --color-bg: #FFFFFF;         /* page background */
    --color-surface: #FFFFFF;    /* card surfaces — separated by border/shadow, not tint */
    --color-tint: #F4EFE1;       /* light warm tint, used sparingly (tag chip only) */
    --color-pine: #1F3A2E;       /* deep forest — headings, accents */
    --color-ember: #C1502E;      /* campfire rust — CTAs, links on hover */
    --color-ember-dark: #9C3E22;
    --color-moss: #4B7052;       /* secondary accent, links */
    --color-ink: #16241D;        /* near-black, body copy */
    --color-ink-soft: #5B665F;   /* muted body copy */
    --color-line: rgba(22, 36, 29, 0.12);

    --font-display: "Alfa Slab One", "Georgia", serif;
    --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;

    --radius: 6px;
    --max-width: 1160px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
}

h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--color-pine);
    line-height: 1.15;
    margin: 0 0 var(--space-2);
    letter-spacing: 0.01em;
}

a {
    color: var(--color-moss);
    text-decoration: none;
}
a:hover { color: var(--color-ember); }

img { max-width: 100%; display: block; }

.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

:focus-visible {
    outline: 3px solid var(--color-ember);
    outline-offset: 2px;
}

button, input {
    font-family: inherit;
    font-size: inherit;
}

/* ==========================================================================
   Site header
   ========================================================================== */

.site-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.site-header__logo {
    font-family: var(--font-display);
    color: var(--color-pine);
    font-size: 1.25rem;
    letter-spacing: 0.02em;
}
.site-header__logo:hover { color: var(--color-ember); }

.site-header__nav ul {
    list-style: none;
    display: flex;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
}
.site-header__nav a {
    color: var(--color-ink);
    font-size: 0.95rem;
}
.site-header__nav a:hover { color: var(--color-ember); }

.site-header__account a {
    color: var(--color-pine);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    border: 1.5px solid var(--color-pine);
    border-radius: var(--radius);
    padding: 0.4rem 0.85rem;
}
.site-header__account a:hover {
    border-color: var(--color-ember);
    color: var(--color-ember);
}

/* ==========================================================================
   Hero — full-screen photo (set via Customizer) with the search bar
   overlaid as a floating card. Falls back to an illustrated forest
   gradient (no photo required to look intentional on a fresh install).
   ========================================================================== */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* Fallback background when no Customizer image has been set yet */
.hero:not(.hero--has-image) {
    background: linear-gradient(160deg, var(--color-pine) 0%, #2C4E3C 55%, var(--color-moss) 100%);
}
.hero__fallback-art {
    position: absolute;
    inset: 0;
    opacity: 0.14;
    background-image:
        repeating-radial-gradient(circle at 20% 30%, transparent 0, transparent 22px, #fff 23px, transparent 24px),
        repeating-radial-gradient(circle at 80% 65%, transparent 0, transparent 30px, #fff 31px, transparent 32px);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
    width: 100%;
    text-align: center;
    animation: hero-rise 0.6s ease-out both;
}

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero__title {
    color: #FFFFFF;
    font-size: clamp(2rem, 5vw, 3.25rem);
    margin-bottom: var(--space-2);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

.hero__subtitle {
    color: #FFFFFF;
    opacity: 0.92;
    font-size: 1.1rem;
    margin-bottom: var(--space-3);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

/* The overlaid search card — sits on top of the photo, not blended into it */
.hero__search {
    display: flex;
    gap: 0;
    background: #FFFFFF;
    border-radius: var(--radius);
    padding: 6px;
    max-width: 520px;
    margin: 0 auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.hero__search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.85rem 1rem;
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-size: 0.95rem;
}
.hero__search-input:focus { outline: none; }
.hero__search-input::placeholder { color: var(--color-ink-soft); }

.hero__search-date {
    border: none;
    border-left: 1px solid var(--color-line);
    background: transparent;
    padding: 0.85rem 0.75rem;
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-size: 0.85rem;
}
.hero__search-date:focus { outline: none; }

.hero__search-button {
    background: var(--color-ember);
    color: #FFFFFF;
    border: none;
    border-radius: calc(var(--radius) - 2px);
    padding: 0.85rem 1.5rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s ease;
}
.hero__search-button:hover { background: var(--color-ember-dark); }

.hero__admin-hint {
    margin-top: var(--space-2);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
}
.hero__admin-hint a { color: #FFFFFF; text-decoration: underline; }

/* ==========================================================================
   Campsite cards — used on the homepage strip and the search archive
   ========================================================================== */

.featured-campsites,
.campsite-archive {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-4) var(--space-3);
}

.featured-campsites h2 {
    font-size: 1.4rem;
    margin-bottom: var(--space-3);
}

.featured-campsites__grid,
.campsite-archive__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-3);
}

.campsite-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--color-ink);
    box-shadow: 0 1px 3px rgba(22, 36, 29, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.campsite-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(22, 36, 29, 0.14);
    color: var(--color-ink);
}

.campsite-card__image {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--color-moss), var(--color-pine));
}
.campsite-card__image img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.campsite-card__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--color-pine);
    margin: var(--space-2) var(--space-2) var(--space-1);
}

.campsite-card__excerpt {
    margin: 0 var(--space-2) var(--space-2);
    color: var(--color-ink-soft);
    font-size: 0.9rem;
}

/* --- Signature element: the permit-tag / luggage-tag location badge --- */
.campsite-card__region,
.campsite-card__location {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0 var(--space-2) var(--space-2);
    padding: 0.3rem 0.75rem 0.3rem 1.4rem;
    background: var(--color-tint);
    border: 1.5px dashed var(--color-ink);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--color-ink);
}
/* punched hole, like a tag threaded on string */
.campsite-card__region::before,
.campsite-card__location::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border: 1.5px solid var(--color-ink);
    border-radius: 50%;
    background: var(--color-surface);
}

/* ==========================================================================
   Campsite search / archive page
   ========================================================================== */

.campsite-archive__header {
    margin-bottom: var(--space-4);
}

.campsite-archive__header h1 {
    font-size: 1.75rem;
}

.campsite-archive__search {
    display: flex;
    gap: var(--space-1);
    max-width: 480px;
    margin: var(--space-2) 0;
}
.campsite-archive__search input {
    flex: 1;
    padding: 0.65rem 0.9rem;
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-family: var(--font-mono);
    font-size: 0.9rem;
}
.campsite-archive__search input[type="date"] {
    flex: 0 0 auto;
    color: var(--color-ink-soft);
}
.campsite-archive__search input:focus {
    border-color: var(--color-ember);
    outline: none;
}
.campsite-archive__search button {
    background: var(--color-pine);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius);
    padding: 0.65rem 1.25rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
.campsite-archive__search button:hover { background: var(--color-moss); }

.campsite-archive__count {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.campsite-archive__empty {
    padding: var(--space-4);
    text-align: center;
    background: var(--color-tint);
    border: 1.5px dashed var(--color-line);
    border-radius: var(--radius);
    color: var(--color-ink-soft);
}

.pagination,
.nav-links {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

/* ==========================================================================
   Single campsite page
   ========================================================================== */

.campsite-single {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-3);
}

.campsite-single__gallery-main {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 7;
}
.campsite-single__gallery-main img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.campsite-single__gallery-placeholder {
    aspect-ratio: 16 / 7;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--color-moss), var(--color-pine));
}

.campsite-single__gallery-strip {
    display: flex;
    gap: var(--space-1);
    margin-top: var(--space-1);
    overflow-x: auto;
}
.campsite-single__gallery-strip img {
    width: 96px; height: 72px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.campsite-single__body {
    margin-top: var(--space-4);
}

.campsite-single__header h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: var(--space-1);
}

.campsite-single__location {
    color: var(--color-ink-soft);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    margin: 0 0 var(--space-2);
}

.campsite-single__badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0 0 var(--space-3);
    padding: 0;
}
.campsite-single__badges li {
    background: var(--color-tint);
    color: var(--color-ink);
    font-size: 0.8rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
}

.campsite-single__message-owner {
    margin-top: var(--space-2);
    background: none;
    border: 1.5px solid var(--color-pine);
    color: var(--color-pine);
    border-radius: var(--radius);
    padding: 0.6rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.campsite-single__message-owner:hover {
    background: var(--color-pine);
    color: #FFFFFF;
}

.message-enquiry-form {
    margin-top: var(--space-2);
    max-width: 480px;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: var(--space-2);
}
.message-enquiry-form textarea {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    margin-bottom: var(--space-1);
}
.message-enquiry-form button {
    background: var(--color-ember);
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    padding: 0.6rem 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.message-enquiry-form button:hover { background: var(--color-ember-dark); }
.message-enquiry-form__result {
    margin: var(--space-1) 0 0;
    font-size: 0.82rem;
    color: var(--color-ink-soft);
}
.message-enquiry-form__success {
    margin: 0;
    color: var(--color-moss);
    font-weight: 600;
}
.message-enquiry-form__success a { color: var(--color-ember); }

.campsite-single__content {
    max-width: 720px;
    color: var(--color-ink-soft);
    margin-bottom: var(--space-4);
}
.campsite-single__content p { margin: 0 0 var(--space-2); }

.cancellation-policy {
    max-width: 720px;
    background: var(--color-tint);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-4);
}
.cancellation-policy__heading {
    font-size: 1rem;
    margin: 0 0 0.3rem;
    color: var(--color-pine);
}
.cancellation-policy__text {
    margin: 0;
    font-size: 0.88rem;
    color: var(--color-ink);
}

.pitch-types h2 {
    font-size: 1.4rem;
    margin-bottom: var(--space-3);
}
.pitch-types__empty {
    color: var(--color-ink-soft);
}

.pitch-types__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}

.pitch-type-card {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(22, 36, 29, 0.06);
}

.pitch-type-card__image {
    aspect-ratio: 4 / 3;
}
.pitch-type-card__image img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.pitch-type-card__body {
    padding: var(--space-2);
}

.pitch-type-card__body h3 {
    font-size: 1.05rem;
    margin-bottom: 0.2rem;
}

.pitch-type-card__category {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-moss);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-1);
}

.pitch-type-card__desc {
    font-size: 0.88rem;
    color: var(--color-ink-soft);
    margin: 0 0 var(--space-2);
}

.pitch-type-card__price {
    margin: 0 0 var(--space-2);
}
.pitch-type-card__price-amount {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-pine);
}
.pitch-type-card__price-unit {
    font-size: 0.8rem;
    color: var(--color-ink-soft);
}
.pitch-type-card__price-tbc {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--color-ink-soft);
}

.pitch-type-card__no-units {
    font-size: 0.85rem;
    color: var(--color-ink-soft);
    font-style: italic;
}

/* ==========================================================================
   Pricing/availability calendar (heatmap)
   ========================================================================== */

.pricing-calendar-toggle {
    display: block;
    width: 100%;
    background: none;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    padding: 0.5rem;
    margin-bottom: var(--space-1);
    font-size: 0.82rem;
    color: var(--color-moss);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.pricing-calendar-toggle:hover { border-color: var(--color-moss); }

.pricing-calendar {
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: var(--space-2);
    margin-bottom: var(--space-2);
    background: var(--color-surface);
}

.pricing-calendar__loading,
.pricing-calendar__error {
    font-size: 0.85rem;
    color: var(--color-ink-soft);
    text-align: center;
    padding: var(--space-2) 0;
}

.pricing-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-1);
}
.pricing-calendar__month {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--color-pine);
}
.pricing-calendar__nav {
    background: none;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    width: 28px;
    height: 28px;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-ink);
    cursor: pointer;
}
.pricing-calendar__nav:hover { border-color: var(--color-pine); color: var(--color-pine); }

.pricing-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 2px;
}
.pricing-calendar__weekdays span {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--color-ink-soft);
    padding: 0.2rem 0;
}

.pricing-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.pricing-calendar__day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border: none;
    border-radius: 4px;
    font-family: var(--font-mono);
    cursor: pointer;
    padding: 2px;
}
.pricing-calendar__day--empty {
    background: none;
    color: var(--color-line);
    cursor: default;
}
.pricing-calendar__day-number {
    font-size: 0.7rem;
    line-height: 1;
}
.pricing-calendar__day-price {
    font-size: 0.62rem;
    line-height: 1;
    opacity: 0.9;
}

.pricing-calendar__day--cheap {
    background: var(--color-moss);
    color: #FFFFFF;
}
.pricing-calendar__day--standard {
    background: var(--color-tint);
    color: var(--color-ink);
    border: 1px solid var(--color-line);
}
.pricing-calendar__day--peak {
    background: var(--color-ember);
    color: #FFFFFF;
}
.pricing-calendar__day--full {
    background: none;
    border: 1px solid var(--color-line);
    color: var(--color-ink-soft);
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: 0.6;
}
.pricing-calendar__day--low:not(.pricing-calendar__day--full)::after {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    margin-top: 1px;
}
.pricing-calendar__day--selected {
    outline: 2px solid var(--color-pine);
    outline-offset: -2px;
}
.pricing-calendar__day:not(.pricing-calendar__day--full):not(.pricing-calendar__day--empty):hover {
    outline: 2px solid var(--color-ink);
    outline-offset: -2px;
}
.pricing-calendar__day:disabled { cursor: not-allowed; }

.pricing-calendar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: 0.7rem;
    color: var(--color-ink-soft);
}
.pricing-calendar__legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.pricing-calendar__swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
.pricing-calendar__swatch--cheap { background: var(--color-moss); }
.pricing-calendar__swatch--standard { background: var(--color-tint); border: 1px solid var(--color-line); }
.pricing-calendar__swatch--peak { background: var(--color-ember); }
.pricing-calendar__swatch--full { background: none; border: 1px solid var(--color-line); }

.pricing-calendar__selection {
    margin: var(--space-2) 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-pine);
}

.availability-widget {
    border-top: 1px solid var(--color-line);
    padding-top: var(--space-2);
    margin-top: var(--space-1);
}
.availability-widget__dates {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
}
.availability-widget__dates label {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
    color: var(--color-ink-soft);
    gap: 2px;
}
.availability-widget__dates input {
    padding: 0.4rem;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}
.availability-widget button {
    width: 100%;
    background: var(--color-pine);
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    padding: 0.55rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
.availability-widget button:hover { background: var(--color-moss); }

.availability-widget__result {
    margin: var(--space-1) 0 0;
    font-size: 0.82rem;
    min-height: 1.2em;
}
.availability-widget__result--available { color: var(--color-moss); font-weight: 600; }
.availability-widget__result--unavailable { color: var(--color-ember); font-weight: 600; }
.availability-widget__result--error { color: var(--color-ink-soft); font-style: italic; }

.availability-widget__book-button {
    width: 100%;
    margin-top: var(--space-1);
    background: var(--color-ember);
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    padding: 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.availability-widget__book-button:hover { background: var(--color-ember-dark); }
.availability-widget__book-button:disabled { opacity: 0.6; cursor: default; }

.availability-widget__alert-button {
    width: 100%;
    margin-top: var(--space-1);
    background: none;
    border: 1.5px solid var(--color-pine);
    color: var(--color-pine);
    border-radius: 4px;
    padding: 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.availability-widget__alert-button:hover { background: var(--color-pine); color: #FFFFFF; }
.availability-widget__alert-button:disabled { opacity: 0.6; cursor: default; }

/* ==========================================================================
   Checkout page
   ========================================================================== */

.checkout-page__inner {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-3);
    min-height: 50vh;
}

.checkout-page__loading {
    color: var(--color-ink-soft);
    text-align: center;
}

.checkout-summary {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: var(--space-3);
    box-shadow: 0 1px 3px rgba(22, 36, 29, 0.06);
}
.checkout-summary h1 {
    font-size: 1.4rem;
    margin-bottom: var(--space-3);
}

.checkout-summary__details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem var(--space-2);
    margin: 0 0 var(--space-3);
}
.checkout-summary__details dt {
    color: var(--color-ink-soft);
    font-size: 0.85rem;
}
.checkout-summary__details dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    text-align: right;
}
.checkout-summary__total {
    font-weight: 700;
    color: var(--color-pine);
    font-size: 1.1rem !important;
}

.checkout-page__test-notice {
    background: var(--color-tint);
    border: 1px dashed var(--color-line);
    border-radius: 4px;
    padding: 0.6rem 0.85rem;
    font-size: 0.8rem;
    color: var(--color-ink-soft);
    margin-bottom: var(--space-2);
}

.checkout-page__confirm-button {
    width: 100%;
    background: var(--color-ember);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius);
    padding: 0.85rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.checkout-page__confirm-button:hover { background: var(--color-ember-dark); }
.checkout-page__confirm-button:disabled { opacity: 0.6; cursor: default; }

.checkout-page__result {
    margin-top: var(--space-1);
    font-size: 0.85rem;
    color: var(--color-ember);
    min-height: 1.2em;
}

.checkout-page__success {
    background: var(--color-tint);
    border-radius: var(--radius);
    padding: var(--space-2);
    text-align: center;
    color: var(--color-pine);
    font-weight: 600;
}

.checkout-page__error {
    text-align: center;
    color: var(--color-ink-soft);
}
.checkout-page__error a {
    display: inline-block;
    margin-top: var(--space-2);
}

/* ==========================================================================
   Guest Portal — My Bookings (rendered by the CRM plugin's portal-app.js
   into #camping-portal-app; styled here since the theme owns all visual
   presentation, even for plugin-rendered markup)
   ========================================================================== */

.guest-portal,
.owner-portal-placeholder {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-3);
}

.guest-portal h1 {
    font-size: 1.75rem;
    margin-bottom: var(--space-3);
}

.guest-portal__loading,
.guest-portal__error {
    color: var(--color-ink-soft);
}

.guest-portal__empty {
    background: var(--color-tint);
    border-radius: var(--radius);
    padding: var(--space-3);
    color: var(--color-ink-soft);
}
.guest-portal__empty a { color: var(--color-ember); font-weight: 600; }

.guest-portal__section {
    margin-bottom: var(--space-4);
}
.guest-portal__section h2 {
    font-size: 1.1rem;
    color: var(--color-ink);
    margin-bottom: var(--space-2);
}

.booking-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.booking-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
    box-shadow: 0 1px 3px rgba(22, 36, 29, 0.06);
}
.booking-card--cancelled { opacity: 0.6; }

.booking-card__title {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-pine);
    margin: 0 0 0.2rem;
}
.booking-card__pitch {
    margin: 0 0 0.2rem;
    font-size: 0.85rem;
    color: var(--color-ink-soft);
}
.booking-card__dates {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-ink);
}
.booking-card__nights {
    color: var(--color-ink-soft);
}

.booking-card__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    flex-shrink: 0;
}

.booking-card__status {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--color-tint);
    color: var(--color-ink-soft);
}
.booking-card__status--confirmed {
    background: rgba(75, 112, 82, 0.15);
    color: var(--color-moss);
}
.booking-card__status--pending_payment {
    background: rgba(193, 80, 46, 0.12);
    color: var(--color-ember);
}

.booking-card__price {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--color-pine);
}

.booking-card__action {
    font-size: 0.8rem;
    color: var(--color-ember);
    font-weight: 600;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}
.booking-card__action--pay {
    background: var(--color-ember);
    color: #FFFFFF;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
}
.booking-card__action--pay:hover { background: var(--color-ember-dark); color: #FFFFFF; }

.booking-card__action--cancel {
    background: none;
    border: 1px solid var(--color-line);
    color: var(--color-ink-soft);
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
}
.booking-card__action--cancel:hover {
    border-color: var(--color-ember);
    color: var(--color-ember);
}
.booking-card__action--cancel:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ==========================================================================
   Availability alerts — same card shape as booking-card, since they're
   structurally identical (a title, some details, a status, an action);
   distinct classes rather than reusing .booking-card since the semantics
   (watching/notified/cancelled vs. pending/confirmed/cancelled) differ
   enough that sharing the class would blur what's actually being shown.
   ========================================================================== */

.alert-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
    box-shadow: 0 1px 3px rgba(22, 36, 29, 0.06);
}
.alert-card--cancelled { opacity: 0.6; }
.alert-card--notified { border-color: var(--color-moss); background: var(--color-tint); }

.alert-card__title {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-pine);
    margin: 0 0 0.2rem;
}
.alert-card__pitch {
    margin: 0 0 0.2rem;
    font-size: 0.85rem;
    color: var(--color-ink-soft);
}
.alert-card__dates {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-ink);
}

.alert-card__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    flex-shrink: 0;
}

.alert-card__status {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--color-tint);
    color: var(--color-ink-soft);
}
.alert-card__status--notified {
    background: rgba(75, 112, 82, 0.15);
    color: var(--color-moss);
}
.alert-card__status--active {
    background: rgba(31, 58, 46, 0.1);
    color: var(--color-pine);
}

.alert-card__action {
    font-size: 0.8rem;
    color: var(--color-ink-soft);
    font-weight: 600;
    background: none;
    border: 1px solid var(--color-line);
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
}
.alert-card__action:hover { border-color: var(--color-ember); color: var(--color-ember); }
.alert-card__action--book {
    background: var(--color-moss);
    color: #FFFFFF;
    border: none;
}
.alert-card__action--book:hover { background: var(--color-pine); color: #FFFFFF; }

.owner-portal-placeholder {
    text-align: center;
    color: var(--color-ink-soft);
}
.owner-portal-placeholder h1 {
    color: var(--color-pine);
}

/* ==========================================================================
   Owner Portal
   ========================================================================== */

.owner-portal {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-3);
}
.owner-portal h1 {
    font-size: 1.75rem;
    margin-bottom: var(--space-3);
}

.owner-portal__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    border-bottom: 1px solid var(--color-line);
    margin-bottom: var(--space-3);
    padding-bottom: 0;
}
.owner-portal__tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.6rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-ink-soft);
    cursor: pointer;
}
.owner-portal__tab:hover { color: var(--color-ink); }
.owner-portal__tab--active {
    color: var(--color-pine);
    border-bottom-color: var(--color-ember);
    font-weight: 600;
}

.owner-portal__loading,
.owner-portal__error {
    color: var(--color-ink-soft);
}
.owner-portal__empty {
    background: var(--color-tint);
    border-radius: var(--radius);
    padding: var(--space-3);
    color: var(--color-ink-soft);
}
.owner-portal__note {
    margin-top: var(--space-2);
    font-size: 0.8rem;
    color: var(--color-ink-soft);
    font-style: italic;
}

.owner-dashboard__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.owner-stat {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: var(--space-2);
    text-align: center;
}
.owner-stat__value {
    display: block;
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-pine);
}
.owner-stat__label {
    font-size: 0.78rem;
    color: var(--color-ink-soft);
}

.owner-dashboard h2,
.pitch-type-manager h2 {
    font-size: 1.15rem;
    margin: var(--space-2) 0;
}

.owner-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 0.88rem;
}
.owner-table th,
.owner-table td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-line);
}
.owner-table th {
    background: var(--color-tint);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink-soft);
}
.owner-table tr:last-child td { border-bottom: none; }
.owner-table__input {
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}
.owner-table__save,
.owner-table__delete,
.owner-table__pricing {
    font-size: 0.78rem;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}
.owner-table__save { background: var(--color-moss); color: #FFFFFF; }
.owner-table__delete { background: transparent; color: var(--color-ember); border: 1px solid var(--color-ember); }
.owner-table__pricing { background: transparent; color: var(--color-pine); border: 1px solid var(--color-pine); }
.owner-table__pricing:hover { background: var(--color-pine); color: #FFFFFF; }

.payout-status {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--color-tint);
    color: var(--color-ink-soft);
}
.payout-status--pending { background: rgba(193, 80, 46, 0.12); color: var(--color-ember); }
.payout-status--paid { background: rgba(75, 112, 82, 0.15); color: var(--color-moss); }

.pitch-type-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: var(--space-3);
    margin-top: var(--space-2);
    align-items: end;
}
.pitch-type-form label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--color-ink-soft);
}
.pitch-type-form input,
.pitch-type-form select {
    padding: 0.5rem;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.9rem;
}
.pitch-type-form button {
    background: var(--color-pine);
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    padding: 0.6rem;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.15s ease;
}
.pitch-type-form button:hover { background: var(--color-moss); }
.pitch-type-form__result {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-ember);
}

.campsite-manager h2 {
    font-size: 1.15rem;
    margin: var(--space-3) 0 var(--space-2);
}

.pricing-panel {
    background: var(--color-tint);
    border: 1px dashed var(--color-line);
    border-radius: var(--radius);
    padding: var(--space-3);
    margin: var(--space-3) 0;
}
.pricing-panel h3 {
    font-size: 1.05rem;
    margin-bottom: 0.3rem;
}
.pricing-panel .owner-table {
    margin-bottom: var(--space-2);
}
.pricing-panel .pitch-type-form {
    background: var(--color-surface);
}
.pricing-panel__close {
    margin-top: var(--space-2);
    background: none;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    color: var(--color-ink-soft);
    cursor: pointer;
}
.pricing-panel__close:hover { border-color: var(--color-ink-soft); }

.cancellation-policy-preview {
    margin: var(--space-2) 0 0;
    padding: var(--space-2);
    background: var(--color-tint);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--color-ink);
}

/* ==========================================================================
   Messaging — thread list, conversation detail, bubbles, reply/compose
   ========================================================================== */

.message-thread-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.message-thread-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    text-align: left;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: var(--space-2);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease;
}
.message-thread-item:hover { border-color: var(--color-pine); }
.message-thread-item--unread { border-color: var(--color-ember); background: var(--color-tint); }

.message-thread-item__main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.message-thread-item__name {
    font-weight: 600;
    color: var(--color-pine);
    font-size: 0.95rem;
}
.message-thread-item__badge {
    display: inline-block;
    background: var(--color-ember);
    color: #FFFFFF;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    margin-left: 0.3rem;
}
.message-thread-item__campsite {
    font-size: 0.78rem;
    color: var(--color-ink-soft);
}
.message-thread-item__preview {
    font-size: 0.85rem;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 420px;
}
.message-thread-item__time {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-ink-soft);
}

.message-thread-detail__back {
    background: none;
    border: none;
    color: var(--color-moss);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    margin-bottom: var(--space-2);
}
.message-thread-detail__back:hover { color: var(--color-ember); }
.message-thread-detail h2 {
    font-size: 1.2rem;
    margin-bottom: 0.1rem;
}
.message-thread-detail__campsite {
    font-size: 0.8rem;
    color: var(--color-ink-soft);
    margin: 0 0 var(--space-3);
}

.message-bubble-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 420px;
    overflow-y: auto;
    padding: var(--space-2);
    background: var(--color-tint);
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
}

.message-bubble {
    max-width: 75%;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    font-size: 0.9rem;
}
.message-bubble--theirs {
    align-self: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    color: var(--color-ink);
}
.message-bubble--mine {
    align-self: flex-end;
    background: var(--color-pine);
    color: #FFFFFF;
}
.message-bubble__body {
    margin: 0 0 0.25rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.message-bubble__time {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    opacity: 0.7;
}

/* Subtle arrival cue for messages that appear via polling (a new reply,
   or your own message right after sending) — not used on initial load,
   only when appendBubble() adds one to an already-open conversation. */
.message-bubble--incoming {
    animation: message-bubble-in 0.35s ease-out;
}
@keyframes message-bubble-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .message-bubble--incoming { animation: none; }
}

.message-reply-form textarea {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--color-line);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    margin-bottom: var(--space-1);
}
.message-reply-form button {
    background: var(--color-ember);
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    padding: 0.55rem 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.message-reply-form button:hover { background: var(--color-ember-dark); }
.message-reply-form button:disabled { opacity: 0.6; cursor: default; }
.message-reply-form__result {
    margin: var(--space-1) 0 0;
    font-size: 0.82rem;
    color: var(--color-ink-soft);
}

@media (max-width: 560px) {
    .booking-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .booking-card__side {
        align-items: flex-start;
        width: 100%;
    }
    .alert-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .alert-card__side {
        align-items: flex-start;
        width: 100%;
    }
    .message-thread-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .message-thread-item__preview {
        max-width: 100%;
    }
    .message-bubble {
        max-width: 90%;
    }
    .pricing-calendar__day-price {
        font-size: 0.55rem;
    }
    .pricing-calendar__legend {
        font-size: 0.65rem;
        gap: var(--space-1);
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background: var(--color-pine);
    color: #FFFFFF;
    margin-top: var(--space-5);
}
.site-footer__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 0.85rem;
}
.site-footer nav ul {
    list-style: none;
    display: flex;
    gap: var(--space-2);
    margin: 0; padding: 0;
}
.site-footer a { color: #FFFFFF; }
.site-footer a:hover { color: var(--color-ember); }
.site-footer__copyright {
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-family: var(--font-mono);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
    .site-header__inner { flex-wrap: wrap; }
    .site-header__nav { order: 3; width: 100%; }
    .hero__search { flex-direction: column; }
    .hero__search-date { border-left: none; border-top: 1px solid var(--color-line); }
    .hero__search-button { margin-top: 4px; }
}