/* ==========================================================================
   Darya Rent — page-specific styling on top of the client's reference design
   system (darya-ref.css). Loaded last.

   Everything here is either (a) an override that beats an old theme rule the
   reference markup would otherwise inherit, or (b) a component the reference
   never had (split login card, testimonials, the rent-out form).

   Logical properties only — the same sheet serves fa/ar (rtl) and en (ltr).
   ========================================================================== */

/* ----------------------------------------------------------- direction --- */
/* darya-ref.css hard-codes `direction: rtl` on body (the reference is fa only). */
html[dir="ltr"] body { direction: ltr; text-align: left; }
html[dir="ltr"] .drawer { inset-inline-end: 0; transform: translateX(105%); }
html[dir="ltr"] .drawer.open { transform: none; }

/* --------------------------------------------------------------- shell --- */
/* the old theme floats `.header` and paints it with !important; the
   reference header is a sticky white bar */
header.darya-header {
  float: none;
  position: sticky;
  top: 0;
  width: 100%;
  min-height: var(--header-h);
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
}
header.darya-header .wrap { width: 100%; }
header.darya-header .logo-img { height: 40px; }
header.darya-header .brand-text { font-weight: 800; color: var(--brand); font-size: 1.1rem; }
header.darya-header .btn-gold.btn-sm { white-space: nowrap; }
.icon-btn-profile { position: relative; padding: 0; }
.icon-btn-dot {
  position: absolute; inset-inline-end: 6px; top: 6px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok, #1E7F4F);
}
@media (max-width: 1080px) { .mainnav a { padding-inline: 8px; font-size: .9rem; } }
@media (max-width: 1000px) { .mainnav { display: none; } }

main#main { min-height: 40vh; }
body.darya-has-bottomnav { padding-bottom: 0; }

/* the theme's own sticky-header helper adds top padding when it thinks the
   header is fixed — it is not, any more */
body { padding-top: 0 !important; }
.sticky-bar-placeholder { display: none !important; }

/* drawer additions */
.drawer-nav .drawer-app svg { vertical-align: -5px; margin-inline-end: 8px; }
/* r2 · «اعلان‌ها» in the drawer with its unread count */
.drawer-nav .drawer-notif svg { flex: none; }
.drawer-nav .drawer-count { margin-inline-start: auto; background: var(--danger); color: #fff; border-radius: 999px; min-width: 22px; height: 22px; padding: 0 7px; font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.drawer-nav .drawer-app.is-soon { color: var(--muted); }
.drawer-nav .drawer-app.is-soon .small { margin-inline-start: 6px; }
.drawer-langs { display: flex; gap: 8px; padding: 6px 14px 4px; flex-wrap: wrap; }
.drawer-langs a {
  display: inline-flex !important; align-items: center; min-height: 40px;
  padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: .9rem; font-weight: 600; width: auto !important;
}
.drawer-langs a.is-on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* footer — the old theme paints .footer with !important */
footer.darya-footer {
  background: var(--brand-dark) !important;
  color: #C6D4E0;
  padding-block: 54px 30px;
}
footer.darya-footer a, footer.darya-footer p, footer.darya-footer li { color: #E4ECF3 !important; }
footer.darya-footer a:hover { color: var(--gold) !important; }
footer.darya-footer h3 { color: #fff !important; }
footer.darya-footer .footer-muted { color: #C6D4E0 !important; font-size: .9rem; }
footer.darya-footer .footer-address-line { display: inline-flex; gap: 8px; align-items: flex-start; }
footer.darya-footer .footer-address-line svg { flex: none; margin-top: 6px; }
footer.darya-footer .footer-h-gap { margin-top: 18px; }
footer.darya-footer .trust-slot { color: #5F6880 !important; }
footer.darya-footer .trust-slot img { max-height: 96px; width: auto; }
footer.darya-footer .footer-bottom span { color: #C6D4E0; }
@media (max-width: 780px) {
  footer.darya-footer { padding-bottom: calc(30px + var(--bottomnav-h)); }
}

/* the reference's `.wrap` under the theme's `.container`-less layout */
.darya-page > .wrap { padding-block: 34px 60px; }

/* --------------------------------------------------------------- notices -- */
.notice ul { margin: 0; padding-inline-start: 1.2em; }

/* ------------------------------------------------------------- homepage --- */
.searchband-copy .eyebrow { display: inline-flex; }
.searchpanel .field select, .searchpanel .field input { width: 100%; }
.searchpanel .sp-grid .field.field-wide { grid-column: 1 / -1; }
.dt > input[type="date"] { border-start-end-radius: 0; border-end-end-radius: 0; direction: ltr; }
html[dir="ltr"] .dt > select { direction: ltr; }
.dt > select { direction: ltr; text-align: center; font-variant-numeric: tabular-nums; }
#return-branch-field[hidden] { display: none; }
#search-error { margin: 8px 0 0; }

/* banner slider (the simple-slider block kept from the previous home) */
.darya-banner-band { padding-block: 26px 4px; }
.darya-banner { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--brand-dark); min-height: 220px; }
.darya-banner .swiper-slide { height: auto; }
.darya-banner-slide {
  display: flex; align-items: flex-end; min-height: 260px; padding: 28px;
  background-size: cover; background-position: center; color: #fff; position: relative; text-decoration: none;
}
.darya-banner-slide:hover { text-decoration: none; color: #fff; }
.darya-banner-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,28,61,.85), rgba(12,28,61,.15)); }
.darya-banner-copy { position: relative; z-index: 1; max-width: 640px; }
.darya-banner-title { display: block; font-weight: 800; font-size: clamp(1.15rem, 1rem + .9vw, 1.6rem); color: #fff; }
.darya-banner-lede { display: block; color: #DCE5F0; margin-top: 6px; font-size: .95rem; }
.darya-banner-dots { position: absolute; bottom: 12px; inset-inline: 0; z-index: 2; text-align: center; }
.darya-banner-dots .swiper-pagination-bullet { background: #fff; opacity: .5; }
.darya-banner-dots .swiper-pagination-bullet-active { background: var(--gold); opacity: 1; }
.darya-banner-slide.is-static { cursor: default; }

/* the cats sub-labels can be long user text */
.cat span { white-space: normal; }
.cat svg { flex: none; }

/* branches */
.branch .branch-fee { display: inline-block; margin-top: 8px; }

/* car cards inside a row on a wide screen: fill the row on desktop */
@media (min-width: 1200px) {
  .car-row.is-fill > * { flex: 1 1 0; min-width: 0; max-width: 340px; }
}

/* testimonials */
.reviews-grid { display: grid; gap: var(--gap); grid-template-columns: 2fr 1fr; align-items: start; }
.reviews-list { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.review-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.review-card blockquote { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.9; }
.review-card .who { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.review-card .avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--brand-tint); color: var(--brand);
  display: grid; place-items: center; font-weight: 700; flex: none; overflow: hidden;
}
.review-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-card .who b { display: block; font-size: .95rem; }
.review-card .who span { display: block; color: var(--muted); font-size: .82rem; }
.stars { display: inline-flex; gap: 2px; color: var(--gold); direction: ltr; }
.stars svg { width: 16px; height: 16px; }
.stars .off { color: #D5DBE6; }
.review-form { position: sticky; top: calc(var(--header-h) + 16px); }
.review-form .card { margin: 0; }
.rating-pick { display: inline-flex; flex-direction: row-reverse; gap: 4px; direction: ltr; }
.rating-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating-pick label { cursor: pointer; color: #D5DBE6; padding: 4px; min-width: 36px; min-height: 36px; display: grid; place-items: center; }
.rating-pick label svg { width: 26px; height: 26px; }
.rating-pick input:checked ~ label,
.rating-pick label:hover, .rating-pick label:hover ~ label { color: var(--gold); }
.rating-pick input:focus-visible + label { outline: 3px solid var(--brand-hover); border-radius: 6px; }
.reviews-empty { color: var(--muted); }
@media (max-width: 1080px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .review-form { position: static; }
}
@media (max-width: 780px) {
  .reviews-list { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- split login card -- */
.auth-page { padding-block: 24px 56px; }
.auth-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-lg); min-height: 560px;
}
.auth-form { padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.auth-form .auth-logo { height: 44px; width: auto; margin-bottom: 22px; }
.auth-form h1 { font-size: 1.6rem; margin-bottom: 4px; }
.auth-form .auth-lede { color: var(--muted); margin-bottom: 20px; }
.auth-form .field { margin-bottom: 14px; }
.auth-form .form-control, .auth-form input[type=text], .auth-form input[type=tel],
.auth-form input[type=email], .auth-form input[type=password] {
  width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  min-height: var(--tap); padding: 0 14px; font: inherit; background: #fff;
}
.auth-form .form-control:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-tint); }
.auth-form .form-label, .auth-form label { font-weight: 600; font-size: .9rem; display: block; margin-bottom: 6px; }
.auth-form .form-check-label { display: inline; font-weight: 500; }
.auth-form .btn-primary { width: 100%; }
.auth-form .btn-link { color: var(--brand); }
.auth-form .auth-alt { margin-top: 18px; text-align: center; font-size: .92rem; }
.auth-form .auth-alt a { font-weight: 600; }
.auth-form .otp-input { width: 100%; direction: ltr; }
.auth-form .alert { border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px; font-size: .93rem; border: 1px solid; }
.auth-form .alert-danger { background: var(--danger-tint); border-color: #E9BEBB; color: var(--danger); }
.auth-form .alert-success { background: var(--ok-tint); border-color: #B6DCC8; color: var(--ok); }
.auth-form .alert-warning, .auth-form .text-warning { background: var(--warn-tint); border-color: #EBD6A6; color: var(--warn) !important; }
.auth-form .form-text.text-warning { padding: 6px 10px; border-radius: 6px; display: inline-block; margin-top: 6px; }
.auth-form .auth-back { margin-top: 20px; text-align: center; }
.auth-form .auth-back a { color: var(--gold); font-weight: 600; }
.auth-form .is-static { background: var(--bg-alt); display: flex; align-items: center; direction: ltr; }

.auth-media { position: relative; isolation: isolate; min-height: 320px; background: var(--brand-dark); }
.auth-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(160deg, rgba(12,28,61,.55), rgba(27,62,124,.55) 55%, rgba(12,28,61,.9)),
    radial-gradient(70% 60% at 30% 20%, rgba(186,142,74,.18), transparent 70%);
  mix-blend-mode: multiply;
}
.auth-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(12,28,61,.85), transparent 60%);
}
.auth-media-copy { position: absolute; z-index: 2; inset-inline: 32px; bottom: 32px; color: #fff; }
.auth-media-copy h2 { color: #fff; font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); margin-bottom: 6px; }
.auth-media-copy p { color: #DCE5F0; margin: 0; font-size: .95rem; }
.auth-media .eyebrow-chip {
  display: inline-block; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35);
  color: #fff; border-radius: 999px; padding: 3px 12px; font-size: .78rem; margin-bottom: 12px;
}
@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; min-height: 0; }
  .auth-media { order: -1; min-height: 220px; }
  .auth-media-copy { inset-inline: 20px; bottom: 20px; }
}

/* Botble's login/register forms (rendered by the framework) inside the card */
.auth-form form .mb-3, .auth-form form .form-group { margin-bottom: 14px; }
.auth-form form .row > [class*="col-"] { padding-inline: 0; }
.auth-form form .row { margin-inline: 0; gap: 0 14px; }
.auth-form form .form-check-input { margin-inline-end: 6px; }
.auth-form form h1, .auth-form form h2, .auth-form form .heading-4 { display: none; }
.auth-form .custom-form-login .row, .auth-form .register-form .row { display: block; }

/* -------------------------------------------------------- rent-out form --- */
.rent-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--gap); margin-bottom: 20px; }
.rent-intro .card { margin: 0; }
.rent-intro ul { margin: 0; }
.rent-intro li { margin-bottom: 6px; }
.rent-form .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.rent-form .field input, .rent-form .field select { width: 100%; }
.rent-form .field .ltr-input { direction: ltr; text-align: start; }
.rent-form fieldset { border: 0; padding: 0; margin: 0 0 8px; }
.rent-form legend { font-weight: 700; font-size: 1.02rem; margin: 6px 0 12px; padding-top: 12px; border-top: 1px solid var(--line); width: 100%; }
.rent-form .file-box {
  border: 2px dashed var(--line-strong); border-radius: var(--radius); padding: 18px;
  background: var(--bg-alt); text-align: center;
}
.rent-form .file-box input[type=file] { width: 100%; }
.rent-form .file-box .file-hint { color: var(--muted); font-size: .85rem; margin: 8px 0 0; }
.rent-form .file-box .file-count { font-weight: 700; color: var(--brand); }
.rent-form .file-box.is-ok { border-color: var(--ok); }
.rent-form .file-box.is-bad { border-color: var(--danger); }
.rent-form .file-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; justify-content: center; }
.rent-form .file-previews img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.rent-form .btn-row { margin-top: 18px; }
/* r3 · one slot per photo (the wizard's .doc-slot cards) */
.rent-form .rent-photos-help { margin: -4px 0 12px; }
.rent-form .rent-slots { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rent-form .rent-slots-doc { grid-template-columns: minmax(220px, 420px); }
.rent-form .doc-slot { margin: 0; padding: 14px; }
.rent-form .doc-slot h3 { font-size: .98rem; }
.rent-form .doc-slot .doc-preview, .rent-form .doc-slot .doc-preview img { min-height: 130px; height: 130px; }
.rent-form .doc-slot .doc-server-error { margin: 0; }
.rent-form .doc-slot:has(.doc-server-error) { border-color: var(--danger); box-shadow: 0 0 0 2px var(--danger-tint); }
.rent-form .rent-photos-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.rent-form .rent-photos-foot .btn { display: inline-flex; align-items: center; gap: 6px; }
.rent-form .rent-submit-row { align-items: center; }
.rent-form [data-rent-submit][disabled] { opacity: .55; cursor: not-allowed; }
.rent-form .rent-submit-hint { margin: 8px 0 0; }
@media (max-width: 480px) {
  .rent-form .rent-slots, .rent-form .rent-slots-doc { grid-template-columns: 1fr; }
  .rent-form .rent-photos-foot .btn { width: 100%; justify-content: center; }
}
.rent-success { text-align: center; padding: 40px 20px; }
.rent-success .ico {
  width: 64px; height: 64px; border-radius: 50%; background: var(--ok-tint); color: var(--ok);
  display: grid; place-items: center; margin: 0 auto 16px;
}
.rent-success .ico svg { width: 32px; height: 32px; }
@media (max-width: 780px) {
  .rent-intro, .rent-form .grid-2 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- utilities -- */
.mt-0 { margin-top: 0 !important; }
.bdi { unicode-bidi: isolate; }

/* ------------------------------------------------- car-card containment --- */
/* Hard requirement from the client's developer: a card never overflows or
   clips at any width, in either direction. Long names wrap, long prices and
   cheque notes wrap, stat tiles wrap to a second row, rows scroll inside
   themselves and never widen the page. Applies to partials/darya/car-card. */
.car-row { max-width: 100%; min-width: 0; overscroll-behavior-x: contain; }
.car-row > * { min-width: 0; flex: 0 0 min(320px, 84vw); }
.car-grid > * { min-width: 0; }
.car-card { min-width: 0; max-width: 100%; }
.car-card .thumb { aspect-ratio: 16 / 10; overflow: hidden; }
.car-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.car-card .thumb .overlay { max-width: calc(100% - 24px); }
.car-card .thumb .overlay .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.car-card .body { min-width: 0; }
.car-card .body > * { min-width: 0; max-width: 100%; }
.car-card .car-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; min-width: 0; }
.car-card .car-card-head > div { min-width: 0; flex: 1 1 auto; }
.car-card .car-card-rating { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; color: var(--warn); white-space: nowrap; }
.car-card h3 { overflow-wrap: anywhere; word-break: break-word; line-height: 1.45; }
.car-card h3 a {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  padding-block: 0; margin-block: 0; min-height: 0; max-width: 100%;
}
.car-card .year { display: block; }
.car-card .stats { grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); }
.car-card .stat { min-width: 0; }
.car-card .stat .v { min-width: 0; }
.car-card .price-line { flex-wrap: wrap; overflow-wrap: anywhere; }
.car-card .price, .car-card .price-was, .car-card .badge-gold { overflow-wrap: anywhere; white-space: normal; }
.car-card .cheque-note { overflow-wrap: anywhere; word-break: break-word; margin: 0; }
.car-card .cheque-note span:last-child { min-width: 0; flex: 1 1 auto; }
.car-card .btn { white-space: normal; overflow-wrap: anywhere; margin-top: auto; }
@media (max-width: 420px) {
  .car-card .body { padding: 14px; }
  .car-card .price { font-size: 1.05rem; }
}

/* the skip link parks off-canvas without widening the body in either direction */
.skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); inset-inline-start: 0; }

/* categories: however many tags the admin picks, they share the row */
.cats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 780px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rating-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; text-transform: none; }

/* ---------------------------------------------- reference type scale --- */
/* darya-direction.css sizes every h1/h2/h3 on the site with !important for
   the old theme's pages. The reference surfaces use the reference's own
   scale, so it is restated here at higher specificity, also with !important.
   Negative tracking is never applied to Persian. */
.darya-ref h1, .darya-ref h2, .darya-ref h3, .darya-ref h4 { letter-spacing: 0 !important; line-height: 1.32 !important; color: var(--ink); }
.darya-ref h3, .darya-ref h4 { line-height: 1.45 !important; }
.darya-ref h1 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem) !important; }
.darya-ref h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem) !important; }
.darya-ref h3 { font-size: 1.08rem !important; }
.darya-ref .searchband-copy h1, .darya-ref .band h2, .darya-ref .perk b, .darya-ref .auth-media-copy h2 { color: #fff !important; }
.darya-ref .searchband-copy h1 { text-shadow: 0 1px 2px rgba(6,18,42,.6), 0 6px 26px rgba(6,18,42,.75); }
.darya-ref .searchpanel-title { font-size: 1.35rem !important; margin: 0 0 14px; }
.darya-ref .car-card h3 { font-size: 1.08rem !important; line-height: 1.45 !important; }
.darya-ref .prop h3, .darya-ref .branch h3, .darya-ref .card-head h3 { font-size: 1.02rem !important; }
.darya-ref .footer h3 { font-size: 1rem !important; color: #fff !important; }
.darya-ref .auth-form h1 { font-size: 1.6rem !important; }
.darya-ref .section-head p { margin: 2px 0 0; }
.darya-ref p { color: inherit; }
.darya-ref .section-head p, .darya-ref .prop p, .darya-ref .branch p.muted, .darya-ref p.muted, .darya-ref .cat span, .darya-ref .flow-step span, .darya-ref .review-card .who span { color: var(--muted); }
.darya-ref .cheque-note { color: var(--warn); }
.darya-ref .perk span { color: #D7DEEC; }

/* a closed drawer is out of the tab order and out of screenshots */
.drawer:not(.open) { visibility: hidden; transition: transform .24s cubic-bezier(.4,0,.2,1), visibility 0s linear .24s; }
.drawer.open { visibility: visible; transition: transform .24s cubic-bezier(.4,0,.2,1); }

/* the old theme underlines every input; the reference boxes them */
body input[type=text], body input[type=tel], body input[type=email], body input[type=number],
body input[type=password], body input[type=date], body input[type=search], body select, body textarea,
body .form-control, body .form-select, .darya-ref .datepicker, .darya-strip .datepicker {
  border: 1px solid var(--line-strong) !important; border-radius: var(--radius-sm) !important;
  background: #fff !important; padding: 11px 14px !important; min-height: var(--tap) !important; line-height: 1.6;
  box-shadow: none !important; font: inherit; color: var(--ink);
}
body textarea { padding: 10px 14px !important; min-height: 110px !important; }
body input:focus, body select:focus, body textarea:focus, body .form-control:focus {
  border-color: var(--brand) !important; outline: none; box-shadow: 0 0 0 3px var(--brand-tint) !important;
}
body input[type=checkbox], body input[type=radio] { min-height: 0 !important; padding: 0 !important; border-radius: 4px !important; width: auto; }
body input[type=checkbox] { border-radius: 4px !important; }
body input[type=radio] { border-radius: 50% !important; }
body input[type=range] { border: 0 !important; padding: 0 !important; min-height: 0 !important; background: transparent !important; }
body input[type=hidden] { display: none; }
body input[type=file] { padding: 8px !important; min-height: 0 !important; background: transparent !important; border: 0 !important; }
.darya-ref .dt > select { border-start-start-radius: 0 !important; border-end-start-radius: 0 !important; padding-inline: 8px !important; }
.darya-ref .dt > .jdate, .darya-ref .dt > input[type=date] { border-start-end-radius: 0 !important; border-end-end-radius: 0 !important; }
.darya-ref .is-static { background: var(--bg-alt) !important; }
.darya-ref label { text-transform: none; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   Layout integrity. Carento's style.css floats every `.section`
   (`.section{float:inline-start;width:100%}`), which collapses <main>, lets the
   footer ride up underneath the floated sections and overlaps them at every
   width. The reference sections are normal flow blocks. Cancel the float and
   contain <main> so nothing can escape it.
   -------------------------------------------------------------------------- */
main#main { display: flow-root; }
main#main .section, main#main .band, main#main .searchband { float: none !important; width: auto; }
html, body { overflow-x: clip; }

/* Cookie consent bar on the brand palette (Botble ships it black). */
.cookie-consent { background: var(--brand-dark) !important; color: #E4ECF3 !important; font-family: 'Vazirmatn', Tahoma, sans-serif; box-shadow: 0 -8px 24px rgba(12,28,61,.25); }
.cookie-consent__inner { max-width: var(--maxw); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 20px; }
.cookie-consent__message { color: #E4ECF3 !important; font-size: .92rem; line-height: 1.7; }
.cookie-consent__message a { color: var(--gold) !important; }
.cookie-consent__actions { display: flex; gap: 8px; align-items: center; }
/* r2 · while the bar shows, the page keeps its bottom clear of it (see darya-shell.js) */
body.has-cookie-bar { padding-bottom: var(--cookie-bar-h, 0px); }
body.has-cookie-bar .bottomnav { transform: translateY(0); }
.cookie-consent__agree, .cookie-consent__save-button, .cookie-consent__manage-button {
  background: var(--gold) !important; color: #241C0C !important; border: 0 !important; border-radius: var(--radius-sm) !important;
  font-weight: 700 !important; min-height: var(--tap); padding: 8px 18px !important; font-family: inherit !important; }
.cookie-consent__manage-button { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.35) !important; }
.cookie-consent .js-cookie-category + label, .cookie-consent label { color: #E4ECF3; }

/* RTL: directional arrows must point along the reading direction. The theme's
   pagination and slider chevrons are drawn for LTR; mirror them under RTL. */
html[dir="rtl"] .pagination-style .page-link svg,
html[dir="rtl"] .swiper-button-prev svg, html[dir="rtl"] .swiper-button-next svg,
html[dir="rtl"] .breadcrumb svg, html[dir="rtl"] .btn-back svg, html[dir="rtl"] .icon-arrow { transform: scaleX(-1); }

/* ==========================================================================
   Design-parity pass (client feedback r1, follow-up): the reference palette,
   type scale and component sizes everywhere — not only under `.darya-ref`.
   ========================================================================== */

/* --- type scale: darya-direction.css sizes every h1/h2/h3 for the old theme
   with !important (34–52px h1, 22–28px h3). The reference scale wins site-wide
   at higher specificity. Persian never gets negative tracking. --- */
body h1, body h2, body h3, body h4, body .heading-1, body .heading-2, body .heading-3 {
  letter-spacing: 0 !important; font-weight: 700 !important; line-height: 1.32 !important;
  font-family: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif !important; color: var(--ink);
}
body h3, body h4, body .heading-3 { line-height: 1.45 !important; }
body h1, body .heading-1 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem) !important; }
body h2, body .heading-2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem) !important; }
body h3, body .heading-3 { font-size: 1.08rem !important; }
body .car-card h3 { font-size: 1.1rem !important; line-height: 1.45 !important; }
body .prop h3, body .branch h3, body .card-head h3, body .filter-panel h3 { font-size: 1.02rem !important; }
body .footer h3, body .drawer-head strong { font-size: 1rem !important; }
body .searchpanel-title { font-size: 1.1rem !important; }
body .acct-head h1, body .bk h1 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem) !important; }
body .bk h2, body .acct-content h2 { font-size: 1.15rem !important; }
body .searchband-copy h1, body .band h2, body .perk b, body .auth-media-copy h2, body .banner h2 { color: #fff !important; }
body .footer h3 { color: #fff !important; }
@media (max-width: 780px) { body .searchband-copy h1 { font-size: 1.45rem !important; } }

/* --- buttons: the reference gold CTA is the readable gold (accent #7E5A1D)
   with a white label; darya.css painted it the light logo gold with dark text. --- */
.btn.btn-gold, .btn-gold, .btn.btn-deposit, a.btn-gold, button.btn-gold {
  background: var(--accent, #7E5A1D) !important; border-color: var(--accent, #7E5A1D) !important; color: #fff !important;
  box-shadow: none !important;
}
.btn.btn-gold:hover, .btn-gold:hover, .btn.btn-deposit:hover { background: #6A4C18 !important; border-color: #6A4C18 !important; color: #fff !important; }
.btn.btn-primary, .btn-primary { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; box-shadow: 0 2px 10px rgba(12,28,61,.22); }
.btn.btn-primary:hover, .btn-primary:hover { background: var(--brand-hover) !important; border-color: var(--brand-hover) !important; }
/* Carento's `.btn.btn-primary{width:fit-content}` beat the reference's .btn-block */
.btn.btn-block, .btn-block { width: 100% !important; }
@media (max-width: 900px) {
  .searchpanel .sp-submit { grid-column: 1 / -1; }
  .searchpanel .sp-submit .btn { width: 100% !important; }
}

/* --- footer: every link white, gold only on hover (the phone was gold) --- */
footer.darya-footer a[href^="tel"], footer.darya-footer a[href^="tel:"], footer.darya-footer .contact-phone a { color: #E4ECF3 !important; font-weight: inherit; }
footer.darya-footer a[href^="tel"]:hover { color: var(--gold) !important; }

/* --- cookie bar: compact, above the bottom tab bar on phones, accent CTA --- */
.cookie-consent__agree, .cookie-consent__save-button {
  background: var(--accent, #7E5A1D) !important; color: #fff !important;
}
.cookie-consent__inner { padding: 10px 20px; }
@media (max-width: 780px) {
  .cookie-consent { bottom: var(--bottomnav-h) !important; }
  .cookie-consent__inner { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 16px; }
  .cookie-consent__message { font-size: .85rem; line-height: 1.6; }
  .cookie-consent__actions { justify-content: flex-end; }
  .cookie-consent__agree { width: auto; min-height: 40px; padding: 6px 16px !important; }
}

/* --- the WhatsApp float: on the brand palette (it shipped WhatsApp-green) and
   clear of the bottom tab bar on phones ---

   r4 · W2 — it used to be placed with `inset-inline-start`, which is the right
   edge on an RTL page: in fa and ar the button sat in the same corner Goftino
   puts its own bubble in, and the two overlapped (client screenshot p-1). The
   offsets are physical now, so WhatsApp is on the LEFT of the viewport in every
   language, and the button is lifted above a reserved lane whenever a Goftino
   key is configured (`.has-chat-lane`, set in layouts/base.blade.php). Goftino
   places itself and we cannot style inside its iframe, so the clearance is
   made on our side and holds whichever corner it chooses. */
.whatsapp-float {
  background: var(--brand) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(12,28,61,.35) !important;
  animation: none !important; width: 52px !important; height: 52px !important;
  right: auto !important; inset-inline-start: auto; inset-inline-end: auto;
  left: 18px !important; bottom: 18px !important; z-index: 65 !important;
}
.whatsapp-float:hover { background: var(--brand-hover) !important; transform: none !important; box-shadow: 0 6px 18px rgba(12,28,61,.45) !important; }
.whatsapp-float svg { width: 26px !important; height: 26px !important; }
/* the height Goftino's launcher needs at the bottom of the viewport */
.whatsapp-float.has-chat-lane { --chat-lane: 84px; bottom: calc(18px + var(--chat-lane)) !important; }
@media (max-width: 780px) {
  .whatsapp-float { bottom: calc(var(--bottomnav-h) + 12px) !important; width: 46px !important; height: 46px !important; left: 14px !important; }
  .whatsapp-float.has-chat-lane { --chat-lane: 76px; bottom: calc(var(--bottomnav-h) + 12px + var(--chat-lane)) !important; }
}

/* --- links + focus rings on the palette everywhere --- */
:focus-visible { outline: 3px solid var(--brand-hover) !important; outline-offset: 2px; }

/* ------------------------------------------------ reference page shell --- */
/* views/page.blade.php, the blog, contact, FAQ and about pages: title + gold
   rule at the top, everything else in .card — reference views/page.ejs. */
.darya-page-shell, .darya-blog, .darya-post { padding-block: 34px 60px; }
.darya-page-shell > h1, .darya-blog > h1 { margin-bottom: 8px; }
.darya-page-shell .card + .card, .darya-page-shell .card + .darya-contact, .darya-contact .card + .card { margin-top: 18px; }
.page-card h1 { margin-bottom: 8px; }
.page-card .ck-content h2, .darya-faq .faq-group h2, .darya-about h2, .darya-branches h2, .contact-form-card h2 { font-size: 1.25rem !important; margin: 26px 0 10px; }
.page-card .ck-content > h2:first-child, .darya-faq .faq-group:first-of-type h2, .darya-about h2, .darya-branches h2, .contact-form-card h2 { margin-top: 0; }
.page-card .ck-content h3 { font-size: 1.08rem !important; margin: 20px 0 8px; }
.page-card .ck-content p, .page-card .ck-content li { color: var(--ink); line-height: 1.9; }
.page-card .ck-content ul, .page-card .ck-content ol { padding-inline-start: 1.4em; margin: 0 0 1em; }
.page-card .ck-content img { border-radius: var(--radius-sm); }
.page-updated { margin: 22px 0 0; color: var(--muted); }
.darya-ref .ck-content table { width: 100%; border-collapse: collapse; }
.darya-ref .ck-content th, .darya-ref .ck-content td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: start; }
/* the shell's .card is a normal card (the theme's .card is a bootstrap flex column) */
.darya-page-shell .card, .darya-blog .card, .darya-post .card { display: block; border-radius: var(--radius); }

/* contact */
.darya-contact .kv { grid-template-columns: max-content minmax(0, 1fr); gap: 10px 22px; margin: 0; }
.darya-contact .kv dt { color: var(--muted); font-size: .9rem; padding-top: 2px; }
.darya-contact .kv dd { font-weight: 600; overflow-wrap: anywhere; }
.contact-form-card .field { margin-bottom: 14px; display: block; }
.contact-form-card .field + .field { margin-top: 0; }
.contact-form-card .contact-label, .contact-form-card label { display: block; font-size: .875rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; text-transform: none; letter-spacing: 0; }
.contact-form-card .form-control { width: 100%; }
.contact-form-card textarea.form-control { min-height: 130px !important; }
.contact-form-card label.form-check { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 0; margin: 0 0 14px; justify-content: flex-start; font-weight: 600; font-size: .95rem; color: var(--ink); }
.contact-form-card .form-check-input { order: -1; float: none !important; position: static; width: 22px; height: 22px; accent-color: var(--brand); margin: 0 !important; flex: none; }
.contact-form-card .form-check-label { flex: 1; }
.contact-form-card .btn { min-width: 160px; }
.contact-form-card .contact-map { margin-top: 18px; border-radius: var(--radius-sm); overflow: hidden; }
.contact-form-card .alert, .contact-form-card .contact-message { border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px; border: 1px solid; }
.contact-form-card .alert-success, .contact-form-card .contact-success-message { background: var(--ok-tint); border-color: #B6DCC8; color: var(--ok); }
.contact-form-card .alert-danger, .contact-form-card .contact-error-message { background: var(--danger-tint); border-color: #E9BEBB; color: var(--danger); }
.contact-form-card .invalid-feedback, .contact-form-card .text-danger { color: var(--danger) !important; font-size: .85rem; font-weight: 600; }
.darya-branches .branch-list { margin-top: 4px; }
.darya-branches .branch-fee { display: inline-block; margin-top: 8px; }
@media (max-width: 600px) { .darya-contact .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .darya-contact .kv dd { margin-bottom: 10px; } }

/* FAQ */
.darya-faq-cats { margin: 0 0 18px; }
.darya-faq-cats .tag { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 14px; font-size: .84rem; color: var(--brand); background: var(--brand-tint); }
.darya-faq-cats .tag:hover { text-decoration: none; background: #E1E8F4; }
.darya-faq .faq-group { scroll-margin-top: calc(var(--header-h) + 16px); }
.darya-faq .faq-item + .faq-item { margin-top: 12px; }
.darya-faq .faq-q { font-size: 1rem !important; font-weight: 700 !important; margin: 0 0 2px; }
.darya-faq .faq-a { color: var(--ink); }
.darya-faq .faq-a p { margin: 0 0 6px; }
.darya-faq .faq-a p:last-child { margin-bottom: 0; }

/* about */
.darya-about-lede { font-size: 1.02rem; line-height: 1.95; margin: 0; }
.darya-about-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 20px; }
.darya-about-tile { margin: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-sunk); }
.darya-about-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.darya-about-tile figcaption { padding: 10px 12px; display: flex; gap: 8px; align-items: baseline; }
.darya-about-tile figcaption b { font-size: 1.3rem; color: var(--brand); }

/* blog */
.darya-blog-lede { margin: -4px 0 20px; }
.darya-blog { margin-top: 4px; }
.darya-blog .post-grid { margin-bottom: 8px; }
.post-card h3 a { padding: 0; margin: 0; min-height: 0; display: block; }
.post-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.post-card .body { gap: 8px; }
.post-card .post-meta, .post-article .post-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; }
.post-card .post-excerpt { margin: 0; font-size: .92rem; line-height: 1.8; }
.post-card .btn { margin-top: auto; align-self: flex-start; width: auto !important; }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-article h1 { margin: 10px 0 8px; }
.post-article .post-hero { margin: 16px 0 18px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-sunk); }
.post-article .post-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.post-article .post-lede { font-size: 1.05rem; font-weight: 600; color: var(--ink-soft); }
.post-article .post-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.post-article .post-content h2 { font-size: 1.25rem !important; margin: 24px 0 10px; }
.post-article .post-content h3 { font-size: 1.08rem !important; margin: 18px 0 8px; }
.post-article .post-tags { margin-top: 20px; }
.post-article .post-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.post-article .post-share .icon-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; border-radius: 50%; }
.post-article .post-share .icon-btn svg { width: 16px; height: 16px; }
.post-article .post-comment-wrapper { margin-top: 24px; }
.post-sidebar > * { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.post-sidebar .sidebar-title, .post-sidebar h4, .post-sidebar h5, .post-sidebar .widget-title { font-size: 1rem !important; margin: 0 0 12px; }
.post-sidebar ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.post-sidebar img { border-radius: var(--radius-sm); }
.post-sidebar .box-search-style-2, .post-sidebar form { display: flex; gap: 8px; }
.post-sidebar input[type=text], .post-sidebar input[type=search] { flex: 1; min-width: 0; }
.post-sidebar .btn-search-submit, .post-sidebar button { min-width: var(--tap); min-height: var(--tap); border: 0; background: var(--brand); color: #fff; border-radius: var(--radius-sm); }
.post-sidebar .card-post-small, .post-sidebar .card-news-small { display: flex; gap: 10px; align-items: flex-start; }
.post-sidebar .card-post-small img { width: 72px; height: 54px; object-fit: cover; flex: none; }
.post-sidebar .card-post-small a, .post-sidebar .card-news-small a { font-weight: 600; font-size: .9rem; }
.post-sidebar .list-icons svg, .post-sidebar .card-icon { display: none; }

/* ------------------------------------------------ component parity --- */
/* Measured against the reference at 1440 (tools-qa/parity.js): the old
   sheets (darya.css, darya-direction.css) restyle .btn, b/strong, .footer
   and the nav with !important. The reference values win here. */
.btn, .btn.btn-primary, .btn.btn-gold, .btn.btn-ghost, .btn.btn-danger, .btn.btn-block, a.btn, button.btn {
  font-size: 1rem !important; font-weight: 700 !important; line-height: 1.8 !important;
  padding: 11px 22px !important; border-radius: var(--radius-sm) !important; gap: 8px !important;
  min-height: var(--tap) !important; min-width: var(--tap); font-family: inherit !important;
  display: inline-flex !important; align-items: center; justify-content: center; text-decoration: none !important;
}
.btn.btn-sm { min-height: 38px !important; padding: 6px 14px !important; font-size: .875rem !important; }
.btn.btn-lg { min-height: 52px !important; padding: 14px 30px !important; font-size: 1.05rem !important; }
.btn.btn-primary, .btn.btn-gold { border: 1px solid transparent !important; }
.btn.btn-primary { box-shadow: 0 2px 10px rgba(12,28,61,.22) !important; }
.btn.btn-ghost, .btn.btn-gray, .btn.btn-secondary, .btn.btn-outline-primary { background: #fff !important; border: 1px solid var(--line-strong) !important; color: var(--ink) !important; box-shadow: none !important; }
.btn.btn-ghost:hover, .btn.btn-gray:hover, .btn.btn-secondary:hover { background: var(--bg-alt) !important; }
.btn.btn-danger { background: #fff !important; border: 1px solid #E4B8B5 !important; color: var(--danger) !important; }
.btn.btn-danger:hover { background: var(--danger-tint) !important; }
.btn:disabled, .btn[aria-disabled="true"], .btn.btn-primary:disabled, .btn.btn-gold:disabled {
  background: var(--bg-sunk) !important; color: #5C6E80 !important; border-color: var(--line-strong) !important;
  box-shadow: none !important; cursor: not-allowed; pointer-events: none;
}
@media (max-width: 780px), (pointer: coarse) { .btn.btn-sm { min-height: var(--tap) !important; } }
.btn svg { filter: none !important; }

body b, body strong { font-weight: 700 !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--ok) !important; }
.text-muted { color: var(--muted) !important; }

.header.darya-header { background: rgba(255,255,255,.94) !important; }
.mainnav a { color: var(--ink-soft) !important; }
.mainnav a:hover { color: var(--ink) !important; }
.mainnav a[aria-current="page"] { color: var(--brand) !important; background: var(--brand-tint); }
.icon-btn { color: var(--ink-soft) !important; }
.stat .ico { width: 28px; height: 28px; }

/* footer: darya-direction.css pads .footer 12/8 and recolours .footer-bottom */
footer.darya-footer { padding: 54px 0 30px !important; color: #C6D4E0 !important; }
footer.darya-footer .footer-bottom { background: transparent !important; color: #C6D4E0 !important; font-size: .85rem !important; padding: 20px 0 0 !important; margin-top: 26px !important; border-top: 1px solid #23334C !important; }
footer.darya-footer .footer-bottom span { color: #C6D4E0 !important; }
footer.darya-footer .footer-cols { color: #C6D4E0; }
@media (max-width: 780px) { footer.darya-footer { padding-bottom: calc(30px + var(--bottomnav-h)) !important; } }

/* account: `.acct .card { display:block }` was flattening the flex/grid cards */
.acct .card.acct-who { display: flex !important; }
.acct .card.bk-card { display: flex !important; }
.acct nav.card.acct-menu { display: grid !important; }
@media (max-width: 960px) { .acct nav.card.acct-menu { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; } }
/* the soft-edge mask was hiding the last column of a table that did not scroll */
.acct .table-scroll { mask-image: none !important; -webkit-mask-image: none !important; }
/* Carento paints every `.header a` with !important at (0,2,1) */
.header a.btn.btn-gold, [data-bs-theme="light"] .header a.btn-gold { color: #fff !important; }
.header a.btn.btn-gold:hover { color: #fff !important; }
main#main .card { box-shadow: var(--shadow-sm); color: var(--ink); }
.stats-grid .stat { padding: 10px 6px; }
/* the !important display on .btn above must not resurrect hidden buttons */
.btn[hidden], a.btn[hidden], button.btn[hidden], .btn.d-none { display: none !important; }
@media (max-width: 780px) { .desktop-only, a.btn.desktop-only, .btn.desktop-only { display: none !important; } }
@media (min-width: 781px) { .mobile-only, a.btn.mobile-only, .btn.mobile-only { display: none !important; } }
/* back links: the chevron is drawn pointing "back" for LTR and mirrored under RTL (rule above) */
.auth-back a { display: inline-flex; align-items: center; gap: 6px; }
.auth-back .icon-arrow { flex: none; }
body .results-title { font-size: 1.25rem !important; }

/* ------------------------------------ sign-in card: the method switch --- */
/* partials/darya/auth-login.blade.php — one card for OTP and password login;
   only the fields change, the header, tabs and width stay put. */
.auth-switch { justify-content: flex-start !important; }
.auth-split:has(.auth-switch) { align-items: stretch; }
.auth-switch .auth-welcome { margin: 0 0 4px; }
.auth-switch h1 { margin-bottom: 4px; }
.auth-switch .gold-rule { margin-bottom: 20px; }

.auth-tabs {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; margin: 0 0 20px; border-radius: 12px;
  background: var(--bg-sunk); border: 1px solid var(--line);
}
.auth-tabs::before {
  /* the sliding thumb — sits under the selected tab */
  content: ""; position: absolute; inset-block: 4px; inset-inline-start: 4px;
  width: calc(50% - 6px); border-radius: 9px; background: #fff;
  box-shadow: 0 1px 2px rgba(12,28,61,.10), 0 2px 8px rgba(12,28,61,.08);
  transition: transform .28s cubic-bezier(.3,.7,.2,1);
}
.auth-switch[data-mode="password"] .auth-tabs::before { transform: translateX(calc(100% + 4px)); }
[dir="rtl"] .auth-switch[data-mode="password"] .auth-tabs::before,
html[dir="rtl"] .auth-switch[data-mode="password"] .auth-tabs::before { transform: translateX(calc(-100% - 4px)); }
.auth-tab {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: calc(8px + var(--btn-optical, .1em)) 10px calc(8px - var(--btn-optical, .1em)); border-radius: 9px;
  color: var(--muted) !important; font-weight: 700; font-size: .93rem; text-decoration: none !important;
  transition: color .2s ease; white-space: nowrap;
}
.auth-tab:hover { color: var(--ink) !important; }
.auth-tab[aria-selected="true"] { color: var(--brand) !important; }
.auth-tab svg { position: relative; inset-block-start: -.05em; }
.auth-tab:focus-visible { outline: 3px solid var(--brand-hover); outline-offset: 1px; }

.auth-panels { position: relative; }
.auth-panels.is-animating { overflow: hidden; transition: height .26s cubic-bezier(.3,.7,.2,1); }
.auth-panel { transition: opacity .22s ease, transform .22s ease; }
.auth-panel.is-entering { opacity: 0; transform: translateY(6px); }
.auth-panel[hidden] { display: none !important; }
.auth-switch .auth-lede { margin: 0 0 16px !important; line-height: 1.7; }
.auth-switch .field { margin-bottom: 14px; }
.auth-switch .field-hint { margin: 6px 0 0; }
.auth-switch .auth-submit { margin-top: 6px; }

.auth-password { position: relative; }
.auth-password input { padding-inline-end: 48px !important; }
.auth-password-toggle {
  position: absolute; inset-block: 0; inset-inline-end: 2px; width: 44px;
  display: grid; place-items: center; background: none; border: 0; color: var(--muted); cursor: pointer; border-radius: 8px;
}
.auth-password-toggle:hover { color: var(--ink); }
.auth-password-toggle .is-hide { display: none; }
.auth-password-toggle[aria-pressed="true"] .is-show { display: none; }
.auth-password-toggle[aria-pressed="true"] .is-hide { display: block; }
.auth-password input[type="password"], .auth-password input[type="text"] { direction: ltr; }

.auth-row { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 2px 0 14px; font-size: .9rem; }
.auth-row-split { justify-content: space-between; }
.auth-row-center { justify-content: center; margin: 14px 0 0; }
.auth-check { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; font-weight: 500 !important; cursor: pointer; }
.auth-check input { width: 18px !important; height: 18px !important; accent-color: var(--brand); margin: 0; }
.auth-link, .auth-form .auth-alt a.auth-link { color: var(--brand) !important; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(12,28,61,.25); }
.auth-link:hover { border-bottom-color: currentColor; text-decoration: none; }
.auth-row .auth-link { line-height: 1.6; }

.auth-switch .alert { display: block; margin: 0 0 14px; line-height: 1.7; }
.auth-switch .alert ul { margin: 0; padding-inline-start: 1.1em; }
.auth-switch .alert li + li { margin-top: 2px; }
.auth-test-code { display: inline-block; padding: 4px 10px; border-radius: 6px; background: var(--warn-tint); color: var(--warn) !important; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: var(--muted); font-size: .85rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-social .login-options { margin: 0; padding: 0; border: 0; }
.auth-social .login-options-title { display: none; }
.auth-social ul { list-style: none; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 10px; width: 100%; max-width: none !important; }
.auth-social li { margin: 0 !important; width: 100% !important; max-width: none !important; }
.auth-social a {
  display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: var(--tap); padding: calc(10px + var(--btn-optical, .1em)) 16px calc(10px - var(--btn-optical, .1em)); border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink) !important; font-weight: 700; text-decoration: none !important;
  box-shadow: none !important;
}
.auth-social a:hover { background: var(--bg-alt); }
.auth-social img { width: 20px; height: 20px; flex: none; }
.auth-switch .auth-alt { margin-top: 16px; }
.auth-switch .auth-back { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) {
  .auth-tabs::before, .auth-panel, .auth-panels.is-animating { transition: none !important; }
}

/* ── r2 AUTH · sign-in / registration / forgot password / change number ──
   (partials/darya/auth-login, auth-field, auth-media; views/car-rentals/customers/register, passwords/forgot-otp) */

/* W1 · the photo is a framed picture, not a column that grows with the form */
.auth-split { align-items: start; min-height: 0; }
.auth-media { min-height: 0; background: transparent; padding: 18px; align-self: start; position: sticky; top: 24px; }
.auth-media-frame {
  position: relative; isolation: isolate; margin: 0; overflow: hidden;
  border-radius: calc(var(--radius-lg) - 6px); background: var(--brand-dark);
  aspect-ratio: 4 / 5; max-height: 640px; width: 100%;
  box-shadow: 0 18px 40px -22px rgba(12,28,61,.55);
}
.auth-media-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.auth-media::before, .auth-media::after { content: none; }
.auth-media-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(160deg, rgba(12,28,61,.35), rgba(27,62,124,.35) 55%, rgba(12,28,61,.8)),
    radial-gradient(70% 60% at 30% 20%, rgba(186,142,74,.16), transparent 70%);
  mix-blend-mode: multiply;
}
.auth-media-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(12,28,61,.88), transparent 55%);
}
.auth-media-frame .auth-media-copy { position: absolute; z-index: 2; inset-inline: 26px; bottom: 26px; color: #fff; }
.auth-media-frame .auth-media-copy h2 { color: #fff !important; font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); margin-bottom: 6px; line-height: 1.5; }
.auth-media-frame .auth-media-copy p { color: #DCE5F0; margin: 0; font-size: .92rem; line-height: 1.7; }
@media (max-width: 900px) {
  .auth-media { order: -1; padding: 12px 12px 0; position: static; }
  .auth-media-frame { aspect-ratio: 16 / 9; max-height: 240px; }
  .auth-media-frame .auth-media-copy { inset-inline: 18px; bottom: 16px; }
  .auth-media-frame .auth-media-copy p { display: none; }
}
@media (max-width: 480px) {
  .auth-media-frame { aspect-ratio: 16 / 10; max-height: 210px; }
}

/* W2 · one field anatomy: label · icon at the inline start · text padded past it */
.auth-form, .auth-form input, .auth-form button, .auth-form label { font-family: inherit; }
.auth-form .auth-field label { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--ink); }
.auth-form .auth-field label .req { color: var(--danger); font-weight: 700; }
.auth-form .auth-req-note { color: var(--muted); font-size: .85rem; }
.auth-input { position: relative; }
.auth-input-icon {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: 44px;
  display: flex; align-items: center; justify-content: center; color: var(--muted); pointer-events: none;
  background: none !important; border: 0 !important; padding: 0 !important;
}
.auth-input .form-control {
  padding-inline-start: 44px !important; padding-inline-end: 14px !important;
  font-size: 1rem; font-weight: 500; line-height: 1.4; height: auto; min-height: var(--tap);
  background: #fff !important; box-shadow: none;
}
.auth-input .form-control[dir="ltr"] { direction: ltr; text-align: start; }
html[dir="rtl"] .auth-input .form-control[dir="ltr"] { text-align: right; }
.auth-input .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.auth-input .form-control:focus ~ .auth-input-icon, .auth-input:focus-within .auth-input-icon { color: var(--brand); }
.auth-field.has-error .form-control { border-color: var(--danger); }
.auth-form .field-error { color: var(--danger); font-size: .85rem; margin: 6px 0 0; }
.auth-form .field-hint { color: var(--muted); font-size: .85rem; margin: 6px 0 0; line-height: 1.6; }
.auth-input .auth-password-toggle {
  position: absolute; inset-block: 0; inset-inline-end: 4px; width: 40px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0;
}
.auth-input .auth-password-toggle:hover { color: var(--ink); }
.auth-input .auth-password-toggle .is-hide { display: none; }
.auth-input .auth-password-toggle[aria-pressed="true"] .is-show { display: none; }
.auth-input .auth-password-toggle[aria-pressed="true"] .is-hide { display: block; }
.auth-field.is-password .form-control { padding-inline-end: 48px !important; }
.auth-form .auth-check { display: inline-flex; align-items: flex-start; gap: 8px; font-weight: 500; font-size: .92rem; cursor: pointer; line-height: 1.6; }
.auth-form .auth-check input { margin: .35em 0 0; accent-color: var(--brand); flex: none; width: 16px; height: 16px; }
.auth-form .auth-terms { margin: 4px 0 18px; }
.auth-form .auth-radio-group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.auth-form .auth-radio-group legend { font-weight: 600; font-size: .9rem; padding-inline: 4px; float: none; width: auto; }
.auth-register .auth-lede { margin-bottom: 14px !important; }
.auth-register .auth-register-form .btn-block { margin-top: 4px; }
.auth-form .auth-link-btn { background: none; border: 0; padding: 0; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; }

/* W6 · e-mail (and Google) as method tiles under the phone entries */
.auth-switch[data-mode="email"] .auth-tabs::before { opacity: 0; }
.auth-switch[data-mode="email"] .auth-tab { color: var(--muted) !important; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; color: var(--muted); font-size: .85rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.auth-method {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: var(--tap);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink) !important;
  font-weight: 600; font-size: .92rem; text-decoration: none !important; transition: border-color .15s, background .15s, box-shadow .15s;
}
.auth-method:hover { border-color: var(--brand); background: var(--brand-tint); }
.auth-method:focus-visible { outline: 3px solid var(--brand-hover); outline-offset: 1px; }
.auth-method.is-active { border-color: var(--brand); background: var(--brand-tint); box-shadow: inset 0 0 0 1px var(--brand); }
.auth-method-icon {
  flex: none; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-alt); color: var(--brand); border: 1px solid var(--line);
}
.auth-method.is-active .auth-method-icon, .auth-method:hover .auth-method-icon { background: #fff; }
.auth-method-label { flex: 1; min-width: 0; line-height: 1.4; }
.auth-email-back { margin-top: 6px; }
.auth-switch .auth-row-center { text-align: center; margin: 12px 0 0; }
.auth-switch .auth-row-split { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 14px; }
.auth-form .auth-social { display: none; }

/* W5 · forgot password steps */
.auth-steps { list-style: none; display: flex; gap: 6px; margin: 0 0 18px; padding: 0; counter-reset: none; }
.auth-steps li { flex: 1; display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); padding-bottom: 8px; border-bottom: 2px solid var(--line); }
.auth-steps li.is-done { color: var(--ink); border-color: var(--gold); }
.auth-steps li.is-current { color: var(--brand); font-weight: 600; }
.auth-step-num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; background: var(--bg-alt); color: var(--muted); border: 1px solid var(--line); }
.auth-steps li.is-done .auth-step-num { background: var(--gold); color: #fff; border-color: var(--gold); }
.auth-steps li.is-current .auth-step-num { background: var(--brand); color: #fff; border-color: var(--brand); }
.auth-resend { margin-top: 14px; }
.auth-resend .field-hint { margin: 0 0 8px; }
.auth-form .alert-warning { background: var(--warn-tint); border-color: #EBD6A6; color: var(--warn); }
@media (max-width: 480px) {
  .auth-steps li span:last-child { display: none; }
  .auth-steps li.is-current span:last-child { display: inline; }
}
/* an LTR field on an RTL page: its own inline-start is the LEFT, so the
   icon gutter (on the page's right) has to be padded physically */
html[dir="rtl"] .auth-input .form-control[dir="ltr"] { padding-right: 44px !important; padding-left: 14px !important; }
html[dir="rtl"] .auth-field.is-password .form-control[dir="ltr"] { padding-left: 48px !important; }
html[dir="rtl"] .auth-input .form-control[dir="ltr"]::placeholder { text-align: right; }

/* ==========================================================================
   Client feedback r4 · W8 — the rebuilt footer. Three bands: brand (logo,
   one line, the networks as logos, the address), the link and contact
   columns, and the trust band (eNamad seal + assurances) above the
   copyright. Logical properties throughout, so fa/ar and en read alike.
   Loaded after darya-ref.css, whose `.footer-cols` grid it re-proportions.
   ========================================================================== */
footer.darya-footer .footer-cols {
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 28px 36px;
  align-items: start;
}
footer.darya-footer .foot-brand { max-width: 44ch; }
footer.darya-footer .foot-tagline { margin: 0 0 14px; line-height: 1.9; }
footer.darya-footer .footer-address { margin: 14px 0 0; line-height: 1.9; }
footer.darya-footer .foot-col h3 { margin-bottom: 12px; }

/* the networks: a logo in a quiet round tile, never a word (W8) */
footer.darya-footer .foot-socials {
  list-style: none; margin: 0 0 4px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
footer.darya-footer .foot-socials li { margin: 0; }
footer.darya-footer .foot-socials a {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .07);
  border: 1px solid #23334C;
  color: #E4ECF3 !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
footer.darya-footer .foot-socials a:hover {
  background: var(--gold, #C9A24D); border-color: var(--gold, #C9A24D);
  color: #0C1C3D !important; transform: translateY(-1px);
}
footer.darya-footer .foot-socials svg { display: block; }

/* contact: an icon per line, and the address never breaks the column */
footer.darya-footer .foot-contact-list { gap: 4px; }
footer.darya-footer .foot-contact-list li { display: flex; align-items: center; gap: 8px; min-width: 0; }
footer.darya-footer .foot-contact-list li svg { flex: none; color: var(--gold, #C9A24D); }
footer.darya-footer .foot-email { overflow-wrap: anywhere; }
footer.darya-footer .foot-cta {
  margin-top: 14px;
  /* .btn-ghost is a white pill on a light page; on the navy footer it has to
     be an outline, or the label disappears into its own background */
  background: transparent !important;
  border: 1px solid #33465F !important;
  color: #E4ECF3 !important;
  font-weight: 600;
}
footer.darya-footer .foot-cta:hover {
  background: rgba(255, 255, 255, .06) !important;
  border-color: var(--gold, #C9A24D) !important;
  color: var(--gold, #C9A24D) !important;
}

/* the trust band: the seal beside what it certifies, not in a column alone */
footer.darya-footer .foot-trust {
  margin-top: 30px; padding-top: 24px; border-top: 1px solid #23334C;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
footer.darya-footer .foot-trust .trust-row { flex: none; margin: 0; }
footer.darya-footer .foot-trust .trust-slot {
  background: #fff; border-radius: 10px; padding: 6px;
  min-width: 96px; min-height: 96px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: .72rem; line-height: 1.6;
}
footer.darya-footer .foot-assurances {
  list-style: none; margin: 0; padding: 0; flex: 1 1 320px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 24px;
}
footer.darya-footer .foot-assurances li {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  font-size: .87rem; color: #C6D4E0 !important;
}
footer.darya-footer .foot-assurances svg { flex: none; color: var(--gold, #C9A24D); }

footer.darya-footer .footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px;
}

@media (max-width: 1100px) {
  footer.darya-footer .footer-cols { grid-template-columns: 1.4fr 1fr 1fr; }
  footer.darya-footer .foot-contact { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
  footer.darya-footer .footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  footer.darya-footer .foot-brand { grid-column: 1 / -1; max-width: none; }
  footer.darya-footer .foot-contact { grid-column: 1 / -1; }
  footer.darya-footer .foot-trust { gap: 18px; }
}
@media (max-width: 520px) {
  footer.darya-footer .footer-cols { grid-template-columns: 1fr; }
  footer.darya-footer .foot-trust { flex-direction: column; align-items: flex-start; }
  footer.darya-footer .foot-assurances { grid-template-columns: 1fr; }
  footer.darya-footer .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* r8 · L3/L4 — «ارسال مجدد کد» with its countdown (login, forgot password,
   change of number, withdrawal, cancellation) · L2 — «ارسال کد به ایمیل» */
.otp-resend { margin: 14px 0 0; }
.otp-resend-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0; font-size: .9rem; color: var(--muted); }
.otp-resend-wait b { color: var(--ink); font-weight: 700; }
.otp-resend-btn { background: none; border: 0; padding: 6px 0; min-height: 32px; color: var(--brand); font: inherit; font-weight: 700; cursor: pointer; }
.otp-resend-btn:disabled { color: var(--muted); cursor: not-allowed; opacity: .7; }
.otp-resend-btn:not(:disabled):hover { text-decoration: underline; }
.otp-alt { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .9rem; color: var(--muted); }
.otp-alt .otp-resend-btn { display: inline-flex; align-items: center; gap: 6px; }
/* r8 · L1 — «ورود با گوگل» drawn like the e-mail tile; Google's own button
   (which alone may start the sign-in) covers it, transparent, and takes the click */
.auth-method-google { position: relative; overflow: hidden; cursor: pointer; }
.auth-google-slot { position: absolute; inset: 0; opacity: .001; display: flex; align-items: stretch; justify-content: stretch; }
.auth-google-slot > div, .auth-google-slot iframe { width: 100% !important; height: 100% !important; margin: 0 !important; }
.auth-method-google:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }

/* ==========================================================================
   r12 · CONTENT — Appearance (§15) and Simple slides (§9)
   ========================================================================== */
/* the banner under the search box: each picture whole, never cropped */
.darya-banner { min-height: 0; }
.darya-banner-slide.has-img { display: block; min-height: 0; padding: 0; background: none; }
.darya-banner-slide.has-img picture, .darya-banner-slide.has-img img { display: block; width: 100%; height: auto; }
.darya-banner-slide.has-img .darya-banner-scrim { z-index: 1; }
.darya-banner-slide.has-img .darya-banner-copy { position: absolute; z-index: 2; inset-inline: 28px; bottom: 28px; }
.darya-banner-band.is-full { padding-inline: 0; }
.darya-banner-band.is-full .darya-banner { border-radius: 0; }
.darya-banner-band.is-full .darya-banner-slide.has-img .darya-banner-copy { inset-inline: max(28px, calc((100% - var(--maxw)) / 2 + 20px)); }
.darya-banner-extra { padding-block: 10px; }
.darya-banner-extra :last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .darya-banner-band { padding-block: 16px 0; }
  .darya-banner { border-radius: var(--radius); }
  .darya-banner-slide.has-img .darya-banner-copy { inset-inline: 16px; bottom: 26px; }
  .darya-banner-title { font-size: 1.05rem; }
  .darya-banner-lede { font-size: .85rem; }
}

/* the top header bar */
.darya-topbar { background: var(--brand); color: #fff; font-size: .82rem; }
.darya-topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; min-height: 34px; padding-block: 4px; }
.darya-topbar-items { display: inline-flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; margin-inline-start: auto; }
.darya-topbar a, .darya-topbar span { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.darya-topbar a:hover { text-decoration: underline; }
.darya-topbar svg { flex: none; }
@media (max-width: 640px) {
  .darya-topbar-hours, .darya-topbar-email { display: none !important; }
  .darya-topbar-row { justify-content: center; }
  .darya-topbar-items { margin-inline-start: 0; }
}

/* footer store badges */
.foot-apps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.foot-app { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; color: #fff !important; text-decoration: none; line-height: 1.15; }
.foot-app small { display: block; font-size: .68rem; opacity: .75; }
.foot-app:hover { background: rgba(255,255,255,.08); }
.foot-socials img { display: block; }

/* the homepage app band */
.darya-app-band { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; background: var(--brand); color: #fff; border-radius: var(--radius-lg); padding: 26px 30px; }
.darya-app-band h2 { color: #fff !important; margin: 0 0 6px; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); }
.darya-app-band p { color: #DCE5F0; margin: 0; max-width: 56ch; }
.darya-app-links { display: flex; gap: 10px; flex-wrap: wrap; }
.darya-app-band .btn-ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); }
@media (max-width: 640px) { .darya-app-band { padding: 20px; } .darya-app-links, .darya-app-links .btn { width: 100%; } }