/* ==========================================================================
   darya-fit.css — "content fits the card" pass (client feedback 2026-09-14)

   «the car cards and cards along the system … should change size when more
   details is coming … not overflow and fitting the things inside»

   Loaded after every other Darya sheet (partials/darya-styles.blade.php), so
   it settles the cascade the older sheets left behind instead of adding one
   more competing layer per page. Rules are written against the shared
   components (.card .car-card .choice .stat-box .btn …), never a single page.

   Principles
   - A card grows with its content: no fixed height / max-height / clipping on
     a card or its text. Rows stay tidy by stretching (grid/flex default) and
     pinning the call to action with margin-top:auto — never by cutting text.
   - Long words (car model codes, e-mail addresses, IBANs) break instead of
     widening the card; amounts keep their unit on the same line.
   - Icons follow their label (currentColor); anything on a dark, navy,
     dark-gold or photo surface is white.
   - Logical properties only, so fa (RTL) and en (LTR) share every rule.

   Sections
     1  icons follow the text colour
     2  numbers + icons on dark surfaces
     3  buttons — one component, optically centred
     4  card foundation
     5  car card
     6  home: features, categories, stages, perks, branches, reviews
     7  account: booking, documents, wallet, notifications, overview
     8  booking wizard: choices, live total, price list, car picker
     9  blog / services (Carento markup)
   (the sign-in method switch lives with the other auth rules in darya-shell.css)
   ========================================================================== */

/* ----------------------------------------------------------------- 1 icons */
/* Carento hard-codes `.btn.btn-primary svg{stroke:#101010}` (and the same for
   .btn-gray, .btn-book, pagination …), which beats an icon's own
   stroke="currentColor" attribute. That is why the search button's magnifier
   was invisible on navy. An icon that asks for currentColor gets it. */
svg[stroke="currentColor"] { stroke: currentColor !important; }
svg[fill="currentColor"] { fill: currentColor !important; }
.btn svg, .auth-tab svg, .drawer-nav a svg { flex: none; }
.btn svg:not([stroke]):not([fill]) { stroke: currentColor !important; }
.pagination .page-link svg { stroke: currentColor !important; }
/* Carento's own markup paints the shape itself (`<path stroke="black">`) */
.btn svg [stroke]:not([stroke="none"]), .pagination .page-link svg [stroke]:not([stroke="none"]) { stroke: currentColor !important; }
.btn svg :is([fill="black"], [fill="#000"], [fill="#000000"], [fill="#101010"]) { fill: currentColor !important; }
/* a "forward" arrow in a Carento CTA points the reading direction */
html[dir="rtl"] .btn svg[viewBox="0 0 25 24"] { transform: scaleX(-1); }

/* ----------------------------------------------------- 2 dark surfaces --- */
/* hero band on the navy photo */
.searchband .hero-stats b,
.darya-ref .searchband .hero-stats b { color: #fff !important; }
.searchband .hero-stats span { color: rgba(255,255,255,.82) !important; }

/* «از انتخاب تا عودت ودیعه» — the stage numbers were painted muted grey by
   `.darya-ref .flow-step span`, so each circle read differently against its
   navy fill. All six: white on navy with a soft ring. */
.flow-step .n,
.darya-ref .flow-step .n {
  color: #fff !important; background: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(12,28,61,.10), inset 0 0 0 1px rgba(255,255,255,.22);
  font-variant-numeric: tabular-nums; line-height: 1;
}
/* the same badge wherever a stage list sits on a dark band */
.band .flow-step .n, .section-dark .flow-step .n, [class*="bg-dark"] .flow-step .n {
  background: rgba(255,255,255,.12) !important;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55) !important;
}

/* «در طول مسیر تنها نیستید» — icon tiles on the navy photo band */
.band .perk .ico,
.darya-ref .band .perk .ico {
  background: rgba(255,255,255,.12) !important; color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.band .perk .ico svg { color: #fff; }

/* navy stat tile (wallet) and the footer */
.stat-box.is-primary .v, .stat-box.is-primary svg { color: #fff !important; }
footer.darya-footer svg, .footer svg { color: #fff; }
footer.darya-footer .footer-cols svg { opacity: .9; }

/* the current step chip in the wizard is navy: number and tick stay white */
.stepper .current .node, .stepper .current .num, .stepper .current svg { color: #fff !important; }
.stepper .done .num svg { color: #fff !important; }

/* filled buttons: label and icon white in every state */
.btn.btn-primary, .btn.btn-primary:hover, .btn.btn-primary:focus-visible, .btn.btn-primary:active,
.btn.btn-gold, .btn.btn-gold:hover, .btn.btn-gold:focus-visible, .btn.btn-gold:active {
  color: #fff !important;
}
.whatsapp-float svg { color: #fff; }

/* chips on car photos sit on a white pill: brand text there, white only on
   the dark scrim chips */
.car-card .thumb .offer-badge, .car-card .thumb .sample-badge { color: #fff !important; }

/* ------------------------------------------------------------- 3 buttons */
/* One button component. Vazirmatn's ascent is taller than its descent, so a
   label centred by its line box sits ~2px high inside a filled button; the
   block padding is shifted by .1em to centre the glyphs themselves. Height,
   radius, gap and weight come from one place for every variant. */
.btn, a.btn, button.btn, .drawer-nav a.highlight, .auth-tab, .auth-social a { --btn-optical: .1em; }
/* Persian/Arabic glyphs hang below the baseline, so they need about half the shift */
html[lang^="fa"] :is(.btn, .drawer-nav a.highlight, .auth-tab, .auth-social a),
html[lang^="ar"] :is(.btn, .drawer-nav a.highlight, .auth-tab, .auth-social a) { --btn-optical: .05em; }
.btn, a.btn, button.btn {
  --btn-py: 11px;
  --btn-px: 22px;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 8px !important; text-align: center !important;
  line-height: 1.8 !important;
  padding: calc(var(--btn-py) + var(--btn-optical)) var(--btn-px) calc(var(--btn-py) - var(--btn-optical)) !important;
  min-height: var(--tap) !important;
  white-space: normal; overflow-wrap: break-word;
  vertical-align: middle;
}
.btn.btn-sm { --btn-py: 6px; --btn-px: 14px; min-height: 38px !important; padding: calc(var(--btn-py) + var(--btn-optical)) var(--btn-px) calc(var(--btn-py) - var(--btn-optical)) !important; }
.btn.btn-lg { --btn-py: 14px; --btn-px: 30px; min-height: 52px !important; padding: calc(var(--btn-py) + var(--btn-optical)) var(--btn-px) calc(var(--btn-py) - var(--btn-optical)) !important; }
@media (max-width: 780px), (pointer: coarse) { .btn.btn-sm { min-height: var(--tap) !important; } }
/* an icon sits on the text's optical middle, not on the padded box */
.btn > svg { position: relative; inset-block-start: -.05em; }
/* short labels (header CTA) never wrap to two lines */
.header .btn, .darya-header .btn, .btn.btn-sm { white-space: nowrap; }
/* the header CTA «خودرو خود را اجاره دهید»: same component, gold variant */
.header a.btn.btn-gold, .darya-header a.btn.btn-gold, .d-nav-cta {
  font-weight: 700 !important; letter-spacing: 0 !important;
}

/* drawer entry «خودرو خود را اجاره دهید» — a button, not a list row: centred
   label, same height, radius and weight as the header CTA */
.drawer-nav a.highlight {
  justify-content: center !important; text-align: center !important;
  margin-block: 8px 4px; font-weight: 700;
  padding: calc(10px + var(--btn-optical)) 16px calc(10px - var(--btn-optical)) !important;
  background: var(--accent) !important; color: #fff !important; border: 1px solid var(--accent) !important;
}
.drawer-nav a.highlight:hover { background: #6A4C18 !important; border-color: #6A4C18 !important; color: #fff !important; }
.drawer-nav a.highlight svg { color: #fff; }

/* Carento's own CTA classes used on the old shortcode pages */
.btn.btn-primary2, .btn.btn-book, .btn.btn-gray, .btn.btn-gray2 {
  border-radius: var(--radius-sm) !important; font-weight: 700 !important;
}

/* ----------------------------------------------------- 4 card foundation */
.card, .car-card, .review-card, .branch, .prop, .perk, .cat, .choice, .stat-box,
.doc-card, .bk-card, .post-card, .card-news, .notif, .acct-grid a.card {
  height: auto; max-height: none; min-width: 0;
  overflow-wrap: break-word; word-break: normal;
}
/* headings and amounts never escape their card */
.card h1, .card h2, .card h3, .card h4,
.car-card h3, .review-card b, .branch h3, .prop h3, .choice-title, .bk-top strong, .doc-card h3 {
  overflow-wrap: anywhere; min-width: 0;
}
/* an amount keeps its unit on the same line ("۴,۶۵۹,۷۵۰ تومان"), the row wraps instead */
.price, .price-was, .bk-foot .price, .bk-live-v, .pricelist td:last-child, .choice-title > span:last-child {
  white-space: nowrap; overflow-wrap: normal;
}
@media (max-width: 360px) {
  .price, .bk-live-v { white-space: normal; overflow-wrap: anywhere; }
}
/* a row of cards: equal heights, content decides the height */
.car-grid, .car-row, .reviews-list, .branch-list, .props, .cats, .doc-grid, .acct-grid, .stat-grid, .perks, .flow { align-items: stretch; }

/* ------------------------------------------------------------ 5 car card */
.car-card { height: auto; }
.car-card .body { flex: 1 1 auto; }
/* the full model name is shown — it wraps instead of being clamped to two
   lines ("Lexus RX 350 F Sport Handling AWD 2024") */
.car-card h3 a,
.darya-ref .car-card h3 a {
  display: inline !important; -webkit-line-clamp: unset !important; -webkit-box-orient: initial !important;
  overflow: visible !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
}
.car-card h3 { line-height: 1.5 !important; }
/* keep the 44px tap target on the title without a clamp: pad the heading */
.car-card .car-card-head > div:first-child { padding-block: 2px; }
.car-card .car-card-rating { padding-top: 4px; }
/* stat tiles: a long value («اتوماتیک ۸ سرعته») wraps inside its tile */
.car-card .stats { display: flex !important; flex-wrap: wrap; gap: 6px 10px !important; }
.car-card .stat { flex: 1 1 auto; min-width: 0; align-items: center; }
.car-card .stat .v { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.35; }
/* chips on the photo wrap to a second row instead of truncating */
.car-card .thumb .overlay { max-width: none !important; }
.car-card .thumb .tag, .car-card .thumb .overlay .tag { white-space: nowrap; overflow: visible !important; text-overflow: clip !important; max-width: 100%; }
/* price row: struck price, price, «/ روز», offer pill — wraps as a group */
.car-card .price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.car-card .cheque-note { align-items: flex-start; line-height: 1.7; }
.car-card .cheque-note > span:first-child { flex: none; }
/* CTA pinned to the bottom so buttons line up across a row */
.car-card .car-card-cta, .car-card .body > .btn:last-child { margin-top: auto !important; }

/* ----------------------------------------------------------------- 6 home */
.props .prop, .branch-list .branch { display: flex; flex-direction: column; }
.branch .branch-fee { align-self: flex-start; margin-top: auto !important; padding-top: 0; white-space: normal; line-height: 1.6; }
.branch > p:last-of-type { margin-bottom: 12px !important; }
.cat { overflow: visible; }
.cat span { white-space: normal; overflow-wrap: anywhere; }
.flow-step b, .flow-step span { overflow-wrap: anywhere; }
.perk > div { min-width: 0; }

/* customer reviews */
.reviews-list { align-items: stretch; }
.review-card { height: 100%; }
.review-card blockquote,
.darya-ref .review-card blockquote {
  margin: 0 !important; padding: 0 !important; border: 0 !important; font-style: normal !important;
  background: none !important; quotes: none; color: var(--ink-soft); font-size: .95rem; line-height: 1.9;
}
.review-card blockquote::before, .review-card blockquote::after { content: none !important; }
.review-card blockquote p { margin: 0; }
.review-card .stars { align-self: flex-start; }
.review-card .who { display: flex !important; align-items: center; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); min-width: 0; }
.review-card .who > div { min-width: 0; }
/* the avatar is a span inside .who, and `.review-card .who span{display:block}`
   flattened it — the initial fell out of its circle */
.review-card .who .avatar,
.darya-ref .review-card .who .avatar {
  display: grid !important; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--brand) !important; color: #fff !important;
  font-weight: 700; font-size: 1.05rem; line-height: 1;
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.review-card .who b { display: block; line-height: 1.5; }
.review-card .who > div > span { display: block; color: var(--muted); font-size: .84rem; line-height: 1.5; }

/* -------------------------------------------------------------- 7 account */
/* booking cards: Bootstrap's `.card{flex-direction:column}` stacked the
   thumbnail over the text and centred both */
.acct .card.bk-card, .bk-card {
  flex-direction: row !important; align-items: flex-start !important; text-align: start;
}
.bk-card .bk-body { flex: 1 1 auto; min-width: 0; }
.bk-card .bk-top { align-items: flex-start; }
.bk-card .bk-top strong { flex: 1 1 auto; min-width: 0; line-height: 1.5; }
.bk-card .bk-top .state-pill { flex: none; }
.bk-card .bk-meta > span { overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .acct .card.bk-card, .bk-card { flex-direction: column !important; align-items: stretch !important; }
}
.acct-grid a.card { height: 100%; align-content: start; }
.acct .card.doc-card, .doc-card { display: flex !important; flex-direction: column; gap: 10px; }
/* upload / replace / delete line up across a row of document cards */
.doc-card > form:first-of-type { margin-top: auto; }
.doc-card .btn-row { margin-top: auto; }
.doc-card h3 > * { min-width: 0; }
.stat-box { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stat-box .v { line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.acct-notifs .notif-top > * { min-width: 0; overflow-wrap: anywhere; }
.acct .kv dt, .acct .kv dd, .bk .kv dt, .bk .kv dd { min-width: 0; overflow-wrap: anywhere; }
.acct .readonly-box > * { min-width: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- 8 wizard */
.choice { height: auto; }
.choice-title { align-items: baseline; row-gap: 2px; }
.choice-title > span:first-child { min-width: 0; flex: 1 1 auto; }
.choice-desc { overflow-wrap: anywhere; line-height: 1.8; }
/* «مبلغ قابل پرداخت با این انتخاب … تومان»: label and amount wrap as a pair */
.bk .bk-live { flex-wrap: wrap; row-gap: 4px; }
.bk .bk-live-k { flex: 1 1 auto; min-width: 0; }
.bk .bk-live-v { flex: none; margin-inline-start: auto; }
.pricelist td, .pricelist th { overflow-wrap: break-word; vertical-align: top; }
.pricelist td:last-child, .pricelist th:last-child { padding-inline-start: 12px; }
.bk .bk-car-grid { align-items: stretch; }
.bk .bk-btn-row .btn { white-space: normal; }
.bk .stepper .node { height: 100%; }

/* ------------------------------------------------- 9 blog / services cards */
.card-news { display: flex; flex-direction: column; }
.card-news .card-info { display: flex; flex-direction: column; flex: 1 1 auto; }
.card-news .card-title a { overflow-wrap: anywhere; }
.card-news .card-program { margin-top: auto; }
.card-news .truncate-3-custom { -webkit-line-clamp: unset !important; display: block !important; overflow: visible !important; max-height: none !important; }
.row > [class*="col"]:has(> .card-news) { display: flex; flex-direction: column; }
.row > [class*="col"] > .card-news { flex: 1 1 auto; }
.post-card .body { flex: 1 1 auto; }
.post-card h3 a { overflow-wrap: anywhere; }

/* two-column form rows (rent-out form, contact): `.field + .field` pushed the
   second column 16px down, so the pair never lined up */
.rent-form .grid-2 { row-gap: 16px !important; align-items: start; }
.rent-form .grid-2 > .field + .field { margin-top: 0; }

/* Carento's `.customer-content form button.btn{margin-inline-start:.5 gutter}`
   pushed every full-width account button 12px past its card edge; rows of
   buttons are spaced by .btn-row's gap instead */
.customer-content form button.btn, .acct form button.btn { margin-inline-start: 0 !important; }

/* grid/flex rows of cards: `.card + .card{margin-top:18px}` (meant for
   stacked cards) dropped every card after the first below the row */
:is(.doc-grid, .acct-grid, .stat-grid, .reviews-list, .branch-list, .car-grid, .bk-car-grid, .props, .cats) > .card + .card { margin-top: 0 !important; }

/* Client feedback · "all the texts inside the textfields should align right
   while in farsi or arabic". Phone numbers, e-mail addresses, codes and
   passwords are still typed left to right (dir="ltr" on the input), but they
   line up with the Persian form around them: flush right in RTL pages. The OTP
   boxes keep their own centred alignment. */
html[dir="rtl"] input[dir="ltr"]:not(.otp-input),
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="password"] {
    text-align: right;
}
html[dir="rtl"] input[dir="ltr"]::placeholder,
html[dir="rtl"] input[type="email"]::placeholder,
html[dir="rtl"] input[type="tel"]::placeholder,
html[dir="rtl"] input[type="password"]::placeholder {
    text-align: right;
}

/* Client feedback · the joined date | time boxes in Persian: "the radius should
   be from the other side". `.dt > select` carried `direction: ltr` so "10:00"
   would read left to right, but logical properties resolve against the
   element's *own* direction — its start corners and its -1px overlap landed
   on the left edge, the one away from the date box, in an RTL page. The time
   box keeps the page direction instead (a time is a number run, so ۱۰:۰۰ still
   reads correctly inside RTL), and the join mirrors exactly like English:
   square edges meet in the middle, rounded corners on the outside. Covers the
   home search, the cars strip, the car page and the booking wizard. */
html[dir="rtl"] .dt > select {
    direction: rtl;
}

/* The feature cards and the booking stages are editable from the dashboard,
   so their count is the operator's: the grid follows it (data-n, set by the
   template) instead of leaving empty columns for three cards. (CSS cannot use
   min() as a repeat() count, hence one rule per count.) Four or more cards and
   six or more stages keep the reference layout; tablet and phone keep theirs. */
@media (min-width: 1081px) {
    .props[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
    .props[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .props[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .flow[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
    .flow[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .flow[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .flow[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .flow[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .flow .flow-step:nth-child(6n)::after { display: none; }
}
@media (min-width: 781px) and (max-width: 1080px) {
    .props[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
    .flow[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
    .flow[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------------
   Round 2 · W26 / W33–W35 root cause. darya-ref.css ships its own dialog
   component under the class name `.modal` (`display:flex; width:min(760px,
   100%); max-height:88vh`), and that rule out-ranks Bootstrap's
   `.modal{display:none}` on source order. Every Bootstrap modal left in the
   markup — the account's avatar dialog, the wizard's eligibility dialogs —
   was therefore rendered: position fixed, z-index 1055, opacity 0 (from
   `.fade`), pointer-events on. An invisible 760px × 88vh sheet over the
   account menu on desktop, and over the whole screen on a phone: nothing
   under it could be tapped ("none of the options can be selected",
   "the profile freezes"). A Bootstrap modal is only visible once its JS adds
   `.show`; until then it must not exist for hit-testing. */
.modal.fade:not(.show) { display: none !important; pointer-events: none !important; }
.modal[aria-hidden="true"]:not(.show) { display: none !important; }