/**
 * PlaidCars — UAE Design System v1
 *
 * Six small CSS components rooted in the UAE license-plate vocabulary.
 * Every component styles data the page already has — no decoration
 * looking for a home. No new fonts, no new images, no JavaScript.
 *
 * Token scope: --pc-red / --pc-ink / etc. defined here are *additive*
 * to the existing --pc-accent / --pc-text family used by
 * plaidcars-cars.css. The two families intentionally do not clash;
 * this file styles new chip shells, the older file styles page chrome.
 *
 * Gated by the PC_UAE_SYSTEM define so we can flip back to plain
 * rendering if Lighthouse drops or anything visibly breaks.
 */

:root {
    /* Reuse existing brand tokens where possible (Astra child overrides) */
    --pc-red:           var(--ast-global-color-0, #990000);
    --pc-red-soft:      var(--ast-global-color-1, rgba(153, 0, 0, 0.6));
    --pc-black:         var(--ast-global-color-3, #000000);
    --pc-surface:       var(--ast-global-color-5, #FFFFFF);
    --pc-surface-soft:  var(--ast-global-color-6, #F2F5F7);

    /* New tokens — confined to this system */
    --pc-ink:           #1A1A1A;
    --pc-muted:         #777777;
    --pc-faint:         #999999;
    --pc-line:          #E5E5E5;
    --pc-line-strong:   #D5D5D5;

    /* Charging-network brand colors (Component 4) */
    --pc-net-dewa:      #009688;
    --pc-net-bmw:       #003D8F;
    --pc-net-tesla:     #CC0000;
    --pc-net-adnoc:     #E40521;

    /* Chip geometry */
    --pc-chip-radius:           5px;
    --pc-chip-border:           1px;
    --pc-chip-border-strong:    1.5px;
    --pc-chip-pad-x:            12px;
    --pc-chip-pad-y:            8px;
}

/* ============================================================
 * 1. Price chip — the spine
 * ============================================================ */
.pc-chip--price {
    display: inline-grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    padding: var(--pc-chip-pad-y) var(--pc-chip-pad-x);
    background: var(--pc-surface);
    border: var(--pc-chip-border) solid var(--pc-black);
    border-radius: var(--pc-chip-radius);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pc-chip--price .pc-chip__tag,
.pc-chip--price .pc-chip__cat {
    grid-row: 1;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.3px;
    color: var(--pc-red);
    text-transform: uppercase;
}
.pc-chip--price .pc-chip__tag { grid-column: 1; justify-self: start; }
.pc-chip--price .pc-chip__cat { grid-column: 2; justify-self: end; }
.pc-chip--price .pc-chip__num {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: var(--pc-ink);
    margin-top: 4px;
    text-align: center;
    white-space: nowrap;
}
.pc-chip--price.pc-chip--hero {
    border-width: var(--pc-chip-border-strong);
    padding: 14px 18px;
}
.pc-chip--price.pc-chip--hero .pc-chip__tag,
.pc-chip--price.pc-chip--hero .pc-chip__cat {
    font-size: 11px;
    letter-spacing: 1.8px;
}
.pc-chip--price.pc-chip--hero .pc-chip__num {
    font-size: 32px;
    letter-spacing: 2.5px;
}

/* ============================================================
 * 2. Trim badge — Sadu density = power
 * ============================================================ */
.pc-trim {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    padding: 4px 10px 0;
    background: var(--pc-surface);
    border: 1px solid var(--pc-line-strong);
    border-radius: 4px;
    min-width: 100px;
    vertical-align: middle;
}
.pc-trim__name {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    color: var(--pc-ink);
    line-height: 1.6;
}
.pc-trim__sadu {
    display: block;
    height: 6px;
    margin-top: 4px;
}
/* RWD / Standard — flat line */
.pc-trim--rwd .pc-trim__name { color: var(--pc-muted); }
.pc-trim--rwd .pc-trim__sadu {
    background: linear-gradient(var(--pc-red), var(--pc-red)) center / 100% 1px no-repeat;
}
/* Long Range — dotted triangles */
.pc-trim--lr .pc-trim__sadu {
    background:
        radial-gradient(circle, var(--pc-red) 1px, transparent 1.5px) repeat-x left center / 12px 6px;
}
/* Performance — full sawtooth */
.pc-trim--perf .pc-trim__name { color: var(--pc-red); }
.pc-trim--perf .pc-trim__sadu {
    background:
        linear-gradient(135deg, var(--pc-red) 25%, transparent 25%) 0 0 / 8px 6px,
        linear-gradient(225deg, var(--pc-red) 25%, transparent 25%) 4px 0 / 8px 6px;
    background-color: transparent;
}
/* Plaid (reserved for future) — densest weave, fall back to perf look */
.pc-trim--plaid .pc-trim__name { color: var(--pc-red); }
.pc-trim--plaid .pc-trim__sadu {
    background:
        linear-gradient(135deg, var(--pc-red) 25%, transparent 25%) 0 0 / 6px 6px,
        linear-gradient(225deg, var(--pc-red) 25%, transparent 25%) 3px 0 / 6px 6px;
}

/* ============================================================
 * 3. Color swatch — plate-framed dot
 * ============================================================ */
.pc-color {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--pc-ink);
    vertical-align: middle;
}
.pc-color__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--pc-black);
    background: var(--pc-color-fill, var(--pc-surface-soft));
    flex-shrink: 0;
}
/* Unknown — striped pattern instead of solid */
.pc-color--unknown .pc-color__dot {
    background: repeating-linear-gradient(
        45deg,
        var(--pc-line) 0,
        var(--pc-line) 2px,
        var(--pc-surface-soft) 2px,
        var(--pc-surface-soft) 4px
    );
}

/* v0.56.8 (CR-026 PR-026b) — smaller variant for the interior-color
 * pairing near the detail-page title. Reads as the secondary swatch
 * next to the (default-size) exterior. Border softens to a muted
 * line so dark-interior-on-dark-page chrome still resolves. */
.pc-color--sm {
    font-size: 10.5px;
}
.pc-color--sm .pc-color__dot {
    width: 11px;
    height: 11px;
    border-color: rgba(0, 0, 0, .35);
}

/* ============================================================
 * 4. Charging map embed (v0.58.12 — CR-043)
 *
 * Replaces the v1 single-line counts strip (`.pc-charging` /
 * `.pc-net--{network}`) with an embedded Leaflet map of UAE public
 * chargers. The section is split into:
 *
 *   - .pc-tm-charging-callout — the optional amber NACS-mismatch
 *     warning above the map (renders only for North-American imports
 *     on Model 3 / Model Y < 2024).
 *   - .pc-tm-charging-map     — the Leaflet container; carries the
 *     skeleton placeholder text until the IntersectionObserver
 *     bootstraps the map.
 *   - .pc-tm-charging-marker  — Leaflet divIcon for each cluster
 *     marker. Network-tinted dots set inline by the JS.
 *   - .pc-tm-charging-popup   — popup binding inside a clicked
 *     marker; minimal name + network label.
 *
 * Component spec lives in `docs/frontend-launch/UAE-DESIGN-SYSTEM-v1.md`
 * under the `pc-tm-charging-map` v1.1 entry.
 * ============================================================ */

.pc-tm-charging-callout {
    /* Amber compact warning. Sits above the map; flows naturally with
     * the section's vertical rhythm. Uses our muted body palette
     * with an amber left-border accent so it reads as advisory
     * (not error). */
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-left: 3px solid #d97706;        /* tailwind amber-600 */
    border-radius: 3px;
    background: #fef3c7;                   /* tailwind amber-100 */
    color: #78350f;                        /* tailwind amber-900 */
    font-size: 13px;
    line-height: 1.5;
}
.pc-tm-charging-callout__icon {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1.4;
}
.pc-tm-charging-callout__body {
    margin: 0;
    font-size: inherit;
    color: inherit;
}

/* v0.59.12 (CR-052) — Cybertruck NACS warning charging-map overlay
 * variant. Adds bullet-list grammar (3 bullets) to the otherwise-
 * identical amber callout. Distinct from the CR-043 callout (which
 * renders a single <p>); the Cybertruck overlay reuses the parent
 * .pc-tm-charging-callout amber surface and adds an inline <ul>.
 *
 * The modifier class .pc-tm-charging-callout--cybertruck is a no-op
 * style hook so operators / future tweaks can disambiguate the two
 * callouts without changing the bullet list rules.
 */
.pc-tm-charging-callout__bullets {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
    font-size: inherit;
    color: inherit;
}
.pc-tm-charging-callout__bullets li {
    margin: 0 0 4px;
    line-height: 1.5;
}
.pc-tm-charging-callout__bullets li:last-child {
    margin-bottom: 0;
}

.pc-tm-charging-map {
    /* The Leaflet host. Min-height keeps the skeleton from being a
     * 0px box when Leaflet hasn't mounted yet (also gives the
     * IntersectionObserver a sensible target). */
    position: relative;
    display: block;
    width: 100%;
    height: 320px;
    min-height: 320px;
    margin: 0;
    border: 1px solid var(--pc-border, #e5e7eb);
    border-radius: 4px;
    background: #f1f5f9;                   /* slate-100 — neutral land */
    overflow: hidden;
}
.pc-tm-charging-map--empty {
    display: none;
}
.pc-tm-charging-map__skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: var(--pc-text-muted, #6b7280);
    font-size: 13px;
    text-align: center;
}
.pc-tm-charging-map__skeleton-lede {
    margin: 0;
}
.pc-tm-charging-map__skeleton-lede strong {
    font-weight: 600;
    color: var(--pc-text, #1f2937);
}

.pc-tm-charging-map__attribution {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--pc-text-muted, #6b7280);
}
.pc-tm-charging-map__attribution a {
    color: inherit;
    text-decoration: underline;
}
.pc-tm-charging-map__attribution a:hover {
    color: var(--pc-text, #1f2937);
}
.pc-tm-charging-map__deeplink {
    font-weight: 500;
}

.pc-tm-charging-map__empty {
    margin: 0;
    padding: 10px 12px;
    border: 1px dashed var(--pc-border, #e5e7eb);
    border-radius: 4px;
    color: var(--pc-text-muted, #6b7280);
    font-size: 13px;
}

/* Network-tinted clustered markers. The dot colour is set inline by
 * plaidcars-cars-charging-map.js because the network → colour map is
 * authoritative on the JS side; here we own the dot shape, ring, and
 * shadow so the marker reads as a chip rather than a raw coloured
 * square. */
.pc-tm-charging-marker {
    background: transparent;
    border: none;
}
.pc-tm-charging-marker__dot {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.pc-tm-charging-popup {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
}
.pc-tm-charging-popup__name {
    font-weight: 600;
    font-size: 13px;
    color: var(--pc-text, #1f2937);
}
.pc-tm-charging-popup__network {
    font-size: 11px;
    color: var(--pc-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

@media (max-width: 480px) {
    .pc-tm-charging-map { height: 260px; min-height: 260px; }
}

/* ============================================================
 * 5. Verification stamp
 * ============================================================ */
.pc-stamp {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 84px;
    text-align: center;
    vertical-align: top;
}
.pc-stamp__face {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.pc-stamp__label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
}
.pc-stamp__glyph {
    font-size: 18px;
    font-weight: 700;
    margin-top: 2px;
}
.pc-stamp__caption {
    margin-top: 8px;
    font-size: 10px;
    color: var(--pc-muted);
    line-height: 1.3;
}
.pc-stamp--verified .pc-stamp__face {
    background: var(--pc-red);
    color: var(--pc-surface);
    box-shadow:
        inset 0 0 0 2px var(--pc-red),
        inset 0 0 0 3px var(--pc-surface),
        inset 0 0 0 4px var(--pc-red);
}
.pc-stamp--auto .pc-stamp__face {
    background: var(--pc-surface);
    color: var(--pc-red);
    border: 1.5px dashed var(--pc-red);
}
.pc-stamp--new .pc-stamp__face {
    background: var(--pc-surface);
    color: var(--pc-faint);
    border: 1px solid var(--pc-line-strong);
}

/* ============================================================
 * 6. Source badge
 * ============================================================ */
.pc-source {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    min-width: 130px;
    background: var(--pc-surface);
    border: 1px solid var(--pc-black);
    border-radius: 3px;
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: var(--pc-ink);
    transition: background 120ms ease;
}
.pc-source:hover,
.pc-source:focus {
    background: var(--pc-surface-soft);
    text-decoration: none;
    color: var(--pc-ink);
}
.pc-source__arrow {
    color: var(--pc-red);
    margin-left: 10px;
    font-weight: 700;
}
.pc-sources-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pc-sources-list li { margin: 0; }

/* ============================================================
 * 9.1 Price-history typography (inherited pattern)
 * Scoped to the existing chart-table details on the detail page.
 * ============================================================ */
.pc-tm-car__chart-table table tbody td:nth-child(2) {
    font-weight: 500;
    letter-spacing: 1.5px;
    color: var(--pc-ink);
    font-variant-numeric: tabular-nums;
}
.pc-tm-car__chart-table table tbody td:nth-child(2)::before {
    content: "AED ";
    font-size: 9px;
    letter-spacing: 1.3px;
    color: var(--pc-red);
    margin-right: 4px;
    font-weight: 600;
    vertical-align: 1px;
}

/* ============================================================
 * 9.2 Mileage & days-listed number-unit pair
 * ============================================================ */
.pc-num {
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--pc-ink);
    font-variant-numeric: tabular-nums;
}
.pc-unit {
    font-size: 9px;
    letter-spacing: 1.3px;
    color: var(--pc-red);
    margin-left: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

/* ============================================================
 * 9.3 Region tag
 * ============================================================ */
.pc-region {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.3px;
    color: var(--pc-red);
    border: 1px solid var(--pc-red-soft);
    border-radius: 2px;
    padding: 1px 5px;
    text-transform: uppercase;
    line-height: 1.4;
    vertical-align: middle;
}

/* ============================================================
 * Layout helpers — small flex containers used by single-car hero
 * and inventory tiles to position the chips together.
 * ============================================================ */
.pc-tm-archive-card__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 6px;
}
.pc-tm-car__chips-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
.pc-tm-car__hero-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 8px;
}
@media (max-width: 543px) {
    .pc-tm-car__hero-row { flex-direction: column; }
}

/* ============================================================
 * 7. Plate chip (CR-032, v0.58.1)
 *
 * Reusable, variant-aware UAE-license-plate-styled chip. Primitive
 * shipped by includes/plate-chip.php — the helper returns the full
 * <figure> + <figcaption class="sr-only"> shape; these rules just
 * style it.
 *
 * Mobile-first: 375px floor, min-height 56px so the centre text is
 * legible; bumps up at 543px. centre text uses clamp() so it
 * shrinks before the chip wraps on extreme overflow. aspect-ratio
 * 3/1 on the face element keeps the chip the same size whether or
 * not the SVG background is on disk.
 *
 * Variant background slot — pc_tm_plate_chip_variant_url() resolves
 * wp-content/uploads/plates/{variant}.svg and only emits the
 * background-image when the file exists; .pc-tm-plate-chip--no-bg
 * is set when it doesn't, and the chip falls back to the flat
 * surface fill so we never render a broken-image icon.
 * ============================================================ */
.pc-tm-plate-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0;
    padding: 0;
    vertical-align: top;
    /* width sized by the face; the figure is a wrapper only */
    max-width: 100%;
}
.pc-tm-plate-chip__face {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    width: 200px;
    max-width: 100%;
    aspect-ratio: 3 / 1;
    min-height: 56px;
    padding: 8px 12px;
    background-color: var(--pc-card-bg, var(--pc-surface));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 1px solid var(--pc-black);
    border-radius: var(--pc-radius, 4px);
    box-sizing: border-box;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pc-tm-plate-chip__tab {
    grid-row: 1;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--pc-red);
    /* Slight pill so the tab reads as a separate plaque on top of
     * a coloured plate background; transparent when no background
     * so it blends into the flat surface. */
    padding: 1px 4px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 2px;
    z-index: 1;
}
.pc-tm-plate-chip--no-bg .pc-tm-plate-chip__tab {
    background: transparent;
    padding: 0;
}
.pc-tm-plate-chip__tab--left  { grid-column: 1; justify-self: start; }
.pc-tm-plate-chip__tab--right { grid-column: 3; justify-self: end;   }
.pc-tm-plate-chip__main {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 4px;
    font-size: clamp(16px, 4.5vw, 24px);
    font-weight: 600;
    letter-spacing: 1.2px;
    color: var(--pc-ink);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}
.pc-tm-plate-chip__sub {
    display: block;
    padding: 4px 8px;
    background: var(--pc-surface-soft);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius, 4px);
    font-size: 10px;
    line-height: 1.3;
    color: var(--pc-muted);
    text-align: center;
    align-self: center;
    max-width: 200px;
}
.pc-tm-plate-chip__sr {
    /* sr-only — screen-reader-only text. Standard recipe (the
     * astra-child sheet already defines .sr-only globally; this
     * class is a safety mirror for environments where the global
     * is missing). */
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Variant accent borders. The plate-coloured SVG backgrounds (when
 * Wolf produces them) carry the dominant colour; these border
 * accents tint the chip frame in the same family so the chip
 * reads consistent even on the no-bg fallback. Federal stays
 * black (the federal plate is white-on-black). */
.pc-tm-plate-chip--dubai-red       .pc-tm-plate-chip__face { border-color: var(--pc-red); }
.pc-tm-plate-chip--abu-dhabi-blue  .pc-tm-plate-chip__face { border-color: #003D8F; }
.pc-tm-plate-chip--sharjah-orange  .pc-tm-plate-chip__face { border-color: #D97706; }
.pc-tm-plate-chip--federal         .pc-tm-plate-chip__face { border-color: var(--pc-black); }
.pc-tm-plate-chip--generic         .pc-tm-plate-chip__face { border-color: var(--pc-black); }

@media (min-width: 544px) {
    .pc-tm-plate-chip__face {
        width: 220px;
        min-height: 64px;
        padding: 10px 14px;
    }
    .pc-tm-plate-chip__main {
        font-size: clamp(20px, 3vw, 28px);
    }
    .pc-tm-plate-chip__sub {
        max-width: 220px;
    }
}