/* n49 engine styles — supplements the theme; the theme owns the design. */

/* Header where-suggestions */
.header form label.second { position: relative; }
.n49-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
    z-index: 1000;
    overflow: hidden;
}
.n49-suggest.hidden { display: none; }
.n49-suggest-item {
    display: block;
    padding: 10px 14px;
    font-size: 14px;
    color: #3b3b3b;
    text-decoration: none;
}
.n49-suggest-item:hover { background: #f5f5f5; }

/* Placeholder tiles when a listing has no logo */
.n49-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
}
.n49-tile-lg { font-size: 42px; }

/* Sponsored tag on result cards */
.n49-sponsored-tag {
    display: inline-block;
    vertical-align: middle;
    background: #ec2028;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    margin-left: 6px;
    text-transform: uppercase;
}

/* Results map — stays pinned while the results list scrolls; wheel over the
   map still zooms (Leaflet handles it). */
.directory .width-74 { position: relative; }
#n49-map { min-height: 500px; height: calc(100vh - 120px); z-index: 1; }
@media (min-width: 801px) {
    .directory .n49-map-sticky {
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100vh;
    }
    .directory .n49-map-sticky #n49-map { height: 100vh; min-height: 0; }
}
.acf-map.small { height: 260px; z-index: 1; }

/* Floating map pills, Google-Maps style: centered over the top edge of the map.
   The container ignores pointer events so the map stays draggable around them. */
.n49-map-controls {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    width: max-content;
    max-width: calc(100% - 24px);
}
.n49-map-follow,
#n49-map-redo {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: #333;
    box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.15);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
/* Toggle switch — ID selectors so the theme's custom checkbox skin can't win. */
#n49-map-follow {
    appearance: none;
    -webkit-appearance: none;
    width: 32px;
    height: 18px;
    border: none;
    border-radius: 999px;
    background: #c6c6c6;
    position: relative;
    margin: 0;
    cursor: pointer;
    flex: none;
    transition: background .15s ease;
}
#n49-map-follow::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
    transition: left .15s ease;
}
#n49-map-follow:checked { background: #ec2028; }
#n49-map-follow:checked::after { left: 16px; }
#n49-map-redo { color: #ec2028; text-decoration: none; }
#n49-map-redo:hover { background: #fff5f5; color: #ec2028; }
#n49-map-redo svg { flex: none; }
.n49-map-controls .hidden,
#n49-map-redo.hidden { display: none; }

/* Brand map pin */
.n49-pin { background: none; border: none; }
.n49-pin svg {
    display: block;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
    transition: transform .12s ease;
    transform-origin: 50% 100%;
}
.n49-pin:hover svg { transform: scale(1.15); }

/* Expanded card — theme's .info-box.full pops out at left:100% of the results
   column (style.css); it needs to scroll internally and sit above the map. */
/* Hero slot: the search index only has logos, so render them contained on a
   light field instead of the mockup's cover photo. */
.info-box.full > .flex > .img-wrap.width-100 {
    height: 150px;
    background: #f7f7f7;
    overflow: hidden;
}
.info-box.full > .flex > .img-wrap.width-100 > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.info-box.full > .flex > .img-wrap.width-100 img {
    width: auto;
    max-width: 70%;
    max-height: 120px;
    object-fit: contain;
}
.info-box.full .n49-hero-tile {
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    border-radius: 10px;
}
@media (min-width: 801px) {
    .info-box.full {
        z-index: 20;
        max-height: calc(100vh - 30px);
        overflow-y: auto;
    }
}
/* The theme has no mobile rule for .info-box.full (left:100% is off-screen) —
   show it as a centered overlay instead. */
@media (max-width: 800px) {
    .info-box.full {
        position: fixed;
        left: 10px;
        right: 10px;
        top: 80px;
        width: auto;
        margin-left: 0;
        z-index: 10010;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        box-shadow: 0 10px 40px rgba(0,0,0,.35);
    }
}

/* Facets */
.n49-facet-extra.hidden { display: none; }
#n49-no-results.hidden { display: none; }
#n49-loading.hidden { display: none; }
.n49-loading { text-align: center; color: #afafaf; padding: 12px 0; }

/* Minimum reviews range */
#n49-filter-reviews { width: 100%; accent-color: #ec2028; }

/* Review avatars: theme positions but never sizes them; clamp hotlinked photos */
.review > .avatar, .replies > .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.replies > .avatar { width: 36px; height: 36px; }

/* Details social text links */
.n49-social-text a {
    display: inline-block;
    margin-right: 12px;
    font-weight: 700;
    text-decoration: underline;
}

/* Pricing */
.n49-pricing-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.n49-seg {
    display: inline-flex;
    background: #f5f5f5;
    border: 1px solid #e7e7e7;
    border-radius: 999px;
    padding: 4px;
}
.n49-seg a {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: #3b3b3b;
    white-space: nowrap;
}
.n49-seg a.active { background: #ec2028; color: #fff; }
.n49-save {
    background: #e6f6ed;
    color: #4dba7d;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 4px;
}
.n49-seg a.active .n49-save { background: rgba(255,255,255,.25); color: #fff; }

.n49-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}
.n49-plan {
    position: relative;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    padding: 30px 26px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.n49-plan-featured {
    border: 2px solid #ec2028;
    box-shadow: 0 8px 24px rgba(236,32,40,.12);
}
.n49-ribbon {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: #ec2028;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 999px;
    white-space: nowrap;
}
.n49-plan-head { text-align: center; border-bottom: 1px solid #f0f0f0; padding-bottom: 20px; margin-bottom: 18px; }
.n49-plan-head h3 { font-size: 20px; margin-bottom: 12px; }
.n49-plan-price { margin: 0; line-height: 1; }
.n49-amount { font-size: 40px; font-weight: 700; color: #3b3b3b; }
.n49-per { font-size: 15px; color: #afafaf; font-weight: 700; }
.n49-plan-sub { color: #afafaf; font-size: 13px; margin: 8px 0 16px; min-height: 16px; }
.n49-plan-head .btn { border-radius: 999px; }
.n49-plan-features { list-style: none; margin: 0; padding: 0; }
.n49-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 0;
    font-size: 14px;
    line-height: 1.45;
}
.n49-plan-features li.off { color: #afafaf; }
.n49-feat-ico { flex: none; margin-top: 2px; }
@media (max-width: 960px) {
    .n49-plans { grid-template-columns: 1fr; max-width: 480px; }
    /* Slide-note (Aug 19): keep Free | Verified | Sponsored order on mobile too. */
}

/* Add-business page */
.wrapper.size-780 { max-width: 780px; margin: 0 auto; }
.n49-addbiz-box {
    border: 1px solid #e7e7e7;
    box-shadow: 0 0 7px rgba(0,0,0,.12);
    background: #fff;
    margin-bottom: 20px;
}
.n49-addbiz-box input {
    width: 100%;
    border: none;
    outline: none;
    padding: 18px 24px;
    font-size: 22px;
    font-weight: 300;
    background: transparent;
}
.n49-addbiz-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    box-shadow: 0 0 7px rgba(0,0,0,.12);
    padding: 12px 16px;
    margin-top: 10px;
}
.n49-addbiz-card img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    flex: none;
    background: #f5f5f5;
}
.n49-addbiz-meta { flex: 1; min-width: 0; }
.n49-addbiz-meta p { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n49-addbiz-card .btn { flex: none; }
#n49-addbiz-more-n49.hidden, #n49-addbiz-more-google.hidden { display: none; }
.n49-addbiz-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.92);
    z-index: 5000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.n49-addbiz-overlay.hidden { display: none; }
.n49-addbiz-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid #e7e7e7;
    border-top-color: #ec2028;
    border-radius: 50%;
    animation: n49spin 1s linear infinite;
}
@keyframes n49spin { to { transform: rotate(360deg); } }

/* Region browse pages */
.n49-browse-columns {
    columns: 5;
    column-gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.n49-browse-columns.wide { columns: 3; }
.n49-browse-columns li { break-inside: avoid; padding: 3px 0; }
.n49-browse-columns a { color: #3b3b3b; font-size: 14px; }
.n49-browse-columns a:hover { color: #ec2028; }
@media (max-width: 960px) { .n49-browse-columns, .n49-browse-columns.wide { columns: 2; } }
@media (max-width: 600px) { .n49-browse-columns, .n49-browse-columns.wide { columns: 1; } }

/* No divider line above the footer (theme draws a 1px white border-top). */
.footer { border-top: 0; }

/* Galleries with only 1-2 images fill the full strip width instead of
   leaving the remaining thirds blank (slick sizes slides for 3-up). */
#lightgallery.n49-gallery-1 .slick-track,
#lightgallery.n49-gallery-2 .slick-track {
    width: 100% !important;
    transform: none !important;
    display: flex;
}
#lightgallery.n49-gallery-1 .slick-slide { width: 100% !important; }
#lightgallery.n49-gallery-2 .slick-slide { width: 50% !important; }
/* pre-slick fallback (theme .flex-3 sets 33.33%) */
#lightgallery.n49-gallery-1 > .img-wrap { width: 100%; }
#lightgallery.n49-gallery-2 > .img-wrap { width: 50%; }

/* Details gallery: force one uniform height across the slick strip —
   mixed portrait/landscape/logo images otherwise give the draggable
   .slick-list a ragged edge and huge tall slides. */
#lightgallery .slick-list,
#lightgallery .slick-slide,
#lightgallery .img-wrap { height: 400px; }
#lightgallery .slick-track { display: flex; align-items: stretch; }
#lightgallery .img-wrap { display: block; overflow: hidden; }
#lightgallery .img-wrap img,
#lightgallery .slick-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 800px) {
    #lightgallery .slick-list,
    #lightgallery .slick-slide,
    #lightgallery .img-wrap { height: 260px; }
}

/* Top 100 badge on search cards (logos row, like the delivery squares) */
.n49-card-top100 { width: 40px; height: 40px; vertical-align: top; }

/* Review avatars — real photos size to the mockup's 50px disc (35px in replies);
   unsized imgs were overlapping the review text. */
.review > img.avatar,
.review > svg.avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }

/* Search-card review snippet: the mockup's avatar there is 35×35 (layout-map.php)
   — the 50px disc overflows the .width-12 column onto the text. */
.info-box .width-12 svg.avatar,
.info-box .width-12 img.avatar { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; display: block; }
.replies > img.avatar,
.replies > svg.avatar { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }

/* Review-source logos — sized to the mockup's artwork (30px tab icons,
   small platform mark in the review's top-right corner per the feed mockup). */
.n49-prop-logo { height: 22px; max-width: 110px; width: auto; display: inline-block; vertical-align: top; }
.review .width-25.text-right { position: absolute; top: 0; right: 0; width: auto; }
.n49-slide-logo { width: 30px; height: 30px; display: inline-block; object-fit: contain; }

/* Review feed extras — media, employee tags, comment links (feed mockup). */
.n49-review-employees { display: flex; flex-wrap: wrap; gap: 12px; }
.n49-employee {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    padding: 10px 18px 10px 12px;
    min-width: 170px;
    background: #fff;
}
.n49-employee svg.avatar,
.n49-employee img.avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.n49-employee-meta p { font-size: 13px; line-height: 1.35; }
.n49-employee-meta p + p { color: #7c7c7c; font-weight: 400; }

.n49-review-media { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.n49-rm-img {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: #eef0f2;
    background-size: cover;
    background-position: center;
    display: block;
    flex: none;
}
.n49-rm-video {
    max-width: 100%;
    max-height: 340px;
    border-radius: 10px;
    background: #eef0f2;
    display: block;
}
/* Video thumbnail (poster + play button) — same tile size as photo thumbs */
.n49-rm-video-thumb {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: #1c1c1e;
    background-size: cover;
    background-position: center;
    display: block;
    flex: none;
}
.n49-rm-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #fff;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

/* Popup viewer for review photos/videos */
.n49-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, .85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
.n49-lightbox img,
.n49-lightbox video {
    max-width: 90vw;
    max-height: 88vh;
    border-radius: 6px;
    cursor: default;
}
.n49-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    font-size: 30px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    user-select: none;
}
.n49-lightbox-close:hover { background: #ec2028; }

/* Slide notes 2026-08-17 */
/* Review tab counts in sentence case ("540 Reviews", not "540 REVIEWS") */
.tabs ul.horizontal li a { text-transform: none; }
/* Breathing room above "Listed In:" */
.n49-listed-in { margin-top: 20px; }
/* Body copy line height */
.info-box.normal p.font-size-16 { line-height: 1.5; }
/* Business name takes the available width so it stays on one line; the
   delivery-logos column then must shrink to content and stay pinned right
   (its fixed 48% width would otherwise wrap below the name). */
@media (min-width: 801px) {
    .info-box.normal .n49-name-col { flex: 1 1 auto; width: auto; }
    .info-box.normal .n49-name-col + .width-48 {
        flex: 0 0 auto;
        width: auto;
        margin-left: auto;
    }
}
/* Article placeholder images render contained, not zoom-cropped */
.n49-article-ph img { object-fit: contain !important; background: #f6f6f6; }

/* Slide notes 2026-08-18 */
/* Review-tab carousel arrows stay inside the column — the theme places them
   60px outside, where the next-arrow overlaps the sidebar widgets. */
.info-box.normal .tabs .slick-prev { left: 0; }
.info-box.normal .tabs .slick-next { right: 0; }
/* Verified/flag badges align to the middle of the name, not its top edge. */
.info-box h3 .n49-tip svg,
.info-box.normal h2 .n49-tip svg { vertical-align: middle; }
@media (max-width: 800px) {
    /* breathing room between the results-header separator and the first card */
    .directory .content { padding-top: 15px; }
    /* details logo card over the gallery: white padded card, contained logo */
    .info-box.normal .mobile-800-overlap .img-wrap {
        max-width: 110px;
        background: #fff;
        border-radius: 10px;
        padding: 8px;
        box-shadow: 0 0 6px rgba(0,0,0,.16);
    }
    .info-box.normal .mobile-800-overlap .img-wrap img { width: 100%; height: auto; object-fit: contain; }
}

/* Badge tooltips — live n49.com bubble style (gray, above the icon, fade in) */
.n49-tip { cursor: pointer; position: relative; display: inline-block; }
.n49-tip .n49-tip-text {
    visibility: hidden;
    background-color: gray;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 30;
    pointer-events: none;
}
.n49-tip:hover .n49-tip-text { visibility: visible; opacity: 1; }

/* Platform score row under the business name (silver.ca /details reference) */
.n49-scores { margin-top: 6px; }
.n49-scores a { text-decoration: none; }
.n49-score-icon { width: 24px; height: 24px; border-radius: 50%; vertical-align: top; margin-right: 5px; object-fit: contain; }

/* Google Reviews badge in Badges / Awards */
.n49-google-badge {
    border: 2px solid #4285f4;
    border-radius: 10px;
    padding: 10px 8px 8px;
}
.n49-google-badge .rating { margin: 0 auto 5px; }
.n49-google-badge p { font-size: 13px; line-height: 1.4; }
.n49-google-badge img { margin-top: 4px; }

/* Get Directions button must sit above the Leaflet panes */
.acf-map-wrap .btn { z-index: 500; }
.n49-write-comment { font-size: 13px; color: #3b3b3b; }
.n49-write-comment:hover { color: #ec2028; }
.n49-write-comment svg { vertical-align: middle; margin-right: 5px; }
.n49-entity-name { margin-left: 4px; }
.n49-opio-powered img { vertical-align: middle; }

/* Leaflet popup — styled like the original site's Google Maps infowindow */
.leaflet-popup-content-wrapper { border-radius: 8px; box-shadow: 0 2px 7px 1px rgba(0,0,0,.3); }
.leaflet-popup-content { margin: 12px 22px 12px 14px; font: 400 14px/1.5 "Roboto", sans-serif; color: #3b3b3b; min-width: 230px; }
.leaflet-popup-content a { color: #ec2028; font-weight: 700; }

/* Map marker popup content — search-app map-tooltip.hbs layout */
.n49-map-tt { max-width: 300px; }
.n49-map-tt-top { display: flex; justify-content: space-between; gap: 10px; overflow: hidden; }
.n49-map-tt-l { max-width: 200px; }
.n49-map-tt h5 { margin: 0 0 8px; font-size: 14px; font-weight: 700; line-height: 1.3; }
.n49-map-tt-rating { display: flex; align-items: center; gap: 5px; font-size: 11px; margin: 0 0 8px; white-space: nowrap; }
.n49-map-tt-r { width: 55px; flex: none; }
.n49-map-tt-r img { width: 55px; height: 55px; object-fit: contain; border-radius: 4px; background: #fff; box-shadow: 0 0 4px rgba(0,0,0,.12); }
.n49-map-tt-cats { font-size: 11px; margin-bottom: 7px; }
.n49-map-tt-cats a { font-weight: 400; }
.n49-map-tt-contact { font-size: 12px; }
.n49-map-tt-contact span,
.n49-map-tt-contact a { display: block; margin-bottom: 3px; }
.n49-map-tt-contact span { color: #3b3b3b; }
.n49-map-tt-contact svg { width: 11px; height: 12px; vertical-align: middle; margin-right: 4px; }
.leaflet-popup-tip { box-shadow: 0 2px 4px rgba(0,0,0,.2); }
a.leaflet-popup-close-button { font: 400 18px/16px Arial, sans-serif; color: #757575; width: 24px; height: 24px; padding: 6px 6px 0 0; }
a.leaflet-popup-close-button:hover { color: #3b3b3b; }

/* Slide-note (Aug 19): hero/footer boundary lands on a fractional pixel — on
   retina screens a white hairline of the body shows through. Overlap by 1px. */
footer.footer { margin-top: -1px; }

/* Slide-note (Aug 19): mobile search — clear-X in the what box, and the
   where/geo box stays visible so the city can be changed without knowing
   about the focus-reveal. */
.header form label.first { position: relative; }
.n49-clear-what {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    line-height: 21px;
    text-align: center;
    border-radius: 50%;
    background: #e7e7e7;
    color: #3b3b3b;
    font-size: 15px;
    cursor: pointer;
    display: none;
    z-index: 5;
    user-select: none;
}
.n49-clear-what.show { display: block; }
@media (max-width: 800px) {
    /* Yelp-style reveal (Aug 25): the where box appears while the search is
       engaged — first box focused/filled, or focus inside the where box — and
       collapses otherwise. (The theme's own reveal, plus focus-within so it
       survives moving focus into the city field.) */
    body.search .header.n49-search-open form label.second { display: block !important; }
    body.search .header.n49-search-open .wrapper { min-height: 135px; }
    /* the round submit button sits at the right edge on mobile — clear it */
    .n49-clear-what { right: 48px; }
}

/* Slide-note (Aug 19): expanded Categories/Groups pill lists ran past the
   panel and spilled over the footer — scroll inside the panel instead. */
#n49-filter-cat, #n49-filter-bg { max-height: 340px; overflow-y: auto; }

/* Mobile map view: .active-map overlays the list/map toggle strip (70px,
   theme style.css:3299) on the map's top edge — Leaflet's zoom control and
   our follow pill move below it so nothing overlaps. */
@media (max-width: 800px) {
    .directory.active-map .width-74 .leaflet-top { top: 70px; }
    .directory.active-map .n49-map-controls { top: 84px; }
}

/* Mobile: what + where render as ONE rounded box — what on top, thin divider,
   where below (single 1px line: first loses its bottom border, second keeps
   its top border as the divider). */
@media (max-width: 800px) {
    /* Yelp-style engaged state (Aug 25): two separate rounded fields with a
       clear gap, pin icon in the location box. */
    body.search .header form label.first input { border-radius: 20px; }
    body.search .header form label.second { margin: 8px 0 0 !important; }
    body.search .header form label.second input { border-radius: 20px; }
}

/* The where box is always visible on mobile now, so the header keeps its
   expanded height (theme only grows it while .search-active/focused) —
   otherwise the where field dangles below the header onto the page bg. */
@media (max-width: 800px) {
    /* collapsed header keeps the theme's compact height; it grows only while
       the search is engaged (rules above). */
}

/* Logged-in user menu (search-app header parity) */
.n49-user-menu { position: relative; display: inline-block; margin-left: 20px; vertical-align: middle; }
.n49-user-toggle { font-weight: 700; color: #3b3b3b; white-space: nowrap; }
.n49-user-toggle svg { vertical-align: middle; margin-left: 4px; }
.n49-user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 210px;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding: 6px 0;
    z-index: 10020;
}
.n49-user-dropdown.hidden { display: none; }
.n49-user-dropdown a {
    display: block;
    padding: 9px 16px;
    font-size: 14px;
    color: #3b3b3b;
    white-space: nowrap;
}
.n49-user-dropdown a:hover { background: #f5f5f5; color: #ec2028; }
.n49-menu-count {
    background: #ec2028;
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    margin-left: 6px;
}

/* Expanded card: delivery-logos row — icons tight-left, Reserve pushed right
   (mockup module-info-box-full.php:113), and breathing room before the
   See Detail button (it was flush against the icons). */
.info-box.full .logos {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 12px;
}
.info-box.full .logos .btn { margin-left: auto; }
.info-box.full > .flex > .btn.fullwidth { margin-top: 10px; }

/* Mobile cards: same logos-row treatment as the expanded card — icons in a
   tidy flex row, Reserve pushed right, clear gap from surrounding content. */
@media (max-width: 800px) {
    .info-box .logos {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 8px;
        margin-bottom: 2px;
    }
    .info-box .logos .btn { margin-left: auto; }
}

/* The theme's base .section padding left a 60px white strip between the
   header and the results/map — the fullscreen search layout sits flush. */
body.search section.section.fullscreen { padding-top: 0; padding-bottom: 0; }

/* Location field X — no round submit in that box, so it hugs the edge on
   mobile too. */
@media (max-width: 800px) {
    .n49-clear-where { right: 12px; }
}

/* Q&A2 slide 6: results header matches the mockup — count text and the
   map/list toggle share one row (the toggle used to wrap below on desktop). */
@media (min-width: 801px) {
    .directory .width-26 > .results {
        display: flex;
        align-items: center;
        gap: 14px;
        padding-right: 60px; /* keep clear of the absolute filters icon */
    }
    .directory .width-26 > .results .text { margin: 0; }
    /* Desktop shows list + map side by side — the view toggle is mobile-only (Aug 24). */
    .directory .width-26 > .results .btn-filters-mobile { display: none; }
}

/* Owner-Verified badge in the theme's own type (replaces the Yext bitmap) */
.n49-owner-verified {
    font-weight: 700;
    color: #3b3b3b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.n49-owner-verified svg { flex: none; }

/* Results column: the theme's .flex is space-between, which shoves leftover
   height between the header row and the cards on short result lists (the
   column stretches to match the sticky map). Pack content to the top. */
.directory .width-26.flex.column { justify-content: flex-start; }

/* ?widget=true — chrome-less search for iframe embedders (legacy contract):
   site nav/footer hidden, the search UI is the whole page. */
body.n49-widget .header .top,
body.n49-widget .header nav ul,
body.n49-widget .header nav > a.btn,
body.n49-widget .n49-user-menu,
body.n49-widget footer.footer { display: none !important; }
body.n49-widget .header { box-shadow: none; }

/* --- PageSpeed a11y: placeholder contrast + footer tap targets --- */
input::placeholder, textarea::placeholder { color: #5a6570 !important; opacity: 1; }
.footer a, footer a { display: inline-block; padding: 6px 4px; }
/* a11y: search inputs were #9d9d9d on white (2.7:1) */
.header form input[type="text"], form.search input[type="text"], input[type="text"] { color: #3b4249; }