/* ==========================================================================
   RTP Auto – public dealer profile (/marketplace/dealership/profile/{slug})
   Depends on the tokens in site.css, plus vehicle-card.css, pager.css and
   contact-form.css. Markup: resources/views/main/dealers/profile.blade.php
   ========================================================================== */

.dp {
    --dp-header: 72px;          /* sticky site header */
    --dp-tabs: 56px;            /* sticky section bar */
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--f-body);
    overflow-x: clip;
}

:where(.dp ul[role="list"], .dp ol[role="list"]) { list-style: none; margin: 0; padding: 0; }
:where(.dp :is(h1, h2, h3, p)) { margin: 0; color: inherit; }
:where(.dp table) { border-collapse: collapse; }

/* The theme removes focus outlines on controls; put them back here. */
.dp :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--c-brand);
    outline-offset: 2px;
}
.dp ::selection { background: rgb(43 182 232 / 28%); color: var(--c-ink); }

/* ---------- Stars (exact fill) ---------- */
.stars { position: relative; display: inline-block; width: 5em; height: 1em; font-size: 1.05rem; line-height: 0; vertical-align: -.15em; }
.stars svg { display: inline-block; flex: none; width: 1em; height: 1em; fill: currentColor; }   /* never shrink inside the clipped fill layer */
.stars__base, .stars__fill { position: absolute; inset: 0 auto 0 0; display: flex; white-space: nowrap; overflow: hidden; }
.stars__base { width: 100%; color: #c6d1de; }
.stars__fill { color: #f5a524; }
.stars--lg { font-size: 1.6rem; }

/* ==========================================================================
   Storefront header
   ========================================================================== */
.dp-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(1rem, 2.5vw, 1.5rem) 0 clamp(2rem, 4.5vw, 3.25rem);
    color: var(--c-on-dark);
    background:
        radial-gradient(60rem 28rem at 88% -25%, rgb(43 182 232 / 30%), transparent 60%),
        radial-gradient(42rem 24rem at -8% 125%, rgb(217 54 62 / 20%), transparent 60%),
        linear-gradient(165deg, var(--c-ink-2), var(--c-ink));
}

/* The dealer's initial, drawn as a huge outline behind the header */
.dp-hero__mark {
    position: absolute;
    z-index: -1;
    right: clamp(-3rem, -2vw, 0rem);
    bottom: -.28em;
    font: 800 clamp(15rem, 36vw, 32rem) / 1 var(--f-display);
    color: transparent;
    -webkit-text-stroke: 2px rgb(255 255 255 / 8%);
    pointer-events: none;
    user-select: none;
}

.dp-crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .875rem; color: var(--c-on-dark-muted); }
.dp-crumbs li + li::before { content: "/"; margin-right: .35rem; color: #5d7699; }
.dp-crumbs a { color: var(--c-on-dark-muted); text-decoration: none; }
.dp-crumbs a:hover { color: #fff; text-decoration: underline; }
.dp-crumbs [aria-current] { color: #fff; }

.dp-hero__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 1.25rem clamp(1.25rem, 3vw, 2rem);
    margin-top: clamp(1.5rem, 4vw, 2.75rem);
    animation: dp-rise .6s var(--ease) both;
}

.dp-logo {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(140deg, var(--c-brand), #1673a0);
    box-shadow: 0 18px 40px -16px rgb(0 0 0 / 60%), inset 0 0 0 1px rgb(255 255 255 / 18%);
    color: #fff;
    font: 800 2rem / 1 var(--f-display);
    letter-spacing: -.02em;
}
.dp-logo img { width: 100%; height: 100%; padding: 10px; background: #fff; object-fit: contain; }

.dp-hero__name {
    color: #fff;
    font-family: var(--f-display);
    font-size: clamp(2rem, 1.1rem + 3.4vw, 3.9rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.dp-hero__place {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .9rem;
    margin-top: .75rem;
    color: var(--c-on-dark-muted);
    font-size: 1.05rem;
}
.dp-hero__place span + span::before { content: "·"; margin-right: .9rem; color: #5d7699; }

.dp-proof { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.dp-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    padding: .4rem .9rem;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 999px;
    background: rgb(255 255 255 / 6%);
    color: var(--c-on-dark);
    font-size: .925rem;
    text-decoration: none;
    transition: background-color .2s, border-color .2s;
}
a.dp-chip:hover { border-color: rgb(255 255 255 / 34%); background: rgb(255 255 255 / 11%); color: #fff; }
.dp-chip strong { color: #fff; font-family: var(--f-display); font-variant-numeric: tabular-nums; }
.dp-chip > svg { width: 18px; height: 18px; fill: none; stroke: var(--c-brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dp-chip .stars { font-size: .95rem; }
.dp-chip .stars__base { color: rgb(255 255 255 / 25%); }
.dp-chip__dot { width: 9px; height: 9px; border-radius: 50%; background: #8aa0bd; }
.dp-chip.is-open .dp-chip__dot { background: #3ddc84; box-shadow: 0 0 0 4px rgb(61 220 132 / 20%); }
.dp-chip.is-closed { color: var(--c-on-dark-muted); }

.dp-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-self: end; gap: .6rem; }
.dp-actions .rtp-btn svg { flex-shrink: 0; }

.dp-links { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin-top: 1.75rem; }
.dp-links a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 36px;
    padding: .25rem .8rem;
    border-radius: 999px;
    color: var(--c-on-dark-muted);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .15s, background-color .15s;
}
.dp-links a:hover { background: rgb(255 255 255 / 8%); color: #fff; }
.dp-links svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Section bar (sticks under the site header)
   ========================================================================== */
.dp-tabs {
    position: sticky;
    top: var(--dp-header);
    z-index: 1020;
    border-bottom: 1px solid var(--c-line);
    background: rgb(244 246 249 / 92%);
    backdrop-filter: saturate(160%) blur(12px);
}
.dp-tabs ul { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.dp-tabs ul::-webkit-scrollbar { display: none; }
.dp-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: var(--dp-tabs);
    padding: 0 1rem;
    color: var(--c-muted);
    font-family: var(--f-display);
    font-size: .925rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: color .15s;
}
.dp-tabs a:hover { color: var(--c-text); }
.dp-tabs a[aria-current="true"] { color: var(--c-text); }
.dp-tabs a[aria-current="true"]::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--c-coral);
}
.dp-tabs__n { padding: .05rem .5rem; border-radius: 999px; background: #e3e9f1; color: var(--c-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Layout
   ========================================================================== */
.dp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: clamp(1.5rem, 3.5vw, 3rem);
    align-items: start;
    padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(3rem, 6vw, 5rem);
}
.dp-main { min-width: 0; }

.dp-section { scroll-margin-top: calc(var(--dp-header) + var(--dp-tabs) + 12px); }
.dp-section + .dp-section { margin-top: clamp(2.75rem, 6vw, 4.5rem); }
.dp-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: 1.1rem; }
.dp-h2 {
    color: var(--c-text);
    font-family: var(--f-display);
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.1;
}
.dp-count { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.dp-muted { color: var(--c-muted); }

/* ---------- Inventory controls ---------- */
.dp-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.25rem; }
.dp-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.dp-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    padding: .3rem .9rem;
    border: 1.5px solid var(--c-line);
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-text);
    font-family: var(--f-display);
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .15s, background-color .15s, color .15s;
}
.dp-pill span { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.dp-pill:hover { border-color: var(--c-ink); color: var(--c-text); }
.dp-pill.is-active { border-color: var(--c-ink); background: var(--c-ink); color: #fff; }
.dp-pill.is-active span { color: var(--c-on-dark-muted); }

.dp-sort { display: flex; flex-wrap: wrap; gap: .15rem; font-size: .875rem; }
.dp-sort a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 .7rem;
    border-radius: 10px;
    color: var(--c-muted);
    font-weight: 600;
    text-decoration: none;
}
.dp-sort a:hover { color: var(--c-text); background: #e8edf4; }
.dp-sort a[aria-current="true"] { color: var(--c-text); background: #e3e9f1; }

.dp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; }
.dp-grid > li { display: flex; }

.dp-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    border: 1.5px dashed #cbd5e1;
    border-radius: var(--radius-lg);
    background: var(--c-surface);
}
.dp-empty a:not(.rtp-btn) { color: var(--c-brand-text); }

.dp-prose { max-width: 68ch; color: #2c3a4f; font-size: 1.075rem; line-height: 1.7; }

/* ==========================================================================
   Verified reviews
   ========================================================================== */
.dp-rating {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
}
.dp-rating__score { display: grid; justify-items: start; gap: .3rem; }
.dp-rating__value { color: var(--c-text); font: 800 4rem / 1 var(--f-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.dp-rating__of { color: var(--c-muted); font-size: .925rem; }
.dp-rating__bars { display: grid; gap: .5rem; }
.dp-rating__bars li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 2.25rem; align-items: center; gap: .75rem; }
.dp-rating__star { display: inline-flex; align-items: center; gap: .25rem; color: var(--c-muted); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dp-rating__star svg { width: 13px; height: 13px; fill: #f5a524; }
.dp-rating__track { height: 8px; overflow: hidden; border-radius: 999px; background: #e8edf4; }
.dp-rating__track span { display: block; width: var(--w); height: 100%; border-radius: inherit; background: #f5a524; transform-origin: left; animation: dp-grow .8s var(--ease) both; }
.dp-rating__n { color: var(--c-muted); font-size: .875rem; font-variant-numeric: tabular-nums; text-align: right; }

.dp-reviews { display: grid; gap: .75rem; margin-top: 1rem; }
.dp-review { padding: 1.25rem 1.4rem; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-surface); }
.dp-review__top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.dp-review__name { color: var(--c-text); font-family: var(--f-display); font-size: 1rem; }
.dp-review__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .9rem; margin-top: .45rem; color: var(--c-muted); font-size: .85rem; }
.dp-verified { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; background: #e8f8ef; color: #12603a; font-weight: 700; }
.dp-verified svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dp-review__text { margin-top: .75rem; max-width: 68ch; color: #2c3a4f; line-height: 1.65; overflow-wrap: anywhere; }

.dp-note { margin-top: 1.25rem; padding: 1.1rem 1.25rem; border-radius: 14px; background: #e8eef6; color: var(--c-muted); }
.dp-note h3 { color: var(--c-text); font-family: var(--f-display); font-size: .95rem; font-weight: 800; }
.dp-note p { max-width: 62ch; margin-top: .25rem; font-size: .925rem; line-height: 1.55; }

/* ==========================================================================
   Aside: visit + message
   ========================================================================== */
.dp-aside {
    position: sticky;
    top: calc(var(--dp-header) + var(--dp-tabs) + 16px);
    display: grid;
    gap: 1rem;
    scroll-margin-top: calc(var(--dp-header) + var(--dp-tabs) + 16px);
}
.dp-card { padding: 1.5rem; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); }
.dp-card__title { margin-bottom: 1rem; color: var(--c-text); font-family: var(--f-display); font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.dp-card__sub { display: flex; align-items: center; gap: .45rem; margin: 1.4rem 0 .6rem; padding-top: 1.25rem; border-top: 1px solid var(--c-line); color: var(--c-text); font-family: var(--f-display); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dp-card__sub svg { width: 16px; height: 16px; fill: none; stroke: var(--c-muted); stroke-width: 2; stroke-linecap: round; }

.dp-address { display: flex; align-items: flex-start; gap: .65rem; color: var(--c-text); line-height: 1.5; }
.dp-address svg, .dp-lines svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: .2rem; fill: none; stroke: var(--c-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dp-link-btn { display: inline-flex; align-items: center; gap: .4rem; margin: .75rem 0 0 1.65rem; color: var(--c-brand-text); font-family: var(--f-display); font-size: .9rem; font-weight: 700; text-decoration: none; }
.dp-link-btn:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.dp-link-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }

.dp-lines { display: grid; gap: .6rem; margin-top: 1.1rem; }
.dp-lines li { display: flex; align-items: flex-start; gap: .65rem; }
.dp-lines a { color: var(--c-text); overflow-wrap: anywhere; text-underline-offset: 3px; }
.dp-lines a:hover { color: var(--c-brand-text); }

.dp-status { margin-bottom: .6rem; color: var(--c-muted); font-weight: 700; font-size: .9rem; }
.dp-status.is-open { color: #12603a; }
.dp-hours { width: 100%; font-size: .9rem; font-variant-numeric: tabular-nums; }
.dp-hours th, .dp-hours td { padding: .4rem .6rem; text-align: left; font-weight: 500; }
.dp-hours td { text-align: right; }
.dp-hours th { color: var(--c-muted); }
.dp-hours tr.is-closed td { color: var(--c-muted); }
.dp-hours tr.is-today { background: #eef8fc; }
.dp-hours tr.is-today th, .dp-hours tr.is-today td { color: var(--c-text); font-weight: 700; }
.dp-hours tr.is-today th { border-radius: 8px 0 0 8px; }
.dp-hours tr.is-today td { border-radius: 0 8px 8px 0; }

.dp-contact { box-shadow: 0 18px 40px -28px rgb(11 22 38 / 45%); }

/* ---------- Mobile bar ---------- */
.dp-bar { display: none; }

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes dp-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes dp-grow { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
    .dp-hero__row, .dp-rating__track span { animation: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199.98px) {
    .dp-hero__row { grid-template-columns: auto minmax(0, 1fr); }
    .dp-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 991.98px) {
    .dp { --dp-header: 64px; }
    .dp-layout { grid-template-columns: minmax(0, 1fr); padding-bottom: 6rem; }
    .dp-aside { position: static; }
    .dp-tabs ul { margin-inline: -.5rem; }
    .dp-bar {
        position: fixed;
        inset: auto 0 0;
        z-index: 1020;
        display: flex;
        gap: .6rem;
        padding: .7rem max(1rem, env(safe-area-inset-right)) calc(.7rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
        border-top: 1px solid var(--c-line);
        background: rgb(255 255 255 / 96%);
        box-shadow: 0 -10px 30px -18px rgb(11 22 38 / 40%);
    }
    .dp-bar .rtp-btn { flex: 1; min-height: 46px; }
}

@media (max-width: 575.98px) {
    .dp-hero__row { grid-template-columns: minmax(0, 1fr); }
    .dp-logo { width: 80px; height: 80px; border-radius: 20px; }
    .dp-actions .rtp-btn { flex: 1 1 100%; }
    .dp-actions { display: none; }          /* the bar below carries Call / Message */
    .dp-rating { grid-template-columns: minmax(0, 1fr); }
    .dp-controls { flex-direction: column; align-items: flex-start; }
    .dp-filters { flex-wrap: nowrap; max-width: 100%; margin-inline: -.25rem; padding: .25rem; overflow-x: auto; scrollbar-width: none; }
    .dp-filters::-webkit-scrollbar { display: none; }
    .dp-pill { flex-shrink: 0; }
    .dp-card { padding: 1.25rem; }
}