/* ================================================================================
 * 45-v160-chrome.css — Hi Car Match v160 global chrome
 * --------------------------------------------------------------------------------
 * Loads AFTER 38-foundation / 39-public / 40-console / 41-mobile, so it wins the
 * cascade on equal specificity.
 *
 * SCOPE — the shared chrome that wraps every page, plus the console stragglers
 * that the v160 view rewrite emitted without a matching stylesheet rule:
 *
 *   views/partials/header.php          .v160-pub-hdr__*      + .gab-fm-col
 *   views/partials/footer.php          .v160-pub-ft*
 *   views/partials/mobile-search.php   .v160-mob-search__*   + .gab-msearch-default
 *   views/partials/dash-sidebar.php    .v160-con-mbar/-backdrop/-side/-nav/-user
 *   views/partials/my-sidebar.php      .v160-con-mysid/-profile + .gab-my-profile-info
 *   views/pages/register.php           .gab-reg-alert/-terms + .hicm-phone-*
 *   views/pages/admin-dealer-verify.php     .v160-con-queue* / --queue / -actions
 *   views/pages/admin-member-detail.php     .v160-con-actions
 *   views/pages/admin-cars-manage.php       .hicm-car-chk
 *   views/pages/admin-dealers-manage.php    .hicm-dealer-chk
 *
 * NOTE ON THE PARTIALS' INLINE <style> BLOCKS
 *   header.php / footer.php / mobile-search.php / admin-dealer-verify.php each ship
 *   an inline <style> mirror of part of what is below. Those blocks sit in <body>,
 *   so they win ties against this file. Every declaration here therefore uses the
 *   SAME tokens and the SAME values as the mirror — this file is the canonical,
 *   cacheable home for the rules; the inline blocks are a redundant copy that can
 *   be deleted later without any visual change.
 *
 * RULES HONOURED
 *   · Only --v160-* / --gab-* tokens. No raw hex is minted here.
 *   · No foundation primitive (.v160-btn/.v160-card/...) is redefined, only composed.
 *   · Logical properties throughout; [dir="rtl"] only for what logical props cannot
 *     express (glyph mirroring, transforms).
 *   · Specificity capped at two class selectors. No :has(), no @layer, no nesting.
 *   · Breakpoint literals match the foundation: 640 / 1024 / 1025 / 1441.
 *
 * SECTIONS
 *   01 Public header
 *   02 Public footer
 *   03 Mobile full-screen search overlay
 *   04 Console sidebar chrome (dash-sidebar.php)
 *   05 Console collapsed icon rail (the collapse toggle's missing half)
 *   06 My-page sidebar (my-sidebar.php)
 *   07 Console stragglers on four admin screens
 *   08 Register — phone verification + alert + terms
 *   09 Defensive fallbacks for PHP-interpolated modifier class names
 *   10 Responsive
 *   11 RTL corrections
 *   12 Reduced motion + print
 * ============================================================================== */


/* ================================================================================
 * 01 — PUBLIC HEADER  (views/partials/header.php)
 * Row 1 utility strip · Row 2 logo + search + actions · Row 3 category nav + mega.
 * 39-v160-public.css already owns the legacy .gab-site-header / .gab-top-bar /
 * .gab-main-header / .gab-nav-bar / .gab-findmega hooks; everything below is the
 * v160 layer that sits on top of them.
 * ============================================================================== */

.v160-pub-hdr {
    background: var(--v160-surface);
}

/* 23-typography.css paints a warm-beige scroll background on the sticky header
   (rgba(247,247,244,.94)). Matched at equal specificity — not !important. */
.gab-site-header.is-scrolled {
    background: var(--v160-surface);
    box-shadow: var(--v160-elev-2);
}


/* --- 1.1 utility strip --------------------------------------------------- */

.v160-pub-hdr__util {
    background: var(--v160-surface-2);
    border-block-end: 1px solid var(--v160-border-subtle);
    font-size: var(--v160-fs-xs);
}

.v160-pub-hdr__util .gab-top-bar-inner {
    min-block-size: 34px;
}

.v160-pub-hdr__util a {
    color: var(--v160-text-muted);
    font-weight: 500;
}

.v160-pub-hdr__util a:hover {
    color: var(--v160-text);
}

.v160-pub-hdr__util .gab-top-bar-divider {
    inline-size: 1px;
    block-size: 10px;
    background: var(--v160-border);
}

.v160-pub-hdr__util .gab-lang-trigger {
    color: var(--v160-text-muted);
    font-weight: 500;
}

.v160-pub-hdr__util-strong {
    color: var(--v160-text);
    font-weight: 600;
}

.v160-pub-hdr__util-me i {
    color: var(--v160-accent);
}


/* --- 1.2 main row + scroll compaction ------------------------------------ */

.v160-pub-hdr__main {
    transition: padding var(--v160-dur) var(--v160-ease);
}

.v160-pub-hdr.is-compact {
    box-shadow: var(--v160-elev-2);
}

.v160-pub-hdr.is-compact .v160-pub-hdr__util {
    display: none;
}


/* --- 1.3 search ---------------------------------------------------------- */

.v160-pub-hdr__search {
    flex: 1 1 auto;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Anchors the autocomplete popover to the input, not to the hint row below it. */
.v160-pub-hdr__search-field {
    position: relative;
}

.v160-pub-hdr__search .gab-header-search-form {
    border-color: var(--v160-border-strong);
}

.v160-pub-hdr__search .gab-header-search-form:focus-within {
    border-color: var(--v160-accent);
    box-shadow: var(--v160-ring);
}

.v160-pub-hdr__search-hint {
    display: flex;
    align-items: center;
    gap: var(--v160-space-2);
    margin-block-start: var(--v160-space-2);
    font-size: var(--v160-fs-2xs);
    color: var(--v160-text-subtle);
}

.v160-pub-hdr__search-hint a {
    color: var(--v160-text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.v160-pub-hdr__search-hint a:hover {
    color: var(--v160-accent);
}


/* --- 1.4 actions + category nav ------------------------------------------ */

.v160-pub-hdr__actions {
    display: flex;
    align-items: center;
    gap: var(--v160-space-2);
}

/* Positioning context for the mega panel (.gab-findmega uses inset-block-start:100%). */
.v160-pub-hdr__nav {
    position: relative;
}

.v160-pub-hdr__nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v160-space-4);
}


/* --- 1.5 mega "find a car" panel ----------------------------------------- */

.v160-pub-hdr__mega {
    background: var(--v160-surface);
    box-shadow: var(--v160-elev-4);
}

.v160-pub-hdr__mega .gab-fm-title {
    font-size: var(--v160-fs-xs);
    font-weight: 700;
    letter-spacing: var(--v160-track-snug);
    color: var(--v160-text-muted);
    text-transform: uppercase;
}

.v160-pub-hdr__mega-note {
    margin-block-start: var(--v160-space-3);
    margin-block-end: 0;
    font-size: var(--v160-fs-2xs);
    line-height: var(--v160-lh-snug);
    color: var(--v160-text-subtle);
}

/* Panel columns must be allowed to shrink, otherwise the make/type grids
   overflow the 3-column layout at narrow desktop widths. */
.gab-fm-col {
    min-inline-size: 0;
}

/* 02-header.css:469 gives the CTA column a physical border-left/padding-left,
   which lands on the wrong edge in Arabic. Re-expressed logically. */
.gab-fm-col--cta {
    border-left: 0;
    padding-left: 0;
    border-inline-start: 1px solid var(--v160-border-subtle);
    padding-inline-start: var(--v160-space-7);
}


/* --- 1.6 mobile drawer utility row --------------------------------------- */

.v160-pub-hdr__drawer-util {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v160-space-2);
    padding: 0 var(--v160-space-4) var(--v160-space-4);
}


/* ================================================================================
 * 02 — PUBLIC FOOTER  (views/partials/footer.php)
 * ============================================================================== */

.v160-pub-ft {
    background: var(--v160-surface-2);
    border-block-start: 1px solid var(--v160-border);
}

.v160-pub-ft .gab-footer-col-title {
    font-size: var(--v160-fs-xs);
    font-weight: 700;
    letter-spacing: var(--v160-track-snug);
    color: var(--v160-text);
    text-transform: uppercase;
}

.v160-pub-ft .gab-footer-col-list a {
    color: var(--v160-text-muted);
    font-size: var(--v160-fs-md);
}

.v160-pub-ft .gab-footer-col-list a:hover {
    color: var(--v160-accent);
}

.v160-pub-ft .gab-footer-brand-desc {
    color: var(--v160-text-muted);
    font-size: var(--v160-fs-sm);
    line-height: var(--v160-lh-base);
}


/* --- 2.1 service / brokerage disclosure block ---------------------------- */

.v160-pub-ft-biz {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--v160-space-5);
    margin-block-start: var(--v160-space-7);
    padding-block-start: var(--v160-space-6);
    border-block-start: 1px solid var(--v160-border);
}

.v160-pub-ft-biz__title {
    margin-block-end: var(--v160-space-2);
    font-size: var(--v160-fs-xs);
    font-weight: 700;
    letter-spacing: var(--v160-track-snug);
    color: var(--v160-text);
}

.v160-pub-ft-biz__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.v160-pub-ft-biz__list li {
    padding-block: 2px;
    font-size: var(--v160-fs-xs);
    line-height: var(--v160-lh-base);
    color: var(--v160-text-muted);
}

.v160-pub-ft-biz__note {
    margin: var(--v160-space-3) 0 0;
    font-size: var(--v160-fs-2xs);
    line-height: var(--v160-lh-base);
    color: var(--v160-text-subtle);
}

.v160-pub-ft-biz__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v160-space-2);
}


/* --- 2.2 language switcher ----------------------------------------------- */

.v160-pub-ft-lang {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--v160-space-2);
}

.v160-pub-ft-lang__label {
    margin-inline-end: var(--v160-space-1);
    font-size: var(--v160-fs-2xs);
    font-weight: 700;
    letter-spacing: var(--v160-track-snug);
    color: var(--v160-text-subtle);
    text-transform: uppercase;
}

.v160-pub-ft-lang__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 32px;
    padding-inline: var(--v160-space-3);
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-pill);
    background: var(--v160-surface);
    color: var(--v160-text-muted);
    font-size: var(--v160-fs-xs);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: border-color var(--v160-dur) var(--v160-ease),
                color var(--v160-dur) var(--v160-ease);
}

.v160-pub-ft-lang__btn:hover {
    border-color: var(--v160-border-strong);
    color: var(--v160-text);
}

.v160-pub-ft-lang__btn.is-active {
    border-color: var(--v160-accent-border);
    background: var(--v160-accent-soft);
    color: var(--v160-accent);
}

.v160-pub-ft-lang__btn .gab-flag-svg {
    inline-size: 16px;
    block-size: 12px;
}


/* --- 2.3 legal strip ----------------------------------------------------- */

.v160-pub-ft-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--v160-space-3) var(--v160-space-5);
    margin-block-start: var(--v160-space-5);
    padding-block-start: var(--v160-space-4);
    border-block-start: 1px solid var(--v160-border);
}

.v160-pub-ft-legal__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--v160-space-4);
}

.v160-pub-ft-legal a {
    font-size: var(--v160-fs-xs);
    font-weight: 600;
    color: var(--v160-text-muted);
    text-decoration: none;
}

.v160-pub-ft-legal a:hover {
    color: var(--v160-accent);
}

.v160-pub-ft-legal__copy {
    font-size: var(--v160-fs-xs);
    color: var(--v160-text-subtle);
}


/* ================================================================================
 * 03 — MOBILE FULL-SCREEN SEARCH OVERLAY  (views/partials/mobile-search.php)
 * Reads like a native app search screen: sticky input bar (41-v160-mobile.css),
 * then quiet section headers over dense, tappable rows.
 *
 * ⚠ Sections and the default pane are shown/hidden with the [hidden] attribute
 *   from JS. Nothing here may set `display` on .gab-msearch-default or
 *   .v160-mob-search__sec — an author `display` beats the UA [hidden] rule and
 *   the overlay would render every pane at once.
 * ============================================================================== */

.gab-msearch-default {
    padding-block-end: var(--v160-space-9);
}

.v160-mob-search__sec + .v160-mob-search__sec {
    margin-block-start: var(--v160-space-6);
}

.v160-mob-search__sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--v160-space-3);
    margin-block-end: var(--v160-space-3);
}

.v160-mob-search__sec-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--v160-fs-xs);
    font-weight: 700;
    letter-spacing: var(--v160-track-snug);
    color: var(--v160-text-muted);
    text-transform: uppercase;
}

.v160-mob-search__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--v160-tap);
    padding: 0 var(--v160-space-1);
    border: 0;
    background: none;
    color: var(--v160-text-subtle);
    font-family: inherit;
    font-size: var(--v160-fs-xs);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.v160-mob-search__link:hover {
    color: var(--v160-accent);
}

/* Brand shortcuts */
.v160-mob-search__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--v160-space-2);
}

.v160-mob-search__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--v160-tap);
    padding: var(--v160-space-2);
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-md);
    background: var(--v160-surface);
    color: var(--v160-text);
    font-size: var(--v160-fs-sm);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: border-color var(--v160-dur-fast) var(--v160-ease),
                color var(--v160-dur-fast) var(--v160-ease);
}

.v160-mob-search__brand:hover,
.v160-mob-search__brand:active {
    border-color: var(--v160-accent-border);
    color: var(--v160-accent);
}

/* Popular-search rank pip */
.v160-mob-search__rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 20px;
    block-size: 20px;
    border-radius: var(--v160-r-pill);
    background: var(--v160-surface-3);
    color: var(--v160-text-muted);
    font-size: var(--v160-fs-2xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.v160-mob-search__rank.is-top {
    background: var(--v160-accent-soft);
    color: var(--v160-accent);
}

/* The one row primitive: popular keywords, presets and autocomplete hits. */
.v160-mob-search__row {
    display: flex;
    align-items: center;
    gap: var(--v160-space-3);
    inline-size: 100%;
    min-block-size: var(--v160-tap);
    padding: var(--v160-space-2) var(--v160-space-1);
    border: 0;
    border-block-end: 1px solid var(--v160-border-subtle);
    background: none;
    color: var(--v160-text);
    font-family: inherit;
    font-size: var(--v160-fs-md);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.v160-mob-search__row:last-child {
    border-block-end: 0;
}

.v160-mob-search__row:active {
    background: var(--v160-surface-3);
}

.v160-mob-search__row > i {
    flex: none;
    color: var(--v160-text-subtle);
    font-size: var(--v160-fs-lg);
}

.v160-mob-search__row b {
    color: var(--v160-accent);
    font-weight: 700;
}

.v160-mob-search__row-go {
    margin-inline-start: auto;
    color: var(--v160-text-subtle);
    font-size: var(--v160-fs-sm);
}

/* Autocomplete category caption */
.v160-mob-search__sgcat {
    margin-block: var(--v160-space-4) var(--v160-space-1);
    font-size: var(--v160-fs-2xs);
    font-weight: 700;
    letter-spacing: var(--v160-track-snug);
    color: var(--v160-text-subtle);
    text-transform: uppercase;
}

.v160-mob-search__sgcat:first-child {
    margin-block-start: 0;
}

/* Saved searches */
.v160-mob-search__saved {
    display: flex;
    align-items: center;
    gap: var(--v160-space-2);
    min-block-size: var(--v160-tap);
    border-block-end: 1px solid var(--v160-border-subtle);
}

.v160-mob-search__saved:last-child {
    border-block-end: 0;
}

.v160-mob-search__saved a {
    display: flex;
    align-items: center;
    gap: var(--v160-space-2);
    flex: 1 1 auto;
    min-inline-size: 0;
    color: var(--v160-text);
    font-size: var(--v160-fs-sm);
    text-decoration: none;
}

.v160-mob-search__saved a i {
    flex: none;
    color: var(--v160-text-subtle);
}

/* Recent-search chip: the keyword half of a .v160-chip--removable.
   Inherits the chip's own typography so the two halves read as one control. */
.v160-mob-search__chip-kw {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
}


/* ================================================================================
 * 04 — CONSOLE SIDEBAR CHROME  (views/partials/dash-sidebar.php)
 * 40-v160-console.css already owns .v160-con-side / .v160-con-nav__item /
 * .v160-con-user. Below are the pieces the partial emits that had no rule:
 * the mobile bar, the backdrop, the sidebar head, grouped-nav scaffolding,
 * the collapse toggle glyph, and the user-footer sub-elements.
 * ============================================================================== */

/* --- 4.1 mobile top bar --------------------------------------------------- */

.v160-con-mbar {
    display: none;
    position: sticky;
    inset-block-start: 0;
    z-index: var(--v160-z-sticky);
    align-items: center;
    gap: var(--v160-space-3);
    min-block-size: var(--v160-con-top-h, 60px);
    padding: 10px var(--v160-space-4);
    background: var(--v160-surface);
    border-block-end: 1px solid var(--v160-border);
    color: var(--v160-text);
}

.v160-con-mbar__burger {
    flex: none;
    font-size: 20px;
}

.v160-con-mbar__title {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--v160-fs-md);
    font-weight: 700;
    letter-spacing: var(--v160-track-snug);
    color: var(--v160-text);
}

.v160-con-mbar__home {
    flex: none;
    color: var(--v160-text-muted);
    font-size: 18px;
    text-decoration: none;
}

.v160-con-mbar__home:hover {
    color: var(--v160-text);
}


/* --- 4.2 off-canvas backdrop --------------------------------------------- */

.v160-con-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--v160-z-overlay);
    background: var(--v160-surface-overlay);
}


/* --- 4.3 sidebar head (brand + collapse + close) -------------------------- */

.v160-con-side__head {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;      /* the partial also tags it .v160-cluster, which wraps */
    gap: var(--v160-space-2);
    flex-shrink: 0;
    padding-inline-end: var(--v160-space-3);
    border-block-end: 1px solid var(--v160-border-subtle);
}

/* The brand block draws its own hairline; the head now owns it. */
.v160-con-side__head .v160-con-side__brand,
.v160-con-side__head .gab-dash-brand {
    flex: 1 1 auto;
    min-inline-size: 0;
    border-block-end: 0;
}

/* Role chip under the brand name — quiet by design; the accent is reserved
   for state, not for identity. */
.v160-con-side__role {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-block-start: 3px;
    padding: 1px 7px;
    border-radius: var(--v160-r-pill);
    background: var(--v160-surface-3);
    color: var(--v160-text-subtle);
    font-size: var(--v160-fs-2xs);
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Drawer close button. 40-v160-console.css:3168 pins the legacy .gab-dash-close
   with position:absolute, which escapes this flex head and lands over the page.
   Returned to normal flow. */
.v160-con-side__close {
    display: none;
    position: static;
    flex: none;
    inset-block-start: auto;
    inset-inline-end: auto;
}

.v160-con-side__collapse-icon {
    font-size: 13px;
    transition: transform var(--v160-dur) var(--v160-ease);
}


/* --- 4.4 grouped nav scaffolding ----------------------------------------- */

/* Same treatment as .v160-con-nav__label (40-v160-console.css:280); the partials
   emit both names on the element and this is the canonical one. */
.v160-con-nav__group-label {
    padding: var(--v160-space-2) var(--v160-space-3) 6px;
    font-size: var(--v160-fs-2xs);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--v160-text-subtle);
    white-space: nowrap;
}

.v160-con-nav__list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-inline-size: 0;
}

.v160-con-nav__row {
    display: block;
    min-inline-size: 0;
}

.v160-con-nav__icon {
    flex: none;
    inline-size: 20px;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    color: var(--v160-text-subtle);
}

.v160-con-nav__item.is-active .v160-con-nav__icon,
.v160-con-nav__item[aria-current="page"] .v160-con-nav__icon {
    color: var(--v160-accent);
}


/* --- 4.5 user footer ----------------------------------------------------- */

.v160-con-user__avatar {
    flex: none;
}

.v160-con-user__info {
    flex: 1 1 auto;
    min-inline-size: 0;
    line-height: var(--v160-lh-tight);
}

.v160-con-user__verified {
    margin-inline-start: 4px;
    color: var(--v160-info);
    font-size: 12px;
    vertical-align: baseline;
}


/* ================================================================================
 * 05 — CONSOLE COLLAPSED ICON RAIL
 * --------------------------------------------------------------------------------
 * dash-sidebar.php's collapse button writes data-v160-nav="collapsed" onto <html>
 * (and restores it before first paint from localStorage), but no layer listened to
 * that attribute — pressing the button changed nothing. This is the missing half.
 * Desktop only: at <=1024px the sidebar is already an off-canvas drawer.
 * ============================================================================== */

@media (min-width: 1025px) {

    [data-v160-nav="collapsed"] .v160-con-shell,
    [data-v160-nav="collapsed"] .gab-dash {
        grid-template-columns: var(--v160-con-rail-w, 68px) minmax(0, 1fr);
    }

    [data-v160-nav="collapsed"] .v160-con-side__brand-text,
    [data-v160-nav="collapsed"] .v160-con-nav__group-label,
    [data-v160-nav="collapsed"] .v160-con-nav__label-text,
    [data-v160-nav="collapsed"] .v160-con-user__info {
        display: none;
    }

    [data-v160-nav="collapsed"] .v160-con-side__head {
        padding-inline-end: 0;
        flex-direction: column;
        gap: 0;
    }

    [data-v160-nav="collapsed"] .v160-con-side__brand,
    [data-v160-nav="collapsed"] .gab-dash-brand {
        justify-content: center;
        padding-inline: 0;
    }

    [data-v160-nav="collapsed"] .v160-con-side__collapse {
        margin-inline: auto;
        margin-block-end: var(--v160-space-2);
    }

    [data-v160-nav="collapsed"] .v160-con-side__collapse-icon {
        transform: rotate(180deg);
    }

    [data-v160-nav="collapsed"] .v160-con-nav__item,
    [data-v160-nav="collapsed"] .gab-dash-nav-item {
        justify-content: center;
        padding-inline: 0;
    }

    [data-v160-nav="collapsed"] .v160-con-nav__count,
    [data-v160-nav="collapsed"] .gab-dash-nav-badge {
        position: absolute;
        inset-block-start: 2px;
        inset-inline-end: 4px;
        min-inline-size: 16px;
        margin-inline-start: 0;
        padding: 0 4px;
        font-size: var(--v160-fs-2xs);
        line-height: 16px;
    }

    [data-v160-nav="collapsed"] .v160-con-user,
    [data-v160-nav="collapsed"] .gab-dash-user {
        justify-content: center;
    }
}


/* ================================================================================
 * 06 — MY-PAGE SIDEBAR  (views/partials/my-sidebar.php)
 * Same console shell language, one column narrower and card-shaped because it sits
 * inside the public page grid rather than in a full-height shell.
 * ============================================================================== */

.v160-con-mysid {
    display: flex;
    flex-direction: column;
    align-self: start;
    position: sticky;
    inset-block-start: 84px;
    min-inline-size: 0;
    padding: var(--v160-space-4);
    background: var(--v160-surface);
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-xl);
    box-shadow: var(--v160-elev-1);
}


/* --- 6.1 profile block ---------------------------------------------------- */

.v160-con-profile {
    display: flex;
    align-items: center;
    gap: var(--v160-space-3);
    min-inline-size: 0;
    padding-block-end: var(--v160-space-3);
    margin-block-end: var(--v160-space-3);
    border-block-end: 1px solid var(--v160-border-subtle);
}

.v160-con-profile__avatar {
    flex: none;
}

.v160-con-profile__info {
    flex: 1 1 auto;
    min-inline-size: 0;
    line-height: var(--v160-lh-tight);
}

/* Legacy hook on the same element (15-member.css has no rule for it). */
.gab-my-profile-info {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.v160-con-profile__name {
    font-size: var(--v160-fs-md);
    font-weight: 700;
    color: var(--v160-text);
}

.v160-con-profile__meta {
    margin-block-start: 2px;
    font-size: var(--v160-fs-xs);
    color: var(--v160-text-subtle);
}

.v160-con-profile__type {
    margin-block-start: 6px;
    max-inline-size: 100%;
}


/* --- 6.2 seller-console switch -------------------------------------------- */

.v160-con-mysid__switch {
    justify-content: flex-start;
    gap: var(--v160-space-2);
    margin-block-end: var(--v160-space-3);
    text-align: start;
}

.v160-con-mysid__switch-arrow {
    margin-inline-start: auto;
    font-size: var(--v160-fs-sm);
    opacity: .75;
}


/* --- 6.3 foot ------------------------------------------------------------- */

.v160-con-mysid__foot {
    margin-block-start: var(--v160-space-3);
}

.v160-con-mysid__logout {
    justify-content: flex-start;
    gap: var(--v160-space-2);
    color: var(--v160-text-subtle);
    text-align: start;
}

.v160-con-mysid__logout:hover {
    background: var(--v160-danger-soft);
    color: var(--v160-danger);
}


/* ================================================================================
 * 07 — CONSOLE STRAGGLERS ON FOUR ADMIN SCREENS
 * ============================================================================== */

/* --- 7.1 decision / action card body (admin-dealer-verify, admin-member-detail,
 *         admin-settlement-detail). Stacked forms, each ending in a block button. */
.v160-con-actions {
    display: flex;
    flex-direction: column;
    gap: var(--v160-space-3);
}

.v160-con-actions form {
    margin-block: 0;
}


/* --- 7.2 verification review queue (admin-dealer-verify.php) -------------- */

.v160-con-detail--queue {
    grid-template-columns: 320px minmax(0, 1fr);
}

.v160-con-queue {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.v160-con-queue__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 9px var(--v160-space-3);
    border-radius: var(--v160-r-md);
    color: var(--v160-text);
    line-height: var(--v160-lh-snug);
    text-decoration: none;
    transition: background var(--v160-dur-fast) var(--v160-ease),
                color var(--v160-dur-fast) var(--v160-ease);
}

.v160-con-queue__item:hover {
    background: var(--v160-surface-3);
}

.v160-con-queue__item:focus-visible {
    outline: 2px solid var(--v160-accent);
    outline-offset: -2px;
}

.v160-con-queue__item.is-active,
.v160-con-queue__item[aria-current="true"] {
    background: var(--v160-accent-soft);
    color: var(--v160-accent-hover);
}

.v160-con-queue__item.is-active::before,
.v160-con-queue__item[aria-current="true"]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 7px;
    inline-size: 3px;
    border-radius: var(--v160-r-pill);
    background: var(--v160-accent);
}

.v160-con-queue__main {
    max-inline-size: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
}

.v160-con-queue__item.is-active .v160-con-queue__main,
.v160-con-queue__item[aria-current="true"] .v160-con-queue__main {
    font-weight: 700;
}

.v160-con-queue__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    font-size: var(--v160-fs-2xs);
    color: var(--v160-text-subtle);
}


/* --- 7.3 bulk-select checkboxes (admin-cars-manage, admin-dealers-manage) -- */

.hicm-car-chk,
.hicm-dealer-chk {
    flex: none;
    vertical-align: middle;
    cursor: pointer;
}


/* ================================================================================
 * 08 — REGISTER  (views/pages/register.php)
 * --------------------------------------------------------------------------------
 * register.php ships an inline <style> block that hard-codes raw hex (#dce3ec,
 * #f8fafc, #d92d20, #cfd8e5 …) predating the token system, and it sits in <body>
 * so it wins ties against this file. Each rule below is therefore scoped through
 * the page wrapper .gab-reg-page — two classes, exactly enough to win — and
 * restates the same layout in v160 tokens so the step-3 form matches every other
 * form in the product.
 * ============================================================================== */

.gab-reg-page .hicm-phone-verify {
    margin: var(--v160-space-6) 0 0;
    padding: var(--v160-space-5);
    border: 1px solid var(--v160-border);
    border-radius: var(--v160-r-xl);
    background: var(--v160-surface-2);
}

.gab-reg-page .hicm-phone-verify legend {
    padding-inline: var(--v160-space-2);
    font-size: var(--v160-fs-sm);
    font-weight: 700;
    color: var(--v160-text);
}

.gab-reg-page .hicm-phone-verify legend b {
    color: var(--v160-accent);
}

.gab-reg-page .hicm-phone-verify.is-verified {
    border-color: var(--v160-success-border);
    background: var(--v160-success-soft);
}

.gab-reg-page .hicm-phone-control {
    display: grid;
    gap: 6px;
    min-inline-size: 0;
    font-size: var(--v160-fs-sm);
    font-weight: 600;
    color: var(--v160-text-muted);
}

.gab-reg-page .hicm-phone-control input,
.gab-reg-page .hicm-phone-control select {
    inline-size: 100%;
    min-block-size: var(--v160-control-h-lg);
    padding-block: 10px;
    padding-inline: 12px;
    border: 1px solid var(--v160-border-strong);
    border-radius: var(--v160-r-md);
    background: var(--v160-surface);
    color: var(--v160-text);
    font: inherit;
    font-weight: 500;
}

.gab-reg-page .hicm-phone-control input:focus,
.gab-reg-page .hicm-phone-control select:focus {
    outline: none;
    border-color: var(--v160-accent);
    box-shadow: var(--v160-ring);
}

/* The number field carries the international format, so it stays LTR in Arabic. */
.gab-reg-page .hicm-phone-number input {
    font-variant-numeric: tabular-nums;
}

.gab-reg-page .hicm-phone-code {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) auto;
    gap: var(--v160-space-3);
    align-items: end;
    margin-block-start: var(--v160-space-3);
}

.gab-reg-page .hicm-phone-status {
    min-block-size: 20px;
    margin: var(--v160-space-3) 0 0;
    font-size: var(--v160-fs-sm);
    line-height: var(--v160-lh-base);
    color: var(--v160-text-subtle);
}

.gab-reg-page .hicm-phone-status.is-error {
    color: var(--v160-danger);
}

.gab-reg-page .hicm-phone-status.is-success {
    color: var(--v160-success);
    font-weight: 700;
}

/* Error banner and the terms row both carry a legacy inline style="" attribute,
   which no stylesheet can outrank. These add only what the attribute leaves
   unset, so the two blocks still read as v160 typography. */
.gab-reg-alert {
    max-inline-size: 680px;
    margin-inline: auto;
    font-size: var(--v160-fs-md);
    line-height: var(--v160-lh-snug);
    letter-spacing: var(--v160-track-snug);
}

.gab-reg-alert i {
    flex: none;
    font-size: var(--v160-fs-lg);
}

.gab-reg-terms {
    line-height: var(--v160-lh-base);
    letter-spacing: var(--v160-track-snug);
}

.gab-reg-terms:hover {
    border-color: var(--v160-border-strong);
}


/* ================================================================================
 * 09 — DEFENSIVE FALLBACKS FOR PHP-INTERPOLATED MODIFIER NAMES
 * --------------------------------------------------------------------------------
 * A dozen console templates build the modifier by interpolation, e.g.
 *   class="v160-alert v160-alert--<?php echo esc_attr( $tone ); ?>"
 * If the tone variable is ever empty the bare modifier ships to the browser. These
 * two rules make that degrade to the neutral treatment instead of an unstyled box.
 * They are inert whenever the tone resolves normally.
 * ============================================================================== */

.v160-alert-- {
    background: var(--v160-surface-2);
    border-color: var(--v160-border);
}

.v160-badge-- {
    background: var(--v160-neutral-soft);
    border-color: var(--v160-neutral-border);
    color: var(--v160-neutral);
}


/* ================================================================================
 * 10 — RESPONSIVE
 * tablet <= 1024px · mobile <= 640px · wide >= 1441px
 * ============================================================================== */

@media (min-width: 1025px) {

    /* Compact header: shed the tagline, the hint row and the category nav, keep
       the search field reachable at every scroll position. */
    .v160-pub-hdr.is-compact .v160-pub-hdr__main {
        padding-block: var(--v160-space-2);
    }

    .v160-pub-hdr.is-compact .gab-logo-tagline,
    .v160-pub-hdr.is-compact .v160-pub-hdr__search-hint,
    .v160-pub-hdr.is-compact .v160-pub-hdr__nav {
        display: none;
    }
}

@media (max-width: 1024px) {

    .v160-pub-hdr__util,
    .v160-pub-hdr__search-hint {
        display: none;
    }

    .v160-pub-ft-biz {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Console: the sidebar becomes an off-canvas drawer, so the mobile bar,
       backdrop and close button take over from the collapse toggle. */
    .v160-con-mbar {
        display: flex;
    }

    .v160-con-backdrop.is-open {
        display: block;
    }

    .v160-con-side__close {
        display: inline-flex;
    }

    .v160-con-side__collapse {
        display: none;
    }

    .v160-con-mysid {
        position: static;
    }

    .v160-con-detail--queue {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {

    .v160-pub-ft-legal {
        gap: var(--v160-space-3);
    }

    .v160-pub-ft-legal__links {
        gap: var(--v160-space-3);
        inline-size: 100%;
    }

    /* 44px touch targets for every footer / overlay control. */
    .v160-pub-ft-lang__btn,
    .v160-pub-ft-legal a {
        display: inline-flex;
        align-items: center;
        min-block-size: var(--v160-tap);
    }

    .v160-mob-search__grid {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    }

    .gab-fm-col--cta {
        border-inline-start: 0;
        padding-inline-start: 0;
    }
}


/* ================================================================================
 * 11 — RTL CORRECTIONS
 * Everything above is written with logical properties. These cover only what
 * logical properties cannot express: glyph direction and transforms.
 * ============================================================================== */

[dir="rtl"] .v160-mob-search__row-go,
[dir="rtl"] .v160-con-mysid__switch-arrow {
    transform: scaleX(-1);
}

[dir="rtl"] .v160-con-side__collapse-icon {
    transform: scaleX(-1);
}

[dir="rtl"][data-v160-nav="collapsed"] .v160-con-side__collapse-icon {
    transform: scaleX(-1) rotate(180deg);
}

/* Phone numbers are entered in international format and must stay LTR in Arabic. */
[dir="rtl"] .gab-reg-page .hicm-phone-number input,
[dir="rtl"] .gab-reg-page .hicm-phone-code input {
    direction: ltr;
    text-align: start;
    unicode-bidi: isolate;
}


/* ================================================================================
 * 12 — REDUCED MOTION + PRINT
 * ============================================================================== */

@media (prefers-reduced-motion: reduce) {

    .v160-pub-hdr__main,
    .v160-pub-ft-lang__btn,
    .v160-mob-search__brand,
    .v160-con-side__collapse-icon,
    .v160-con-queue__item {
        transition: none;
    }
}

@media print {

    .v160-pub-hdr,
    .v160-pub-ft-lang,
    .v160-con-mbar,
    .v160-con-backdrop,
    .v160-con-mysid,
    .v160-con-actions {
        display: none;
    }

    .v160-pub-ft,
    .v160-pub-ft-biz,
    .v160-pub-ft-legal {
        background: none;
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ================================================================================
 * 10. 브랜드 마크 — 하이카매치 캐릭터 (v160.1)
 * --------------------------------------------------------------------------------
 * 운영자 지정으로 gab_logo_mark() 가 추상 아이콘(logo-mark.svg) 대신
 * mascot-compare-v3 캐릭터를 출력한다. 기존 마크는 테두리가 있는 정사각 아이콘이라
 * 박스를 꽉 채웠지만, 캐릭터는 여백이 있는 인물이라 같은 치수로는 작아 보인다.
 * 여기서 컨텍스트별로 다시 잡는다. 헤더 로고 텍스트/태그라인은 건드리지 않는다.
 * ================================================================================ */

.hicm-logo-mark--character {
    display: block;
    inline-size: 44px;
    block-size: 44px;
    object-fit: contain;
    object-position: center;
    /* 캐릭터는 자체 외곽선이 있으므로 테두리·배경·그림자를 얹지 않는다. */
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    flex: 0 0 auto;
}

/* 헤더: 로고 텍스트와 시각 무게를 맞춘다. */
.gab-logo .hicm-logo-mark--character,
.gab-logo-icon .hicm-logo-mark--character {
    inline-size: 46px;
    block-size: 46px;
}

/* 레거시 27px 규칙(23-typography.css:350)은 캐릭터에는 너무 작다. */
.gab-logo-svg.hicm-logo-mark--character {
    inline-size: 46px;
    block-size: 46px;
}

/* 드로어 / 콘솔 사이드바: 좁은 폭이라 조금 줄인다. */
.gab-drawer-logo-mark.hicm-logo-mark--character,
.v160-con-side__logo.hicm-logo-mark--character {
    inline-size: 38px;
    block-size: 38px;
}

/* 로그인·회원가입: 브랜드를 크게 보여주는 화면. */
.gab-auth-logo-svg.hicm-logo-mark--character,
.gab-reg-logo-svg.hicm-logo-mark--character {
    inline-size: 64px;
    block-size: 64px;
}

/* 캐릭터를 감싸던 아이콘 박스 무력화.
 * gab_logo_mark() 는 이제 항상 캐릭터를 반환하므로 :has() 없이 직접 지정한다.
 * 특히 23-typography.css:351 의 overflow:hidden 과 20-mobile.css:154 의 고정 38px 은
 * 캐릭터를 잘라내므로 반드시 해제해야 한다. 25-hicm-skin.css:44 의 배경/테두리,
 * 23-typography.css:320 의 box-shadow 도 액자형 아이콘 전제라 함께 제거한다. */
.gab-logo-icon,
.gab-main-header .gab-logo-icon {
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 640px) {
    .gab-logo .hicm-logo-mark--character,
    .gab-logo-icon .hicm-logo-mark--character,
    .gab-logo-svg.hicm-logo-mark--character {
        inline-size: 38px;
        block-size: 38px;
    }
    .gab-auth-logo-svg.hicm-logo-mark--character,
    .gab-reg-logo-svg.hicm-logo-mark--character {
        inline-size: 52px;
        block-size: 52px;
    }
}
