/* =========================================================
   Public Parks — listing (/parks/) + single (/parks/{slug}/)
   -----------------------------------------------------------------
   Own dedicated stylesheet, deliberately NOT shared with
   communities-public-style.css — sharing it would couple park page
   styling to community page styling (a change meant for one could
   silently affect the other). Park markup already reuses several
   .park-public-* classes as-is (e.g. .park-public-wrap/-hero/
   -card/-section), so the two files can drift independently without
   any renaming. Enqueued conditionally, see
   includes/park/park-public/park-public-routes.php.
   ========================================================= */

/* Used by the "Suggest a Park" popup (.park-suggest-*) — 'Comfortaa'
   is already referenced as a design-system font token in
   insiders-token.css (--font-heading) but was never actually loaded
   there, so it silently fell back to system-ui everywhere it was
   used. Loaded here the same way that file loads Nunito. */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600;700;800&display=swap');

/* Defined at :root, not on .park-public-wrap — the subheader
   (.park-public-subheader) has to work standalone on an arbitrary
   Bricks-built page via [community_shop_subheader], entirely outside
   .park-public-wrap, and every var(--cbp-*) reference inside it
   would otherwise silently resolve to nothing (same class of bug as
   --cb-* only being defined inside .cb-shell, and --cb-* only inside
   .community-admin-wrap, both fixed earlier). */
:root {
    /* Aliased to the shared tokens (pickleheart-tokens.css, enqueued as a
       dependency — see park-public-routes.php) rather than redeclared,
       so this page's palette can't drift from the rest of the site's
       copies of the same colors again — same fix already applied to
       communities-public-style.css's --cbp-* block, community-style.css's
       --cb-* block, and community-admin-style.css's --ca-* block.
       --cbp-radius, --cbp-coral-dark and --cbp-yellow-soft have no
       shared equivalent and stay locally defined; --cbp-coral-soft and
       --cbp-sage-soft are now washes of the aliased solid colors instead
       of their own hardcoded rgba(). */
    --cbp-primary: var(--foreground-primary);
    --cbp-primary-dark: var(--foreground-primary-hover);
    --cbp-primary-soft: var(--pkl-navy-500-a08);
    --cbp-coral: var(--pkl-coral-300);
    --cbp-coral-dark: #d97572;
    --cbp-coral-soft: color-mix(in srgb, var(--pkl-coral-300) 14%, transparent);
    --cbp-sage: var(--pkl-sage);
    --cbp-sage-soft: color-mix(in srgb, var(--pkl-sage) 16%, transparent);
    --cbp-yellow-soft: #FBF3D3;
    --cbp-border: var(--border-neutral-weak);
    --cbp-text: var(--text-neutral-strong);
    --cbp-text-muted: var(--text-neutral-weak);
    --cbp-radius: 18px;
}

.park-public-wrap,
.park-public-wrap *,
.park-public-wrap *::before,
.park-public-wrap *::after {
    box-sizing: border-box;
}

/* The full-bleed background below uses 100vw to escape .community-
   public-wrap's max-width — but 100vw includes the scrollbar's own
   width, so it renders slightly wider than the visible viewport and
   forces a horizontal scrollbar. Safe to scope here since this
   stylesheet only loads on these two pages (see header comment). */
body { overflow-x: hidden; }

.park-public-wrap {
    position: relative;

    /* !important because the theme has its own `main { ... }` width/margin
       rule that was fighting this one — with both applying at once, the
       browser was landing on a wrong effective width; !important is what
       actually makes ours win outright instead of the two half-applying. */
    width: 100% !important;
    max-width: 1100px !important; /* matches .brxe-container — the site's header/footer width */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 48px 24px 90px;
    color: var(--cbp-text);
}
/* Single park page only — tighter top space between the subheader and
   the hero than the listing page uses. Scoped here (not a blanket
   .park-public-wrap change) so the listing page's own top spacing is
   untouched. */
.park-public-wrap.park-public-single { padding-top: 16px; }

/* Full-bleed background — listing page only, not the single page —
   breaks out of .park-public-wrap's 1100px max-width to span the
   full viewport, while the wrap's own content (page header, grid) stays
   at the constrained width. Standard "full-bleed inside a centered
   container" trick: 100vw wide, centered via left:50% +
   translateX(-50%), negative z-index so it sits behind the wrap's
   normal-flow children without needing to touch their own stacking. */
.park-public-listing::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    z-index: -1;
    background-image: url(https://pickleheart.org/wp-content/uploads/2026/07/Artboard-3.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.park-public-page-header {
    position: relative;
    margin-bottom: 40px;
    text-align: center;
}
.park-public-page-header-cta {
    position: absolute;
    top: 0;
    right: 0;
}
.park-suggest-btn { border: none; cursor: pointer; font-family: inherit; }
@media (max-width: 680px) {
    .park-public-page-header-cta { position: static; margin-bottom: 16px; }
}
/* Values below are read straight out of the legacy Bricks template's
   own global classes (title2 / heading2 / basetext) — see the comment
   at the top of communities-public-listing.php. */
.park-public-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 400;
    color: var(--cbp-text);
    margin-bottom: 10px;
}
.park-public-eyebrow img { display: block; width: 40px; height: 40px; object-fit: contain; }
.park-public-title {
    align-self: center;
    margin: 0 auto 20px;
    font-family: winter Draw;
    font-weight: 400;
    font-size: 60px;
    line-height: 1.25;
    text-align: center;
    max-width: 620px;
}
.park-public-page-sub { margin: 0 auto; font-size: 26px; line-height: 30px; color: var(--cbp-text-muted); max-width: 560px; }
@media (max-width: 680px) {
    .park-public-eyebrow { font-size: 14px; }
    .park-public-eyebrow img { width: 30px; height: 30px; }
    .park-public-title { font-size: 24px; }
    .park-public-page-sub { font-size: 16px; line-height: 20px; }
}
.park-public-empty { color: var(--cbp-text-muted); }

/* Sub-header — sits directly under the site's own main header, full
   viewport width (same "full-bleed inside a centered container" trick
   as .park-public-listing::before above), with its inner content
   constrained to the same 1100px column as everything else on the
   page. Height matches the site's own header exactly (see the
   height/padding values below — pulled from the real header, not
   guessed). */
.park-public-subheader {
    width: 100%;
    background: #FAF3EB;
}
.park-public-subheader-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    /* Matches the site's own #brx-header, which has no explicit
       height/padding rule anywhere in its CSS — its height is purely
       content-driven (logo + nav row), currently rendering at 73px on
       desktop. There's no fixed value to hook a var() to, so this is
       hardcoded to the same number rather than left to its own
       (differently-sized) content to coincidentally match. */
    height: 73px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}
.park-public-subheader-logo { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; text-decoration: none; }
.park-public-subheader-logo img { display: block; height: 44px; width: auto; object-fit: contain; }
.park-public-subheader-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--cbp-text);
    white-space: nowrap;
}
.park-public-subheader-nav { display: flex; align-items: center; gap: 32px; }
.park-public-subheader-nav a {
    font-size: 15px;
    font-weight: 700;
    color: var(--cbp-text);
    text-decoration: none;
}
.park-public-subheader-nav a:hover { color: var(--cbp-primary); }
@media (max-width: 560px) {
    .park-public-subheader-inner { height: 70px; }
    .park-public-subheader-logo img { height: 34px; }
    .park-public-subheader-name { font-size: 13.5px; }
    .park-public-subheader-nav { gap: 18px; }
    .park-public-subheader-nav a { font-size: 13.5px; }
}
.park-public-preview-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: auto;
    white-space: nowrap;
    background: rgba(255, 243, 205, 0.9);
    backdrop-filter: blur(4px);
    color: #7a5c00;
    border: 1px solid rgba(240, 215, 140, 0.9);
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
@media (max-width: 480px) {
    .park-public-preview-banner { white-space: normal; text-align: center; max-width: 90vw; }
}

/* ---------------------------------------------------------
   Listing — a card per community, 2 per row. The footer is a flex row
   of actions on purpose: a future "Shop" button for eligible
   communities drops in next to "View Community" without any layout
   changes.
   --------------------------------------------------------- */
/* Official Community / Active Community — one card in full view at a
   time, not a grid, since each of the two relationships can hold
   several communities. overflow is intentionally visible (not hidden)
   — a hard horizontal clip cuts off the card's own drop-shadow, and a
   sliver of the next card peeking in at the edge is an accepted
   trade-off for keeping that shadow intact. */
.park-related-community-slider {
    position: relative;
    padding: 30px 80px;
    margin-bottom: 20px;
}
.park-related-community-slider-viewport {
    overflow: visible;
}
.park-related-community-slider-track {
    display: flex;
    transition: transform 0.3s ease;
}
.park-related-community-slide {
    /* flex-basis 100% (not a max-width on this element) — a max-width
       here would shrink the slide below the track's full width, leaving
       room for the next slide to sit alongside it in the same row
       instead of being pushed fully off-screen.

       The horizontal padding gives the card's own drop-shadow
       (.park-related-community-card-shape's filter: drop-shadow, ~22px
       blur + 10px offset) room to render, and doubles as the visual
       gap before the next card's peeking edge, since overflow is
       visible here rather than clipped. */
    flex: 0 0 100%;
    min-width: 0;
    display: flex;
    justify-content: center;
    padding: 0 32px;
}
.park-related-community-slide .park-related-community-card {
    width: 100%;
}
.park-related-community-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.16);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.park-related-community-slider-arrow--prev { left: 0; }
.park-related-community-slider-arrow--next { right: 0; }
.park-related-community-slider-arrow:hover { box-shadow: 0 6px 18px rgba(16, 24, 40, 0.24); }
.park-related-community-slider-arrow[hidden] { display: none; }
@media (max-width: 680px) {
    .park-related-community-slider { padding: 20px 44px; }
    .park-related-community-slider-arrow { width: 32px; height: 32px; font-size: 14px; }
}

/* Card — ported 1:1 from the legacy Bricks template (post 4276), whose
   "card" is a query-loop block with a Bricks "shape divider" (an
   uploaded SVG, template-assets/brand/card-shape.svg) as
   its actual visible silhouette, not a CSS-drawn shape. All values below
   (shadow/radius/padding/gaps/sizes/gradient) are copied from that
   template's element settings + global classes, not eyeballed. */
.park-related-community-card {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    margin-top: 56px;
}

/* This is an <img>, not a CSS background — its fill is white (same as
   the page), so the only thing that makes the wavy card silhouette
   visible is its shadow. box-shadow can't do that (it shadows the
   element's rectangular box, ignoring the SVG's actual alpha shape);
   filter: drop-shadow() does — it follows the rendered pixels, so the
   shadow itself traces the wave outline. No spread-radius equivalent
   exists for drop-shadow, so the blur is upsized to compensate. */
.park-related-community-card-shape {
    display: block;
    position: absolute;
    top: -56px;
    left: 0;
    width: 100%;
    height: calc(100% + 56px);
    z-index: 0;
    filter: drop-shadow(10px -6px 22px rgba(16, 24, 40, 0.16));
    pointer-events: none;
}

.park-related-community-card-inner {
    position: relative;
    z-index: 1;
    display: block;
    padding: 5px 20px 20px;
}

.park-related-community-card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}
.park-related-community-card-logo,
.park-related-community-card-logo--placeholder {
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: 50px;
    object-fit: contain;
}
.park-related-community-card-name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cbp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.park-related-community-card-photo {
    position: relative;
    display: block;
    width: 100%;
    height: 300px;
    border-radius: 20px;
    background: var(--cbp-sage-soft);
    overflow: hidden;
    margin-top: 20px;
}
.park-related-community-card-photo > img:not(.park-related-community-card-photo-placeholder) {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.park-related-community-card-photo-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45%;
    height: auto;
    transform: translate(-50%, -50%) rotate(-8deg);
    opacity: 0.9;
}

.park-related-community-card-footer { display: block; margin-top: 40px; }
.park-related-community-card-location {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--cbp-text-muted);
}
.park-related-community-card-location img { display: block; width: 50px; height: 50px; object-fit: contain; flex: 0 0 auto; }
.park-related-community-card-footer-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}
.park-related-community-card-members {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--cbp-text-muted);
}
.park-related-community-card-members img { display: block; width: 50px; height: 50px; object-fit: contain; flex: 0 0 auto; }
.park-related-community-card-btn-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.park-public-btn,
.park-related-community-card-shop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 2em;
    border-radius: 10px;
    background: var(--cbp-primary);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    text-transform: capitalize;
    white-space: nowrap;
    transition: box-shadow 0.15s ease;
}
.park-related-community-card-shop-btn {
    gap: 8px;
    background: #F1E6C6;
    color: #3A3A3A;
    padding: 0.5em 1em;
}
.park-related-community-card-shop-btn img { display: block; width: 20px; height: 20px; flex: 0 0 auto; }
.park-public-btn:hover,
.park-related-community-card-shop-btn:hover { box-shadow: none; }
.park-public-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* "Generate Image with KIMCHI" loading state — Suggest a Park's own copy
   of the shared style community-style.css defines for the same feature
   elsewhere (Event/Community/Park's real edit forms) — this popup only
   loads park-public-style.css, not community-style.css, so it needs its
   own copy rather than relying on that one. Kept in sync manually if the
   shared version ever changes. */
.pickleheart-image-kimchi-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--cbp-primary-soft);
    border-radius: 10px;
    color: var(--cbp-primary);
    font-size: 13px;
    font-weight: 600;
}
.pickleheart-image-kimchi-loading[hidden] { display: none; }
.pickleheart-image-kimchi-spinner { flex: 0 0 auto; animation: pickleheartImageKimchiSpin 1s linear infinite; }
@keyframes pickleheartImageKimchiSpin { to { transform: rotate(360deg); } }

/* Breathing room above the "Generate Image with KIMCHI" button — same
   fix as .pickleheart-image-kimchi-btn in community-style.css, kept in
   sync manually since this popup only loads this stylesheet. */
.pickleheart-image-kimchi-btn { display: inline-flex; margin-top: 12px; }

/* ---------------------------------------------------------
   Single community page.
   --------------------------------------------------------- */
/* Hero — ported from the Bricks template: name/description on one
   side, the photo (sitting on the same wavy card-shape.svg used on the
   listing cards, drop-shadow again for the same reason) on the other. */
.park-public-hero {
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 0 0 80px;
    padding: 12px 0;
    background: #fff;
}
@media (max-width: 720px) {
    .park-public-hero { flex-direction: column; margin: 0 0 40px; padding: 0; }
}

.park-public-hero-info { flex: 0 1 40%; min-width: 0; }
/* Overrides .park-public-title's listing-page styling (centered,
   60px) — the hero name on the single page is left-aligned and smaller. */
.park-public-hero-info .park-public-title {
    align-self: auto;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    font-family: winter Draw;
    font-weight: 400;
    font-size: 24px;
    text-align: left;
    max-width: none;
}
.park-public-desc { margin: 20px 0 0; font-size: 22px; line-height: 26px; color: var(--cbp-text); }
@media (max-width: 720px) {
    .park-public-desc { font-size: 12px; line-height: 16px; }
}

/* Park single page hero photo — plain rounded rectangle, no
   card-shape.svg wavy silhouette (unlike the community hero), matching
   the park listing card's own plain photo style (white padding around
   the image, image itself also rounded). */
.park-public-hero-photo-wrap {
    position: relative;
    flex: 0 1 60%;
    min-width: 0;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
    padding: 26px;
}
.park-public-hero-photo {
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    overflow: hidden;
    background: var(--cbp-sage-soft);
}
.park-public-hero-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.park-public-hero-photo-placeholder { object-fit: contain !important; padding: 40px; }

/* Park single page "Park Information" panel — full-bleed cream
   background (same 100vw trick as the listing page's background — see
   the comment on .park-public-listing::before) while the title/grid
   inside stay at the normal content width.
   Flexbox with wrap + justify-content:center, NOT CSS grid — with a
   fixed 7-field set (Court count/Hours/Accessibility/Surface/Lights/
   Amenities/Directions), any number of them can be missing depending on
   what the park owner filled in, so however many items land in the last
   (incomplete) row need to center themselves automatically instead of
   sticking to the grid's left edge — flexbox does this for free; a grid
   would need a different special-cased rule for every possible leftover
   count (1, 2, or any other number). */
.park-public-info-card {
    position: relative;
    padding: 40px 0;
    margin: 0 0 80px;
}
.park-public-info-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    z-index: -1;
    background: #FAF3EB;
}
.park-public-info-card-title {
    margin: 0 0 26px;
    font-family: winter Draw;
    font-weight: 400;
    font-size: 28px;
    color: var(--cbp-text);
}
.park-public-info-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 32px;
    column-gap: 24px;
}
.park-public-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    /* 3 per row: each item's share of the row width minus its portion of
       the two 24px column gaps between the 3 items. */
    flex: 0 0 calc((100% - 48px) / 3);
    max-width: calc((100% - 48px) / 3);
}
/* When a park has exactly 7 (or 4) visible fields, the last one ends up
   alone in the final row — park_public_render_single_page() flags that
   specific item with this modifier so it visually spans 2 columns'
   worth of width (the normal 1-column width plus one column-gap plus
   another column's width) instead of sitting narrow at 1/3, staying
   centered via .park-public-info-grid's justify-content: center. */
.park-public-info-item--solo {
    flex-basis: calc((100% - 48px) / 3 * 2 + 24px);
    max-width: calc((100% - 48px) / 3 * 2 + 24px);
}
@media (max-width: 680px) {
    .park-public-info-item,
    .park-public-info-item--solo { flex-basis: 100%; max-width: 100%; }
}
.park-public-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    font-size: 28px;
    line-height: 1;
}
img.park-public-info-icon { width: 38px; height: 38px; object-fit: contain; }
.park-public-info-text { font-size: 15px; line-height: 1.5; color: var(--cbp-text); min-width: 0; }

.park-public-hero-map-btn { display: inline-flex; margin-top: 20px; }

.park-public-section { margin-bottom: 40px; }
/* Section headings — the pink brush-stroke background from the legacy
   template, white text over it. */
.park-public-section-title {
    display: table;
    margin: 0 auto 40px;
    padding: 10px 85px;
    background-image: url("brand/bg-brush.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: #fff;
    font-family: winter Draw;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
}
.park-public-section > *:not(.park-public-section-title) {
    font-size: 26px;
    line-height: 30px;
    color: var(--cbp-text);
}
@media (max-width: 680px) {
    .park-public-section-title { padding: 16px 20px; background-size: 100% 100%; font-size: 18px; white-space: normal; }
    .park-public-section > *:not(.park-public-section-title) { font-size: 16px; line-height: 20px; }
}

/* Home Parks — a horizontally-snapping slider showing 2 cards per
   "page"; extra parks scroll into view instead of stacking the page
   taller. Same banner/logo visual language as the listing cards. */
.park-public-parks-slider-wrap { position: relative; padding: 0 4px; }
.park-public-parks-slider {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Hide the scrollbar cross-browser — the slider is navigated via
       the arrow buttons / swipe, a visible track just adds noise. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.park-public-parks-slider::-webkit-scrollbar { display: none; height: 0; }
.park-public-parks-slider.is-single { justify-content: center; }
.park-public-parks-slider.is-single .park-public-park-card { flex: 0 0 calc(50% - 14px); }
@media (max-width: 680px) {
    .park-public-parks-slider.is-single .park-public-park-card { flex: 0 0 88%; }
}

/* Values below ported from the same legacy template's Parks slider
   (element "qbohga" and children) — box-shadow/radius/padding/photo
   height/icon sizes are its actual production settings, not eyeballed. */
.park-public-park-card {
    flex: 0 0 calc(50% - 14px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    box-shadow: 1px 1px 10px 1px #ddd;
    padding: 20px;
    margin: 20px 0;
}
@media (max-width: 680px) {
    .park-public-park-card { flex: 0 0 88%; }
}

.park-public-park-card-banner {
    position: relative;
    display: block;
    width: 100%;
    height: 250px;
    border-radius: 10px;
    background: var(--cbp-sage-soft);
    overflow: hidden;
    margin-bottom: 20px;
}
.park-public-park-card-banner > img:not(.park-public-park-card-banner-placeholder) {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.park-public-park-card-banner-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: auto;
    transform: translate(-50%, -50%) rotate(-8deg);
    opacity: 0.9;
}
.park-public-park-card-logo-wrap {
    position: absolute;
    left: 14px;
    bottom: -18px;
    z-index: 3;
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    padding: 3px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}
.park-public-park-card-logo-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;
}
.park-public-park-card-logo--placeholder { object-fit: contain !important; padding: 4px; background: var(--cbp-coral-soft); }

.park-public-park-card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.park-public-park-card-title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cbp-text);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.park-public-park-card-facts { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.park-public-park-card-fact {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--cbp-text-muted);
}
.park-public-park-card-fact img { display: block; flex: 0 0 auto; width: 34px; height: 34px; object-fit: contain; }
.park-public-park-card-btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 2em;
    border-radius: 10px;
    background: var(--cbp-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-transform: capitalize;
    text-decoration: none;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    align-self: flex-start;
    transition: box-shadow 0.15s ease;
}
.park-public-park-card-btn:hover { box-shadow: none; }

/* Prev/next arrows — sit just outside the card edges, sized and
   colored to match the site's brand rather than a generic grey
   circle; disabled state fades out once there's nothing left that
   direction to scroll to. */
.park-public-parks-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--cbp-border);
    background: #fff;
    color: var(--cbp-primary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(31, 73, 125, 0.16);
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.park-public-parks-nav:hover {
    background: var(--cbp-primary);
    color: #fff;
    box-shadow: 0 10px 22px rgba(31, 73, 125, 0.28);
}
.park-public-parks-nav:disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}
.park-public-parks-nav:disabled:hover { background: #fff; color: var(--cbp-primary); }
.park-public-parks-nav--prev { left: -19px; }
.park-public-parks-nav--next { right: -19px; }
@media (max-width: 680px) {
    .park-public-parks-nav { display: none; }
}

/* Shop — only shown when the community has "Community has Shop?"
   checked. Text + Shop Now button on the left, the shop image (or a
   cream placeholder box with the brand heart sticker overlapping its
   top edge, same as the "no image yet" pattern used elsewhere) on the
   right. */
.park-public-shop {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-top: 100px;
    padding-top: 150px;
    border-top: 1px solid var(--cbp-border);
}
@media (max-width: 720px) {
    .park-public-shop { flex-direction: column; gap: 32px; text-align: center; }
}

.park-public-shop-info { flex: 1 1 0; min-width: 0; }
.park-public-shop-title {
    margin: 0 0 16px;
    font-family: winter Draw;
    font-weight: 400;
    font-size: 48px;
    line-height: 1.15;
    color: var(--cbp-text);
}
.park-public-shop-desc { margin: 0 0 28px; font-size: 17px; line-height: 1.6; color: var(--cbp-text-muted); max-width: 420px; }
@media (max-width: 720px) {
    .park-public-shop-desc { max-width: none; }
}
.park-public-shop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 2em;
    border-radius: 10px;
    background: var(--cbp-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.park-public-shop-btn:hover { background: var(--cbp-primary-dark); color: #fff; }

.park-public-shop-photo-wrap { position: relative; flex: 1 1 0; min-width: 0; max-width: 480px; }
.park-public-shop-box {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 8;
    background: #E9E2CE;
    border-radius: 20px;
}

.park-public-shop-photo {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    max-width: 260px;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    object-fit: cover;
}
.park-public-shop-photo--placeholder {
    object-fit: contain;
    background: #fff;
    padding: 20px;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.1);
}
@media (max-width: 480px) {
    .park-public-shop-title { font-size: 34px; }
    .park-public-shop-photo { width: 45%; }
}
.park-public-section p { line-height: 1.6; color: var(--cbp-text); }

/* ---------------------------------------------------------
   Park listing card — plain rectangular card (unlike the community
   card's wavy shape-divider silhouette), matching a simple
   photo-over-content layout: full-bleed photo with rounded top corners,
   title, a location line, then a courts-count + View row.
   --------------------------------------------------------- */
.park-public-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
@media (max-width: 680px) {
    .park-public-grid { grid-template-columns: 1fr; }
}
.park-public-card {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
    padding: 16px;
}
.park-public-card-photo {
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    overflow: hidden;
}
.park-public-card-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.park-public-card-photo-placeholder { object-fit: contain !important; padding: 40px; background: var(--cbp-yellow-soft); }
.park-public-card-body { padding: 20px 10px 10px; }
.park-public-card-title {
    margin: 0 0 14px;
    font-family: winter Draw;
    font-weight: 400;
    font-size: 27px;
    line-height: 1.25;
    color: var(--cbp-text);
}
.park-public-card-fact {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 15px;
    color: var(--cbp-text-muted);
}
.park-public-card-fact img { display: block; width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.park-public-card-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
}
.park-public-card-footer-row .park-public-card-fact { margin: 0; }
@media (max-width: 480px) {
    .park-public-card-title { font-size: 22px; }
}

/* ---------------------------------------------------------
   "Suggest a Park" popups — native <dialog>, same pattern as the
   wp-admin "Add Owner" modal (community-admin-style.css), just
   restyled with this page's own --cbp-* variables/typography instead
   of the admin ones.
   --------------------------------------------------------- */
.park-suggest-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    border: none;
    border-radius: 20px;
    padding: 30px 32px;
    width: 440px;
    max-width: 92vw;
    /* Fixed on screen, not just centered at open — max-height +
       overflow-y so a tall step (the Step 2 detail grid) scrolls
       inside the popup instead of pushing it off-screen or growing
       past the viewport. */
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 30px 70px rgba(16, 24, 40, 0.28);
    color: var(--cbp-text);
    font-family: 'Comfortaa', sans-serif;
    animation: parkSuggestModalIn 0.22s ease;
}
@keyframes parkSuggestModalIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.park-suggest-modal::backdrop { background: rgba(16, 24, 40, 0.5); backdrop-filter: blur(2px); }
.park-suggest-modal h4 { margin: 0 0 4px; font-size: 20px; font-weight: 800; font-family: Comfortaa; }
.park-suggest-modal-sub { margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--cbp-text-muted); }
.park-suggest-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.05);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
}
.park-suggest-modal-close:hover { background: rgba(0, 0, 0, 0.1); transform: rotate(90deg); }

/* The details form gets a wider, friendlier modal than the plain
   Log In / Sign Up one — this is the moment we're actually asking
   someone to hand over data, so it earns the extra room instead of
   feeling cramped. Wider still than before now that it holds a second
   (KIMCHI) column alongside the form. */
.park-suggest-modal--form { width: 1080px; max-width: 95vw; padding: 28px 36px; }
@media (max-width: 1040px) {
    .park-suggest-modal--form { width: 92vw; padding: 22px 20px; }
}

/* Two-column layout — KIMCHI on the left, the step form on the right.
   Equal-width columns (the hero now lives inside the form column only —
   see park_suggest_get_form_html() — so KIMCHI's own column runs full
   height from the very top, matching the form column's height). Stacks
   to one column (KIMCHI above the form) under 900px. */
.park-suggest-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    /* start (each column its own natural height), not stretch — sticky
       below needs the two columns to actually be different heights for
       "whichever is shorter stays pinned in view" to mean anything. */
    align-items: start;
}
@media (max-width: 900px) {
    .park-suggest-layout { grid-template-columns: 1fr; }
}

/* Whichever column is taller, scrolling the modal (.park-suggest-modal
   itself is the scrolling container — see its own overflow-y:auto) used
   to carry the SHORTER column off-screen right along with it, since
   both were just plain flowing content. Sticky, on the scrolling
   ancestor's own scroll, pins each column at the top of the modal once
   scrolling would otherwise carry it past that point — so the shorter
   one stays fully visible while the taller one's remaining content
   keeps scrolling into view beside it, and vice versa depending on
   which one is shorter at the time. */
.park-suggest-kimchi-col,
.park-suggest-form-col {
    position: sticky;
    top: 0;
}
@media (max-width: 900px) {
    .park-suggest-kimchi-col,
    .park-suggest-form-col {
        position: static;
    }
}

.park-suggest-kimchi-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 14px;
    background: linear-gradient(160deg, var(--cbp-primary-soft), var(--cbp-coral-soft));
}
.park-suggest-kimchi-header { display: flex; align-items: flex-start; gap: 10px; }
.park-suggest-kimchi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #fff;
    font-size: 14px;
}
.park-suggest-kimchi-title { margin: 0; font-size: 14px; font-weight: 800; color: var(--cbp-text); }
.park-suggest-kimchi-sub { margin: 2px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--cbp-text-muted); }
.park-suggest-kimchi-col textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--cbp-border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.park-suggest-kimchi-col textarea:focus {
    outline: 0;
    border-color: var(--cbp-primary);
    box-shadow: 0 0 0 3px var(--cbp-primary-soft);
}

/* Type/Voice/Upload tabs — same shape as .community-story-tabs
   (community-style.css), restyled with this popup's own tokens. */
.park-suggest-kimchi-tabs {
    display: flex;
    border: 1px solid var(--cbp-border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.park-suggest-kimchi-tab {
    flex: 1;
    padding: 9px 6px;
    background: rgba(0, 0, 0, 0.02);
    border: 0;
    border-right: 1px solid var(--cbp-border);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    color: var(--cbp-text-muted);
    cursor: pointer;
}
.park-suggest-kimchi-tab:last-child { border-right: 0; }
.park-suggest-kimchi-tab.is-active { background: #fff; color: var(--cbp-primary); }

.park-suggest-kimchi-links { display: flex; flex-direction: column; gap: 6px; }
.park-suggest-kimchi-links-list { display: flex; flex-direction: column; gap: 6px; }
.park-suggest-kimchi-link-row { display: flex; align-items: center; gap: 8px; }
.park-suggest-kimchi-link-row input {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    box-sizing: border-box;
    border: 1.5px solid var(--cbp-border);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 12.5px;
    font-family: inherit;
    background: #fff;
}
.park-suggest-kimchi-link-row input:focus {
    outline: 0;
    border-color: var(--cbp-primary);
    box-shadow: 0 0 0 3px var(--cbp-primary-soft);
}
.park-suggest-kimchi-link-remove {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--cbp-text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
/* [hidden] must win over the flex display below, or the first row's
   deliberately-hidden remove button (you can't remove down to zero
   rows) would show anyway — same recurring pattern as the Community
   Story step's identical links list. */
.park-suggest-kimchi-link-remove:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
}
.park-suggest-kimchi-link-remove:hover { background: rgba(200, 40, 40, 0.12); color: #a02020; }
.park-suggest-kimchi-link-add {
    align-self: flex-start;
    border: 0;
    background: none;
    padding: 2px 0;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    color: var(--cbp-primary);
    cursor: pointer;
}
.park-suggest-kimchi-link-add:hover { text-decoration: underline; }

.park-suggest-kimchi-generate-btn { width: 100%; }
.park-suggest-kimchi-generate-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Result of Generate with KIMCHI — needs to stand out since it's
   confirming a real change (fields on the right just got filled in),
   not just a passive instruction like the other .park-suggest-step-hint
   text on this page. */
.park-suggest-kimchi-status {
    display: block;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}
.park-suggest-kimchi-status.is-success {
    background: var(--cbp-sage-soft);
    color: #4a5d3a;
    border: 1px solid rgba(156, 175, 136, 0.35);
}
.park-suggest-kimchi-status.is-empty {
    background: var(--cbp-yellow-soft);
    color: #7a6520;
    border: 1px solid rgba(251, 243, 211, 0.9);
}

/* Voice tab's mic toggle + Upload tab's file picker — the real
   <input type=file> is visually hidden (not display:none — that can
   drop it out of the tab order in some browsers), not removed: a
   <label for=...> is the standard way to give a file input a custom
   look while keeping native click-to-open and keyboard behavior. */
.park-suggest-kimchi-voice-btn,
.park-suggest-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid var(--cbp-border);
    border-radius: 8px;
    background: #fff;
}
.park-suggest-kimchi-voice-btn:hover,
.park-suggest-upload-btn:hover { border-color: var(--cbp-primary); }
.park-suggest-upload-btn.is-busy { opacity: 0.6; pointer-events: none; }

.park-suggest-upload-field {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.park-suggest-upload-filename {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    color: var(--cbp-text-muted);
    font-style: italic;
}
.park-suggest-upload-filename.has-file { color: var(--cbp-text); font-style: normal; font-weight: 600; }
.park-suggest-upload-filename.has-error { color: #a02020; }
.park-suggest-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* "Filled in by KIMCHI" highlight — every field on this form is a
   plain <input>/<textarea>, so one pattern covers all 13: a light
   green border/glow directly on the field, plus a small note right
   underneath it. Added by parkSuggestHighlightAiField() right after
   Generate applies a suggestion. (A corner icon inside the field was
   tried first but was too easy to miss — text underneath reads at a
   glance instead of needing a hover.) */
input.is-ai-filled,
textarea.is-ai-filled {
    border-color: var(--cbp-sage) !important;
    box-shadow: 0 0 0 3px var(--cbp-sage-soft) !important;
}
.park-suggest-ai-note {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #4a5d3a;
    text-align: left;
}

.park-suggest-form-col { min-width: 0; }

.park-suggest-hero { text-align: left; margin-bottom: 12px; }
.park-suggest-hero-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 0 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cbp-coral-soft), var(--cbp-primary-soft));
    font-size: 19px;
    line-height: 1;
}
.park-suggest-hero h4 { font-size: 21px; }
.park-suggest-hero .park-suggest-modal-sub { max-width: 460px; margin-left: 0; margin-right: 0; margin-bottom: 0; }

.park-suggest-optional {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--cbp-primary-soft);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cbp-primary);
    vertical-align: middle;
}

/* Filled progress bar — 2 steps, 50%/100% width driven inline by
   parkSuggestGoToStep(). A track + fill (not just dots) reads as
   tangible progress rather than an abstract "you are here" marker. */
.park-suggest-progress { margin-bottom: 32px; }
.park-suggest-progress-track {
    height: 5px;
    border-radius: 999px;
    background: var(--cbp-border);
    overflow: hidden;
    margin-bottom: 7px;
}
.park-suggest-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cbp-coral), var(--cbp-primary));
    transition: width 0.3s ease;
}
.park-suggest-progress-labels { display: flex; justify-content: space-between; }
.park-suggest-progress-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--cbp-text-muted);
    transition: color 0.2s ease;
}
.park-suggest-progress-step.is-active,
.park-suggest-progress-step.is-done { color: var(--cbp-primary); }
.park-suggest-progress-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--cbp-border);
    color: var(--cbp-text-muted);
    font-size: 10.5px;
    font-weight: 800;
    transition: background 0.2s ease, color 0.2s ease;
}
.park-suggest-progress-step.is-active .park-suggest-progress-dot,
.park-suggest-progress-step.is-done .park-suggest-progress-dot { background: var(--cbp-primary); color: #fff; }

/* Step transition — a gentle fade + rise each time a step becomes
   visible, re-triggered via JS (see parkSuggestGoToStep()'s reflow
   trick) rather than relying on [hidden] toggling alone, which has no
   visual transition of its own. */
.park-suggest-step--enter { animation: parkSuggestStepIn 0.28s ease; }
@keyframes parkSuggestStepIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.park-suggest-step-hint {
    margin-top: 10px;
    padding: 7px 12px;
    border-radius: 10px;
    background: var(--cbp-sage-soft);
    font-size: 12.5px;
    color: var(--cbp-text);
}

/* "Park Information" card — same cream-panel treatment as
   .park-public-info-card on the public single page (same #FAF3EB
   background, same winter Draw title), just contained in a rounded box
   instead of that panel's full-bleed 100vw strip, since this one lives
   inside a modal, not the page itself. */
.park-suggest-info-card {
    margin: 0 0 20px;
    padding: 20px 22px;
    border-radius: 14px;
    background: #FAF3EB;
}
.park-suggest-info-card-title {
    margin: 0 0 4px;
    font-family: inherit;
    font-weight: 400;
    font-size: 19px;
    color: var(--cbp-text);
}
.park-suggest-info-card .park-suggest-step-hint {
    margin: 0 0 14px;
    background: rgba(255, 255, 255, 0.6);
}
.park-suggest-info-card .park-suggest-field { margin-bottom: 14px; }
/* Directions (park-suggest-field--full) always ends up alone in the
   grid's final row, whether 2 columns (desktop) or stacked to 1
   (mobile) — either way it's simply the last field in DOM order, so
   it's the one that shouldn't leave a trailing gap before the card ends. */
.park-suggest-info-card .park-suggest-grid .park-suggest-field:last-child { margin-bottom: 0; }

/* Log In / Sign Up popup — plain links out to Auth0
   (park_suggest_get_auth_url() / park_suggest_handle_login_redirect()),
   not a custom form, same pattern as the Insiders page's own login/
   signup links. */
.park-suggest-auth-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 6px 0 4px;
}
.park-suggest-auth-links .park-suggest-submit-btn { width: 100%; text-align: center; text-decoration: none; }
.park-suggest-signup-link { font-size: 13.5px; color: var(--cbp-text-muted); text-decoration: underline; }
.park-suggest-signup-link:hover { color: var(--cbp-primary); }

.park-suggest-field { margin: 0 0 32px; }
.park-suggest-field label {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--cbp-text);
    margin-bottom: 4px;
}
.park-suggest-field-icon { display: inline-block; margin-right: 6px; font-size: 14px; }
/* Icon <img> in the Park Information card — same files as
   .park-public-info-icon on the public single page (park-public-single.php),
   sized down to fit inline with a label instead of that panel's larger
   standalone display. */
img.park-suggest-field-icon { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; }
.park-suggest-field-icon--emoji { font-size: 14px; }
.park-suggest-field input,
.park-suggest-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid var(--cbp-border);
    border-radius: 10px;
    padding: 0px 14px;
    text-align: left;
    font-size: 14.5px;
    font-family: inherit;
    background: rgba(0, 0, 0, 0.014);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.park-suggest-field textarea { resize: vertical; }
.park-suggest-field input:focus,
.park-suggest-field textarea:focus {
    outline: 0;
    border-color: var(--cbp-primary);
    box-shadow: 0 0 0 3px var(--cbp-primary-soft);
    background: #fff;
}
.park-suggest-field input::placeholder,
.park-suggest-field textarea::placeholder { color: rgba(0, 0, 0, 0.32); }

/* Photo upload — a plain <input type="file"> (park_suggest_render_upload_field()
   in park-suggest.php), styled as a proper dropzone instead of the
   native browser control. The real input stays in the DOM and keeps
   its `required` attribute working (visually hidden via the standard
   clip-rect technique, NOT display:none/visibility:hidden — either of
   those would exclude it from HTML5 constraint validation, which is
   exactly what enforces "required" here); a wrapping <label> triggers
   the OS file picker on click, and a background-image preview swaps in
   once a photo's chosen (parkSuggestPreviewUpload()). Compound
   `.park-suggest-upload .park-suggest-upload-*` selectors throughout —
   needed to outrank the generic `.park-suggest-field label`/`input`
   rules above on specificity, since a single-class selector alone loses
   to those class+element ones. */
.park-suggest-upload { position: relative; }
.park-suggest-upload .park-suggest-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.park-suggest-upload .park-suggest-upload-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 150px;
    margin: 0;
    border: 1.5px dashed var(--cbp-border);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.014);
    color: inherit;
    font-weight: 400;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.park-suggest-upload .park-suggest-upload-dropzone:hover { border-color: var(--cbp-primary); background: var(--cbp-primary-soft); }
.park-suggest-upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px; }
.park-suggest-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
    border-radius: 999px;
    background: var(--cbp-primary-soft);
    color: var(--cbp-primary);
    font-size: 15px;
}
.park-suggest-upload-text { font-size: 12.5px; font-weight: 700; color: var(--cbp-text); }
.park-suggest-upload-hint { font-size: 11px; color: var(--cbp-text-muted); }
.park-suggest-upload-preview {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.park-suggest-upload-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    border: none;
    border-radius: 999px;
    padding: 4px 11px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}
.park-suggest-upload-remove:hover { background: rgba(0, 0, 0, 0.8); }

.park-suggest-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px 16px;
}
.park-suggest-field--full { grid-column: 1 / -1; }
@media (max-width: 480px) {
    .park-suggest-grid { grid-template-columns: 1fr; }
}

.park-suggest-error {
    margin: 0 0 14px;
    padding: 10px 13px;
    border-radius: 10px;
    background: rgba(200, 40, 40, 0.08);
    color: #a02020;
    font-size: 13px;
}

.park-suggest-step-actions { margin-top: 4px; }
.park-suggest-step-actions--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 6px;
}
.park-suggest-step-actions--split .park-suggest-submit-btn { flex: 1 1 auto; width: auto; }
.park-suggest-back-btn {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 12px 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cbp-text-muted);
    cursor: pointer;
    transition: color 0.15s ease;
}
.park-suggest-back-btn:hover { color: var(--cbp-primary); }
.park-suggest-next-btn { width: 100%; }

.park-suggest-submit-btn {
    width: 100%;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.park-suggest-submit-btn:hover { transform: translateY(-1px); }
.park-suggest-submit-btn:active { transform: translateY(0); }
.park-suggest-submit-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

.park-suggest-thanks { text-align: center; padding: 12px 0 6px; }
.park-suggest-thanks-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: var(--cbp-sage);
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    animation: parkSuggestThanksPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes parkSuggestThanksPop {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}
.park-suggest-thanks-title { font-size: 19px; font-weight: 800; margin: 0 0 6px; font-family: inherit; }
.park-suggest-thanks .park-suggest-modal-sub { margin: 0 auto; }