/**
 * Site map for picking a pitch.
 *
 * The SVG ships without inline fills on the pitches, so state lives here.
 */

.ac-spot-map-wrap {
    margin: 0 0 28px;
}

.ac-spot-map-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 18px;
    margin-bottom: 12px;
}

.ac-spot-map-head h4 {
    margin: 0;
    font-size: 1.05rem;
}

.ac-spot-map-sub {
    margin: 0;
    color: #5d6b60;
    font-size: 0.88rem;
}

.ac-spot-map-hint {
    color: #5d6b60;
    font-size: 0.88rem;
    margin: 0;
}

.ac-spot-map-legend {
    display: flex;
    gap: 16px;
    margin-left: auto;
    font-size: 0.82rem;
    color: #5d6b60;
}

.ac-spot-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ac-spot-map-legend i {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1.5px solid #1B4332;
    background: #fff;
    font-style: normal;
}

.ac-spot-map-legend .is-taken-key {
    background: #E8E6DF;
    border-color: #BDB6A5;
}

.ac-spot-map-legend .is-parking-key {
    background: #DFF3E7;
    border-color: #2E8B57;
}

.ac-spot-map-legend .is-cabin-key {
    background: #F6E7D6;
    border-color: #A8815C;
}

.ac-spot-map-legend .is-booked-key {
    background: #E4E1D8;
    border-color: #B3AA97;
}

.ac-spot-map-legend .is-selected-key {
    background: #52B788;
    border-color: #1B4332;
}

/* The plan is wider than a phone; let it scroll rather than shrink to unusable. */
.ac-spot-map {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e2ded2;
    border-radius: 12px;
    background: #FFFDF8;
    min-height: 120px;
}

.ac-spot-map.is-failed {
    display: none;
}

.ac-spot-map svg {
    display: block;
    width: 100%;
    height: auto;
    min-width: 620px;
}

/* --- pitch states ------------------------------------------------------- */

/* One stroke width in every state. A stroke is centred on the path, so a
   thicker one for hover or selection spills half its width over the pitch
   outline and onto the neighbour's — the boxes stop lining up and the grid
   looks like it is shifting under the cursor. State is carried by fill and by
   stroke colour, neither of which moves an edge. */
.ac-spot .ac-spot-shape {
    fill: #FFFFFF;
    stroke: #1B4332;
    stroke-width: 1.6;
    transition: fill 0.12s ease;
}

.ac-spot .ac-spot-glyph {
    fill: none;
    stroke: #C6D6C9;
    stroke-width: 1.5;
}

.ac-spot .ac-spot-no {
    fill: #1B4332;
    font-family: inherit;
    font-weight: 700;
    opacity: 0.8;
    user-select: none;
}

/* Free and the kind being shown: the pitch carries its type's colour, so the
   answer to "where are the cabins" is the map itself.
   The :not(.is-selected) is load-bearing. Without it these rules carry more
   specificity than the selected ones below and a picked pitch kept its plain
   colour — the click registered everywhere except on the map. */
.ac-spot.is-free.is-match:not(.is-selected)[data-type="parking"] .ac-spot-shape {
    fill: #DFF3E7;
    stroke: #2E8B57;
}

.ac-spot.is-free.is-match:not(.is-selected)[data-type="cabin"] .ac-spot-shape {
    fill: #F6E7D6;
    stroke: #A8815C;
}

.ac-spot.is-free.is-match:not(.is-selected)[data-type="cabin"] .ac-spot-glyph {
    stroke: #C9A883;
}

/* Free, but not the kind on offer right now. Pale rather than grey — grey is
   spoken for by "booked", and the two must not read alike. */
.ac-spot.is-free:not(.is-match) .ac-spot-shape {
    fill: #FCFBF7;
    stroke: #D6DED6;
}

.ac-spot.is-free:not(.is-match) .ac-spot-no,
.ac-spot.is-free:not(.is-match) .ac-spot-glyph {
    opacity: 0.3;
}

/* Taken for the chosen dates. */
.ac-spot.is-booked .ac-spot-shape {
    fill: #E4E1D8;
    stroke: #B3AA97;
}

.ac-spot.is-booked .ac-spot-no,
.ac-spot.is-booked .ac-spot-glyph {
    opacity: 0.4;
}

.ac-spot.is-free.is-match {
    cursor: pointer;
}

/* :not(.is-selected) again: hover outweighs the selected rule, so without it
   a pitch you just clicked keeps the hover colour while the cursor rests on
   it, and the click looks like it did nothing. */
.ac-spot.is-free.is-match:not(.is-selected):hover .ac-spot-shape,
.ac-spot.is-free.is-match:not(.is-selected):focus-visible .ac-spot-shape {
    fill: #BFE8D2;
}

/* A click leaves the group focused but not :focus-visible, so the browser drew
   its own ring — and on an SVG group that ring is a rectangle around the
   bounding box, at an angle to the pitch it belongs to. The pitch says it is
   picked by its fill; it does not need a box around it. Keyboard focus still
   gets a visible ring below. */
.ac-spot:focus {
    outline: none;
}

.ac-spot:focus-visible .ac-spot-shape {
    stroke-dasharray: 4 3;
}

.ac-spot.is-selected .ac-spot-shape {
    fill: #52B788;
}

.ac-spot.is-selected[data-type="cabin"] .ac-spot-shape {
    fill: #C08B55;
}

.ac-spot.is-selected .ac-spot-no {
    fill: #0f2c20;
    opacity: 1;
}

.ac-spot.is-selected .ac-spot-glyph {
    stroke: #1B4332;
    opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
    .ac-spot .ac-spot-shape {
        transition: none;
    }
}

.ac-spot-map-scrollhint {
    display: none;
    margin: 8px 0 0;
    color: #5d6b60;
    font-size: 0.82rem;
    text-align: center;
}

/* Shown only when the plan really does not fit — the booking form sits in a
   narrow column on some templates, so viewport width alone is a bad proxy. */
.ac-spot-map-wrap.is-scrollable .ac-spot-map-scrollhint {
    display: block;
}

/* Before dates are picked nothing is bookable, so the pitches read as part of
   the drawing rather than as buttons that ignore the click. */
.ac-spot.is-pending .ac-spot-shape {
    fill: #F7F5EF;
    stroke: #C3CCC3;
}

.ac-spot.is-pending .ac-spot-no {
    opacity: 0.45;
}

.ac-spot.is-pending .ac-spot-glyph {
    opacity: 0.5;
}

/* --- chosen pitch ------------------------------------------------------- */

.ac-spot-chosen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-top: 14px;
    padding: 14px 18px;
    border: 1px solid #52B788;
    border-radius: 12px;
    background: #F2FBF6;
}

.ac-spot-chosen[hidden] {
    display: none;
}

.ac-spot-chosen-name {
    font-weight: 700;
    font-size: 1.05rem;
}

.ac-spot-chosen-meta {
    color: #5d6b60;
    font-size: 0.9rem;
}

.ac-spot-chosen-price {
    margin-left: auto;
    font-weight: 700;
    font-size: 1.05rem;
    white-space: nowrap;
}

.ac-spot-chosen-price small {
    font-weight: 400;
    color: #5d6b60;
}

/* --- the list, folded away ---------------------------------------------- */


/* --- narrow screens ----------------------------------------------------- */
/* Kept at the end of the file: these override the rules above, and CSS
   settles ties by order, not by intent. */

@media (max-width: 700px) {
    /* Stacked, or the count and the legend run off the right edge. */
    .ac-spot-map-head {
        display: block;
    }

    .ac-spot-map-legend {
        margin: 8px 0 0;
        flex-wrap: wrap;
        gap: 6px 14px;
    }

    .ac-spot-map-hint {
        margin-top: 2px;
    }

    /* The price would otherwise be pushed off the right edge by margin-left. */
    .ac-spot-chosen {
        display: block;
    }

    .ac-spot-chosen-meta,
    .ac-spot-chosen-price {
        display: block;
        margin-left: 0;
    }

    .ac-spot-chosen-price {
        margin-top: 6px;
    }
}

/* --- room to look at it -------------------------------------------------- */


/* The booking form sits in a 640px column inside a 1140px page container, so
   the plan had less than half the width available to it. Centring a wider box
   on the parent needs no knowledge of where that parent starts. */
@media (min-width: 992px) {
    .map-section {
        width: 1140px;
        max-width: calc(100vw - 40px);
        margin-left: 50%;
        transform: translateX(-50%);
    }
}

/* --- the whole site, or the working scale ------------------------------- */
/* A phone shows 291px of a 620px plan, so the default view is a blown-up
   corner. In overview the plan fits the column: the numbers would be 4px there
   and are hidden, but the colours still say where the free pitches are and how
   the site is laid out. A tap brings it to working scale at the point tapped. */

.ac-spot-map-wrap.is-overview .ac-spot-map svg {
    min-width: 100%;
}

.ac-spot-map-wrap.is-overview .ac-spot-no,
.ac-spot-map-wrap.is-overview .ac-spot-glyph {
    display: none;
}

/* Names cannot be read at this scale either — the plan is drawn at 2129px and
   shown at 291, so a 14px label lands at two. Sizing them up to compensate
   would put RESTAURANT across a third of the site. The overview answers where
   and how many; the names come back with the numbers on the tap. */
.ac-spot-map-wrap.is-overview .ac-facility {
    display: none;
}

.ac-spot-map-wrap.is-overview .ac-spot-map {
    cursor: zoom-in;
}

/* Nothing here is taller than the plan itself. */
.ac-spot-map-wrap.is-overview .ac-spot-map {
    min-height: 0;
}

/* The hint belongs to both states: swipe when scrollable, tap when not. */
.ac-spot-map-wrap.is-overview .ac-spot-map-scrollhint {
    display: block;
}