/* ==========================================================================
   Darya Rent — web skin
   --------------------------------------------------------------------------
   The site and the app are one product, so they share one design system. Every
   value below is the token the Flutter kit uses (lib/style/colors.dart), not an
   approximation of it: navy #0C1C3D, gold #BA8E4A, muted #5F6880 for secondary
   text, edge #B9C2D2 for any border a finger can act on.

   Two rules carry most of the resemblance:
     * gold is reserved — it appears only where money is held or given back
       (deposits, savings, discounts), never as a generic accent;
     * separation is a 1px line, never a shadow.

   Loaded after the theme CSS, so it overrides rather than forks it.
   ========================================================================== */

:root {
  --d-navy: #0C1C3D;
  --d-navy-light: #1B3E7C;
  --d-gold: #BA8E4A;
  --d-gold-ink: #8A6224;
  --d-gold-soft: #F6EFE2;

  --d-ink: #101B33;
  --d-muted: #5F6880;
  --d-line: #E2E6EE;
  --d-edge: #B9C2D2;
  --d-press: #E7ECF5;
  --d-surface: #F5F7FB;
  --d-white: #FFFFFF;

  --d-success: #12805A;
  --d-warning: #9A5F09;
  --d-danger: #B3261E;

  --d-radius: 14px;
  --d-radius-sm: 12px;
  --d-tap: 44px;

  /* the theme own variables, repointed at the brand */
  --primary-color: #0C1C3D !important;
  --primary-color-hover: #1B3E7C !important;
  --primary-badge-background-color: #F6EFE2 !important;
  --secondary-color: #5F6880 !important;
  --heading-color: #101B33 !important;
  --text-color: #101B33 !important;
}

/* --------------------------------------------------------------------------
   Type — Vazirmatn in Persian, because the app ships it and a rental priced in
   تومان should not render its numerals in a Latin face.
   -------------------------------------------------------------------------- */
body {
  color: var(--d-ink);
  background: var(--d-white);
}

[dir="rtl"] body,
[dir="rtl"] .btn,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  font-family: Vazirmatn, IRANSans, Tahoma, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.heading-font { color: var(--d-ink); letter-spacing: -0.2px; }

.neutral-500, .text-muted, .text-secondary { color: var(--d-muted) !important; }

/* --------------------------------------------------------------------------
   Buttons — the app has exactly three: navy, gold, ghost. Every one clears the
   44px target the audit set.
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--d-radius-sm);
  font-weight: 600;
  min-height: var(--d-tap);
  padding: 11px 18px;
  box-shadow: none !important;
  transition: background-color .18s ease, border-color .18s ease;
  white-space: nowrap;
}

.btn-primary,
.btn-brand-2,
.btn-signin,
.btn-book,
.btn-brand-primary,
.btn-primary-dark {
  background-color: var(--d-navy) !important;
  border-color: var(--d-navy) !important;
  color: var(--d-white) !important;
}

.btn-primary:hover,
.btn-brand-2:hover,
.btn-signin:hover,
.btn-book:hover,
.btn-brand-primary:hover,
.btn-primary-dark:hover {
  background-color: var(--d-navy-light) !important;
  border-color: var(--d-navy-light) !important;
}

/* gold: reserved for deposit and saving actions */
.btn-gold,
.btn-deposit {
  background-color: var(--d-gold) !important;
  border-color: var(--d-gold) !important;
  color: #1B1204 !important;
}

.btn-outline-primary,
.btn-secondary,
.btn-gray,
.btn-dropdown,
.btn-ghost {
  background: transparent !important;
  border: 1px solid var(--d-edge) !important;
  color: var(--d-ink) !important;
}

.btn-outline-primary:hover,
.btn-secondary:hover,
.btn-gray:hover,
.btn-dropdown:hover,
.btn-ghost:hover { background: var(--d-press) !important; }

.btn:disabled,
.btn.disabled {
  background: var(--d-line) !important;
  border-color: var(--d-line) !important;
  color: var(--d-muted) !important;
}

/* --------------------------------------------------------------------------
   Cards — 1px edge, 14px radius, no shadow. Same as DaryaCard.
   -------------------------------------------------------------------------- */
.card,
.card-journey-small,
.card-news,
.box-search-ride,
.card-offer,
.card-testimonial,
.card-why-choose-us,
.card-review,
.box-list-brand,
.sidebar-left,
.box-filters,
.form-booking,
.card-rental {
  background: var(--d-white);
  border: 1px solid var(--d-line) !important;
  border-radius: var(--d-radius) !important;
  box-shadow: none !important;
}

.card:hover,
.card-journey-small:hover,
.card-rental:hover {
  border-color: var(--d-edge) !important;
  box-shadow: none !important;
}

.card-image img,
.card-journey-small .card-image img {
  border-radius: var(--d-radius) var(--d-radius) 0 0;
}

/* --------------------------------------------------------------------------
   Price — the number leads, the unit follows, exactly as Money.amount() does.
   -------------------------------------------------------------------------- */
.card-price .price,
.car-price-text,
.total-price,
.price-per-day,
.text-price {
  color: var(--d-ink) !important;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.card-price .text-sm,
.price-unit { color: var(--d-muted) !important; font-weight: 500; }

/* deposit and saving figures are the only gold text on the page */
/* a struck-through original price is a saving, and a saving is gold */
.discounted-price,
.deposit-amount,
.saving-amount,
.text-deposit { color: var(--d-gold-ink) !important; font-weight: 700; }

/* --------------------------------------------------------------------------
   Header and footer — navy ground, gold only on the brand mark.
   -------------------------------------------------------------------------- */
.header,
.header .main-menu,
.box-header-nav { background: var(--d-white); border-bottom: 1px solid var(--d-line); }

.header.header-fixed,
.header-style-2 { box-shadow: none !important; border-bottom: 1px solid var(--d-line); }

.main-menu > li > a { color: var(--d-ink) !important; font-weight: 600; }
.main-menu > li > a:hover,
.main-menu > li.current-menu-item > a { color: var(--d-navy-light) !important; }

.footer,
.footer-1,
.footer-2,
.footer-3,
.footer-top,
.footer-bottom { background: var(--d-navy) !important; color: #C7D0E2; }
.footer a, .footer p, .footer li { color: #C7D0E2 !important; }
.footer a:hover { color: var(--d-gold) !important; }
.footer h6, .footer h5, .footer .heading { color: var(--d-white) !important; }

/* --------------------------------------------------------------------------
   Forms — a border a finger can act on, and a focus ring visible without
   relying on colour alone.
   -------------------------------------------------------------------------- */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  min-height: var(--d-tap);
  border: 1px solid var(--d-edge) !important;
  border-radius: var(--d-radius-sm) !important;
  color: var(--d-ink);
  box-shadow: none !important;
}

.form-control::placeholder { color: var(--d-muted); }

.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus {
  border-color: var(--d-navy) !important;
  outline: 2px solid rgba(12, 28, 61, .35);
  outline-offset: 1px;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--d-navy);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Chips, badges, ratings
   -------------------------------------------------------------------------- */
.badge,
.tag,
.card-badge,
.status-chip {
  border-radius: 999px;
  font-weight: 600;
  padding: 4px 11px;
  border: 1px solid transparent;
}

.badge-primary, .tag-primary {
  background: var(--d-surface) !important;
  color: var(--d-navy) !important;
  border-color: var(--d-line) !important;
}

.badge-gold, .tag-discount, .badge-discount {
  background: var(--d-gold-soft) !important;
  color: var(--d-gold-ink) !important;
  border-color: rgba(186, 142, 74, .35) !important;
}

.rating-badge, .rating-star { color: var(--d-gold) !important; }

/* --------------------------------------------------------------------------
   Lists, filters, pagination
   -------------------------------------------------------------------------- */
.box-filters .dropdown-menu,
.dropdown-menu {
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius-sm);
  box-shadow: 0 8px 28px rgba(16, 27, 51, .10);
  max-height: 340px;
  overflow-y: auto;
}

.dropdown-item { min-height: var(--d-tap); display: flex; align-items: center; }
.dropdown-item:hover { background: var(--d-press); }

.pagination .page-link {
  min-width: var(--d-tap);
  min-height: var(--d-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--d-radius-sm);
  border: 1px solid var(--d-line);
  color: var(--d-ink);
}

.pagination .page-item.active .page-link {
  background: var(--d-navy);
  border-color: var(--d-navy);
  color: var(--d-white);
}

/* --------------------------------------------------------------------------
   Hero — flat navy, matching the app splash rather than a stock gradient.
   -------------------------------------------------------------------------- */
.section-hero,
.box-hero,
.box-banner-1,
.block-banner-home3,
.hero-1 { background: var(--d-navy); color: var(--d-white); }

.section-hero h1,
.box-hero h1,
.box-banner-1 .banner-title,
.block-banner-home3 .banner-title,
.hero-1 h1 { color: var(--d-white) !important; }

.section-hero p,
.box-hero p,
.box-banner-1 .banner-text,
.block-banner-home3 .banner-text { color: #C7D0E2 !important; }

/* --------------------------------------------------------------------------
   RTL — the theme was written left to right; these are the pieces that do not
   mirror on their own.
   -------------------------------------------------------------------------- */
[dir="rtl"] .dropdown-menu { text-align: right; }
[dir="rtl"] .form-control,
[dir="rtl"] .form-select { text-align: right; }
[dir="rtl"] .card-price,
[dir="rtl"] .card-location { direction: rtl; }

/* Latin figures inside Persian text keep their own direction so a price never
   reverses into nonsense. */
bdi, .price, .car-price-text { unicode-bidi: isolate; }

/* --------------------------------------------------------------------------
   Motion — respect the system setting.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .whatsapp-float { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Jalali date field (darya.js) — the Persian calendar bootstrap-datepicker
   does not have. Same grid as the app: شنبه first, weekend in gold, the
   selected day in navy.
   -------------------------------------------------------------------------- */
.darya-cal {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  min-width: 280px;
  padding: 12px;
  background: var(--d-white);
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius);
  box-shadow: 0 12px 32px rgba(16, 27, 51, .12);
}

.darya-cal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.darya-cal-title {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 700;
  color: var(--d-ink);
}

.darya-cal-nav {
  width: var(--d-tap);
  height: var(--d-tap);
  border: 1px solid var(--d-edge);
  border-radius: var(--d-radius-sm);
  background: transparent;
  color: var(--d-ink);
  font-size: 18px;
  line-height: 1;
}

.darya-cal-nav:hover { background: var(--d-press); }

.darya-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.darya-cal-grid b {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--d-muted);
  padding-bottom: 4px;
}

.darya-cal-grid button {
  min-height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--d-ink);
  font-size: 13px;
  font-weight: 500;
}

.darya-cal-grid button.we { color: var(--d-gold-ink); }
.darya-cal-grid button.today { box-shadow: inset 0 0 0 1px var(--d-edge); }
.darya-cal-grid button:hover:not([disabled]) { background: var(--d-press); }

.darya-cal-grid button.on {
  background: var(--d-navy);
  color: var(--d-white);
  font-weight: 700;
}

.darya-cal-grid button[disabled] {
  color: var(--d-edge);
  text-decoration: line-through;
  cursor: not-allowed;
}

input.calendar-date[readonly],
input.datepicker[readonly] { background: var(--d-white); cursor: pointer; }

/* ==========================================================================
   spec v4 §6.3 / §10 — the price ladder and the terms list on the car page
   --------------------------------------------------------------------------
   Both are plain lists of facts, so they get no decoration beyond what makes
   them readable: a divider between bands, and the band matching the visitor's
   own dates picked out in the brass the rest of the product uses for money.
   ========================================================================== */
.darya-price-ladder td {
    padding: 10px 0;
    border-bottom: 1px solid var(--bs-neutral-200, #e4e6e8);
}

.darya-price-ladder tr:last-child td {
    border-bottom: 0;
}

.darya-price-ladder__current td {
    color: #8A6224;
    font-weight: 700;
}

.darya-terms li {
    position: relative;
    padding-inline-start: 16px;
    padding-block: 5px;
    line-height: 1.8;
}

.darya-terms li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 15px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bs-neutral-400, #8e8e8e);
}

/* ==========================================================================
   The breadcrumb banner lays white text over whatever image the page has.
   --------------------------------------------------------------------------
   That works against the dark photographs the theme was designed with. It does
   not work against a pale one, and it does not work at all against the
   stand-in shown when the upload is missing — "تماس با ما" was white on light
   grey. A scrim makes the heading readable whatever ends up behind it, which
   is also true once the real photographs are restored.
   ========================================================================== */
.breadcrumb__area .bg-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(12, 28, 61, 0.45);
    pointer-events: none;
}

.breadcrumb__area .bg-overlay {
    position: relative;
}

/* the heading sits above the scrim */
.breadcrumb__area .container {
    z-index: 2;
}

/* ==========================================================================
   Header controls that a missing upload or an inherited colour left blank
   --------------------------------------------------------------------------
   Two solid navy tiles sat in the top-left corner of every page. Neither was
   decoration: one is the menu button, whose icon is an <img> from the media
   library that is not on disk, and the other is the sign-in button, painted
   navy by the brand and given navy text by the theme's `neutral-1000` class.
   Both were doing their job — they were simply invisible.
   ========================================================================== */

/* the menu button draws its own bars when the icon file is missing */
.burger-icon-2 img[data-darya-fallback] {
    display: none;
}

.burger-icon-2:has(img[data-darya-fallback]) {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 17h16'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px auto;
}

/* white bars need a dark tile behind them */
.burger-icon-2,
.close-canvas {
    background-color: var(--d-navy);
}

.close-canvas:has(img[data-darya-fallback]) {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12'/%3E%3Cpath d='M18 6L6 18'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px auto;
}

.close-canvas img[data-darya-fallback] {
    display: none;
}

/*
    `.neutral-1000` is an !important colour utility the theme puts on the
    sign-in link. It was written for a transparent button; on a navy one it
    hides the word. The brand colour wins on the buttons it owns.
*/
.btn-signin.neutral-1000,
.btn-book.neutral-1000,
.btn-primary.neutral-1000 {
    color: var(--d-white) !important;
}

.btn-signin svg,
.btn-book svg {
    filter: brightness(0) invert(1);
}

/*
    The announcement plugin paints its call-to-action with dark text, which the
    navy bar swallows. A white pill reads at that size and keeps the bar's own
    text as the loudest thing in it.
*/
.ae-anno-announcement__button {
    background-color: var(--d-white) !important;
    color: var(--d-navy) !important;
    border-radius: 999px;
    font-weight: 600;
    padding: 4px 14px;
}

.ae-anno-announcement__button:hover {
    background-color: var(--d-gold) !important;
    color: #1B1204 !important;
}

/*
    A 72px mark inside a 42px tile is a mark with its edges cut off. Missing
    media in an icon-sized box gets a smaller one.
*/
img.darya-media-missing {
    background-size: min(72px, 60%) auto;
}

/* ==========================================================================
   The banner scrim runs the wrong way in Persian
   --------------------------------------------------------------------------
   The theme darkens the banner with `linear-gradient(90deg, …)` — opaque on the
   left, clear on the right — because the heading it was drawn for sits on the
   left. In Persian the heading sits on the right, in the part of the gradient
   that has faded to nothing, so "تماس با ما" was white on the pale end of the
   image. The earlier flat scrim here never appeared at all: the theme's
   selector carries one more class than it did and simply outranked it.

   Same idea as the theme's, pointed at the side the text is actually on, and in
   the brand navy rather than black.
   ========================================================================== */
.page-header .custom-container .bg-overlay::after,
.page-header-2 .custom-container .bg-overlay::after {
    background: linear-gradient(to right, rgba(12, 28, 61, .88), rgba(12, 28, 61, 0) 99%);
    opacity: 1;
    width: 100%;
}

[dir="rtl"] .page-header .custom-container .bg-overlay::after,
[dir="rtl"] .page-header-2 .custom-container .bg-overlay::after {
    background: linear-gradient(to left, rgba(12, 28, 61, .88), rgba(12, 28, 61, 0) 99%);
}

/*
    The inner-page breadcrumb separator is `arrow-right.svg`, a ">" chevron. The
    theme mirrors it in RTL only on the car-detail variant; on the general
    `.breadcrumb__area` pill (cars, contact, faqs, about, terms, auth) it kept
    pointing right — away from the right-to-left reading order. Flip it so it
    points into the flow, as the app's own chevrons do.
*/
[dir="rtl"] .breadcrumb__area span img[src*="arrow-right"] {
    transform: rotate(180deg);
}

/*
    The menu and close icons are black SVGs that the theme showed on a light
    green tile. The brand repaints that tile navy, which left two solid navy
    squares in the corner of every page with the icon invisible inside them.
*/
.burger-icon-2 img,
.close-canvas img,
.burger-icon-white img {
    filter: brightness(0) invert(1);
}

/*
    The theme forces every link in the header to the body ink colour with
    `[data-bs-theme] .header a { color: var(--text-color) !important }`, which
    outranks a plain button class. That is right for the navigation and wrong
    for the two filled buttons sitting in the same bar: navy text on a navy
    button is a button nobody can read. Same weight, aimed only at the buttons.
*/
[data-bs-theme="light"] .header a.btn-signin,
[data-bs-theme="light"] .header a.btn-book,
[data-bs-theme="light"] .header a.btn-primary,
[data-bs-theme="dark"] .header a.btn-signin,
[data-bs-theme="dark"] .header a.btn-book,
[data-bs-theme="dark"] .header a.btn-primary {
    color: var(--d-white) !important;
}

[data-bs-theme="light"] .header a.btn-signin svg,
[data-bs-theme="dark"] .header a.btn-signin svg {
    filter: brightness(0) invert(1);
}

/*
    The theme's own button colours are written as `.btn.btn-brand-2 { color:
    … !important }` — two classes and a flag. The brand block above uses one
    class, so on every filled button the theme's ink won, and "جستجوی خودرو"
    was black on navy in the middle of the homepage. Same declarations, matched
    the way the theme matches them.
*/
.btn.btn-primary,
.btn.btn-brand-2,
.btn.btn-signin,
.btn.btn-book,
.btn.btn-brand-primary,
.btn.btn-primary-dark {
    background-color: var(--d-navy) !important;
    border-color: var(--d-navy) !important;
    color: var(--d-white) !important;
}

.btn.btn-primary:hover,
.btn.btn-brand-2:hover,
.btn.btn-signin:hover,
.btn.btn-book:hover,
.btn.btn-brand-primary:hover,
.btn.btn-primary-dark:hover {
    background-color: var(--d-navy-light) !important;
    border-color: var(--d-navy-light) !important;
    color: var(--d-white) !important;
}

/*
    Filling every path turned the magnifying glass in the search button into a
    solid white dot: that icon is drawn with a stroke and an explicitly empty
    fill, and forcing a fill closes it up. Inverting the whole graphic leaves
    stroked and filled icons alike as white on the navy.
*/
.btn.btn-primary svg,
.btn.btn-brand-2 svg,
.btn.btn-signin svg,
.btn.btn-book svg {
    filter: brightness(0) invert(1);
}

.btn.btn-gold,
.btn.btn-deposit {
    background-color: var(--d-gold) !important;
    border-color: var(--d-gold) !important;
    color: #1B1204 !important;
}

/*
    The price filter's slider handle carries its value as raw text — "37500000"
    — which spilled out of the 20px handle as a clipped "37500" floating above
    the track, with no separator and no unit. The formatted figure is already
    printed under the slider by `.rental-rate-to`, and that one is the one that
    updates as the handle moves.
*/
#slider-range,
#slider-range .noUi-handle,
#slider-range .noUi-tooltip {
    font-size: 0;
    line-height: 0;
}

/* the tooltip sets its own size, so inheriting zero is not enough */
#slider-range .noUi-tooltip {
    display: none;
}

/* the two ends of the range belong at the two ends of the track */
.box-value-price {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

/* ==========================================================================
   The homepage header, which the theme builds to sit on top of a photograph
   --------------------------------------------------------------------------
   The homepage carries `header-transparent`: the theme lets the hero show
   through the bar, paints every link in it white, swaps to the light-on-dark
   logo, and then on scroll adds `.stick` and fills the bar with
   `var(--secondary-color)`.

   Three things went wrong with that here. The brand gives the header a white
   ground, so the white links were white-on-white — the navigation vanished the
   moment the page was scrolled. The `.stick` fill resolved to a muddy slate
   that belongs to neither palette. And `.main-menu` kept the white the brand
   gives it while the bar around it turned slate, so a white rectangle sat in
   the middle of the header with nothing in it.

   The header is white in every state, as it already is on every other page of
   the site, and everything in it is ink.
   ========================================================================== */
.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-white) !important;
    border-bottom: 1px solid var(--d-line);
}

/*
    The theme's `[data-bs-theme] .header-transparent a { color: #fff }` is
    written for a photograph behind the bar. One more class outranks it.
*/
[data-bs-theme="light"] .header.header-transparent a,
[data-bs-theme="light"] .header.header-transparent span,
[data-bs-theme="light"] .header.header-transparent .main-menu > li > a {
    color: var(--d-ink) !important;
}

[data-bs-theme="light"] .header.header-transparent a.btn-signin,
[data-bs-theme="light"] .header.header-transparent a.btn-book,
[data-bs-theme="light"] .header.header-transparent a.btn-primary {
    color: var(--d-white) !important;
}

/* and the logo that goes with a light bar is the light-mode one */
.header.header-transparent .header-logo .light-mode {
    display: block !important;
}

.header.header-transparent .header-logo .dark-mode {
    display: none !important;
}

.header.header-transparent .darya-wordmark {
    color: var(--d-navy) !important;
}

/*
    Text fields were laid out left-to-right inside a right-to-left page. The
    Jalali datepicker writes "۱ شهریور ۱۴۰۵" into the box and the browser, told
    the field is LTR, ran the day and the year together as "شهریور ۱۱۴۰۵" — a
    date nobody could read, in the two fields a customer fills in first.

    Fields that hold Latin data by nature — an email address, a phone number, a
    password — keep their own direction below.
*/
[dir="rtl"] input[type="text"],
[dir="rtl"] input:not([type]),
[dir="rtl"] textarea {
    direction: rtl;
}

[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="password"] {
    direction: ltr;
}

/* ==========================================================================
   A banner with no photograph should not reserve photograph-sized space
   --------------------------------------------------------------------------
   `.breadcrumb__area` has `min-height: 430px` because it is cut for a wide
   photograph with a heading laid over it. With the uploads missing, that is
   430px of flat navy with two words in the middle of it — half the first
   screen of every inner page spent on an empty rectangle, which is what the
   page looked like.

   Where the photograph is missing the band collapses to the height a page
   title actually needs, and the "photo missing" mark comes off: that mark is
   useful on a car card, where the reader is looking for the car, and is noise
   on a decorative header.

   Both rules key off `data-darya-fallback`, which the media fallback sets only
   on an image it has replaced — so restoring storage/app/public brings the
   full-height banners back with no CSS to undo.
   ========================================================================== */
.breadcrumb__area.breadcrumb--no-image,
.breadcrumb__area:has(img[data-darya-fallback]) {
    min-height: 200px;
    height: 200px;
}

/*
    With no image there is no `.bg-overlay` to carry the scrim either, so the
    band paints its own ground. Navy, because the heading on it is white and
    because that is the colour the announcement bar and the footer already use.
*/
.breadcrumb__area.breadcrumb--no-image {
    background: linear-gradient(to left, var(--d-navy), var(--d-navy-light));
}

.breadcrumb__area img.darya-media-missing,
.page-header img.darya-media-missing,
.box-section-banner img.darya-media-missing,
.banner-hero img.darya-media-missing {
    background-image: none;
}

/*
    Numbered lists counted in Latin digits on Persian pages — "1. قرارداد
    اجاره", "2. مدت اجاره" — beside body text that is entirely in Persian ones.
    The counter is text like any other.
*/
[dir="rtl"] ol {
    list-style-type: persian;
}

[dir="rtl"] ol ol {
    list-style-type: arabic-indic;
}

/* ==========================================================================
   The app's shapes, on the website
   --------------------------------------------------------------------------
   The colours already matched: darya.css takes its tokens from the prototype's
   `--a-*` set, value for value. What did not match was everything the eye
   actually reads a product by — corner radii, borders, shadows, control
   heights, type weights. The site had 20px corners and a soft drop shadow
   under every card; the app has 14px corners, a 1px edge line and no shadow
   at all. Side by side they looked like two products.

   Every number below is lifted from design/prototype.html rather than chosen
   here:

       card    radius 14, 1px var(--a-edge), no shadow, padding 12
       button  min-height 42, radius 12, weight 650, 13px
       small   min-height 32, radius 9, 11.5px
       chip    min-height 44, radius 22, 1px edge; selected = petrol
       field   radius 11, 1px edge, padding 8/11
       badge   radius 5, micro, uppercase, tinted from the status colour
       press   background var(--a-press), scale(.99); hover = petrol border

   `!important` on the shape properties: the theme ships its card rules inside
   inline <style> blocks in the body partials, which come after this file in
   document order and would otherwise win every tie.
   ========================================================================== */

/* ---- cards ------------------------------------------------------------- */
.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 {
    border-radius: 14px !important;
    border: 1px solid var(--d-edge) !important;
    box-shadow: none !important;
    background: var(--d-white);
}

.card-journey-small.background-card.hover-up:hover,
.card-grid-style-3:hover {
    transform: none !important;
    border-color: var(--d-navy) !important;
    box-shadow: none !important;
}

/* the image sits inside the card's corner, not on top of it */
.card-journey-small .car-image.card-image,
.card-journey-small .card-image {
    border-radius: 13px 13px 0 0 !important;
}

/* ---- buttons ----------------------------------------------------------- */
.btn,
.btn.btn-primary,
.btn.btn-brand-2,
.btn.btn-signin,
.btn.btn-book,
.btn.btn-brand-primary,
.btn.btn-primary-dark,
.btn.btn-gold,
.btn.btn-deposit {
    min-height: 42px;
    border-radius: 12px !important;
    font-size: 13px;
    font-weight: 650;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.15;
    transition: transform .1s ease, background-color .12s ease, border-color .12s ease;
}

.btn:active {
    transform: scale(.985);
}

/* the theme's outline buttons are the app's ghost */
.btn.btn-outline-secondary,
.btn.btn-outline-primary,
.btn.btn-white,
.btn-border {
    background: transparent !important;
    border: 1px solid var(--d-edge) !important;
    color: var(--d-ink) !important;
}

.btn.btn-sm,
.btn-sm {
    min-height: 32px;
    border-radius: 9px !important;
    font-size: 11.5px;
    padding: 0 12px;
}

/* ---- chips ------------------------------------------------------------- */
.box-tags .btn,
.list-tags-brand a,
.filter-tag,
.car-type-tag,
.discount-filter-tag,
.box-filters .btn-tag,
.tags-list a {
    min-height: 44px;
    padding: 0 15px;
    border-radius: 22px !important;
    border: 1px solid var(--d-edge) !important;
    background: var(--d-white) !important;
    color: var(--d-ink) !important;
    font-size: 13.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    box-shadow: none !important;
}

.box-tags .btn.active,
.filter-tag.active,
.car-type-tag.active,
.discount-filter-tag.active,
.tags-list a.active {
    background: var(--d-navy) !important;
    border-color: var(--d-navy) !important;
    color: var(--d-white) !important;
}

/* ---- fields ------------------------------------------------------------ */
.form-control,
.form-select,
.search-input,
textarea.form-control,
.nice-select {
    border-radius: 11px !important;
    border: 1px solid var(--d-edge) !important;
    padding: 10px 11px;
    font-size: 13.5px;
    background: var(--d-white);
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: var(--d-navy) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--d-navy) 14%, transparent) !important;
}

/* the label above a value, as the app sets it */
.item-line-booking .form-label,
.field-label,
label.form-label {
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--d-muted);
    font-weight: 600;
}

/* ---- badges ------------------------------------------------------------ */
.card-badges-top .badge,
.card-badges-bottom .badge,
.badge {
    border-radius: 5px !important;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 4px 7px;
    box-shadow: none !important;
}

/* ---- pressed state ----------------------------------------------------- */
.card-journey-small:active,
.card-grid-style-3:active,
.filter-tag:active,
.car-type-tag:active {
    background: var(--d-press) !important;
    transform: scale(.99);
}

/*
    A card inside a card draws two lines around one thing. The theme nests its
    filter blocks three deep — sidebar, filters box, block — and each of them
    answered to a rule above, so the price filter arrived inside a box inside a
    box. Only the outermost surface carries the edge.
*/
.sidebar-left .box-filters-sidebar,
.sidebar-left .block-filter,
.sidebar-left .card,
.card-journey-small .card,
.box-feature-car .item-feature-car-inner,
.group-collapse-expand .card {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent;
}

/*
    The slider needs room inside that surface: with the border moved outwards
    the track ran to the edge and the "۰ تومان" end of the range was clipped by
    it.
*/
.sidebar-left .block-filter {
    padding: 16px;
}

.box-slider-range {
    padding-inline: 6px;
}

/*
    The search box is the app's home screen, on a wider canvas: a card holding
    one bordered field per question and a filled button. The theme builds the
    same thing out of `.item-search` cells separated by hairlines, so the cells
    become fields and the dividers go.
*/
/* `bd-none` is the theme's own marker for the cell that holds the submit
   button — it asks for no border, and a field is exactly a border */
.box-bottom-search .item-search:not(.bd-none) {
    border: 1px solid var(--d-edge);
    border-radius: 11px;
    padding: 8px 11px;
    background: var(--d-white);
    border-inline-end-width: 1px !important;
}

.box-bottom-search .item-search:not(.bd-none):hover {
    border-color: var(--d-navy);
}

/*
    The control inside a field is text, not a second button — but only the
    dropdown. Naming `.btn` here swallowed the submit button as well and left
    "جستجوی خودرو" as an outline with no fill in the middle of the card.
*/
.box-bottom-search .item-search .btn-dropdown-search {
    min-height: 0;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    color: var(--d-ink) !important;
    border-radius: 0 !important;
    font-size: 12.5px;
    font-weight: 600;
    justify-content: space-between;
    width: 100%;
}

.box-bottom-search .item-search .text-sm-bold,
.box-bottom-search .item-search > label,
.box-bottom-search .item-search .search-label {
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--d-muted);
    font-weight: 600;
}

/*
    One surface, one line. `.background-card` sits on both the search box and
    the strip inside it, so without this the card drew a border around a border.
*/
.background-card .background-card,
.box-search-advance .box-bottom-search {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ---- the car page ------------------------------------------------------ */
/*
    The booking panel is the app's booking sheet: a card, not a grey block with
    an 8px corner. The specification cells were tinted `rgba(246,239,226,.2)` —
    a warm cream left over from the theme's own palette, which is the one hue
    on the page that belongs to neither the brand nor the app.
*/
.booking-form {
    background: var(--d-white) !important;
    border: 1px solid var(--d-edge) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.item-feature-car-inner {
    background: var(--d-surface) !important;
    border-radius: 11px !important;
    padding: 10px 12px;
}

/* a note is a surface with the warning edge the app gives it */
.minimum-rental-notice {
    background: var(--d-surface) !important;
    border: 1px solid var(--d-line) !important;
    border-inline-start: 3px solid var(--d-warning) !important;
    border-radius: 11px !important;
}

/* ---- the remaining pages ----------------------------------------------- */
/*
    The theme's tinted section backgrounds are `rgba(var(--primary-color-rgb),
    .2)`. With the variable corrected they are the brand navy at a fifth, which
    is a cold grey a shade darker than the app's surface — close, and not it.
    Pinned to the app's own value so a section behind a card is the same colour
    on the site as it is on the phone.
*/
.background-2,
.box-section.background-2,
.section-box-info,
.box-faqs-inner,
.background-body-2 {
    background: var(--d-surface) !important;
}

/* the theme's soft accent fills, on icon tiles and small badges */
.icon-shape,
.item-icon,
.box-image-icon,
.card-icon {
    background: var(--d-surface) !important;
    border-radius: 11px !important;
}

/*
    A "details" link is the app's ghost button: a 1px edge, ink text, the same
    12px corner as a filled one. The theme draws it as an outlined pill.
*/
.btn-view-detail,
.btn-arrow-right,
.card-faq .btn,
.item-service .btn,
.btn-explore {
    min-height: 42px;
    border-radius: 12px !important;
    border: 1px solid var(--d-edge) !important;
    background: transparent !important;
    color: var(--d-ink) !important;
    font-size: 13px;
    font-weight: 650;
    padding: 0 14px;
    box-shadow: none !important;
}

.btn-view-detail:hover,
.card-faq .btn:hover,
.item-service .btn:hover,
.btn-explore:hover {
    border-color: var(--d-navy) !important;
    background: var(--d-press) !important;
}

/* ---- accordions -------------------------------------------------------- */
/*
    The app draws a question as a row with a hairline under it, not as a boxed
    panel with its own shadow.
*/
.accordion-item,
.faq-item,
.box-faqs .card {
    border: 0 !important;
    border-bottom: 1px solid var(--d-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.accordion-item:last-child,
.faq-item:last-child {
    border-bottom: 0 !important;
}

.accordion-button {
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 650;
    font-size: 13.5px;
    padding: 14px 0;
}

.accordion-button:not(.collapsed) {
    color: var(--d-navy) !important;
}

/* ---- pagination -------------------------------------------------------- */
.pagination .page-link {
    min-width: 42px;
    min-height: 42px;
    border-radius: 12px !important;
    border: 1px solid var(--d-edge) !important;
    color: var(--d-ink);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pagination .page-item.active .page-link {
    background: var(--d-navy) !important;
    border-color: var(--d-navy) !important;
    color: var(--d-white) !important;
}

/* ---- tables ------------------------------------------------------------ */
.table > :not(caption) > * > * {
    border-bottom-color: var(--d-line);
    padding: 12px 10px;
}

.table thead th {
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--d-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--d-line);
}