/**
 * "What is nearby" — the strip a traveller reads, and the list a guide sees.
 *
 * CLAUDE.md Rule 5.5. Every value below was READ from a reference source, not
 * chosen:
 *
 *   card, radius, border, muted text ..... inquiry-trace.css (the trace page)
 *       --st-radius .75rem · --st-border #e5e5e5 · --st-muted-foreground #737373
 *   the heading ........................... the page's OWN .st-heading-section,
 *       measured live on a hotel page: 26px / 700 / no letter-spacing / no caps.
 *       The markup borrows that class rather than copying the numbers, so it
 *       cannot drift when the theme changes.
 *   service-type colours .................. itinerary-builder-redesign.css
 *       hotel #0050d8 · activity #3c6b52 · Local Expert #8a6a2f · host #9a4f43
 *       A hotel is the same blue here as it is inside the builder.
 *
 * THE PARENT THEME OUT-SPECIFIES A SINGLE CLASS. Every text rule is written as
 * .ss-nearby .ss-nearby__x for that reason — the first version used one class
 * and the theme quietly won on the subheading size and the band weight.
 *
 * WHAT CHIRAN SENT BACK, AND WHAT CHANGED (12 Sep 2026):
 *   "the left side border for the title is not sticking into the overall outer
 *    border"      -> the violet bar is gone. The trace page does not use one.
 *   "the font ... is not exactly as the same as the about this hotel"
 *                 -> it IS that heading now, the same class.
 *   "the subheading line is also different"
 *                 -> 14px, the trace page's muted grey, sitting under it.
 *   "you can walk section ... it's capital letters"
 *                 -> sentence case, and the transport icon does the work.
 */

.ss-nearby {
    /* trace page */
    --ssn-card: #ffffff;
    --ssn-line: #e5e5e5;
    --ssn-line-soft: #f0f0f0;
    --ssn-muted-bg: #f5f5f5;
    --ssn-ink: #232323;          /* the same ink the page heading uses */
    --ssn-muted: #737373;
    --ssn-radius: 0.75rem;
    /* service types, from the builder */
    --ssn-hotel: #0050d8;    --ssn-hotel-tint: #e7f0fd;
    --ssn-activity: #3c6b52; --ssn-activity-tint: #ecf2ee;
    --ssn-expert: #8a6a2f;   --ssn-expert-tint: #f4efe4;
    --ssn-host: #9a4f43;     --ssn-host-tint: #f4ebe9;

    background: var(--ssn-card);
    border: 1px solid var(--ssn-line);
    border-radius: var(--ssn-radius);
    padding: 24px;
    margin: 28px 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    color: var(--ssn-ink);
}

/* The heading is the page's own .st-heading-section. Only spacing is ours. */
.ss-nearby .ss-nearby__title {
    margin: 0 0 4px !important;
    padding: 0 !important;
}
.ss-nearby .ss-nearby__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ssn-muted);
}
.ss-nearby__head {
    padding-bottom: 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ssn-line);
}

.ss-nearby__groups {
    display: flex;
    flex-direction: column;
}
.ss-nearby__group + .ss-nearby__group { margin-top: 18px; }

/* Sentence case, quiet, with the real vehicle beside it. */
.ss-nearby .ss-nearby__band {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 16px 0 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ssn-ink);
}
.ss-nearby__bandico {
    display: inline-flex;
    width: 19px;
    height: 19px;
    color: var(--ssn-muted);
    flex: 0 0 auto;
}
.ss-nearby__bandico .svgico { width: 100%; height: 100%; }

.ss-nearby__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}
.ss-nearby__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    margin: 0 !important;
    border-bottom: 1px solid var(--ssn-line-soft);
    list-style: none !important;
}
.ss-nearby__item:last-child { border-bottom: 0; }
.ss-nearby__item::before,
.ss-nearby__item::marker { content: none !important; }

/* The tile carries the service's own colour. */
.ss-nearby__ico {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--ssn-hotel-tint);
    color: var(--ssn-hotel);
}
.ss-nearby__ico .svgico { width: 17px; height: 17px; }

.ss-nearby__item--activity .ss-nearby__ico { background: var(--ssn-activity-tint); color: var(--ssn-activity); }
.ss-nearby__item--expert   .ss-nearby__ico { background: var(--ssn-expert-tint);   color: var(--ssn-expert); }
.ss-nearby__item--host     .ss-nearby__ico { background: var(--ssn-host-tint);     color: var(--ssn-host); }

.ss-nearby .ss-nearby__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ssn-ink) !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
.ss-nearby__item--hotel    .ss-nearby__name:hover { color: var(--ssn-hotel) !important; }
.ss-nearby__item--activity .ss-nearby__name:hover { color: var(--ssn-activity) !important; }
.ss-nearby__item--expert   .ss-nearby__name:hover { color: var(--ssn-expert) !important; }
.ss-nearby__item--host     .ss-nearby__name:hover { color: var(--ssn-host) !important; }

.ss-nearby .ss-nearby__far {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--ssn-muted);
    white-space: nowrap;
    letter-spacing: normal;
    word-spacing: normal;
    /* NOT tabular-nums. This is a sentence, not a column — fixed-width digits
       made "0.6 km · 9 min walk" read airy and loose. */
}
.ss-nearby__dot { opacity: .4; margin: 0 1px; }

/* ---- compact: inside the builder ------------------------------------- */
.ss-nearby--compact {
    margin: 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: #fafafa;
    border-color: #ececec;
    box-shadow: none;
}
.ss-nearby--compact .ss-nearby__group + .ss-nearby__group { margin-top: 12px; }
.ss-nearby--compact .ss-nearby__band { margin: 0 0 4px; font-size: 13px; }
.ss-nearby--compact .ss-nearby__bandico { width: 16px; height: 16px; }
.ss-nearby--compact .ss-nearby__item { padding: 7px 0; gap: 10px; }
.ss-nearby--compact .ss-nearby__ico { width: 26px; height: 26px; border-radius: 7px; }
.ss-nearby--compact .ss-nearby__ico .svgico { width: 14px; height: 14px; }
.ss-nearby--compact .ss-nearby__name { font-size: 13.5px; }
.ss-nearby--compact .ss-nearby__far { font-size: 12px; }

@media (max-width: 560px) {
    .ss-nearby { padding: 18px; }
    .ss-nearby__item { flex-wrap: wrap; }
    /* The distance drops under the name rather than squeezing it. */
    .ss-nearby__far { flex-basis: 100%; padding-left: 44px; }
}

/* ---- "Nearby" inside the Add hotel / Add activity picker (surface 2) ---
 *
 * Chiran, 12 September 2026: the button was coming out GOLD. Only its pressed
 * state had been styled, so the resting state fell straight through to the
 * Traveler theme's default button — 44px tall, gold, outset border. He asked
 * for "the exact same thing" as My Wishlist, in violet, with an icon on the
 * left. So every value here is copied from that button (itinerary-builder-
 * overrides.css, .aib-flt-wish) and only the colour differs.
 */

.aib-picker .aib-grp-near .aib-flt-near {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 7px 14px !important;
    height: auto !important;
    border: 1px solid rgba(9, 9, 32, 0.14) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #7700FF !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    letter-spacing: .5px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none;
}
.aib-picker .aib-grp-near .aib-flt-near:hover,
.aib-picker .aib-grp-near .aib-flt-near.on {
    background: #7700FF !important;
    border-color: #7700FF !important;
    color: #fff !important;
}
.aib-picker .aib-grp-near .aib-flt-near .svgico {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}
.aib-picker .aib-grp-near .aib-flt-near.is-loading { opacity: .55; pointer-events: none; }

/* A card the nearby filter has ruled out. Hidden, not removed, so turning the
   filter off puts everything back without another request. */
.aib-picker .srs-card.ss-near-hidden { display: none !important; }

.aib-picker .ss-near-note {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #737373;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}

/* THE DISTANCE SITS BESIDE THE NAME, NOT UNDER IT.
   Chiran, image 23: on its own line the card grew tall and the header lost its
   shape. It now rides inside the title, 20px clear of it, so the card is the
   same height as one without it. */
.aib-picker .ss-near-tag {
    display: inline-block;
    flex: 0 0 auto;      /* the title is a flex row now; its 8px gap does the spacing */
    padding: 2px 9px;
    border-radius: 999px;
    background: #f3ecff;
    color: #6300d6;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: normal;
    white-space: nowrap;
    vertical-align: middle;
}

/* The "opens in a new tab" mark, at the end of the name. */
.ss-nearby__out {
    display: inline-flex;
    width: 13px;
    height: 13px;
    margin-left: 7px;
    color: #9a9aa3;
    vertical-align: -1px;
}
.ss-nearby__out .svgico { width: 100%; height: 100%; }
.ss-nearby .ss-nearby__name:hover .ss-nearby__out { color: inherit; }