/* ==========================================================================
   Vendor directory - category listing
   Mobile first, 360px primary target. All colour derives from the platform
   tokens in frest/assets/css/style.css.
   ========================================================================== */

:root {
    --v-ink: #040406;                    /* --ocean-blue */
    --v-ink-lift: #16181d;               /* ink, lifted, for gradients only */
    --v-sand: #f8f5f2;                   /* --warm-sand */
    --v-slate: #4a4e69;                  /* --evening-slate */
    --v-saffron: #ff9f1c;                /* --saffron-gold, fills only */
    --v-saffron-deep: #9a5a00;           /* same hue, darkened for text (5.5:1 on white) */
    --v-whatsapp: #199f4b;               /* WhatsApp brand hue, deepened to 3.4:1 with the white glyph */
    --v-open: #0f7a40;                   /* 5.0:1 on sand */
    --v-line: rgba(74, 78, 105, 0.14);
    --v-radius: 8px;
    --v-radius-card: 18px;
    /* Clearance for the fixed chrome: 44px aarti bar + .glass-navbar (top: 38px,
       1rem padding), whose bottom edge lands around 120-126px. The hero band
       itself still starts at 80px so no gap can open above it. */
    --v-header-clear: 3.5rem;
    --v-shadow: 0 1px 2px rgba(4, 4, 6, 0.04), 0 6px 20px -8px rgba(4, 4, 6, 0.12);
    --v-shadow-hover: 0 2px 4px rgba(4, 4, 6, 0.05), 0 14px 32px -10px rgba(4, 4, 6, 0.18);
}

/* ---------- Hero ---------- */
.v-hero {
    margin-top: 80px;
    padding: var(--v-header-clear) 0 2rem;
    background: linear-gradient(160deg, var(--v-ink-lift) 0%, var(--v-ink) 72%);
    color: #fff;
}

.v-hero__eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 159, 28, 0.16);
    color: var(--v-saffron);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.v-hero__title {
    margin: 0 0 0.4rem;
    color: #fff;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.v-hero__subtitle {
    max-width: 46ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* ---------- Back bar ---------- */
.v-backbar {
    background: var(--v-sand);
    border-bottom: 1px solid var(--v-line);
}

.v-backbar__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    color: var(--v-slate);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.v-backbar__link:hover,
.v-backbar__link:focus {
    color: var(--v-ink);
}

/* ---------- List shell ---------- */
.v-section {
    padding: 1.25rem 0 3rem;
    background: var(--v-sand);
}

.v-list {
    display: grid;
    gap: 0.75rem;
}

/* ---------- Card ---------- */
.v-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 0.75rem;
    padding: 1rem 0.875rem;
    background: #fff;
    border-radius: var(--v-radius-card);
    box-shadow: var(--v-shadow);
    transition: box-shadow 0.2s ease;
}

.v-card:hover {
    box-shadow: var(--v-shadow-hover);
}

/* Avatar: uploaded logo, cover, or initials */
.v-card__avatar {
    display: block;
    align-self: start;
    width: 64px;
    height: 64px;
    text-decoration: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--v-sand);
    box-shadow: inset 0 0 0 1px var(--v-line);
}

.v-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.v-card__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--v-ink);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
}

.v-card__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Name and fare: the two things a pilgrim decides on */
.v-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.625rem;
    margin-bottom: 0.3rem;
}

.v-card__name {
    margin: 0;
    font-size: 1.3125rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.022em;
    overflow-wrap: anywhere;
}

.v-card__name a {
    color: var(--v-ink);
    text-decoration: none;
}

.v-card__name a:hover,
.v-card__name a:focus {
    color: var(--v-saffron-deep);
}

.v-card__fare {
    flex: 0 0 auto;
    margin: 0;
    text-align: right;
    line-height: 1.2;
}

.v-card__fare-prefix {
    display: block;
    color: var(--v-slate);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
}

.v-card__fare-amount {
    display: block;
    color: var(--v-saffron-deep);
    font-size: 1.0625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.v-card__fare-unit {
    display: block;
    color: var(--v-slate);
    font-size: 0.625rem;
    white-space: nowrap;
}

/* Metadata line */
.v-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0 0 0.625rem;
    color: var(--v-slate);
    font-size: 0.8125rem;
    line-height: 1.35;
}

.v-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--v-ink);
    white-space: nowrap;
}

.v-card__rating i {
    color: var(--v-saffron-deep);
    font-size: 0.8125rem;
}

.v-card__rating strong {
    font-weight: 700;
}

.v-card__rating-count {
    color: var(--v-slate);
    font-weight: 500;
}

.v-card__rating--new {
    color: var(--v-slate);
}

.v-card__rating--new i,
.v-card__rating--new strong {
    color: var(--v-slate);
    font-weight: 600;
}

.v-card__meta-sep {
    opacity: 0.45;
}

.v-card__qualifier {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pills */
.v-card__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.v-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.6875rem;
    border-radius: 999px;
    background: var(--v-sand);
    color: var(--v-slate);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}

.v-pill i {
    font-size: 0.6875rem;
    opacity: 0.7;
}

.v-pill__state {
    display: inline-flex;
    align-items: center;
    margin-left: 0.125rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--v-line);
    font-weight: 700;
}

.v-pill__state::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 0.3125rem;
    border-radius: 50%;
    background: currentColor;
}

.v-pill--open .v-pill__state {
    color: var(--v-open);
}

.v-pill--closed .v-pill__state {
    color: var(--v-slate);
    opacity: 0.75;
}

/* ---------- Buttons ---------- */
/* Pinned to the bottom: names run to one or two lines and the pill row is
   optional, so without this the button rows sit at different heights across a
   grid row. */
.v-card__actions {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    margin-top: auto;
}

.v-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    min-height: 44px;
    padding: 0 0.875rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.v-btn--ghost {
    flex: 1 1 0;
    background: #fff;
    border-color: var(--v-ink);
    color: var(--v-ink);
}

.v-btn--ghost:hover,
.v-btn--ghost:focus {
    background: var(--v-ink);
    color: #fff;
}

.v-btn--whatsapp {
    flex: 0 0 44px;
    width: 44px;
    padding: 0;
    background: var(--v-whatsapp);
    color: #fff;
    font-size: 1.125rem;
}

.v-btn--whatsapp:hover,
.v-btn--whatsapp:focus {
    background: #158e42;
    color: #fff;
}

.v-btn--primary {
    flex: 1.15 1 0;
    background: var(--v-saffron);
    color: var(--v-ink);
}

.v-btn--primary:hover,
.v-btn--primary:focus {
    background: #f08c00;
    color: var(--v-ink);
}

.v-btn--primary i {
    font-size: 0.75rem;
}

.v-btn:focus-visible,
.v-card__name a:focus-visible,
.v-backbar__link:focus-visible,
.v-cat:focus-visible,
.v-pager__step:focus-visible {
    outline: 2px solid var(--v-ink);
    outline-offset: 2px;
}

/* ---------- Empty state ---------- */
.v-empty {
    padding: 3rem 1.25rem;
    background: #fff;
    border-radius: var(--v-radius-card);
    box-shadow: var(--v-shadow);
    text-align: center;
    color: var(--v-slate);
}

.v-empty i {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 2rem;
    color: var(--v-slate);
    opacity: 0.35;
}

.v-empty h2 {
    margin-bottom: 0.35rem;
    color: var(--v-ink);
    font-size: 1.125rem;
    font-weight: 700;
}

.v-empty p {
    margin: 0;
    font-size: 0.875rem;
}

/* ---------- Browse band: category triage + filters (index page) ---------- */
.v-browse {
    padding: 1rem 0 1.125rem;
    background: var(--v-sand);
    border-bottom: 1px solid var(--v-line);
}

/* Wraps rather than scrolls horizontally: finding the right service is this
   page's whole job, so every category stays visible without swiping. */
.v-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}

.v-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    min-height: 40px;
    padding: 0 0.75rem;
    background: #fff;
    border: 1px solid var(--v-line);
    border-radius: 999px;
    color: var(--v-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.v-cat:hover,
.v-cat:focus {
    border-color: var(--v-ink);
    color: var(--v-ink);
}

.v-cat.is-active {
    background: var(--v-ink);
    border-color: var(--v-ink);
    color: #fff;
}

.v-cat.is-active:hover,
.v-cat.is-active:focus {
    color: #fff;
}

.v-cat__icon {
    font-size: 0.9375rem;
    line-height: 1;
}

.v-cat__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.375rem;
    border-radius: 999px;
    background: var(--v-sand);
    color: var(--v-slate);
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.v-cat.is-active .v-cat__count {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* Search and order */
.v-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.v-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 220px;
    min-width: 0;
}

.v-search i {
    position: absolute;
    left: 0.9375rem;
    color: var(--v-slate);
    font-size: 0.8125rem;
    pointer-events: none;
}

.v-search input {
    width: 100%;
    min-height: 44px;
    padding: 0 0.9375rem 0 2.4375rem;
    background: #fff;
    border: 1px solid var(--v-line);
    border-radius: 999px;
    color: var(--v-ink);
    font-family: inherit;
    font-size: 0.875rem;
}

.v-search input::placeholder {
    color: var(--v-slate);
    opacity: 0.75;
}

.v-search input:focus,
.v-sort:focus {
    outline: 2px solid var(--v-ink);
    outline-offset: 1px;
    border-color: transparent;
}

.v-sort {
    min-height: 44px;
    padding: 0 2.25rem 0 0.9375rem;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%234a4e69' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 11px 7px;
    border: 1px solid var(--v-line);
    border-radius: 999px;
    color: var(--v-ink);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
}

/* ---------- Results count ---------- */
.v-results {
    margin: 0 0 0.875rem;
    color: var(--v-slate);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* ---------- Pager ---------- */
.v-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.v-pager__step {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    min-height: 44px;
    padding: 0 1rem;
    background: #fff;
    border: 1.5px solid var(--v-ink);
    border-radius: 999px;
    color: var(--v-ink);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.v-pager__step:hover,
.v-pager__step:focus {
    background: var(--v-ink);
    color: #fff;
}

.v-pager__step i {
    font-size: 0.6875rem;
}

.v-pager__step.is-disabled {
    border-color: var(--v-line);
    color: var(--v-slate);
    opacity: 0.55;
    pointer-events: none;
}

.v-pager__status {
    padding: 0 0.375rem;
    color: var(--v-slate);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* ==========================================================================
   Loading states
   One sweep shared by the skeleton cards and the media placeholders. The
   block tone is the slate token at low alpha - no new colour enters here.
   ========================================================================== */
.v-skel,
.v-media {
    position: relative;
    overflow: hidden;
    background: rgba(74, 78, 105, 0.1);
}

.v-skel {
    display: block;
    border-radius: 6px;
}

.v-skel::after,
.v-media:not(.is-loaded)::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: v-skel-sweep 1.6s ease-in-out infinite;
    animation-delay: var(--v-skel-delay, 0ms);
}

@keyframes v-skel-sweep {
    to {
        transform: translateX(100%);
    }
}

/* The sweep runs down the list rather than firing in unison, so a page of
   placeholders reads as one wave filling in. */
.v-card--skeleton:nth-child(2) { --v-skel-delay: 90ms; }
.v-card--skeleton:nth-child(3) { --v-skel-delay: 180ms; }
.v-card--skeleton:nth-child(4) { --v-skel-delay: 270ms; }
.v-card--skeleton:nth-child(5) { --v-skel-delay: 360ms; }
.v-card--skeleton:nth-child(6) { --v-skel-delay: 450ms; }

.v-card__avatar.v-skel {
    box-shadow: none;
}

/* Keep the real line boxes so swapping in text cannot change the card height */
.v-card--skeleton .v-card__name,
.v-card--skeleton .v-card__meta {
    display: flex;
    align-items: center;
}

.v-card--skeleton .v-card__name {
    min-height: 1.2em;
}

.v-card--skeleton .v-card__meta {
    min-height: 1.35em;
}

.v-card__name .v-skel--line {
    width: 68%;
    height: 0.72em;
}

.v-card__meta .v-skel--line {
    width: 58%;
    height: 0.78em;
}

.v-skel--fare {
    width: 66px;
    height: 1.05em;
    margin-left: auto;
}

.v-skel--pill {
    width: 132px;
    height: 25px;
    border-radius: 999px;
}

.v-skel--pill-short {
    width: 104px;
}

.v-skel--btn {
    flex: 1 1 0;
    height: 44px;
    border-radius: 999px;
}

.v-skel--btn-lead {
    flex: 1.15 1 0;
}

.v-skel--btn-icon {
    flex: 0 0 44px;
    height: 44px;
    border-radius: 50%;
}

/* The media paints above the sweep, so a loaded image covers the placeholder
   on its own. is-loaded then stops the animation rather than being what makes
   the image visible - the page still degrades correctly without JS. */
.v-media img,
.v-media iframe {
    position: relative;
    z-index: 1;
}

/* Settle to sand so a failed image still looks deliberate */
.v-media.is-loaded {
    background: var(--v-sand);
}

/* Details button acknowledges the tap while the next page is fetched */
.v-btn--primary.is-navigating {
    pointer-events: none;
}

.v-btn--primary.is-navigating i {
    display: none;
}

.v-btn--primary.is-navigating::after {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid rgba(4, 4, 6, 0.25);
    border-top-color: var(--v-ink);
    border-radius: 50%;
    animation: v-spin 0.6s linear infinite;
}

@keyframes v-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Phones: keep the three buttons on one row without overflow ---------- */
@media (max-width: 429px) {
    .v-card {
        grid-template-columns: 56px 1fr;
        gap: 0.625rem;
        padding: 0.875rem 0.75rem;
    }

    .v-card__avatar {
        width: 56px;
        height: 56px;
    }

    .v-card__name {
        font-size: 1.1875rem;
    }

    .v-btn {
        padding: 0 0.625rem;
        font-size: 0.8125rem;
    }

    .v-btn--primary i {
        display: none;
    }
}

/* ---------- Phones: the name gets the whole column ----------
   A fare parked beside the name leaves it about 140px on a 375px screen, which
   pushes a business name like "Prabhas Patan Authorized Somnath Temple Guides"
   to four lines. Below sm the fare drops to its own line and runs inline, which
   returns that name to two lines. The clamp is only a ceiling for the rare name
   long enough to still overrun. */
@media (max-width: 575.98px) {
    .v-card__head {
        display: block;
        margin-bottom: 0.375rem;
    }

    .v-card__name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .v-card__fare {
        display: flex;
        align-items: baseline;
        gap: 0.3125rem;
        margin-top: 0.1875rem;
        text-align: left;
    }

    .v-card__fare-prefix,
    .v-card__fare-amount,
    .v-card__fare-unit {
        display: inline;
    }

    .v-card__fare-amount {
        font-size: 1rem;
    }
}

/* ---------- Phones and small tablets: chips scroll instead of stacking ----------
   Nine categories with names this long wrap to six rows, pushing the first
   result off screen. The row bleeds to the viewport edges so a half-cut chip
   sits at the boundary - that clipped edge is what tells you to swipe. */
@media (max-width: 767.98px) {
    .v-cats {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-right: -12px;
        margin-left: -12px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .v-cats::-webkit-scrollbar {
        display: none;
    }

    .v-cat {
        flex: 0 0 auto;
    }
}

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
    .v-hero {
        padding: var(--v-header-clear) 0 3rem;
    }

    .v-hero__title {
        font-size: 2.75rem;
    }

    .v-hero__subtitle {
        font-size: 1.0625rem;
    }

    .v-section {
        padding: 2rem 0 4rem;
    }

    .v-card {
        grid-template-columns: 76px 1fr;
        gap: 1rem;
        padding: 1.125rem;
        border-radius: 20px;
    }

    .v-card__avatar {
        width: 76px;
        height: 76px;
    }

    .v-card__initials {
        font-size: 1.5rem;
    }

    .v-card__name {
        font-size: 1.5rem;
    }

    .v-card__fare-amount {
        font-size: 1.25rem;
    }

    .v-card__meta {
        font-size: 0.875rem;
    }

    .v-card__actions {
        max-width: 420px;
    }

    .v-browse {
        padding: 1.25rem 0 1.5rem;
    }

    .v-cat {
        min-height: 44px;
        padding: 0 0.9375rem;
        font-size: 0.875rem;
    }

    .v-filters {
        flex-wrap: nowrap;
    }

    .v-search {
        flex: 1 1 auto;
    }

    .v-results {
        margin-bottom: 1rem;
        font-size: 0.875rem;
    }
}

/* ---------- Desktop: two-up ---------- */
@media (min-width: 992px) {
    .v-list {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .v-card,
    .v-btn,
    .v-cat,
    .v-pager__step {
        transition: none;
    }

    .v-skel::after,
    .v-media:not(.is-loaded)::after {
        content: none;
    }
}