/*
 * Locations module — base styling for the front-end blocks: the
 * [location_selector] surfaces and the SG Builder location components
 * (Location Selector/Field/Cards/Archive/Content/Title/Heading/CTA/Selection
 * Button, incl. the recreated legacy dl-* / .sgDispenzaLocation markup).
 *
 * Deliberately neutral and themeable — accents read the site's CSS custom
 * properties (with sensible fallbacks) so a tenant's own custom CSS
 * (site_additional_css) keeps overriding fonts/colours. Loaded sitewide via
 * FrontModel when the LOCATIONS module is enabled. The picker modal/drawer
 * lives in locations-picker.css.
 */

:root {
    --loc-accent: var(--sg-color-primary, #4d5839);
    --loc-accent-contrast: #ffffff;
    --loc-card-bg: #ffffff;
    --loc-border: #e6e6e6;
    --loc-radius: 12px;
    --loc-muted: #6b7280;
}

/* ---------------------------------------------------------------------------
 * [location_selector] — dropdown / list / grid / step-flow
 * ------------------------------------------------------------------------- */
.location-selector-wrap { display: block; }

.location-selector {
    width: 100%;
    max-width: 420px;
    padding: 10px 14px;
    border: 1px solid var(--loc-border);
    border-radius: 8px;
    background: var(--loc-card-bg);
    font: inherit;
    color: inherit;
}

.location-selector-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.location-selector-item > a {
    display: block;
    padding: 12px 16px;
    border: 1px solid var(--loc-border);
    border-radius: var(--loc-radius);
    background: var(--loc-card-bg);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.location-selector-item > a:hover,
.location-selector-item.is-active > a { border-color: var(--loc-accent); box-shadow: 0 0 0 1px var(--loc-accent) inset; }

.location-selector-grid { display: grid; gap: 12px; }

.location-selector-card {
    display: block;
    padding: 16px;
    border: 1px solid var(--loc-border);
    border-radius: var(--loc-radius);
    background: var(--loc-card-bg);
    color: inherit;
    text-decoration: none;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.location-selector-card:hover { border-color: var(--loc-accent); transform: translateY(-1px); }
.location-selector-card.is-active { border-color: var(--loc-accent); box-shadow: 0 0 0 2px var(--loc-accent) inset; }

.location-selector-group { margin-bottom: 18px; }
.location-selector-group-title { font-weight: 700; margin: 0 0 8px; }

/* Step-flow panels */
.location-selector-steps { position: relative; overflow: hidden; }
.location-selector-steps-track { position: relative; }
.location-selector-panel[hidden] { display: none; }
.location-selector-step-title { font-weight: 700; font-size: 1.1em; margin: 0 0 12px; }
.location-selector-step-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.location-selector-back {
    background: none; border: 0; padding: 4px 0; margin-bottom: 8px;
    color: var(--loc-accent); cursor: pointer; font: inherit;
}

/* [location_field] rich output */
.location-hours { list-style: none; margin: 0; padding: 0; }
.location-hours li { padding: 2px 0; }
.location-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.location-gallery-item img { width: 100%; height: auto; border-radius: 8px; display: block; }
.location-image { max-width: 100%; height: auto; border-radius: var(--loc-radius); }
.location-map-embed iframe { width: 100%; min-height: 320px; border: 0; border-radius: var(--loc-radius); }

/* ---------------------------------------------------------------------------
 * SG Builder location components (incl. recreated legacy dl-* markup)
 * ------------------------------------------------------------------------- */

/* Generic card tile shared by Archive Locations + Location Cards */
.dispenzaLocation-itemCard,
.sgDispenzaLocation-selection-locations .item,
.dl-location-cards .item {
    display: flex;
    flex-direction: column;
    background: var(--loc-card-bg);
    border: 1px solid var(--loc-border);
    border-radius: var(--loc-radius);
    overflow: hidden;
    height: 100%;
}
.dispenzaLocation-itemCard .image img,
.dl-location-cards .item .image img,
.sgDispenzaLocation-selection-locations .item .image img {
    width: 100%; height: auto; display: block; object-fit: cover;
}
.dispenzaLocation-itemCard .content,
.dl-location-cards .item .content,
.sgDispenzaLocation-selection-locations .item .content { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.dispenzaLocation-itemCard .title,
.dl-location-cards .item .title,
.sgDispenzaLocation-selection-locations .item .title { font-weight: 700; font-size: 1.25em; line-height: 1.2; }
.dispenzaLocation-itemCard .subtitle,
.dl-location-cards .item .subtitle { color: var(--loc-muted); font-size: .9em; }
.dispenzaLocation-itemCard .details,
.dl-location-cards .item .text { color: var(--loc-muted); }
.dispenzaLocation-itemCard .ctas,
.dl-location-cards .item .ctas { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }

/* Grid layout for Location Cards (non-carousel) */
.dl-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }

/* Buttons emitted by the location blocks */
.dispenzaLocation-itemCard .btn,
.dl-location-cards .btn,
.dl-cta,
.sgDispenzaLocation-selection-locations .ctas a {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 999px;
    background: var(--loc-accent);
    color: var(--loc-accent-contrast);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid var(--loc-accent);
    cursor: pointer;
}
.dispenzaLocation-itemCard .btn:hover,
.dl-location-cards .btn:hover,
.dl-cta:hover { filter: brightness(.95); }

/* Location Content / Title / Heading */
.dl-content { display: block; }
.dl-title { font-weight: 600; }
.dl-heading { line-height: 1.15; }

/* Location Selection Button (navbar switcher) */
.sgDispenzaLocation--selection-btn { display: inline-block; }
.sgDispenzaLocation--selection-btn > a {
    display: inline-flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 22px;
    border-radius: 999px;
    background: var(--loc-accent);
    color: var(--loc-accent-contrast);
    text-decoration: none;
    line-height: 1.15;
}
.sgDispenzaLocation--selection-btn .locname { font-weight: 600; }
.sgDispenzaLocation--selection-btn .sub { font-size: .72em; opacity: .85; }

/* Builder-canvas empty-state hint (also harmless on the front) */
.sg-builder-empty {
    padding: 16px 18px;
    border: 1px dashed var(--loc-border);
    border-radius: var(--loc-radius);
    color: var(--loc-muted);
    background: #fafafa;
    font-size: .95em;
}