/* T-Mobile — new-locator visual parity with the legacy locator.
 *
 * Overrides the provider's :where(.locator-theme-root) token vars + the semantic type/spacing
 * fallbacks (see store_locator/frontend/styles/main.css KTD4). Values lifted from the legacy
 * sass/template_system/tmobile.scss. Loaded on both paths via store_locator.theming; on the widget
 * this file is cloned into the shadow root by lib/mount.ts (href under /locator_themes/).
 *
 * px only. TeleNeoWeb-ExtraBold is a DISPLAY face → headings only (--locator-font-family-heading);
 * the body stays a system stack (the legacy T-Mobile body font). @font-face for TeleNeo is loaded by
 * the T-Mobile shell override / storefront SCSS; this file only references the families.
 */
.locator-theme-root {
    /* Body font: system stack (NOT the TeleNeo display face). */
    --locator-font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif;
    /* Headings (sidebar title + card title) use the TeleNeo display face. */
    --locator-font-family-heading: "TeleNeoWeb-ExtraBold", sans-serif;

    /* Brand colors — tmobile.scss $tmo-magenta / $tmo-berry / $text-color. */
    --locator-color-primary: #e20074;
    --locator-color-secondary: #e20074;
    --locator-color-accent: #e20074;
    --locator-color-text: #262626;

    /* 12px-rounded card + buttons (updated T-Mobile brand). */
    --locator-radius-button: 12px;
    --locator-radius-card: 12px;

    /* Search bar overrides */
    --locator-color-locate-icon: var(--locator-color-primary);
    --locator-color-locate-icon-stroke: var(--locator-color-primary);
    --locator-color-locate-icon-fill: var(--locator-color-primary);
    --locator-color-input-prefix: var(--locator-color-primary);

    /* Card distance and eyebrow */
    --locator-color-card-eyebrow: #6a6a6a;
    --locator-color-card-distance: #6a6a6a;

    /* Extra-bold headings (the TeleNeo face). */
    --locator-font-weight-sidebar-title: 800;
    --locator-font-weight-card-title: 800;

    /* Card action buttons: icon stacked above a dark label, magenta icon; 62px tall (legacy). The
       fixed height + zero vertical padding centers the stacked content in exactly 62px. */
    --locator-actions-button-direction: column;
    --locator-color-button-text: #262626;
    --locator-color-button-icon: #e20074;
    --locator-text-button-icon: 24px;
    --locator-actions-button-height: 62px;
    --locator-space-button-y: 0;
    --locator-actions-button-gap: 2px;

    --locator-space-card-media-row-top: 0;

    /* "Show Store Deals & Devices" featured button: outline (white bg, dark text). Border points at
       --locator-color-button-border (#333) so it matches the Call/Directions (outline) button borders. */
    --locator-color-featured-background: #ffffff;
    --locator-color-featured-text: #262626;
    --locator-color-featured-border: var(--locator-color-button-border);

    /* All buttons get a magenta (primary) border on hover. */
    --locator-color-button-border-hover: #e20074;
    --locator-color-featured-border-hover: #e20074;

    /* Detail-line icons (clock / pin / phone): hidden. */
    --locator-card-detail-icon-display: none;

    /* Search input: no border (tmobile.scss). */
    --locator-border-style-input: none;

    /* No-results notice: cream background, warning icon shown, "Showing the nearest locations:"
       moved below the CTA (tmobile.scss). */
    --locator-color-notice-background: #fdf6ec;
    --locator-notice-icon-display: inline-block;
    --locator-notice-subtitle-order: 1;
}