/* /scripts/near-me/near-me.css — shared styles for near-me variants inside
   Camps/index-html.html. Scoped with .nm- prefix to avoid clashes with the
   main camps index layout. */

/* ---------- Input / autocomplete ---------- */
.nm-inputwrap { position: relative; display: block; width: 100%; max-width: 560px; }

.nm-input-row { display: flex; gap: 8px; align-items: center; }
.nm-input {
    flex: 1 1 auto;
    box-sizing: border-box;
    height: 42px;
    padding: 0 14px;
    font: 400 15px/1.2 lato, sans-serif;
    border: 1px solid #c4c4c4;
    border-radius: 5px;
    background: #fff;
    color: #151924;
    min-width: 0;
}
.nm-input:focus {
    outline: none;
    border-color: #2172be;
    box-shadow: 0 0 0 2px rgba(33,114,190,0.2);
}

/* Attention pulse — applied briefly when (change location) is clicked,
   so the user sees WHERE they're supposed to type next. Two expanding
   orange rings that fade out. Sits on top of :focus so the combined
   effect is "blue focus ring + a couple of orange pulses". */
@keyframes nm-input-attention {
    0%   { box-shadow: 0 0 0 0   rgba(245,130,32,0.55),
                       0 0 0 2px rgba(33,114,190,0.2); }
    100% { box-shadow: 0 0 0 14px rgba(245,130,32,0),
                       0 0 0 2px rgba(33,114,190,0.2); }
}
.nm-input.nm-attention {
    border-color: #f58220;
    animation: nm-input-attention 0.7s ease-out 2;
}

.nm-btn {
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box; height: 42px;
    padding: 0 18px;
    border-radius: 5px;
    border: 1px solid #f58220;
    background: #f58220;
    color: #fff;
    cursor: pointer;
    font: 700 14px/1 lato, sans-serif;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nm-btn:hover { background: #e06f0a; border-color: #e06f0a; }
.nm-btn:disabled { opacity: 0.6; cursor: wait; }

.nm-btn-primary { background: #f58220; color: #fff; border-color: #f58220; }
.nm-btn-primary:hover { background: #e06f0a; border-color: #e06f0a; }

.nm-btn-geo { background: #fff; color: #2172be; border-color: #2172be; }
.nm-btn-geo:hover { background: #2172be; color: #fff; border-color: #2172be; }
.nm-btn-icon { margin-right: 6px; font-size: 15px; line-height: 1; }

.nm-suggest {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border: 1px solid #c4c4c4;
    border-top: 0;
    border-radius: 0 0 5px 5px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 20;
    box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}
.nm-suggest:empty { display: none; }
.nm-suggest-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    border-top: 1px solid #eee;
    color: #151924;
}
.nm-suggest-item:first-child { border-top: none; }
.nm-suggest-item:hover { background: #f0f7ff; }

/* ---------- Results: live inside .camplist.camplistnearme ----------
   The wrapper inherits .camplist CSS from /camps/index-2018wf.css
   (background: #f6f5f3, padding: 20px 0, header: Oswald 38px). We
   override only spacing and the card layout. */

.camplistnearme .nm-cards {
    display: grid;
    gap: 12px;
    max-width: 820px;
    margin: 16px 0 0;
}

.camplistnearme .nm-card {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #d8e0ef;
    border-radius: 4px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.camplistnearme .nm-card:hover {
    border-color: #2172be;
    box-shadow: 0 2px 6px rgba(33,114,190,0.1);
}

.camplistnearme .nm-card-main { flex: 1 1 280px; min-width: 0; }
.camplistnearme .nm-card h3 {
    margin: 0 0 4px;
    font: 700 18px/1.25 lato, sans-serif;
    color: #151924;
}
.camplistnearme .nm-meta {
    color: #555;
    font: 400 14px/1.4 lato, sans-serif;
    margin-bottom: 6px;
}
.camplistnearme .nm-dist {
    display: inline-block;
    background: #eaf2fc;
    color: #1d4c8f;
    padding: 3px 10px;
    border-radius: 12px;
    font: 700 12px/1 lato, sans-serif;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.camplistnearme .nm-price {
    font: 700 19px/1 lato, sans-serif;
    color: #151924;
    margin-right: 10px;
    vertical-align: middle;
}
.camplistnearme .nm-earlybird {
    color: #2b8a3e;
    font-size: 13px;
    font-weight: 500;
    vertical-align: middle;
}
.camplistnearme .nm-player-limit { color: #454545; font: 500 13px/1.4 lato, sans-serif; margin-top: 2px; }
.camplistnearme .nm-player-limit-label { font-weight: 700; color: #151924; }
.camplistnearme .nm-spots { color: #ed6505; font: 700 12px/1.4 lato, sans-serif; margin-top: 4px; }

.camplistnearme .nm-cta,
.camplistnearme .nm-cta:link,
.camplistnearme .nm-cta:visited {
    background: #f58220; color: #fff; text-decoration: none;
    padding: 10px 22px; border-radius: 5px;
    font: 700 14px/1 lato, sans-serif; white-space: nowrap;
    display: inline-block;
    transition: background 0.15s;
}
.camplistnearme .nm-cta:hover,
.camplistnearme .nm-cta:active { background: #e06f0a; color: #fff; }

.camplistnearme .nm-empty {
    padding: 36px 24px;
    text-align: center;
    color: #555;
    background: #fff;
    border: 1px dashed #c4c4c4;
    border-radius: 4px;
    font: 400 15px/1.5 lato, sans-serif;
}
.camplistnearme .nm-empty a,
.camplistnearme .nm-empty a:link,
.camplistnearme .nm-empty a:visited {
    color: #f58220; font-weight: 700; text-decoration: none;
}
.camplistnearme .nm-empty a:hover { text-decoration: underline; }

.camplistnearme .nm-loadmore {
    margin-top: 16px;
    text-align: left;
}
.camplistnearme .nm-loadmore-link,
.camplistnearme .nm-loadmore-link:link,
.camplistnearme .nm-loadmore-link:visited {
    color: #2172be;
    font: 700 16px/1 oswald, sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.camplistnearme .nm-loadmore-link:hover { text-decoration: underline; }

.camplistnearme .nm-placeholder {
    padding: 32px 20px;
    text-align: center;
    color: #888;
    font: 400 14px/1.5 lato, sans-serif;
    background: #fff;
    border: 1px dashed #d8e0ef;
    border-radius: 4px;
}

@media (max-width: 520px) {
    .nm-input-row { flex-direction: column; align-items: stretch; }
    .nm-btn, .nm-btn-geo, .nm-btn-primary { width: 100%; }
    .camplistnearme .nm-card { padding: 14px 16px; }
    .camplistnearme .nm-cta { width: 100%; text-align: center; }
}

/* More spacing under FIND CAMPS NEAR YOU banner */
.findcampbannercontainer .nm-inputwrap { margin-top: 10px; }

/* Input wrapper anchors the suggest dropdown to just the input field,
   not the whole row (which on mobile stacks below all buttons). */
.nm-q-wrapper {
    position: relative;
    min-width: 0;
    flex: 1 1 auto;
}
.nm-q-wrapper .nm-input { width: 100%; }
.nm-q-wrapper .nm-suggest {
    position: absolute;
    top: 100%; left: 0; right: 0;
}

/* =============================================================
   Card design A — calendar chip on the left
   ============================================================= */
.camplistnearme .nm-cards.nm-design-a { gap: 10px; }
.camplistnearme .nm-card.nm-a {
    display: grid;
    grid-template-columns: 84px 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 12px 18px 12px 12px;
    background: #fff;
    border: 1px solid #e2e4ea;
    border-left: 4px solid #f58220;
    border-radius: 6px;
    transition: box-shadow 0.15s, transform 0.15s;
}
.camplistnearme .nm-card.nm-a:hover {
    box-shadow: 0 3px 10px rgba(21,25,36,0.08);
    transform: translateY(-1px);
}
.camplistnearme .nm-a-chip {
    background: linear-gradient(180deg, #fff4e6 0%, #ffe6cd 100%);
    border-radius: 6px;
    text-align: center;
    padding: 8px 4px 6px;
    color: #151924;
}
.camplistnearme .nm-a-chip-month {
    font: 700 12px/1 oswald, sans-serif;
    color: #c05f00;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.camplistnearme .nm-a-chip-day {
    font: 700 28px/1 lato, sans-serif;
    margin: 2px 0;
}
.camplistnearme .nm-a-chip-dist {
    display: block;
    font: 600 11px/1.2 lato, sans-serif;
    color: #666;
    margin-top: 4px;
    border-top: 1px solid #f1ceac;
    padding-top: 4px;
}
.camplistnearme .nm-a-body { min-width: 0; }
.camplistnearme .nm-a-title {
    margin: 0 0 2px;
    font: 700 17px/1.25 lato, sans-serif;
    color: #151924;
}
.camplistnearme .nm-a-location {
    font: 600 14px/1.3 lato, sans-serif;
    color: #1d4c8f;
    margin-bottom: 4px;
}
.camplistnearme .nm-a-meta {
    font: 400 13px/1.5 lato, sans-serif;
    color: #555;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.camplistnearme .nm-a-meta > span { white-space: nowrap; }
.camplistnearme .nm-a-grades::before { content: "\1F393"; margin-right: 4px; font-size: 11px; }
.camplistnearme .nm-a-cta {
    background: #f58220; color: #fff; text-decoration: none;
    padding: 10px 20px; border-radius: 5px;
    font: 700 14px/1 lato, sans-serif; white-space: nowrap;
    transition: background 0.15s;
}
.camplistnearme .nm-a-cta:hover,
.camplistnearme .nm-a-cta:active { background: #e06f0a; color: #fff; }

@media (max-width: 520px) {
    .camplistnearme .nm-card.nm-a {
        grid-template-columns: 70px 1fr;
        gap: 12px;
        padding: 12px 14px 14px 10px;
    }
    .camplistnearme .nm-a-chip-day { font-size: 24px; }
    .camplistnearme .nm-a-cta {
        grid-column: 1 / -1;
        text-align: center;
        margin-top: 4px;
    }
}

/* =============================================================
   Card design B — compact header row with type pill + big distance
   ============================================================= */
.camplistnearme .nm-cards.nm-design-b { gap: 10px; }
.camplistnearme .nm-card.nm-b {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 16px;
    align-items: center;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #d8e0ef;
    border-radius: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.camplistnearme .nm-card.nm-b:hover {
    border-color: #2172be;
    box-shadow: 0 2px 8px rgba(33,114,190,0.1);
}
.camplistnearme .nm-b-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef1f5;
}
.camplistnearme .nm-b-dist {
    font: 700 26px/1 oswald, sans-serif;
    color: #1d4c8f;
}
.camplistnearme .nm-b-dist-unit {
    font-size: 13px;
    font-weight: 600;
    color: #6b7a8f;
    margin-left: 3px;
    letter-spacing: 0.04em;
}
.camplistnearme .nm-b-type {
    background: #fff4e6;
    color: #c05f00;
    padding: 3px 10px;
    border-radius: 12px;
    font: 700 12px/1.4 lato, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.camplistnearme .nm-b-body { min-width: 0; }
.camplistnearme .nm-b-title {
    margin: 0 0 4px;
    font: 700 17px/1.25 lato, sans-serif;
    color: #151924;
}
.camplistnearme .nm-b-meta {
    font: 400 13px/1.5 lato, sans-serif;
    color: #555;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
}
.camplistnearme .nm-b-meta strong { color: #151924; font-weight: 700; }
.camplistnearme .nm-b-cta {
    align-self: center;
    background: #f58220; color: #fff; text-decoration: none;
    padding: 10px 20px; border-radius: 5px;
    font: 700 14px/1 lato, sans-serif; white-space: nowrap;
    transition: background 0.15s;
}
.camplistnearme .nm-b-cta:hover,
.camplistnearme .nm-b-cta:active { background: #e06f0a; color: #fff; }

@media (max-width: 520px) {
    .camplistnearme .nm-card.nm-b { padding: 12px 14px; grid-template-columns: 1fr; }
    .camplistnearme .nm-b-cta {
        justify-self: stretch;
        text-align: center;
    }
}

/* =============================================================
   Card design C — same card shell as the original nm-card, but meta
   row uses the inline "Dates · Grades · Limit" flex layout from
   design B. Shares .nm-card / .nm-cta styles defined above.
   ============================================================= */
.camplistnearme .nm-cards.nm-design-c { gap: 10px; }
.camplistnearme .nm-cards.nm-design-c .nm-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin-bottom: 0;
    color: #555;
    font: 400 13px/1.5 lato, sans-serif;
}
.camplistnearme .nm-cards.nm-design-c .nm-meta strong {
    color: #151924;
    font-weight: 700;
}

/* =============================================================
   Default design — reuse state-page .camplistrow markup and add a
   DISTANCE column. Intentionally does NOT override the state-page
   column widths; the distance column is a compact ~70px so other
   columns keep their existing widths and content doesn't rewrap.
   Scoped to .camplistnearme so state pages are untouched.
   ============================================================= */
/* "Upcoming camps near X" sits tight above the subheading; the
   subheading supplies the breathing room before the rows. */
.camplistnearme .camplistheader { margin-bottom: 4px; }

/* Second line under the h2: "Showing X of N camps (change location)". */
.camplistnearme .nm-results-subheading {
    font: 400 16px/1.4 lato, sans-serif;
    color: #454545;
    margin-bottom: 16px;
}
@media only screen and (max-width: 891px) {
    .camplistnearme .nm-results-subheading { font-size: 14px; }
}

/* "(change location)" — parens stay in the subheading's body font,
   only the link text inside is italic + blue + underlined. */
.camplistnearme .nm-change-location-wrap {
    margin-left: 4px;
    white-space: nowrap;
}
.camplistnearme .nm-change-location,
.camplistnearme .nm-change-location:link,
.camplistnearme .nm-change-location:visited {
    font-style: italic;
    color: #2172be;
    text-decoration: underline;
}
.camplistnearme .nm-change-location:hover { color: #f58220; }

.camplistnearme .clnmdistance { font-weight: 700; color: #1d4c8f; }

@media only screen and (min-width: 891px) {
    .camplistnearme .clnmdistance { width: 70px; }
    /* Slight shrink to the button column only — the added distance column
       pushed .clspotsremaining past the row end, which made it wrap to a
       second line. "MORE DETAILS" fits comfortably in this narrower cell. */
    .camplistnearme .clbutton { width: 15%; }
}

/* Mobile: distance shows in the expand header as its own row with
   the same camplistmobilelabel treatment Date: / Location: use. */
@media only screen and (max-width: 891px) {
    .camplistnearme .camplistrowmobileexpandheader > .clnmdistance {
        display: block;
        padding-right: 8px;
        padding-bottom: 5px;
    }
}

/* =============================================================
   Page-specific column hiding. Landing pages (e.g.
   /camps/elite-skills-camps) set nearMeHideColumns="grade,type,
   player_limit" and helpers.asp emits matching .nm-hide-*
   classes on the .camplistnearme wrapper. Everything below is
   pure CSS so new pages can opt in without touching markup.
   ============================================================= */
.camplistnearme.nm-hide-grade         .clgrade,
.camplistnearme.nm-hide-grade         .camplistgradecontainer,
.camplistnearme.nm-hide-grade         .camplistcolheader.clgrade,
.camplistnearme.nm-hide-type          .cltype,
.camplistnearme.nm-hide-type          .camplistcolheader.cltype,
.camplistnearme.nm-hide-player-limit  .clplayerlimit,
.camplistnearme.nm-hide-player-limit  .camplistcolheader.clplayerlimit {
    display: none;
}

/* When all three right-hand columns are hidden (legacy layout),
   widen location + button so the row doesn't leave ~50% empty space. */
@media only screen and (min-width: 891px) {
    .camplistnearme.nm-hide-grade.nm-hide-type.nm-hide-player-limit .cllocation {
        width: 45%;
    }
    .camplistnearme.nm-hide-grade.nm-hide-type.nm-hide-player-limit .clbutton {
        width: 25%;
    }
    .camplistnearme.nm-hide-grade.nm-hide-type.nm-hide-player-limit .cldate {
        width: 18%;
    }
}

/* When type + player_limit are hidden but grade is shown (elite-skills
   layout), reclaim the space freed by the hidden columns across location
   and button. Kept modest — the near-me wrapper sits inside a 735px
   .staticpagewrapper3, so wider percentages cause the button to wrap. */
@media only screen and (min-width: 891px) {
    .camplistnearme.nm-hide-type.nm-hide-player-limit:not(.nm-hide-grade) .cllocation {
        width: 27%;
    }
    .camplistnearme.nm-hide-type.nm-hide-player-limit:not(.nm-hide-grade) .clbutton {
        width: 20%;
    }
}

/* =============================================================
   Inline mode. Matches .camplisttypepage/.camplistseasonpageinline
   behaviour — no gray bg, no top margin, lets the surrounding
   page chrome (staticpagewrapper3 etc.) provide the framing.
   Landing pages opt in by setting nearMeInline=true.
   ============================================================= */
.camplistnearmeinline { background-color: transparent; padding-top: 0; padding-bottom: 10px; margin-top: 0; }
.camplistnearmeinline .camplistcontainer { max-width: none; padding: 0; }
/* Drop the big h2 "Upcoming camps near X" — the inline pages have
   their own headline above, and the subheading carries the location. */
.camplistnearmeinline .camplistheader { display: none; }
/* Breathing room so the one-line "Showing X of N" subheading doesn't
   pile up against the filter note above and the column headers below. */
.camplistnearmeinline .nm-results-subheading { margin-top: 0; margin-bottom: 18px; }
/* Column headers get a clean gap from the subheading and first row. */
.camplistnearmeinline #nm-colheaders { margin-top: 8px; margin-bottom: 8px; }