/* ==========================================================================
   Darya Rent — the home search box (website corrections §17)
   --------------------------------------------------------------------------
   In its own stylesheet, loaded last, rather than in a <style> block in the
   Blade partial. The theme's HTML optimiser hoists an inline style into a
   generated class earlier in the document, where it loses on source order to
   anything of equal specificity — which is why `.d-search-shell` could not
   beat `.d-shell` and the card sat under 126px of blank screen.

   Where a rule has to win against the theme's own, it says so by name
   (.d-shell.d-search-shell) instead of relying on where it happens to load.
   ========================================================================== */

.d-search-band {
    padding: 1.6rem 0 .4rem;
}

/* darya-app.css sets `#page-home .darya-app:first-of-type .d-shell` to 126px of
   top padding — clearance for the transparent header, written when the hero
   band was the first thing on the page. The search box is first now, so that
   clearance lands on it and leaves a blank screen above the card.

   That selector carries an id, so it cannot be beaten by a class alone; this
   matches it and adds the search shell's own class rather than reaching for
   !important. */
#page-home .darya-app:first-of-type .d-shell.d-search-shell,
.d-shell.d-search-shell {
    padding-top: 0;
    padding-bottom: 1.5rem;
}

@media (max-width: 991.98px) {
    #page-home .darya-app:first-of-type .d-shell.d-search-shell {
        padding-top: 0;
    }
}

.d-card.d-search-card {
    padding: 1.35rem 1.4rem 1.2rem;
}

.d-search-title {
    font-size: 1.15rem;
    margin: 0 0 1rem;
}

/* Three sections, as the client listed them: city, pick-up, return — stacked
   one under the other rather than side by side, so the box is read downwards
   in the order the booking is actually made. */
.d-search-sections {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

/* Inside a row: the section's name, then its fields across the rest of the
   width. The name sits in its own column so the three rows line up. */
.d-search-part {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1.3fr) minmax(0, 1.5fr);
    align-items: end;
    gap: .4rem 1.1rem;
    padding: .3rem 0;
}

.d-search-part + .d-search-part {
    border-top: 1px solid var(--d-hair-soft, rgba(19, 26, 40, .10));
}

.d-search-part-title {
    grid-column: 1;
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--d-gold, #BA8E4A);
    align-self: center;
}

/* date and time share the last column */
.d-search-when {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: .6rem .75rem;
}

/* darya-direction.css underlines every .d-field, and does it with !important:

       .darya-app .d-field, ... { border-bottom: 1px solid var(--d-hair-soft) !important }

   Inside the search box that drew a second line under each control, on top of
   the control's own edge, and competed with the rule between sections — which
   is the line that actually carries meaning here.

   That rule is shared with every other .d-field on the site, so it cannot be
   edited for this one box, and no amount of specificity beats !important. This
   is the case where answering it in kind is right rather than lazy; it is held
   to .d-search-part so nothing outside the search box changes. */
.d-search-part .d-field,
.darya-app .d-search-part .d-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
    border-bottom: 0 !important;
}

/* darya-direction.css pins every .d-field .d-k to 10.5px with !important. Two
   !important declarations are settled by specificity, not by load order, and
   its selector (.darya-app .d-field .d-k) outranks a plain .d-search-part .d-k
   — so this one has to be at least as specific to take effect at all. */
.darya-app .d-search-part .d-field .d-k,
.d-search-part .d-field .d-k {
    font-size: 9px !important;
    opacity: .75;
}

.d-search-part .d-v {
    width: 100%;
}

/* when the return place is collapsed by the tick, its date and time move up
   into the empty column rather than leaving a hole */
.d-search-part .d-field[hidden] {
    display: none;
}

.d-search-part .d-field[hidden] + .d-search-when {
    grid-column: 2 / -1;
}

.d-search-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.1rem;
    margin-top: 1.1rem;
}

.d-search-same {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-size: .85rem;
}

/* the tick is a plain checkbox; the theme sizes bare checkboxes very large */
.d-search-same input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
    margin: 0;
}

.d-search-note {
    font-size: .78rem;
    opacity: .7;
}

.d-search-submit {
    margin-inline-start: auto;
}

@media (max-width: 900px) {
    .d-search-part {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .d-search-part-title {
        align-self: start;
    }

    .d-search-part .d-field[hidden] + .d-search-when {
        grid-column: auto;
    }
}

@media (max-width: 560px) {
    .d-search-when {
        grid-template-columns: 1fr;
    }

    .d-search-submit {
        margin-inline-start: 0;
        width: 100%;
    }
}

/* ==========================================================================
   §16 — the home sliding banner
   --------------------------------------------------------------------------
   Same sheet as the search box because both are home bands that must beat the
   theme on source order; see the header note above.
   ========================================================================== */

.d-banner-band {
    padding: .2rem 0 1.4rem;
}

.d-shell.d-banner-shell {
    padding-top: 0;
    padding-bottom: 0;
}

.d-banner {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius, 14px);
}

.d-banner-slide {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 260px;
    padding: 1.6rem 1.8rem;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    text-decoration: none;
    color: #fff;
}

/* the slide's own photograph decides how dark the text sits on, so the scrim
   is a gradient rather than a flat wash */
.d-banner-scrim {
    position: absolute;
    inset: 0;
    /* The scrim ran dark at the bottom and had faded to .10 by 65% — which is
       exactly the height the title sits at, so white copy landed on a pale
       photograph and measured a contrast ratio of 1.07. It is anchored on the
       reading edge instead, where the copy actually is, and keeps enough
       weight across the whole band that a light image cannot wash it out. */
    background:
        linear-gradient(to top, rgba(6, 18, 42, .55), rgba(6, 18, 42, .28)),
        linear-gradient(to right, rgba(6, 18, 42, .88), rgba(6, 18, 42, .35) 62%, rgba(6, 18, 42, .12));
}

.d-banner-copy {
    position: relative;
    display: block;
    max-width: 46ch;
}

.d-banner-title {
    display: block;
    font-size: clamp(1.15rem, 2.4vw, 1.7rem);
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.d-banner-lede {
    display: block;
    margin-top: .4rem;
    font-size: .92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
}

.d-banner-dots {
    position: absolute;
    inset-inline: 0;
    bottom: .7rem;
    z-index: 2;
    text-align: center;
}

.d-banner-dots .swiper-pagination-bullet {
    background: #fff;
    opacity: .55;
}

.d-banner-dots .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--d-gold, #BA8E4A);
}

@media (max-width: 560px) {
    .d-banner-slide {
        min-height: 200px;
        padding: 1.1rem 1.2rem;
    }
}

/* ── "Browse by type" — an icon beside each name ─────────────────────────── */

.d-cat-tile .d-cat-icon {
    display: block;
    width: 46px;
    height: 23px;
    margin-bottom: .55rem;
    color: var(--d-gold, #BA8E4A);
}

.d-cat-tile .d-cat-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ==========================================================================
   The search box on the hero — spec §9, "Shape A: hero card on the banner"
   --------------------------------------------------------------------------
   The card now sits inside .d-hero-band, which paints its contents #F6F2EA so
   the copy reads on navy. .d-field .d-v is `color: inherit`, so every select,
   every date and the "return to the pick-up location" line inherited that
   cream — on a white card, which is why the fields looked washed out.

   Setting the colour once on the card itself is the whole fix: a direct rule
   beats what the band hands down, and the card's subtree inherits ink again.
   ========================================================================== */
.d-hero-search .d-search-card,
.darya-app .d-hero-search .d-search-card {
    color: var(--ink, #101B33);
    background: var(--bg, #fff);
    /* darya-direction.css pins every .d-card to `border-radius: 3px !important`
       site-wide, so the card was square-cornered while the fields inside it
       were rounded to 10px. Answered in kind, and only for this card. */
    border-radius: var(--radius-lg, 20px) !important;
    box-shadow: var(--shadow-lg, 0 30px 60px rgba(12, 28, 61, .14));
    border: 0;
}

/* the labels and the note keep their own muted tone rather than inheriting */
.darya-app .d-hero-search .d-search-part .d-field .d-k {
    color: var(--muted, #5F6880);
}

.darya-app .d-hero-search .d-search-note,
.darya-app .d-hero-search .d-search-same {
    color: var(--ink, #101B33);
}

/* the card is the hero's second column: it should fill it, not float in it */
.darya-app .d-hero-search {
    min-width: 0;
}

@media (max-width: 900px) {
    /* stacked under the copy, the card no longer needs to look lifted off a
       photograph that is not there */
    .darya-app .d-hero-search .d-search-card {
        box-shadow: var(--shadow, 0 14px 34px rgba(12, 28, 61, .09));
    }
}

/* --------------------------------------------------------------------------
   One shape for every control in the box
   --------------------------------------------------------------------------
   The dates were underlined and the selects kept the browser's own box, so a
   row read as two different kinds of field side by side. The wrapper's line is
   gone (the client asked for that); the line belongs on the control itself,
   which is where the value actually sits.

   darya.css arms every control on the site:

       .form-control, input[type="text"], select, ... {
           border: 1px solid var(--d-edge) !important;
           min-height: var(--d-tap);
       }

   !important is not beaten by specificity, so the box cannot be removed here
   without answering in kind. It is held to .d-search-part, so only the eight
   controls in this one box change and every other form on the site keeps the
   site-wide field.

   appearance:none takes the select's arrow with it, so it is drawn back as a
   background chevron — mirrored for RTL, where the arrow sits on the left.
   -------------------------------------------------------------------------- */
.darya-app .d-search-part .d-field .d-v,
.d-search-part .d-field .d-v {
    appearance: none;
    -webkit-appearance: none;
    border: 0 !important;
    border-bottom: 1px solid var(--line, #E2E7F0) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    min-height: 0 !important;
    padding-block: .3rem !important;
    padding-inline: 0 1.1rem !important;
    min-width: 0;
    line-height: 1.45;
}

.darya-app .d-search-part .d-field .d-v:focus {
    border-bottom-color: var(--brand, #0C1C3D) !important;
}

.darya-app .d-search-part .d-field select.d-v,
.d-search-part .d-field select.d-v {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235F6880' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .1rem center;
    background-size: 10px 6px;
}

[dir="rtl"] .darya-app .d-search-part .d-field select.d-v,
.darya-app[dir="rtl"] .d-search-part .d-field select.d-v {
    background-position: left .1rem center;
}

/* --------------------------------------------------------------------------
   On the hero the card is about 440px wide, and the row it inherited — the
   section's name beside its fields beside the date and time — does not fit:
   the date clipped to "202…" and the labels broke over two lines.

   So inside the hero each section becomes a stack: its name, then the place,
   then the date and time side by side. Same three sections, same reading
   order, just given the width they need.
   -------------------------------------------------------------------------- */
.darya-app .d-hero-search .d-search-part {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: .55rem;
    padding: .65rem 0;
}

.darya-app .d-hero-search .d-search-part-title {
    grid-column: 1;
    align-self: start;
}

.darya-app .d-hero-search .d-search-when {
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr) minmax(5.5rem, .75fr);
}

/* nothing is left to move up when the return place is collapsed: the stack
   closes on its own */
.darya-app .d-hero-search .d-search-part .d-field[hidden] + .d-search-when {
    grid-column: 1;
}

/* The time selects carry dir="ltr" so 10:00 is not reordered. In an RTL page
   that also drags the value to the left edge of its column while its label
   stays on the right, so the pair no longer lines up: align the text to the
   row's reading edge and let dir keep doing only what it is there for. */
[dir="rtl"] .darya-app .d-search-part .d-field select.d-v[dir="ltr"],
[dir="rtl"] .d-search-part .d-field select.d-v[dir="ltr"] {
    text-align: right;
}

/* --------------------------------------------------------------------------
   The search button, and how much room the card gets
   --------------------------------------------------------------------------
   The theme's .d-btn radius is set with !important, so the pill has to be
   asked for in kind.
   -------------------------------------------------------------------------- */
.d-search-card .d-search-submit,
.darya-app .d-search-card .d-search-submit {
    border-radius: 35px !important;
    padding-inline: 1.6rem;
}

/* The card is the hero's second column. It held the narrower share, which is
   what forced the date to clip and the labels to break in two; giving it the
   larger share lets each row breathe without changing the copy beside it. */
.darya-app .d-hero-grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}

@media (min-width: 1400px) {
    .darya-app .d-hero-grid {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    }
}

/* A gradient direction is physical and does not flip with `dir`, so the RTL
   page needs the mirror written out: in Persian and Arabic the banner copy is
   on the right, and the weight of the scrim has to be there with it. */
[dir="rtl"] .d-banner-scrim {
    background:
        linear-gradient(to top, rgba(6, 18, 42, .55), rgba(6, 18, 42, .28)),
        linear-gradient(to left, rgba(6, 18, 42, .88), rgba(6, 18, 42, .35) 62%, rgba(6, 18, 42, .12));
}

/* ==========================================================================
   The search box, rebuilt: two fields to a row, each in its own box
   --------------------------------------------------------------------------
   Replaces the stacked City / Pick-up / Return sections. The labels carry the
   meaning, so the section headings are gone, and each control sits in a real
   bordered field rather than on an underline — which is what made the box read
   as a different piece of design from the rest of the site.

   The date and its time share one box on purpose: that pair is a single
   decision, and drawing it as one control with a divider says so.
   ========================================================================== */
.d-search-card .d-search-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem .9rem;
}

.d-search-card .d-sfield {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
    margin: 0;
}

.d-search-card .d-sfield-wide {
    grid-column: 1 / -1;
}

.d-search-card .d-sfield[hidden] {
    display: none;
}

/* the label: gold, small, above its box */
.darya-app .d-search-card .d-sk,
.d-search-card .d-sk {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--gold-ink, #7E5A1D);
}

/* the box */
.d-search-card .d-sbox {
    display: flex;
    align-items: stretch;
    min-width: 0;
    background: var(--bg, #fff);
    border: 1px solid var(--line-strong, #C2CBD9);
    border-radius: var(--radius-sm, 10px);
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* No `overflow: hidden` on the box, however much it would tidy the corners.
   darya.js hangs the Jalali calendar off the date input's parent — which is
   this box — so clipping to the box's 52px height hid the panel completely and
   the dates could not be changed at all. The controls inside are transparent,
   so there is nothing for the rounded corners to clip anyway. */

.d-search-card .d-sbox:focus-within {
    border-color: var(--brand, #0C1C3D);
    box-shadow: 0 0 0 3px rgba(12, 28, 61, .10);
}

/* the divider between a date and its time */
.d-search-card .d-sbox.is-split .d-sv.is-time {
    border-inline-start: 1px solid var(--line, #E2E7F0);
    flex: 0 0 auto;
    width: 5.9rem;
}

/* the controls themselves. darya.css arms every input and select on the site
   with `border: 1px solid var(--d-edge) !important` and a 44px min-height, so
   the box would otherwise contain a second box; answered in kind and held to
   this card. */
.darya-app .d-search-card .d-sv,
.d-search-card .d-sv {
    appearance: none;
    -webkit-appearance: none;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    min-height: 44px !important;
    padding-block: 0 !important;
    padding-inline: .7rem 1.9rem !important;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink, #101B33);
    line-height: 1.3;
    text-overflow: ellipsis;
}

.darya-app .d-search-card .d-sv:focus,
.d-search-card .d-sv:focus {
    outline: 0;
    box-shadow: none !important;
}

/* selects keep an arrow, drawn rather than native, mirrored for RTL */
.d-search-card select.d-sv {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235F6880' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .65rem center;
    background-size: 10px 6px;
}

[dir="rtl"] .d-search-card select.d-sv {
    background-position: left .65rem center;
}

/* a date input has no arrow, so it does not need the room one would take.
   Matched to the specificity of the rule above, which is !important. */
.darya-app .d-search-card input.d-sv,
.d-search-card input.d-sv {
    padding-inline-end: .7rem !important;
}

/* the time sits beside its date, so it reads centred in its own half */
.darya-app .d-search-card .d-sv.is-time,
.d-search-card .d-sv.is-time {
    padding-inline: .6rem 1.5rem !important;
}

/* --- the button ------------------------------------------------------- */
.d-search-card .d-search-submit,
.darya-app .d-search-card .d-search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin: 1rem 0 0;
    min-height: 48px;
    border-radius: var(--radius-sm, 10px) !important;
    font-size: 15px;
    font-weight: 600;
}

/* --- the row under it -------------------------------------------------- */
.d-search-card .d-search-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem .9rem;
    margin-top: .85rem;
}

.d-search-card .d-search-note {
    font-size: 12px;
    opacity: .7;
}

.d-search-card .d-search-same {
    font-size: 13px;
}

@media (max-width: 560px) {
    .d-search-card .d-search-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The return station is on the box whatever the tick says. While the tick is
   set it follows the pick-up station, so it is shown as settled rather than as
   something waiting to be filled in — it still submits, which a disabled
   control would not. */
.d-search-card .d-sfield.is-mirrored .d-sbox {
    background: var(--bg-alt, #F5F7FB);
    border-color: var(--line, #E2E7F0);
}

.d-search-card .d-sfield.is-mirrored .d-sv {
    color: var(--muted, #5F6880);
}

/* ==========================================================================
   "Where we rent" — the cities the fleet operates in
   --------------------------------------------------------------------------
   A rail of city cards, scrollable rather than wrapped: the list grows as
   branches are added, and a rail keeps one row whatever the count. The client
   supplies each photograph in the admin panel, so a card has to look
   deliberate before one arrives — hence the navy placeholder rather than a
   grey gap or, worse, a stock photograph of a city we do not serve.
   ========================================================================== */
.d-cities-rail {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}

.d-city-card {
    flex: 0 0 auto;
    width: 178px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.d-city-card:hover {
    transform: translateY(-2px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
}

.d-city-photo {
    display: block;
    aspect-ratio: 4 / 3;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(186, 142, 74, .22), transparent 70%),
        var(--brand-dark, #06122A);
    overflow: hidden;
}

.d-city-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.d-city-name {
    display: block;
    padding: 11px 13px 2px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
}

.d-city-branches {
    display: block;
    padding: 0 13px 12px;
    font-size: 12.5px;
    color: var(--muted);
}

@media (max-width: 560px) {
    .d-city-card { width: 148px; }
}