/* Display fixes found in the 2026-11-02 layout audit. Loaded last; each block says what it repairs. */

/* footer help buttons: ".site-footer a{display:inline-block}" (premium.css) beat ".f-btn{display:inline-flex}", so icon and text sat at the top of the 44px button */
.site-footer .f-btn{display:inline-flex;align-items:center;justify-content:center;line-height:1.2}

/* flight deal cards: the grid stretches every card to the tallest one, which left an empty band under the short ones; keep the price row on the bottom edge instead */
.sm-deal2 .b{flex:1 1 auto;display:flex;flex-direction:column}
.sm-deal2 .b .p{margin-top:auto}

/* home quick links strip: the bordered box is the .container itself, so it ran 16px wider than the cards above and below on desktop and edge to edge on tablets and phones; make it as wide as the content column */
nav.sm-other{width:calc(100% - 32px);max-width:1168px;margin-inline:auto}

/* trust seal: when the badge image can't load (blocked or wrong domain) the white tile is hidden by a small script in footer.php */
.site-footer .seal[hidden],.site-footer .f-seals[hidden]{display:none}

/* white text on the gold gradient was 2:1; the gold buttons take the dark brand ink like the footer one does */
.cp-btn,.cp-btn *{color:#0B2925!important}
.px-faqp-btn.pri,.px-faqp-btn.pri *{color:#0B2925!important}

/* light mode: gold "724" on the pale app page and the grey gate text were below 3:1 / 4.5:1 */
.pm-logo.big b{color:#8A6314}
.pm-gate p{color:#55657b}

/* --- dark mode repairs (found by a colour-contrast audit) --- */
/* "--c-surface" and "--c-border" were never defined in the theme tokens, so the hotel cards and phone service tiles fell back to white while their text turned light */
:root[data-theme="dark"]{--c-surface:var(--c-card);--c-border:var(--c-line)}
:root[data-theme="dark"] .sm-hp-card .go{background:#0A1F1C;box-shadow:inset 0 0 0 1px var(--c-primary)}
/* active menu item, bottom tab and sort chip used the brand green (#2A8572, 3.4:1 on the dark card); the light green token reads at 7:1 */
:root[data-theme="dark"] .main-nav li[class*="current-menu"]>a,:root[data-theme="dark"] .main-nav a[aria-current],:root[data-theme="dark"] .main-nav .current-menu-item>a,:root[data-theme="dark"] .bnav a.on,:root[data-theme="dark"] .bnav a.on span,:root[data-theme="dark"] .sm-sorts button.on span,
:root[data-theme="dark"] .px-about-page .ab-eyebrow,:root[data-theme="dark"] .px-about-page .ab-line,:root[data-theme="dark"] .px-about-page .ab-facts b{color:var(--c-primary-light)}
/* selected day chip: its gradient ran to the same light green as its (forced) light-green text; a deep green keeps 4.9:1 */
:root[data-theme="dark"] .sm-app .sm-day.act{background:linear-gradient(160deg,#0c4034,#125646);border-color:#2A8572}
:root[data-theme="dark"] .sm-app .sm-nights{background:#1f6b5b}
:root[data-theme="dark"] .cp-card.hot{background:#1f6b5b}
/* payment app: logo and primary button */
:root[data-theme="dark"] .pm-logo.big{color:#7FD3AC}:root[data-theme="dark"] .pm-logo.big b{color:#DEBE7D}
:root[data-theme="dark"] .sm-app[data-view=app] a.pm-btn:not(.ghost){color:#fff}

@media (prefers-color-scheme:dark){
/* --- dark mode repairs (found by a colour-contrast audit) --- */
/* "--c-surface" and "--c-border" were never defined in the theme tokens, so the hotel cards and phone service tiles fell back to white while their text turned light */
:root:not([data-theme="light"]){--c-surface:var(--c-card);--c-border:var(--c-line)}
:root:not([data-theme="light"]) .sm-hp-card .go{background:#0A1F1C;box-shadow:inset 0 0 0 1px var(--c-primary)}
/* active menu item, bottom tab and sort chip used the brand green (#2A8572, 3.4:1 on the dark card); the light green token reads at 7:1 */
:root:not([data-theme="light"]) .main-nav li[class*="current-menu"]>a,:root:not([data-theme="light"]) .main-nav a[aria-current],:root:not([data-theme="light"]) .main-nav .current-menu-item>a,:root:not([data-theme="light"]) .bnav a.on,:root:not([data-theme="light"]) .bnav a.on span,:root:not([data-theme="light"]) .sm-sorts button.on span,
:root:not([data-theme="light"]) .px-about-page .ab-eyebrow,:root:not([data-theme="light"]) .px-about-page .ab-line,:root:not([data-theme="light"]) .px-about-page .ab-facts b{color:var(--c-primary-light)}
/* selected day chip: its gradient ran to the same light green as its (forced) light-green text; a deep green keeps 4.9:1 */
:root:not([data-theme="light"]) .sm-app .sm-day.act{background:linear-gradient(160deg,#0c4034,#125646);border-color:#2A8572}
:root:not([data-theme="light"]) .sm-app .sm-nights{background:#1f6b5b}
:root:not([data-theme="light"]) .cp-card.hot{background:#1f6b5b}
/* payment app: logo and primary button */
:root:not([data-theme="light"]) .pm-logo.big{color:#7FD3AC}:root:not([data-theme="light"]) .pm-logo.big b{color:#DEBE7D}
:root:not([data-theme="light"]) .sm-app[data-view=app] a.pm-btn:not(.ghost){color:#fff}
}

/* mobile menu drawer on the home page: the transparent-header rule painted the links white, and the drawer itself is white in light mode, so every item but the current one vanished */
@media (max-width:1024px){
  .home .site-header:not(.is-scrolled) .main-nav>ul>li>a,
  .home .site-header:not(.is-scrolled) .main-nav>div>ul>li>a,
  .home .site-header:not(.is-scrolled) .main-nav>ul>li>a:hover{color:var(--c-text)}
  .home .site-header:not(.is-scrolled) .main-nav>ul>li>a:hover{background:var(--c-primary-soft)}
}

/* sign-in sheet: the absolutely placed "بازگشت" button covered the first words of the heading on phones; give the heading its own row */
.spn-auth-h:has(>.spn-back){padding-top:48px}

/* sign-in sheet in dark mode: the back button kept its light grey fill and dark text */
:root[data-theme="dark"] .spn-back{background:var(--c-cloud);color:var(--c-text)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .spn-back{background:var(--c-cloud);color:var(--c-text)}}

/* /flights/ with no search: popular fares under the form */
.sm-noquery-deals{margin-top:32px;padding-bottom:24px}

/* flight card hover accent: the results cards must not clip (the ticket notches stick out), so the 4px bar ran straight past the card's rounded corners and stuck out above and below the outline; keep it a short pill between the corners */
.sm-app[data-view="results"] .sm-fl2::before{inset-block:18px;inset-inline-start:0;width:4px;border-radius:4px}

/* trust seals: small equal white tiles in one tidy row on the start (right) side */
.site-footer .f-seals{gap:8px;padding:20px 0 6px;align-items:center;justify-content:flex-start}
.site-footer .f-seals .seal{width:64px;height:64px;min-width:0;padding:6px;border-radius:12px;background:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 16px -10px rgba(0,0,0,.55);transition:transform .2s,box-shadow .2s;overflow:hidden}
.site-footer .f-seals .seal a{display:grid;place-items:center;width:100%;height:100%}
.site-footer .f-seals .seal img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:auto;filter:none}
.site-footer .f-seals .seal:hover{transform:translateY(-2px);box-shadow:0 12px 22px -12px rgba(0,0,0,.6)}
@media (max-width:640px){.site-footer .f-seals{gap:8px}.site-footer .f-seals .seal{width:60px;height:60px}}

/* Home, phone width: all five service tabs fit without a sideways scroll (the «به‌زودی» badge sits under its label instead of being cut off at the edge); airline row keeps a margin from the screen edge */
@media (max-width:640px){
.h4-search .sm-search.v2 .sm-svc{gap:0}
.h4-search .sm-search.v2 .sm-svc a{padding:9px 7px;gap:5px;font-size:13.5px}
.h4-search .sm-search.v2 .sm-svc .soon{flex-direction:column;gap:1px;padding:4px 7px;font-size:13.5px}
.h4-search .sm-search.v2 .sm-svc .soon em{font-size:9.5px;padding:0 6px;line-height:1.5}
.h4-search .sm-search.v2 .sm-svc a.act::after{inset-inline:7px}
.home .px-mtrack{padding-inline:16px}
}


/* ===== home page: one vertical rhythm, tidy rails, working swap button ===== */
:root{--home-gap:72px}
@media (max-width:1024px){:root{--home-gap:56px}}
@media (max-width:640px){:root{--home-gap:44px}}
/* the hero cluster (benefits, quick links, photo cards) steps by 32px (24 on phones) */
.home .h4-feats{margin-top:32px}
.home nav.sm-other{margin-top:28px}
.home .h4-show{margin-top:32px}
@media (max-width:640px){.home .h4-feats{margin-top:24px}.home nav.sm-other{margin-top:24px}.home .h4-show{margin-top:24px}}
/* every later block starts var(--home-gap) below the previous one: sections had 56px padding, the partners strip 36px + 30px, deals a 24px header margin, destinations 12px, so the visible gaps were 76, 90, 120 and 64px */
.home main>.px-marquee{margin-top:var(--home-gap);padding:0}
.home main>.px-sec{padding-block:0;margin-top:var(--home-gap)}
.home main>.px-sec:last-child{margin-bottom:var(--home-gap)}
/* the deals rail keeps 12px of bottom padding for card shadows, so the block after it starts 12px closer */
.home main>.px-sec.px-cities{margin-top:calc(var(--home-gap) - 12px)}
/* title block to its content: 28px (20 on phones) in all three sections */
.home .sm-sec-h,.home .px-head,.home .px-head.right{margin:0 0 28px}
@media (max-width:640px){.home .sm-sec-h,.home .px-head,.home .px-head.right{margin-bottom:20px}}
.home .sm-htabs{margin-bottom:20px}

/* deals carousel arrows live in the section header now; a disabled one dims instead of vanishing so the header doesn't jump */
.sm-sec-h.has-rnav{position:relative;padding-inline-end:96px}
.sm-sec-h>div.px-rnav,.px-rnav{position:absolute;inset-inline-end:0;bottom:0;display:flex;flex-direction:row;gap:8px;direction:rtl}
.px-rnav .px-rbtn{position:static;width:38px;height:38px;box-shadow:none;transform:none}
.px-rnav .px-rbtn:hover{transform:none;border-color:var(--c-primary);background:var(--c-primary-soft,#E8F1EF)}
.px-rnav .px-rbtn[disabled]{opacity:.35;pointer-events:none}
@media (max-width:700px){.sm-sec-h.has-rnav{padding-inline-end:0}}

/* search box: the swap button (z-index 3) sat under the focused tile (z-index 4), so after choosing a city it could not be clicked until you clicked away; a focused tile with no list open stays below it, and on wide screens the list opens below the row so the button may stay on top even then */
.sm-app .sm-search.v2 .sm-tile:focus-within:not(.open){z-index:2}
@media (min-width:721px){.sm-app .sm-search.v2 .sm-swap{z-index:6}}
/* passengers popup: 575px of content in a 360px box cut the cabin chips in half on desktop */
@media (min-width:721px){.sm-app .sm-search.v2 .sm-pax-pop{max-height:none;overflow:visible}}

/* benefit blurbs were cut at two lines mid-sentence ("…در مرحلهٔ…"); three lines hold the longest one */
.h4-feats small{-webkit-line-clamp:3;line-clamp:3}
/* hotel cards: two address lines instead of one cut-off line, and the button always sits on the card's bottom edge */
.sm-hp-card small{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:2.9em;line-height:1.45}
.sm-hp-card .go{margin-top:auto}

/* ===== soft edges: hero and page bands dissolve into the page instead of ending on a hard line ===== */
/* an eased ramp (more steps than a plain two-colour gradient, so there is no visible "start" of the fade) from transparent to the page colour; the page itself paints var(--c-card) (white / #102B27), not var(--c-bg), and the colour follows light/dark */
:root{--fade-to-bg:linear-gradient(180deg,
  color-mix(in srgb,var(--c-card) 0%,transparent) 0%,
  color-mix(in srgb,var(--c-card) 3%,transparent) 14%,
  color-mix(in srgb,var(--c-card) 10%,transparent) 28%,
  color-mix(in srgb,var(--c-card) 24%,transparent) 42%,
  color-mix(in srgb,var(--c-card) 44%,transparent) 56%,
  color-mix(in srgb,var(--c-card) 66%,transparent) 70%,
  color-mix(in srgb,var(--c-card) 84%,transparent) 83%,
  color-mix(in srgb,var(--c-card) 95%,transparent) 93%,
  var(--c-card) 100%)}
/* home hero: the dark veil also eases out (it used to drop from .3 to the page colour in the last 28%), then the ramp covers the bottom 64% */
.h4-hero::after{inset:0 0 -1px;background:var(--fade-to-bg) bottom/100% 64% no-repeat,
  linear-gradient(180deg,rgba(0,0,0,.46) 0%,rgba(0,0,0,.3) 40%,rgba(0,0,0,.15) 66%,rgba(0,0,0,.05) 86%,rgba(0,0,0,0) 100%)}
/* page bands that carry a photo (hotels, tours, trains) */
.px-band.has-img::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:58%;z-index:0;pointer-events:none;background:var(--fade-to-bg)}
/* a flat colour band has nothing to dissolve, so it keeps its clean edge */


/* ===== photos keep their own colours: no green tint over any picture ===== */
/* every scrim that sat on a photo was brand green-black (rgba 8-11, 25-41, 24-37) at .6 to .9; they are now plain black, only as strong as white text needs, and the hero text gets a soft shadow instead of a heavier veil */
.h4-hero{background-color:#1b1b1b}
.h4-copy h1,.h4-copy .h4-word,.h4-sub,.h4-copy p{text-shadow:0 1px 14px rgba(0,0,0,.5),0 0 2px rgba(0,0,0,.35)}
.px-band.has-img{background:linear-gradient(rgba(0,0,0,calc(var(--band-dim,.45) * .72)),rgba(0,0,0,calc(var(--band-dim,.45) * .72))),var(--band-img) center/cover no-repeat}
@media (max-width:640px){.px-band.has-img{background-image:linear-gradient(rgba(0,0,0,calc(var(--band-dim,.45) * .72)),rgba(0,0,0,calc(var(--band-dim,.45) * .72))),var(--band-img-m)}}
.px-band.has-img h1,.px-band.has-img p{text-shadow:0 1px 12px rgba(0,0,0,.45)}
.h4-dest::after{background:linear-gradient(180deg,rgba(0,0,0,.04) 32%,rgba(0,0,0,.7) 100%)}
.px-city .ph::after{background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.66) 100%)}
.sm-deal2 .art::after{background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.52))}
.px-tour .art::after{background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.62))}
.px-hero-img::after{background:linear-gradient(160deg,rgba(0,0,0,.5),rgba(0,0,0,.25))}
.px-slide.has-img::before{background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.08))}
.px-hs[style*=background-image]::before{background:linear-gradient(270deg,rgba(0,0,0,.52),rgba(0,0,0,.08) 70%)}
.sm-tour-hero .ov{background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.66))}
/* dark mode dimmed every photo by 8% */
:root[data-theme="dark"] img:not([src*=logo]):not(.custom-logo){filter:none}

/* ===== popular hotels: carousel ===== */
.sm-hotels .px-head.right{align-items:flex-end}
.sm-hact{display:flex;align-items:center;gap:16px;flex:none}
.sm-hnav{display:flex;gap:8px;direction:rtl}
.sm-hnav .px-rbtn{position:static;width:40px;height:40px;border-radius:50%;border:1px solid var(--c-line);background:var(--c-card);color:var(--c-text);display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:none;transition:border-color .2s,background .2s,color .2s}
.sm-hnav .px-rbtn:hover{border-color:var(--c-primary);background:var(--c-primary-soft,#E8F1EF);color:var(--c-primary)}
.sm-hnav .px-rbtn svg{width:18px;height:18px}
.sm-hnav .px-rbtn.pv svg{transform:scaleX(-1)}
:root[data-theme="dark"] .sm-hnav .px-rbtn:hover{color:var(--c-primary-light)}
/* four cards on a wide row (six hotels per city, so the rotation has somewhere to go), three on a tablet, a peeking 1.4 on a phone; no scrollbar, swipe still works */
.sm-hp-row{scrollbar-width:none;scroll-behavior:auto;padding-bottom:10px}
.sm-hp-row::-webkit-scrollbar{display:none}
.sm-hp-card{flex:0 0 calc((100% - 3 * 14px) / 4);scroll-snap-align:start}
@media (max-width:1024px){.sm-hp-card{flex-basis:calc((100% - 2 * 14px) / 3)}}
@media (max-width:700px){.sm-hp-card{flex-basis:min(74%,280px)}.sm-hnav{display:none}}

/* ===== phone header: the login button was pushed 19-60px off the left edge (language chip + a squashed 14px theme toggle + 99px button) ===== */
@media (max-width:480px){
  .header-actions{gap:6px;min-width:0}
  .header-actions .theme-toggle{flex:none}
  .header-actions .sm-lang{flex:none;width:38px;padding:0;justify-content:center}
  .header-actions .sm-lang span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .header-actions .spn-loginbtn{flex:none;padding:8px 10px!important;font-size:12px!important}
}
@media (max-width:480px){.brand img.logo{width:118px;height:auto;max-width:none}}
@media (max-width:360px){.header-actions .theme-toggle{display:none}}
@media (max-width:340px){.brand img.logo{width:100px}}

/* ===== site-wide polish: motion, touch targets, layout stability ===== */
/* people who ask their system for less motion get none: every animation and transition collapses, the partner strip stops, progress spinners and skeletons keep a calm loop */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .sm-spin,.px-spin,.sm-skel{animation-duration:1.2s!important;animation-iteration-count:infinite!important}
  .px-mtrack{animation:none!important;transform:none!important}
}
/* touch: small text links (breadcrumb, blog category and "read more", footer lists, "view all") were 22 to 29px tall; their tappable area grows to about 44px without moving anything */
@media (max-width:1024px),(pointer:coarse){
  .px-crumbs a,a.cat,a.more,.px-head .all,.site-footer .f-col a,.site-footer .f-contact a,a.ab-line,.blog-tags a{position:relative}
  .px-crumbs a::after,a.cat::after,a.more::after,.px-head .all::after,.site-footer .f-col a::after,.site-footer .f-contact a::after,a.ab-line::after,.blog-tags a::after{content:"";position:absolute;inset:-10px -8px}
}
/* flight results on a phone: the days strip arrives after the first paint and pushed the list down by ~50px */
@media (max-width:700px){.sm-app[data-view="results"] #smdays{min-height:93px}}

/* checkout: the reservation wait notice under the submit button */
.sm-bookwait{display:flex;align-items:center;gap:12px;margin-top:14px;line-height:1.9}
.sm-bookwait .sm-spin{flex:none;width:22px;height:22px;border-width:2.5px}