/* ==========================================================================
   Brass hairline — the visual direction, applied
   --------------------------------------------------------------------------
   design/direction-web.html proposes it; this puts it on the site. It loads
   after darya.css and darya-app.css and overrides both, because those two
   carry the application tokens, and those tokens are what was rejected: every
   surface a 1px grey box on cold white, correct and anonymous, arguing with a
   mark that sets DARYA RENT in a brass serif.

   Three moves, and everything below is one of them:

     ground   warm ivory, so brass reads as brass and not as mustard
     borders  gone — a card is a surface; structure is one brass hairline
     type     Markazi Text for headings, Vazirmatn for anything read at length

   The spacing scale is 4 / 8 / 12 / 20 / 32 / 52 / 84 rather than a uniform
   12, so a page has somewhere to breathe.
   ========================================================================== */

:root {
    --d-ivory: #FAF7F2;
    --d-ivory-2: #F2EDE4;
    --d-paper: #FFFDFA;
    --d-navy-deep: #071228;

    --d-hair: rgba(186, 142, 74, .38);
    --d-hair-soft: rgba(19, 26, 40, .09);

    --d-display: "Markazi Text", "Noto Naskh Arabic", Georgia, serif;
    --d-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

    --d-s1: 4px;
    --d-s2: 8px;
    --d-s3: 12px;
    --d-s4: 20px;
    --d-s5: 32px;
    --d-s6: 52px;
    --d-s7: 84px;

    /* the ink warms very slightly with the ground */
    --d-ink: #131A28;
    --d-muted: #4A5568;
    --d-edge: rgba(19, 26, 40, .14);
    --d-line: rgba(19, 26, 40, .09);
    --d-surface: #F2EDE4;
    --d-press: #EDE6DA;
}

[data-bs-theme="dark"] {
    --d-ivory: #0A0F1B;
    --d-ivory-2: #121A2A;
    --d-paper: #0E1524;
    --d-ink: #F0ECE4;
    --d-muted: #B9C0CE;
    --d-hair: rgba(217, 180, 120, .34);
    --d-hair-soft: rgba(240, 236, 228, .10);
    --d-edge: rgba(240, 236, 228, .16);
    --d-line: rgba(240, 236, 228, .10);
    --d-surface: #121A2A;
    --d-press: #1B2740;

    /*
        In light mode the hero and footer are a near-black navy on an ivory
        ground, so they read as the dark anchor of the page. In dark mode the
        ground is already near-black, so that same navy vanished into it — the
        hero lost its edge. Here it lifts to a distinct panel above the body,
        and a brass hairline at its foot keeps it separate from what follows.
    */
    --d-navy-deep: #16233C;
}

/* the hero and footer, kept a step above the dark ground */
[data-bs-theme="dark"] .darya-app .d-hero-band,
[data-bs-theme="dark"] .footer,
[data-bs-theme="dark"] .footer-1,
[data-bs-theme="dark"] .footer-2,
[data-bs-theme="dark"] .footer-3,
[data-bs-theme="dark"] .footer-top,
[data-bs-theme="dark"] .footer-bottom {
    border-bottom: 1px solid var(--d-hair);
}

[data-bs-theme="dark"] .breadcrumb__area.breadcrumb--no-image {
    background: #16233C !important;
}

/* ---- ground ------------------------------------------------------------ */
body,
.background-body,
.background-white {
    background: var(--d-ivory) !important;
    color: var(--d-ink);
}

/* ---- type -------------------------------------------------------------- */
h1, h2, h3,
.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6,
.darya-app h1.d-t,
.darya-app .d-section-title {
    font-family: var(--d-display) !important;
    font-weight: 600 !important;
    letter-spacing: -.01em;
    line-height: 1.12;
}

h1, .heading-1 { font-size: clamp(34px, 4vw, 52px) !important; }
h2, .heading-2 { font-size: clamp(26px, 2.6vw, 36px) !important; }
h3, .heading-3 { font-size: clamp(22px, 2vw, 28px) !important; }

body,
p, li, td, .text-md-medium, .text-sm-medium {
    line-height: 1.75;
}

/*
    A serif display face needs the body text to hold its own; 13.5px was set
    for a 390px phone.
*/
.darya-app {
    --d-fs-body: 16px;
    --d-fs-sub: 14.5px;
    --d-fs-cap: 14px;
    --d-fs-micro: 11px;
}

/* ---- surfaces: the borders go ------------------------------------------ */
.darya-app .d-card,
.card-journey-small,
.card-journey-small.background-card,
.card-journey-small.background-card.hover-up,
.background-card,
.sidebar-left,
.card-grid-style-3,
.box-search-advance,
.card-offer,
.box-content-detail > .card,
.group-collapse-expand,
.box-feature-car,
.booking-form {
    background: var(--d-paper) !important;
    border: 0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}

/*
    The car card is a contained surface: a photograph clipped to the rounded
    top, the name and the facts on paper, and a ruled footer with the day rate
    and the button. It lifts and its edge turns brass when the reader is on it.

    The earlier build left it a bare stack on the ground with only a hairline
    above the footer — right on a phone, but on a wide page it read as an
    unfinished list rather than a shop window. This gives each car an edge.
*/
.darya-app .d-car-card {
    background: var(--d-paper) !important;
    border: 1px solid var(--d-hair-soft) !important;
    border-radius: 16px !important;
    overflow: hidden;
    padding: 0 !important;
    gap: 0 !important;
    transition: transform .18s ease, box-shadow .2s ease, border-color .18s ease;
}

.darya-app a.d-car-card:hover {
    transform: translateY(-5px);
    border-color: var(--d-gold) !important;
    background: var(--d-paper) !important;
    box-shadow: 0 22px 46px -26px rgba(7, 18, 40, .5) !important;
}

.darya-app a.d-car-card:active {
    transform: translateY(-1px);
    background: var(--d-paper) !important;
}

.darya-app .d-car-card .d-hero {
    aspect-ratio: 16 / 10;
    width: 100%;
    border-radius: 0 !important;
    background: var(--d-ivory-2) !important;
}

.darya-app .d-car-card .d-car-meta {
    padding: var(--d-s4) var(--d-s4) 0;
    gap: 6px;
}

.darya-app .d-car-card .d-car-foot {
    align-items: center;
    justify-content: space-between;
    margin-top: var(--d-s4);
    padding: var(--d-s3) var(--d-s4) var(--d-s4);
    border-top: 1px solid var(--d-hair-soft);
}

.darya-app a.d-car-card:hover .d-car-foot {
    border-top-color: var(--d-hair);
}

/* the list-view row is the same material in a compact, contained shape */
.darya-app .d-car-row {
    background: var(--d-paper) !important;
    border: 1px solid var(--d-hair-soft) !important;
    border-radius: 14px !important;
    padding: var(--d-s2) !important;
    transition: border-color .18s ease, box-shadow .2s ease;
}

.darya-app a.d-car-row:hover {
    border-color: var(--d-gold) !important;
    box-shadow: 0 18px 40px -28px rgba(7, 18, 40, .45) !important;
}

.darya-app .d-car-row .d-car-row-foot {
    border-top: 1px solid var(--d-hair-soft);
    padding-top: var(--d-s2);
}

/* other heroes (the offer card and the like) keep the soft ivory tile */
.darya-app .d-hero,
.card-journey-small .car-image.card-image,
.card-journey-small .card-image {
    background: var(--d-ivory-2) !important;
    border-radius: 2px !important;
}

/* ---- the hairline, in its four states ---------------------------------- */
/*
    The inline padding stays. Zeroing it looked right on a bare field and broke
    every field the theme puts an icon inside: the padding was what kept the
    text clear of the icon, so "نام شما" ended up printed on top of the person
    glyph. Removing the border is the change; the room inside it is not.
*/

.darya-app .d-search,
.box-search-advance,
.booking-form,
.darya-app .d-spec-card {
    border-top: 2px solid var(--d-gold) !important;
}

.darya-app .d-field,
.box-bottom-search .item-search:not(.bd-none),
.form-control,
.form-select,
.search-input,
textarea.form-control {
    border: 0 !important;
    border-bottom: 1px solid var(--d-hair-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.darya-app .d-field:hover,
.form-control:focus,
.form-select:focus,
textarea.form-control:focus,
.box-bottom-search .item-search:not(.bd-none):hover {
    border-bottom-color: var(--d-gold) !important;
    box-shadow: none !important;
}

.darya-app .d-field .d-k,
.item-line-booking .form-label,
label.form-label {
    font-family: var(--d-mono);
    font-size: 10.5px !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--d-muted) !important;
}

/* ---- chips become text with a rule ------------------------------------- */
.darya-app .d-chip,
.box-tags .btn,
.filter-tag,
.car-type-tag,
.discount-filter-tag,
.tags-list a {
    min-height: 0 !important;
    padding: 0 0 5px !important;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--d-muted) !important;
    font-size: 15px !important;
    font-weight: 500;
}

.darya-app .d-chip.is-on,
.box-tags .btn.active,
.filter-tag.active,
.car-type-tag.active,
.tags-list a.active {
    background: transparent !important;
    color: var(--d-ink) !important;
    border-bottom-color: var(--d-gold) !important;
}

/*
    The catalogue filter chips (/cars) are labels the plugin toggles with a
    hidden checkbox and its own `:has(input:checked)` rule — not the `.active`
    class the rule above keys on — and that rule paints the chosen label #fff.
    On the transparent chip this direction gives them, white is white on the
    ivory ground: the selected filter simply vanished. Restore a visible,
    on-brand selection (ink label on a brass rule) and a hover, matched the way
    the plugin matches and flagged !important so it wins over the in-body
    <style> the shortcode prints after this file.
*/
.car-type-tag:hover .tag-label,
.discount-filter-tag:hover .tag-label {
    color: var(--d-ink) !important;
}

.car-type-tag:has(input:checked),
.discount-filter-tag:has(input:checked) {
    background: transparent !important;
    border-bottom-color: var(--d-gold) !important;
    box-shadow: none !important;
}

.car-type-tag:has(input:checked) .tag-label,
.discount-filter-tag:has(input:checked) .tag-label,
.car-type-tag input:checked ~ .tag-label,
.discount-filter-tag input:checked ~ .tag-label {
    color: var(--d-ink) !important;
    font-weight: 600 !important;
}

.discount-filter-tag:has(input:checked) svg,
.discount-filter-tag input:checked ~ svg {
    color: var(--d-gold) !important;
}

.darya-app .d-chips {
    gap: var(--d-s4);
    flex-wrap: wrap;
}

/* ---- buttons: taller, squarer, quieter --------------------------------- */
.darya-app .d-btn,
.btn,
.btn.btn-primary,
.btn.btn-brand-2,
.btn.btn-signin,
.btn.btn-book,
.btn.btn-brand-primary {
    min-height: 52px !important;
    border-radius: 2px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 0 var(--d-s5) !important;
    letter-spacing: 0;
}

.darya-app .d-btn.is-sm,
.btn.btn-sm,
.btn-sm {
    min-height: 40px !important;
    padding: 0 var(--d-s4) !important;
    font-size: 13.5px !important;
}

.darya-app .d-btn.is-ghost,
.btn.btn-outline-secondary,
.btn.btn-outline-primary,
.btn-border {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--d-gold) !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    padding: 0 0 4px !important;
    color: var(--d-ink) !important;
}

/* ---- spec rows --------------------------------------------------------- */
.darya-app .d-spec {
    border-bottom-color: var(--d-hair-soft);
    padding: var(--d-s3) 0;
}

.darya-app .d-spec.is-current {
    background: transparent;
    border-bottom-color: var(--d-gold);
    margin-inline: 0;
    padding-inline: 0;
}

.darya-app .d-spec.is-current .d-v {
    color: var(--d-gold-ink);
}

.darya-app .d-spec .d-k,
.darya-app .d-spec .d-v {
    font-size: 15px;
}

.darya-app .d-spec .d-v {
    font-variant-numeric: tabular-nums;
}

/* ---- rhythm ------------------------------------------------------------ */
.darya-app .d-shell {
    padding: var(--d-s6) var(--d-s4);
    gap: var(--d-s4);
}

.darya-app .darya-car-grid {
    gap: var(--d-s5) var(--d-s4);
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.darya-app .d-car-card .d-t {
    font-family: var(--d-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.15;
}

/* the day rate reads as a number, not a serif headline beside the button */
.darya-app .d-car-foot .d-col .d-t,
.darya-app .d-car-row-foot .d-col .d-t {
    font-family: "Vazirmatn", ui-sans-serif, system-ui, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700;
    line-height: 1.15;
    color: var(--d-ink);
}

.darya-app .d-price-unit {
    font-size: 11.5px;
    color: var(--d-muted);
}

/* the section heading sits on a hairline, as it does in the direction */
.darya-app .d-section-title {
    border-top: 1px solid var(--d-hair);
    padding-top: var(--d-s3);
    margin-bottom: var(--d-s5);
    font-size: clamp(26px, 2.6vw, 38px) !important;
}

/* ---- header and footer ------------------------------------------------- */
.header,
.header.header-fixed.sticky-bar.stick,
.header.header-fixed.sticky-bar.stick .main-menu,
.header.header-fixed.sticky-bar.stick .box-header-nav {
    background: var(--d-paper) !important;
    border-bottom: 1px solid var(--d-hair) !important;
    box-shadow: none !important;
}

/*
    The nav carries its own pale pill from the theme, visible while the header
    is transparent over the hero. On the ivory ground it disappears; on the dark
    ground it read as a bright panel floating in the header. Let the header show
    through instead — it already paints paper behind the nav in both modes.
*/
.main-menu,
.box-header-nav,
.box-header-nav .main-menu {
    background: transparent !important;
}

.main-menu > li > a {
    font-weight: 500 !important;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
}

.main-menu > li.current-menu-item > a {
    border-bottom-color: var(--d-gold);
}

/* the hover dropdowns are a bright panel too; give them the dark surface */
[data-bs-theme="dark"] .main-menu ul.sub-menu,
[data-bs-theme="dark"] .main-menu li ul {
    background: var(--d-paper) !important;
    border: 1px solid var(--d-hair) !important;
    box-shadow: none !important;
}

.footer,
.footer-1, .footer-2, .footer-3,
.footer-top, .footer-bottom {
    background: var(--d-navy-deep) !important;
}

/* ---- the photoless banner --------------------------------------------- */
.breadcrumb__area.breadcrumb--no-image {
    background: var(--d-navy-deep) !important;
    border-radius: 3px !important;
}

/* ---- bootstrap cards on the dark ground -------------------------------- */
/*
    Carento builds the extra-info panel from Bootstrap `.card`, which defaults
    to a near-black (#191919) in dark mode — a flat black box a shade off the
    page ground. Bring it onto the surface palette with a hairline so it sits
    with everything else, and turn the pale utility chips inside it into outline
    chips rather than bright specks.
*/
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .card-body {
    background: var(--d-surface) !important;
    border-color: var(--d-hair) !important;
    color: var(--d-ink);
}

[data-bs-theme="dark"] .badge.bg-light {
    background: transparent !important;
    color: var(--d-ink) !important;
    border: 1px solid var(--d-hair) !important;
}

/* ---- tinted bands ------------------------------------------------------ */
.background-2,
.box-section.background-2,
.section-box-info,
.box-faqs-inner,
.background-body-2,
.item-feature-car-inner,
.minimum-rental-notice {
    background: var(--d-ivory-2) !important;
    border-radius: 2px !important;
}

/* ---- reaching the rest of the theme ------------------------------------ */
/*
    darya.css writes its field rule as a list that includes `input[type="text"]`
    — a class plus an attribute, which outranks a bare `.form-control`. The
    selectors here carry the same weight so the direction wins on order rather
    than losing on specificity, which is why the contact form kept its boxes
    while the search fields lost theirs.
*/
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input:not([type]),
select.form-select,
select.form-control,
textarea.form-control,
.nice-select {
    border: 0 !important;
    border-bottom: 1px solid var(--d-hair-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input:not([type]):focus,
select.form-select:focus,
textarea.form-control:focus {
    border-bottom-color: var(--d-gold) !important;
}

/* every other panel the theme draws as a bordered, rounded box */
.card-contact,
.card-info,
.card-method-contact,
.box-author-question,
.box-comment,
.form-comment,
.card-blog-1,
.card-news,
.box-newsletter,
.item-service,
.card-service,
.box-list-brands .item-brand,
.wrapper-box,
.box-image-detail,
.card-review,
.review-item,
.box-progress-bar,
.box-form-question {
    background: var(--d-paper) !important;
    border: 0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}

/*
    A section heading anywhere on the site gets the same hairline the rebuilt
    pages give it, so the rhythm does not stop at the pages that were rebuilt.
*/
.box-section > .container > h2:first-child,
.section-title h2,
.block-title h2,
.heading-section h2 {
    border-top: 1px solid var(--d-hair);
    padding-top: var(--d-s3);
}

/* the theme's dividers become the same hairline */
.filter-divider,
hr,
.border-bottom,
.border-1 {
    border-color: var(--d-hair-soft) !important;
    background: transparent;
}

/*
    `.btn-primary2` is the theme's own half-transparent variant — the brand navy
    at a fifth with a hairline of the same navy around it — which under this
    direction reads as a disabled control rather than a secondary one. It is the
    ghost button: a word on a brass rule.
*/
.btn.btn-primary2,
.btn-primary2 {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--d-gold) !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    padding: 0 0 4px !important;
    color: var(--d-ink) !important;
    font-weight: 500 !important;
}

.btn.btn-primary2:hover,
.btn-primary2:hover {
    color: var(--d-navy) !important;
    border-bottom-color: var(--d-navy) !important;
    background: transparent !important;
}

/*
    `.btn-white` is what the blog uses for its category filters. They are chips,
    not buttons — a reader picks one to narrow a list — so they read as the
    chips everywhere else do: text on a rule that turns brass when chosen.
*/
.btn.btn-white,
.btn-white {
    min-height: 0 !important;
    padding: 0 0 5px !important;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--d-muted) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-inline-end: 20px;
}

.btn.btn-white:hover,
.btn.btn-white.active,
.btn-white.active {
    color: var(--d-ink) !important;
    border-bottom-color: var(--d-gold) !important;
    background: transparent !important;
}

/* ==========================================================================
   Home hero — the navy band from design/direction-web.html
   -------------------------------------------------------------------------- */
.darya-app .d-hero-band {
    background: var(--d-navy-deep);
    color: #F6F2EA;
    /* top clears the fixed header (top strip + main bar ≈ 126px) + breathing;
       the tall photo gives the band its height, so no forced min-height that
       would centre the copy into a big empty gap. */
    padding: 150px var(--d-s5) 110px;
    min-height: 0;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

@media (max-width: 991.98px) {
    .darya-app .d-hero-band { padding: 104px var(--d-s4) 76px; }
}

/* a warm brass glow off the reading edge, as in the direction */
.darya-app .d-hero-band::after {
    content: "";
    position: absolute;
    inset-inline-start: -10%;
    top: -40%;
    width: 60%;
    height: 180%;
    background: radial-gradient(closest-side, rgba(186, 142, 74, .16), transparent);
    pointer-events: none;
}

.darya-app .d-hero-inner {
    max-width: 1180px;
    margin-inline: auto;
    position: relative;
    z-index: 1;
}

.darya-app .d-hero-kicker {
    font-family: var(--d-mono);
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--d-gold);
    margin: 0 0 var(--d-s4);
}

.darya-app .d-hero-title {
    font-family: var(--d-display) !important;
    font-size: clamp(46px, 6.5vw, 86px) !important;
    line-height: 1.02 !important;
    font-weight: 600 !important;
    margin: 0 0 var(--d-s4);
    max-width: 16ch;
    color: #FBF7F0 !important;
    text-wrap: balance;
}

.darya-app .d-hero-lede {
    margin: 0;
    color: rgba(246, 242, 234, .78);
    max-width: 52ch;
    font-size: clamp(17px, 1.7vw, 21px);
    line-height: 1.7;
}

.darya-app .d-hero-kicker {
    font-family: var(--d-mono);
    font-size: 12px;
    letter-spacing: .2em;
    color: var(--d-gold);
    margin: 0 0 var(--d-s5);
}

.darya-app .d-hero-offer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--d-s5);
    color: #F6F2EA;
    text-decoration: none;
    font-size: 15px;
    border-bottom: 1px solid var(--d-gold);
    padding-bottom: 5px;
}

.darya-app .d-hero-offer-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--d-gold);
    flex: 0 0 auto;
}

/* the search slab overlaps the band's lower edge */
.darya-app .d-home-shell {
    max-width: 1180px;
    padding-top: 0 !important;
}

.darya-app .d-hero-slab {
    margin-top: -52px;
    position: relative;
    z-index: 2;
    background: var(--d-paper) !important;
    border-top: 2px solid var(--d-gold) !important;
    box-shadow: 0 24px 50px -30px rgba(7, 18, 40, .45) !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--d-s4);
    align-items: end;
    padding: var(--d-s4) !important;
}

@media (max-width: 820px) {
    .darya-app .d-hero-slab { grid-template-columns: minmax(0, 1fr); }
}

.darya-app .d-slab-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--d-s4);
}

@media (max-width: 620px) {
    .darya-app .d-slab-fields { grid-template-columns: minmax(0, 1fr); }
    /* the full-width submit is nowrap, and its label ("جستجوی N خودروی موجود")
       is wider than a 320px column once its 32px inline padding is counted —
       a few px of horizontal overflow. Let it wrap here instead. */
    .darya-app .d-slab-btn { white-space: normal; padding-inline: var(--d-s4) !important; }
}

.darya-app .d-slab-btn {
    white-space: nowrap;
}

.darya-app .d-home-chips {
    margin-top: var(--d-s5);
    padding-top: var(--d-s3);
    border-top: 1px solid var(--d-hair);
}

/* ==========================================================================
   Home — the website sections a phone screen does not carry
   -------------------------------------------------------------------------- */

/* --- why us: a tinted band of ruled columns ------------------------------ */
.darya-app .d-band {
    background: var(--d-ivory-2);
    margin-top: var(--d-s6);
    padding: var(--d-s6) var(--d-s5);
}

.darya-app .d-band-inner {
    max-width: 1180px;
    margin-inline: auto;
}

.darya-app .d-band-title,
.darya-app .d-why-h,
.darya-app .d-step-h {
    font-family: var(--d-display);
    font-weight: 600;
    letter-spacing: -.01em;
}

.darya-app .d-band-title {
    font-size: clamp(28px, 3vw, 38px);
    margin: 0 0 var(--d-s5);
}

.darya-app .d-why-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--d-s5) var(--d-s4);
}

@media (max-width: 900px) { .darya-app .d-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .darya-app .d-why-grid { grid-template-columns: minmax(0, 1fr); } }

.darya-app .d-why-item { padding-top: var(--d-s3); border-top: 1px solid var(--d-hair); }
.darya-app .d-why-h { font-size: 19px; margin: 0 0 var(--d-s2); line-height: 1.25; }
.darya-app .d-why-b { margin: 0; color: var(--d-muted); font-size: 14.5px; line-height: 1.7; }
.darya-app .d-why-rule { display: none; }

/* --- how it works -------------------------------------------------------- */
.darya-app .d-steps-shell { max-width: 1180px; }

.darya-app .d-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--d-s5) var(--d-s4);
}

@media (max-width: 760px) { .darya-app .d-steps-grid { grid-template-columns: minmax(0, 1fr); } }

.darya-app .d-step { display: flex; flex-direction: column; gap: var(--d-s2); }

.darya-app .d-step-n {
    font-family: var(--d-display);
    font-size: 40px;
    font-weight: 600;
    color: var(--d-gold);
    line-height: 1;
}

.darya-app .d-step-h { font-size: 21px; margin: 0; }
.darya-app .d-step-b { margin: 0; color: var(--d-muted); font-size: 14.5px; line-height: 1.7; }

/* --- the fleet on the home ----------------------------------------------- */
.darya-app .d-fleet-shell { max-width: 1180px; }

.darya-app .d-fleet-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--d-s4);
    margin-bottom: var(--d-s5);
}

.darya-app .d-fleet-head .d-section-title { margin-bottom: 0; flex: 1; }

/* --- frequently asked ---------------------------------------------------- */
.darya-app .d-faq-shell { max-width: 900px; }

.darya-app .d-faq-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--d-s4);
}

.darya-app .d-faq-head .d-section-title { margin-bottom: 0; flex: 1; }

.darya-app .d-faq-list { margin-top: var(--d-s4); }

.darya-app .d-faq-item { border-bottom: 1px solid var(--d-hair-soft); }

.darya-app .d-faq-q {
    font-family: var(--d-display);
    font-size: 20px;
    font-weight: 600;
    padding: var(--d-s3) 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--d-s3);
}

.darya-app .d-faq-q::-webkit-details-marker { display: none; }

.darya-app .d-faq-q::after {
    content: "+";
    color: var(--d-gold);
    font-size: 22px;
    font-family: var(--d-body);
    line-height: 1;
}

.darya-app .d-faq-item[open] .d-faq-q { color: var(--d-navy); }
.darya-app .d-faq-item[open] .d-faq-q::after { content: "\2212"; }

.darya-app .d-faq-a {
    padding: 0 0 var(--d-s4);
    color: var(--d-muted);
    font-size: 15px;
    line-height: 1.8;
}

/* ---- about page -------------------------------------------------------- */
/*
    The about section reserves space for a background image, a decorative shape
    and a three-card row, none of which this install has — so the page was a
    heading floating over a screen of empty ivory. With the extras gone it is
    a centred lede at a readable measure, which is all the copy needs.
*/
.shortcode-about-us-information {
    padding: var(--d-s6) var(--d-s4) !important;
    background: none !important;
}

.shortcode-about-us-information .bg-shape {
    display: none !important;
}

.shortcode-about-us-information h4 {
    font-family: var(--d-display) !important;
    font-size: clamp(24px, 3vw, 34px) !important;
    font-weight: 600 !important;
    max-width: 60ch;
    margin-inline: auto !important;
    line-height: 1.4 !important;
}

.shortcode-about-us-information .text-sm-bold {
    background: transparent !important;
    padding: 0 !important;
    color: var(--d-gold-ink) !important;
    font-family: var(--d-display) !important;
    font-size: 22px !important;
}

/* an empty card row must not hold a screen of air */
.shortcode-about-us-information .row:empty,
.shortcode-about-us-information .row.mt-60:not(:has(> div)) {
    display: none !important;
    margin: 0 !important;
}

/* ==========================================================================
   Home — hero photo, the stats strip, the pickup band, the closing CTA
   -------------------------------------------------------------------------- */

/* --- hero: copy beside a real car --------------------------------------- */
.darya-app .d-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: var(--d-s6);
    align-items: center;
    width: 100%;
}

@media (max-width: 900px) {
    .darya-app .d-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--d-s5); }
}

.darya-app .d-hero-copy { min-width: 0; }

.darya-app .d-hero-actions {
    display: flex;
    align-items: center;
    gap: var(--d-s5);
    flex-wrap: wrap;
    margin-top: var(--d-s5);
}

.darya-app .d-hero-actions .d-hero-offer { margin-top: 0; }

.darya-app .d-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--d-gold);
    color: #10203C;
    font-weight: 600;
    font-size: 16px;
    padding: 15px 32px;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid var(--d-gold);
    transition: transform .15s ease, filter .15s ease;
}

.darya-app .d-hero-cta:hover {
    filter: brightness(1.07);
    transform: translateY(-2px);
    color: #10203C;
}

.darya-app .d-hero-media {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 44px 90px -44px rgba(0, 0, 0, .75);
    border: 1px solid rgba(246, 242, 234, .14);
    text-decoration: none;
}

.darya-app .d-hero-media .d-hero-photo { display: block; }

.darya-app .d-hero-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    background: #10203C;
}

@media (max-width: 900px) {
    .darya-app .d-hero-media img { aspect-ratio: 16 / 10; }
}

.darya-app .d-hero-photo-tag {
    position: absolute;
    inset-inline-end: 14px;
    bottom: 14px;
    background: rgba(7, 18, 40, .74);
    color: #F6F2EA;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(186, 142, 74, .45);
}

/* --- at-a-glance stats -------------------------------------------------- */
.darya-app .d-stats-shell { max-width: 1180px; padding-top: var(--d-s6) !important; }

.darya-app .d-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--d-s5) var(--d-s4);
}

@media (max-width: 720px) { .darya-app .d-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.darya-app .d-stat {
    border-top: 1px solid var(--d-hair);
    padding-top: var(--d-s3);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.darya-app .d-stat-n {
    font-family: var(--d-display);
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 600;
    line-height: 1;
    color: var(--d-ink);
}

.darya-app .d-stat-k { color: var(--d-muted); font-size: 14px; line-height: 1.5; }

/* --- pick-up & delivery band ------------------------------------------- */
.darya-app .d-pickup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--d-s6);
    align-items: start;
}

@media (max-width: 820px) { .darya-app .d-pickup-grid { grid-template-columns: minmax(0, 1fr); gap: var(--d-s5); } }

.darya-app .d-pickup-kicker { margin: 0 0 var(--d-s3); }

.darya-app .d-pickup-lede {
    color: var(--d-muted);
    font-size: 16px;
    line-height: 1.8;
    margin: 0 0 var(--d-s5);
    max-width: 46ch;
}

.darya-app .d-pickup-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--d-navy-deep);
    color: #F6F2EA;
    border: 1px solid var(--d-navy-deep);
    padding: 13px 28px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    transition: filter .15s ease, transform .15s ease;
}

.darya-app .d-pickup-cta:hover { filter: brightness(1.12); transform: translateY(-2px); color: #F6F2EA; }

.darya-app .d-pickup-facts { display: flex; flex-direction: column; gap: var(--d-s4); }

.darya-app .d-pickup-fact {
    border-top: 1px solid var(--d-hair);
    padding-top: var(--d-s3);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.darya-app .d-pickup-fact-k {
    font-family: var(--d-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--d-gold);
}

.darya-app .d-pickup-fact-v { font-size: 16px; color: var(--d-ink); line-height: 1.55; }

/* --- closing call to action -------------------------------------------- */
.darya-app .d-cta-band {
    background: var(--d-navy-deep);
    color: #F6F2EA;
    margin-top: var(--d-s6);
    padding: var(--d-s7) var(--d-s5);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.darya-app .d-cta-band::after {
    content: "";
    position: absolute;
    inset-inline-end: -8%;
    top: -60%;
    width: 55%;
    height: 220%;
    background: radial-gradient(closest-side, rgba(186, 142, 74, .16), transparent);
    pointer-events: none;
}

.darya-app .d-cta-inner { max-width: 720px; margin-inline: auto; position: relative; z-index: 1; }

.darya-app .d-cta-title {
    font-family: var(--d-display) !important;
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 600;
    margin: 0 0 var(--d-s3);
    color: #FBF7F0 !important;
    line-height: 1.05;
}

.darya-app .d-cta-lede {
    color: rgba(246, 242, 234, .8);
    font-size: 18px;
    line-height: 1.7;
    margin: 0 0 var(--d-s5);
}

.darya-app .d-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--d-s5);
    flex-wrap: wrap;
}

.darya-app .d-cta-phone {
    color: #F6F2EA;
    text-decoration: none;
    font-family: var(--d-mono);
    font-size: 17px;
    border-bottom: 1px solid var(--d-gold);
    padding-bottom: 4px;
}

.darya-app .d-cta-phone:hover { color: #FFFFFF; }

/* ==========================================================================
   Navbar & footer — premium redesign
   These sit OUTSIDE .darya-app (they wrap every page), so the selectors are
   bare. Appended last, so they win on order over the earlier header/footer
   rules for equal specificity.
   ========================================================================== */

/* ---- top strip: a slim navy band, not a plain white clutter bar -------- */
.top-bar,
.top-bar.top-bar-2,
.top-bar.top-bar-3 {
    --header-top-background-color: var(--d-navy-deep);
    --header-top-text-color: rgba(246, 242, 234, .82);
    background: var(--d-navy-deep) !important;
    color: rgba(246, 242, 234, .82) !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 13px;
}

.top-bar > .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--d-s4);
    min-height: 44px;
    padding-inline: clamp(16px, 3vw, 48px);
    max-width: 1440px;
    margin-inline: auto;
}

.top-bar a { color: rgba(246, 242, 234, .82) !important; text-decoration: none; }
.top-bar a:hover { color: var(--d-gold) !important; }
.top-bar .text-header { flex: 1; text-align: center; color: rgba(246, 242, 234, .9); font-size: 13px; }

/* the announcement's own CTA reads as a small brass pill */
.top-bar .ae-anno-announcement__button {
    background: var(--d-gold) !important;
    color: #10203C !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 4px 14px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    margin-inline-start: 10px;
}

.top-right-header { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.top-button-mode .btn-mode,
.top-button-mode .btn-mode img { color: rgba(246, 242, 234, .82) !important; }

/* ---- main header: paper ground, a brass hairline, room to breathe ------ */
.header,
.header.header-fixed.sticky-bar.stick {
    background: var(--d-paper) !important;
    border-bottom: 1px solid var(--d-hair) !important;
    box-shadow: none !important;
}

.header .main-header {
    display: flex;
    align-items: center;
    min-height: 82px;
    padding-inline: clamp(16px, 3vw, 48px);
    max-width: 1440px;
    margin-inline: auto;
    transition: min-height .2s ease;
}

.header.sticky-bar.stick .main-header { min-height: 66px; }

.header .header-left {
    display: flex;
    align-items: center;
    gap: clamp(18px, 3vw, 44px);
    width: 100%;
}

.header-logo img,
.header-logo .light-mode,
.header-logo .dark-mode { height: 42px !important; width: auto !important; }

.header .header-nav { flex: 1 1 auto; display: flex; justify-content: center; }

.header .header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-inline-start: auto;
    flex: 0 0 auto;
}

/* nav links: quiet ink, a brass underline when active or hovered */
.main-menu,
.box-header-nav,
.box-header-nav .main-menu {
    background: transparent !important;
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 34px);
    margin: 0 !important;
}

.main-menu > li > a {
    color: var(--d-ink) !important;
    font-weight: 500 !important;
    font-size: 15.5px !important;
    padding: 8px 0 !important;
    border-bottom: 2px solid transparent !important;
    transition: border-color .15s ease, color .15s ease;
}

.main-menu > li > a:hover,
.main-menu > li.current-menu-item > a,
.main-menu > li.active > a {
    color: var(--d-ink) !important;
    border-bottom-color: var(--d-gold) !important;
}

/* sign-in reads as a quiet pill; the rent CTA is the brass one beside it.
   The theme paints .neutral-1000 white, so the selector carries an element +
   two classes to outrank it and keep the label ink on the paper header. */
.header a.btn-signin,
.header a.header-login-btn,
.header .header-right a.btn-signin {
    background: transparent !important;
    color: var(--d-ink) !important;
    border: 1px solid var(--d-hair) !important;
    border-radius: 999px !important;
    padding: 9px 20px !important;
    min-height: 0 !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.header a.btn-signin svg,
.header a.header-login-btn svg { fill: var(--d-ink) !important; }

.header a.btn-signin:hover,
.header a.header-login-btn:hover {
    border-color: var(--d-gold) !important;
    color: var(--d-ink) !important;
    background: transparent !important;
}

.header .d-nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--d-gold) !important;
    color: #10203C !important;
    border: 1px solid var(--d-gold) !important;
    border-radius: 999px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    white-space: nowrap;
    text-decoration: none;
    min-height: 0 !important;
    transition: filter .15s ease, transform .15s ease;
}

.header .d-nav-cta:hover { filter: brightness(1.07); transform: translateY(-1px); color: #10203C !important; }

/* language + theme tools, folded into the one clean bar */
.header .d-nav-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-inline-start: 6px;
    padding-inline-start: 14px;
    border-inline-start: 1px solid var(--d-hair);
}
.header .d-nav-tools a,
.header .d-nav-tools .btn,
.header .d-nav-tools .dropdown-toggle,
.header .d-nav-tools .head-lang,
.header .d-nav-tools .head-lang span,
.header .d-nav-tools .icon-lang,
.header .d-nav-tools .arrow-down { color: var(--d-ink) !important; font-weight: 500; }
.header .d-nav-tools .btn-mode { padding: 4px !important; min-height: 0 !important; border: 0 !important; background: transparent !important; }
.header .d-nav-mode img { width: 20px; height: 20px; display: block; }
/* the language switcher shows the light-mode glyph on the paper bar */
.header .d-nav-mode .dark-mode { display: none; }
[data-bs-theme="dark"] .header .d-nav-mode .light-mode { display: none; }
[data-bs-theme="dark"] .header .d-nav-mode .dark-mode { display: block; }

/* the slim promo strip now carries only the announcement */
.top-bar.top-bar-announcement { min-height: 40px; }
.top-bar.top-bar-announcement > .container-fluid { justify-content: center; min-height: 40px; }
.top-bar.top-bar-announcement .text-header { flex: 0 1 auto; }

/* on desktop the full nav is shown, so the burger toggles are redundant */
@media (min-width: 992px) {
    .header .burger-icon,
    .header .burger-icon-2 { display: none !important; }
}

/* on smaller screens the nav collapses into the burger + mobile menu */
@media (max-width: 991.98px) {
    .header .header-nav { display: none !important; }
    .header .d-nav-tools { display: none !important; }
}

/* the login dropdown avatar name, tidy on paper */
.header .btn-login .user-name { color: var(--d-ink) !important; font-weight: 500; }

/* ---- footer: a deep navy close, brass on the headings ------------------ */
.footer,
.footer-1, .footer-2, .footer-3,
.footer-top, .footer-bottom {
    background: var(--d-navy-deep) !important;
    color: rgba(246, 242, 234, .72) !important;
}

.footer { padding-top: var(--d-s3) !important; padding-bottom: var(--d-s2) !important; }
.footer .container { max-width: 1200px; }

/* the newsletter row is removed — the footer is a compact contact + links block */
.footer .footer-top { display: none !important; }

/* trim the tall contact block: drop the wrapping address/hours/email list and
   keep only the "تماس بگیرید" phone. The full address/hours/email live on the
   contact page; this keeps the footer short. */
.footer .contact-list { display: none !important; }

/* keep the footer small: the site-information logo/media is a compact mark,
   never a large box (a missing file rendered a big grey placeholder tile) */
.footer .widget-site-information img,
.footer-1 img,
.footer .footer-logo img { max-height: 40px !important; width: auto !important; object-fit: contain; }

/* tighten the vertical rhythm inside the footer columns */
.footer .mb-30 { margin-bottom: 12px !important; }
.footer .mb-20 { margin-bottom: 10px !important; }
.footer .contact-item-wrapper { margin-bottom: 6px; }
.footer .box-need-help { margin-top: 10px; }
.footer ul li { margin-bottom: 4px; }

.footer a,
.footer p,
.footer li,
.footer span,
.footer .text-sm-medium { color: rgba(246, 242, 234, .72) !important; }

.footer a:hover { color: var(--d-gold) !important; }

/* the contact phone is a highlight the theme paints navy — invisible on the
   navy footer; give it the brass so it reads as the call-to-action it is */
.footer a[href^="tel"],
.footer a[href^="tel:"],
.footer .phone,
.footer .phone-support,
.footer .phone-support *,
.footer .contact-phone a { color: var(--d-gold) !important; font-weight: 600; }

/* the theme paints .footer .phone-support a navy with !important; outrank it */
.footer .widget-site-information .phone-support a,
.footer .box-need-help .phone-support a,
.footer .box-need-help .heading-6 a { color: var(--d-gold) !important; }

/* broken/missing images render a grey placeholder tile in the footer (the
   site-information logo + a stray media-missing box); hide them so the footer
   stays clean and compact — the brand mark lives in the header + copyright */
.footer img.darya-media-missing,
.footer .widget-site-information > .mb-20 > a.d-flex { display: none !important; }

.footer h6, .footer h5, .footer h4,
.footer .heading, .footer .widget-title, .footer .footer-heading {
    color: #F6F2EA !important;
    font-family: var(--d-display) !important;
    font-weight: 600 !important;
    font-size: 19px !important;
    letter-spacing: -.01em;
    margin-bottom: var(--d-s3) !important;
}

/* the newsletter row, set off by a hairline — slim */
.footer .footer-top {
    padding-bottom: var(--d-s3);
    margin-bottom: var(--d-s3);
    border-bottom: 1px solid rgba(246, 242, 234, .12);
}
.footer .footer-top:empty { display: none; padding: 0; margin: 0; border: 0; }
/* the newsletter heading is a line, not a display headline, in the small footer */
.footer .footer-top h2,
.footer .footer-top h3,
.footer .footer-top .heading-2,
.footer .footer-top .heading-3 { font-size: 18px !important; margin-bottom: 8px !important; }

/* newsletter field + button on the dark ground */
.footer input[type="email"],
.footer input[type="text"],
.footer .form-control {
    background: rgba(246, 242, 234, .06) !important;
    border: 1px solid rgba(246, 242, 234, .18) !important;
    color: #F6F2EA !important;
    border-radius: 999px !important;
}
.footer input::placeholder { color: rgba(246, 242, 234, .5) !important; }
.footer .btn-newsletter,
.footer button[type="submit"] {
    background: var(--d-gold) !important;
    color: #10203C !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
}

/* social marks as brass-hairline circles */
.footer .social-icons a,
.footer .tw-socials a,
.footer .socials a,
.footer .footer-social a {
    width: 40px; height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(246, 242, 234, .24);
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .15s ease, background .15s ease;
}
.footer .social-icons a:hover,
.footer .socials a:hover,
.footer .footer-social a:hover {
    border-color: var(--d-gold);
    background: rgba(186, 142, 74, .12);
}

/* headings sit closer to their lists in the compact footer */
.footer h6, .footer h5, .footer h4,
.footer .heading, .footer .widget-title, .footer .footer-heading {
    font-size: 17px !important;
    margin-bottom: var(--d-s2) !important;
}
.footer .row > [class*="col"] { margin-bottom: var(--d-s2); }
.footer .footer-1 { margin-bottom: var(--d-s2); }

/* the columns no longer fill 12 grid units (newsletter + contact list removed),
   which left a large empty block on one side; spread them across the full width
   and let each size to its content so the row is balanced, not left-heavy */
.footer > .container > .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(32px, 7vw, 110px);
}
.footer > .container > .row > [class*="col"] {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
    margin-bottom: 0;
}
@media (max-width: 767.98px) {
    .footer > .container > .row { gap: var(--d-s5); justify-content: flex-start; }
    .footer > .container > .row > [class*="col"] { flex-basis: 42%; }
}

/* the closing line, quiet under a hairline */
.footer .footer-bottom {
    border-top: 1px solid rgba(246, 242, 234, .12);
    margin-top: var(--d-s3) !important;
    padding-top: var(--d-s3) !important;
    padding-bottom: 0 !important;
    font-size: 13px;
}

/* ==========================================================================
   Home — the added bands: categories, brands, long-term, included,
   intercity, documents, concierge
   ========================================================================== */

/* --- browse by type ----------------------------------------------------- */
.darya-app .d-cat-shell { max-width: 1180px; }
.darya-app .d-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--d-s4);
}
.darya-app .d-cat-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--d-s4);
    background: var(--d-paper);
    border: 1px solid var(--d-hair-soft);
    border-radius: 14px;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, box-shadow .18s ease;
}
.darya-app .d-cat-tile:hover {
    transform: translateY(-4px);
    border-color: var(--d-gold);
    box-shadow: 0 18px 40px -26px rgba(7, 18, 40, .45);
}
.darya-app .d-cat-name {
    font-family: var(--d-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--d-ink);
    line-height: 1.15;
}
.darya-app .d-cat-count { color: var(--d-muted); font-size: 14px; }
.darya-app .d-cat-go {
    position: absolute;
    inset-inline-end: var(--d-s4);
    top: var(--d-s4);
    color: var(--d-gold);
    font-size: 18px;
    transform: scaleX(-1); /* the arrow points into the RTL reading direction */
}

/* --- popular brands ----------------------------------------------------- */
.darya-app .d-brands-shell { max-width: 1180px; }
.darya-app .d-brands { display: flex; flex-wrap: wrap; gap: var(--d-s3); }
.darya-app .d-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: var(--d-paper);
    border: 1px solid var(--d-hair-soft);
    border-radius: 999px;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}
.darya-app .d-brand:hover { border-color: var(--d-gold); background: var(--d-surface); }
.darya-app .d-brand-name { color: var(--d-ink); font-weight: 500; font-size: 15px; }
.darya-app .d-brand-count {
    min-width: 22px;
    text-align: center;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(186, 142, 74, .14);
    color: var(--d-gold-ink, #8A6224);
    font-size: 12.5px;
    font-weight: 600;
}

/* --- rent longer, pay less --------------------------------------------- */
.darya-app .d-longterm-lede {
    color: var(--d-muted);
    max-width: 56ch;
    margin: calc(-1 * var(--d-s3)) 0 var(--d-s5);
    font-size: 16px;
    line-height: 1.75;
}
.darya-app .d-tier-ladder {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--d-s3);
}
@media (max-width: 860px) { .darya-app .d-tier-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.darya-app .d-tier {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--d-s4) var(--d-s3);
    background: var(--d-paper);
    border: 1px solid var(--d-hair-soft);
    border-radius: 12px;
    text-align: center;
}
.darya-app .d-tier.is-deal { border-color: var(--d-hair); }
.darya-app .d-tier-range { color: var(--d-ink); font-weight: 600; font-size: 15px; }
.darya-app .d-tier-save {
    font-family: var(--d-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--d-muted);
}
.darya-app .d-tier.is-deal .d-tier-save { color: var(--d-gold-ink, #8A6224); }

/* --- included with every rental ---------------------------------------- */
.darya-app .d-included-shell { max-width: 1180px; }
.darya-app .d-included-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--d-s3) var(--d-s5);
}
@media (max-width: 700px) { .darya-app .d-included-grid { grid-template-columns: minmax(0, 1fr); } }
.darya-app .d-included-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: var(--d-s3) 0;
    border-top: 1px solid var(--d-hair-soft);
    font-size: 16px;
    color: var(--d-ink);
    line-height: 1.5;
}
.darya-app .d-included-check {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(186, 142, 74, .14);
    color: var(--d-gold-ink, #8A6224);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

/* --- intercity: a dark band for rhythm --------------------------------- */
.darya-app .d-intercity {
    background: var(--d-navy-deep);
    color: #F6F2EA;
}
.darya-app .d-intercity .d-band-title { color: #FBF7F0 !important; }
.darya-app .d-intercity-inner { max-width: 900px; }
.darya-app .d-intercity-lede {
    color: rgba(246, 242, 234, .82);
    font-size: 18px;
    line-height: 1.85;
    margin: 0;
    max-width: 62ch;
}

/* --- what to bring ------------------------------------------------------ */
.darya-app .d-docs-shell { max-width: 1000px; }
.darya-app .d-docs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--d-s6);
}
@media (max-width: 700px) { .darya-app .d-docs-grid { grid-template-columns: minmax(0, 1fr); gap: var(--d-s5); } }
.darya-app .d-docs-col { border-top: 1px solid var(--d-hair); padding-top: var(--d-s3); }
.darya-app .d-docs-h {
    font-family: var(--d-display);
    font-size: 21px;
    font-weight: 600;
    margin: 0 0 var(--d-s3);
    color: var(--d-ink);
}
.darya-app .d-docs-list { list-style: none; margin: 0; padding: 0; }
.darya-app .d-docs-list li {
    position: relative;
    padding: 8px 0 8px 0;
    padding-inline-start: 22px;
    color: var(--d-ink);
    font-size: 15.5px;
    border-bottom: 1px solid var(--d-hair-soft);
}
.darya-app .d-docs-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 15px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--d-gold);
}

/* --- concierge ---------------------------------------------------------- */
.darya-app .d-concierge-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--d-s5);
    flex-wrap: wrap;
}
.darya-app .d-concierge-copy { flex: 1 1 340px; }
.darya-app .d-concierge-copy .d-band-title { margin-bottom: var(--d-s2); }
.darya-app .d-concierge-lede { color: var(--d-muted); font-size: 16px; line-height: 1.7; margin: 0; max-width: 52ch; }
.darya-app .d-concierge-actions {
    display: flex;
    align-items: center;
    gap: var(--d-s4);
    flex: 0 0 auto;
    flex-wrap: wrap;
}
.darya-app .d-concierge-phone {
    font-family: var(--d-mono);
    font-size: 22px;
    font-weight: 600;
    color: var(--d-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--d-gold);
    padding-bottom: 4px;
}
.darya-app .d-concierge-phone:hover { color: var(--d-navy); }

/* --- luxury collection: a dark showcase band above the full grid -------- */
.darya-app .d-lux-band {
    background: var(--d-navy-deep);
    color: #F6F2EA;
    margin-top: var(--d-s6);
    padding: var(--d-s6) var(--d-s5);
    position: relative;
    overflow: hidden;
}
.darya-app .d-lux-band::after {
    content: "";
    position: absolute;
    inset-inline-start: -8%;
    top: -50%;
    width: 50%;
    height: 200%;
    background: radial-gradient(closest-side, rgba(186, 142, 74, .14), transparent);
    pointer-events: none;
}
.darya-app .d-lux-inner { max-width: 1180px; margin-inline: auto; position: relative; z-index: 1; }
.darya-app .d-lux-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--d-s4);
    margin-bottom: var(--d-s5);
}
.darya-app .d-lux-kicker { color: var(--d-gold); margin: 0 0 var(--d-s2); }
.darya-app .d-lux-title {
    font-family: var(--d-display) !important;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 600;
    color: #FBF7F0 !important;
    margin: 0;
    line-height: 1.05;
}
.darya-app .d-lux-all {
    color: #F6F2EA;
    text-decoration: none;
    border-bottom: 1px solid var(--d-gold);
    padding-bottom: 4px;
    white-space: nowrap;
    font-size: 15px;
}
.darya-app .d-lux-all:hover { color: var(--d-gold); }
.darya-app .d-lux-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .darya-app .d-lux-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .darya-app .d-lux-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Home feature bands — icons + visual layout (not walls of text)
   ========================================================================== */
.darya-app .d-feat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: rgba(186, 142, 74, .13);
    color: var(--d-gold);
    flex: 0 0 auto;
}
.darya-app .d-feat-icon svg { width: 26px; height: 26px; }
.darya-app .d-feat-icon.is-sm { width: 42px; height: 42px; border-radius: 12px; }
.darya-app .d-feat-icon.is-sm svg { width: 21px; height: 21px; }
.darya-app .d-feat-icon.is-light { background: rgba(246, 242, 234, .1); color: var(--d-gold); }

/* why-us: icon-led cards, no top hairline */
.darya-app .d-why-item {
    border-top: 0 !important;
    padding-top: 0 !important;
    display: flex;
    flex-direction: column;
    gap: var(--d-s3);
}
.darya-app .d-why-rule { display: none; }
.darya-app .d-why-item .d-why-h { margin-top: 2px; }

/* included: clean icon rows, no per-row hairline */
.darya-app .d-included-item {
    align-items: center;
    gap: 14px;
    border-top: 0;
    padding: 10px 0;
}
.darya-app .d-included-text { font-size: 16px; color: var(--d-ink); line-height: 1.5; }

/* pickup facts: icon beside a k/v body */
.darya-app .d-pickup-fact {
    border-top: 0;
    padding-top: 0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.darya-app .d-pickup-fact-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* intercity: copy beside two icon stat cards */
.darya-app .d-intercity-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: var(--d-s6);
    align-items: center;
}
@media (max-width: 860px) { .darya-app .d-intercity-grid { grid-template-columns: minmax(0, 1fr); gap: var(--d-s5); } }
.darya-app .d-intercity-copy .d-intercity-lede { color: rgba(246, 242, 234, .82); font-size: 17px; line-height: 1.85; margin: 0; max-width: 48ch; }
.darya-app .d-intercity-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--d-s4); }
.darya-app .d-ic-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--d-s4);
    background: rgba(246, 242, 234, .05);
    border: 1px solid rgba(246, 242, 234, .12);
    border-radius: 16px;
}
.darya-app .d-ic-num { font-family: var(--d-display); font-size: clamp(26px, 3vw, 36px); font-weight: 600; color: #FBF7F0; line-height: 1; margin-top: 4px; }
.darya-app .d-ic-lbl { color: rgba(246, 242, 234, .7); font-size: 13.5px; line-height: 1.5; }

/* documents: icon-headed cards, checked lists */
.darya-app .d-docs-col {
    border-top: 0;
    padding: var(--d-s5);
    background: var(--d-paper);
    border: 1px solid var(--d-hair-soft);
    border-radius: 16px;
}
.darya-app .d-docs-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--d-s4); }
.darya-app .d-docs-head .d-docs-h { margin: 0; }
.darya-app .d-docs-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    padding-inline-start: 0;
    border-bottom: 1px solid var(--d-hair-soft);
}
.darya-app .d-docs-list li::before { content: none; }
.darya-app .d-docs-list li:last-child { border-bottom: 0; }
.darya-app .d-docs-check {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--d-gold);
}
.darya-app .d-docs-check svg { width: 18px; height: 18px; }