/* Shared screenshot-inspired presentation. Keep all state and routing in existing scripts. */
/* Platform-wide tokens mirror index-platform, including the app and partner shells. */
:root{
 --rihla-font:'Cairo',system-ui,sans-serif;
 --rk-f:var(--rihla-font);--rk-f-head:var(--rihla-font);
 --f:var(--rihla-font);--f-h:var(--rihla-font);--head:var(--rihla-font);--body:var(--rihla-font);
 --ink:#0b214b;--ink-2:#35404f;--muted:#64738a;--card:#fff;
 --b-600:#004ddd;--b-700:#1045a8;--b-50:#f3f7ff;--b-100:#eaf2ff;
 --pale:#f3f7ff;--navy:#071e45;--rk-r:10px;--rk-r-xl:20px;
 --sh:0 8px 28px #12366d0a;--shadow:0 8px 28px #12366d0a;
 --rihla-panorama:linear-gradient(90deg,#071e4566,#071e45cc 60%,#071e4580),url('/assets/og/platform-hero-fallback.webp');
}
body{font-family:var(--rihla-font)}
:is(h1,h2,h3,h4,button,input,select,textarea){font-family:var(--rihla-font)}
:root{--nile-900:#071e45;--nile-800:#123c70;--lapis-600:#0560f9;--lapis-100:#eaf2ff;--sand-50:#f7faff;--rk-brand-600:#004ddd;--rk-line:#e7edf5;--rk-r-lg:16px;--rk-sh-2:0 8px 28px #12366d0a;--blue:#0560f9;--b:#0560f9;--bg:#f7faff;--line:#e7edf5}
body{background:#f7faff;color:#0b214b}
:where(button,a,input,select,textarea):focus-visible{outline:3px solid #58a0ff;outline-offset:3px}
:where(.rk-btn--primary,.button,.btn,.sbar__go){background:#0560f9;color:#fff;border-radius:10px;box-shadow:0 4px 12px #0560f91a}
:where(.rk-card,.cs-card,.cs-kpi,.listing,.provider-strip,.plan){border:1px solid #e7edf5;box-shadow:0 5px 22px #0b214b06}
:where(.rk-nav,.top){box-shadow:0 2px 15px #0b214b05}
:where(.rk-nav__link,.top nav a){font-weight:600}
:where(.rk-input,input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){accent-color:#0560f9}
/* Landing: central typography and search over a continuous photographic panorama. */
[data-design-page=index-platform] .hero{background-color:#082650;background-image:linear-gradient(90deg,#071e4530,#071e45aa 48%,#071e4530),url('/assets/og/platform-hero-fallback.webp');background-size:cover;background-position:center}
[data-design-page=index-platform] .hero-collage::after{background:linear-gradient(90deg,#071e4518,#071e45a8 48%,#071e4518)}
[data-design-page=index-platform] .platform-services{background:linear-gradient(#eef5ff,#f7faff);padding:18px 0 8px}
[data-design-page=index-platform] .platform-services__grid>a{min-height:174px;border-radius:15px;box-shadow:0 8px 25px #12366d08}
[data-design-page=index-platform] .platform-services__grid>a::before{background-position:center;background-size:cover}
[data-design-page=index-platform] .platform-services__grid>a b{font-size:14px}
[data-design-page=index-platform] .platform-services__grid>a small{font-size:11px}
[data-design-page=index-platform] .platform-benefits{padding:22px 0 28px;background:#f7faff}
[data-design-page=index-platform] .platform-benefits h2{text-align:center;font-size:30px;margin-bottom:5px}
.reference-benefits-sub{text-align:center;color:#64738a;margin-bottom:22px;font-size:15px}
[data-design-page=index-platform] .platform-benefits__grid>div{padding:17px 15px;background:#ffffffb8}
[data-design-page=index-platform] .platform-benefits__grid i{font-size:29px;background:transparent;width:42px;height:42px}
[data-design-page=index-platform] .b2b{background:linear-gradient(110deg,#eaf4ff,#fff 65%)}
[data-design-page=index-platform] .gsearch__box{border:1px solid #fff;border-radius:17px;padding:10px}
[data-design-page=index-platform] .platform-search-tabs button{padding:9px 16px}
[data-design-page=index-platform] .platform-proof__stats b{color:#ffcf7b}
/* Marketplace: quiet white surfaces, compact hotel rows and prominent photography. */
[data-design-page=web-experience] .top{background:#fff;border-bottom:1px solid #e7edf5}
[data-design-page=web-experience] .searchbar{border-radius:13px;box-shadow:0 8px 24px #0b214b08}
[data-design-page=web-experience] .filters{box-shadow:none;border-radius:14px;background:#fff}
[data-design-page=web-experience] .listing{border-radius:14px;overflow:hidden}
[data-design-page=web-experience] .listing .photo{border-radius:11px}
[data-design-page=web-experience] .hotel-detail-tabs{box-shadow:none;border-radius:9px}
[data-design-page=web-experience] .hotel-room{box-shadow:none;border-radius:10px}
/* Plan colors from the reference, preserving actual prices and registration routes. */
[data-design-page=pricing] .plan{overflow:visible;background:#fff;padding:0 20px 20px}
[data-design-page=pricing] .plan h2{margin:0 -20px;padding:20px 20px 12px;border-radius:14px 14px 0 0;background:#0aa571;color:#fff}
[data-design-page=pricing] .plan:nth-child(2) h2{background:#0560f9}
[data-design-page=pricing] .plan:nth-child(3) h2{background:#8045de}
[data-design-page=pricing] .plan:nth-child(4) h2{background:#071e45}
[data-design-page=pricing] .plan .sub{margin-top:16px}
[data-design-page=pricing] .plan.enterprise{color:#0b214b}
[data-design-page=pricing] .plan.enterprise :is(.sub,.price small){color:#687792}
[data-design-page=pricing] .plan.enterprise ul{border-color:#e7edf5}
[data-design-page=pricing] .plan:nth-child(1) .btn{background:#0aa571}
[data-design-page=pricing] .plan:nth-child(3) .btn{background:#8045de}
[data-design-page=pricing] .plan:nth-child(4) .btn{background:#071e45}
/* Partner console and legacy account pages share the same card treatment. */
[data-design-page=console] .cs-side{background:linear-gradient(180deg,#081f3f,#06172f);color:#fff;border-inline-end:1px solid #102c50}
[data-design-page=console] .cs-logo small{color:#dce8f7}
[data-design-page=console] .cs-nav a{color:rgba(255,255,255,.86);border-radius:8px}
[data-design-page=console] .cs-nav a:hover{background:rgba(255,255,255,.09);color:#fff}
[data-design-page=console] .cs-nav a.is-on{background:#0560f9;color:#fff}
[data-design-page=console] .cs-org{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}
[data-design-page=console] .cs-org__badge.grey{color:#dce8f7;background:rgba(255,255,255,.12)}
[data-design-page=console] .cs-card{border-radius:13px}
[data-design-page=console] .cs-kpi{border-radius:11px}
@media(min-width:1101px){
 [data-design-page=index-platform] .rk-nav{background:linear-gradient(#071e455c,#071e4510);backdrop-filter:blur(3px)}
 [data-design-page=index-platform] .hero{min-height:445px}
 [data-design-page=index-platform] .hero__in{padding:100px 0 76px;text-align:center}
 [data-design-page=index-platform] .hero__in>div{max-width:870px;margin:0 auto;transform:none}
 [data-design-page=index-platform] .hero h1{font-size:clamp(38px,3.4vw,52px);line-height:1.28;max-width:none;margin-bottom:10px}
 [data-design-page=index-platform] .hero__p{max-width:760px;margin:0 auto 16px;font-size:18px;line-height:1.6}
 [data-design-page=index-platform] .gsearch{margin:0 auto;max-width:850px;text-align:start}
 [data-design-page=index-platform] .platform-search-tabs{margin-inline:auto}
 [data-design-page=index-platform] .platform-proof{margin-top:-65px;padding-bottom:10px}
 [data-design-page=index-platform] .platform-proof__stats{background:transparent;backdrop-filter:none;transform:none}
 [data-design-page=index-platform] .platform-services__grid{gap:12px}
}
@media(max-width:1100px){
 [data-design-page=index-platform] .hero__in{grid-template-columns:1fr;text-align:center}
 [data-design-page=index-platform] .hero__in>div{min-width:0}
 [data-design-page=index-platform] .hero__aside{margin:20px auto 0;width:min(100%,440px)}
 [data-design-page=index-platform] .hero__p{margin-inline:auto}
 [data-design-page=index-platform] .gsearch{margin-inline:auto}
 [data-design-page=index-platform] .platform-services__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
 [data-design-page=index-platform] .platform-services__grid>a{padding:18px;background:#fff;display:grid;gap:6px}
}
@media(max-width:600px){
 [data-design-page=index-platform] .platform-services__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 [data-design-page=index-platform] .platform-services__grid>a{min-height:120px}
 [data-design-page=index-platform] .platform-benefits h2{font-size:25px}
 [data-design-page=index-platform] .platform-benefits__grid{display:grid;grid-template-columns:1fr;gap:10px}
 [data-design-page=index-platform] .gsearch__box{flex-wrap:wrap}
 [data-design-page=index-platform] .gsearch input[type=search]{flex-basis:70%}
 [data-design-page=index-platform] .platform-search-field{flex:1;min-width:100px}
 [data-design-page=index-platform] #qbtn{width:100%}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Use the bundled travel panorama consistently instead of unrelated directory photos. */
[data-design-page=index-platform] .hero-collage{display:none}
@media(min-width:1101px){
 [data-design-page=index-platform] .rk-wrap{max-width:1480px;width:calc(100% - 56px)}
 [data-design-page=index-platform] .rk-nav__link{font-size:12px;white-space:nowrap;padding-inline:9px}
 [data-design-page=index-platform] .platform-services__grid>a::before{background-image:url('/assets/og/platform-hero-fallback.webp')!important;background-size:auto 100%;background-position:90% center}
 [data-design-page=index-platform] .platform-services__grid>a:nth-child(2)::before{background-position:30% center}
 [data-design-page=index-platform] .platform-services__grid>a:nth-child(3)::before{background-image:url('/assets/og/car-rental-hero.webp')!important;background-size:cover}
 [data-design-page=index-platform] .platform-services__grid>a:nth-child(4)::before{background-position:0 center}
 [data-design-page=index-platform] .platform-services__grid>a:nth-child(5)::before{background-position:55% center}
 [data-design-page=index-platform] .platform-services__grid>a:nth-child(6)::before{background-position:75% center}
 [data-design-page=index-platform] .platform-services__grid>a:nth-child(7)::before{background-position:100% center}
 [data-design-page=index-platform] .platform-services__grid>a{padding-bottom:12px;padding-top:125px;justify-content:flex-start}
 [data-design-page=index-platform] .platform-services__grid>a::before,[data-design-page=index-platform] .platform-services__grid>a::after{bottom:auto;height:112px}
 [data-design-page=index-platform] .platform-services__grid>a i{top:94px}
}
@media(min-width:1101px){
 [data-design-page=index-platform] .platform-services__grid>a .rk-card__photo{display:none}
 [data-design-page=index-platform] .platform-services__grid>a b{margin-top:0;line-height:1.5}
}

/* Shared surfaces, preserving each page's grid and interactive state classes. */
body[data-design-page]:not([data-design-page=index-platform]) :is(.rk-card,.panel,.kcard,.ccard,.pcard,.gcard,.qcard,.c,.q,.acct,.cs-card,.cs-kpi){
 border-radius:16px;border-color:#e7edf5;box-shadow:0 8px 28px #12366d0a;
}
body[data-design-page] :is(.rk-input,.rk-select,.rk-textarea){border-radius:10px;border-color:#e7edf5;background:#fff}
body[data-design-page] :is(.rk-btn--primary,.cs-btn--p,.btn--primary,.b--go,.sbar__go){background:#0560f9;color:#fff;border-radius:10px;box-shadow:0 4px 12px #0560f91a}
body[data-design-page] :is(.rk-btn--outline,.cs-btn--g,.btn--ghost){background:#fff;color:#0560f9;border-color:#c6d8f6;box-shadow:none}
body[data-design-page] :is(.rk-btn--primary,.cs-btn--p,.btn--primary,.b--go,.sbar__go):hover{background:#004ddd}
body[data-design-page] :is(.rk-btn--outline,.cs-btn--g,.btn--ghost):hover{background:#eaf2ff}
body[data-design-page] :is(.rk-btn,.cs-btn,.btn,.button):disabled{opacity:.55;box-shadow:none}
body[data-design-page] :is(.rk-shead h1,.rk-shead h2,.sechead h2){color:#0b214b;font-weight:800}
body[data-design-page] :is(.rk-eyebrow,.eyebrow){font-weight:700}

/* Public headers use the same navy masthead as the platform reference. */
body[data-design-page]:not([data-design-page=index-platform]):not([data-design-page=dashboard]) .rk-nav,
[data-design-page=index] .nav,.seo-body .seo-nav{
 background:#071e45;color:#fff;border-bottom:1px solid #ffffff1f;box-shadow:0 2px 15px #0b214b12;
}
body[data-design-page]:not([data-design-page=index-platform]) .rk-nav__link{color:#dce8fa}
body[data-design-page]:not([data-design-page=index-platform]) .rk-nav__link:hover{background:#ffffff14;color:#fff}
body[data-design-page]:not([data-design-page=index-platform]) .rk-nav .rk-logo__ar{color:#fff}
body[data-design-page]:not([data-design-page=index-platform]) .rk-nav .rk-logo__en{color:#c6d8f6}
:is([data-design-page=web-experience],[data-design-page=pricing]) .top{background:#071e45;color:#dce8fa;border-bottom-color:#ffffff1f}
:is([data-design-page=web-experience],[data-design-page=pricing]) .top :is(.brand span,.logo){color:#fff}
:is([data-design-page=web-experience],[data-design-page=pricing]) .top :is(.brand small,.logo small){color:#c6d8f6}
[data-design-page=web-experience] .top nav{color:#dce8fa}

/* Photographic banners inherit the reference's navy overlay and gold accents. */
:is([data-design-page=market] .mhero,[data-design-page=destination] .dhero,[data-design-page=program] .phero,[data-design-page=traveler] .hero){
 background-image:var(--rihla-panorama);background-size:cover;background-position:center;color:#fff;
}
:is([data-design-page=market] .mhero,[data-design-page=destination] .dhero,[data-design-page=program] .phero) h1{font-weight:900}
[data-design-page=agency] .ahead__logo{border-radius:20px;background:#ffffff14}
[data-design-page=agency] .subnav{background:#fff;border-color:#e7edf5}
[data-design-page=traveler] .hero__bg{opacity:.12}
[data-design-page=traveler] .top{background:#071e45}
[data-design-page=traveler] .tab.is-on{color:#0560f9}
[data-design-page=index] .hero__scrim{background:linear-gradient(90deg,#071e4550,#071e45b8 60%,#071e4560)}
[data-design-page=index] .hero h1{font-weight:900}
[data-design-page=index] .sbar__box{border-radius:17px;border-color:#e7edf5;box-shadow:0 12px 36px #0b214b14}
[data-design-page=index] .b2b{background:linear-gradient(110deg,#eaf4ff,#fff 65%)}
[data-design-page=pricing] .intro{padding-block:12px 22px}
[data-design-page=pricing] .plan h2{font-weight:800}

/* Account forms: a white search-like surface against the travel panorama. */
body[data-design-page=login]{color:#0b214b;background:#071e45;background-image:var(--rihla-panorama);background-position:center;background-size:cover;background-attachment:fixed}
[data-design-page=login] .bg{opacity:.15}
[data-design-page=login] .card{background:#fff;color:#0b214b;border:1px solid #e7edf5;border-radius:20px;box-shadow:0 24px 60px #071e454d;backdrop-filter:none}
[data-design-page=login] .card::before{display:none}
[data-design-page=login] .roles{background:#eaf2ff}
[data-design-page=login] .roles__pill{background:#0560f9}
[data-design-page=login] .roles button{color:#52617a;opacity:1}
[data-design-page=login] .roles button[aria-selected=true]{color:#fff}
[data-design-page=login] .f :is(input,select){background:#f7faff;color:#0b214b;border-color:#d5dfef}
[data-design-page=login] .f select option{background:#fff;color:#0b214b}
[data-design-page=login] .f input:focus{background:#fff;border-color:#0560f9;box-shadow:0 0 0 4px #0560f914}
[data-design-page=login] .f input:focus+label,[data-design-page=login] .f input:not(:placeholder-shown)+label{color:#004ddd}
[data-design-page=login] .go{background:#0560f9;border-radius:10px}
[data-design-page=login] .alt button{color:#004ddd}
[data-design-page=login] .lic{background:#f7faff;border-color:#e7edf5}
[data-design-page=login] .lic__yn button{background:#fff;border-color:#d5dfef;color:#52617a}
[data-design-page=login] .lic__yn button[aria-checked=true]{background:#0560f9;color:#fff}
[data-design-page=login] .msg--err,[data-design-page=login] .lic__no{color:#a9251b;background:#fbeae8;border-color:#edb8b4}
[data-design-page=login] .msg--ok{color:#167c3d;background:#e8f4ec;border-color:#b6dcc3}

/* Dashboard navigation matches the partner console; layouts stay role-specific. */
[data-design-page=dashboard] .side{background:linear-gradient(180deg,#fff 65%,#eaf3ff);color:#52617a;border-inline-end:1px solid #e7edf5}
[data-design-page=dashboard] .side__brand{border-color:#e7edf5}
[data-design-page=dashboard] .side__brand .rk-logo__ar{color:#0b214b}
[data-design-page=dashboard] .side__acct{background:#f3f7ff;border-color:#e7edf5}
[data-design-page=dashboard] .side__gr{color:#64738a}
[data-design-page=dashboard] .side__l{color:#52617a;margin-inline:8px;border-radius:10px}
[data-design-page=dashboard] .side__l:hover{background:#eaf2ff;color:#0560f9}
[data-design-page=dashboard] .side__l.is-on{background:#0560f9;color:#fff;border-inline-start-color:#0560f9}
[data-design-page=dashboard] .side__out{color:#52617a}
[data-design-page=dashboard] .banner{border-radius:16px;background:linear-gradient(110deg,#071e45,#123c70)}
[data-design-page=console] .cs-card{border-radius:16px}
[data-design-page=console] .cs-kpi{border-radius:16px}
[data-design-page=console] .cs-hero{border-radius:20px}
[data-design-page=app] .phone{background:#f7faff}
[data-design-page=app] :is(.tripcard,.co-card,.gcard){border-color:#e7edf5;box-shadow:0 8px 28px #12366d0a;border-radius:16px}

/* Server-rendered destination and editorial pages share the platform surfaces. */
.seo-body{background:#f7faff;color:#35404f}
.seo-body .hero-s{border-radius:20px;background:linear-gradient(110deg,#eaf2ff,#fff);border:1px solid #e7edf5;padding:28px;margin-block:16px 24px}
.seo-body .hero-s h1{color:#0b214b;font-weight:900}
.seo-body :is(.qf,.notice,.seo-card){border-radius:16px}
[data-design-page=guide]{--g9:#071e45;--g7:#0560f9;--g5:#123c70;--g4:#0560f9;--g1:#eaf2ff;--g05:#f7faff;--ink:#0b214b;--ink2:#35404f;--line:#e7edf5;--line2:#d5dfef}
[data-design-page=guide] .cover{background-image:var(--rihla-panorama);background-size:cover;background-position:center}
@media(max-width:600px){
 body[data-design-page]:not([data-design-page=index-platform]) .rk-nav__in{gap:10px}
 :is([data-design-page=market] .mhero,[data-design-page=destination] .dhero,[data-design-page=program] .phero){padding-block:32px}
 [data-design-page=login] .card{padding:24px 20px}
 .seo-body .hero-s{padding:20px}
}
@media screen and (max-width:800px){
 [data-design-page=guide] .page{width:100%;height:auto;min-height:0;padding:24px 20px;overflow-wrap:anywhere}
 [data-design-page=guide] .cover{min-height:100dvh}
 [data-design-page=guide] .cover h1{font-size:clamp(32px,8vw,54px)}
}
/* Preserve the quote's existing print layout and the guide's A4 layout. */
@media print{
 body[data-design-page=quote],body[data-design-page=guide]{background:#fff}
 [data-design-page=quote] .sheet{box-shadow:none}
}

[data-design-page=login] .up{border-color:#c6d8f6;background:#fff}
[data-design-page=login] .lic__no a{color:#004ddd}
@media(max-width:1100px){
 [data-design-page=index-platform] .platform-services__grid>a{position:relative;overflow:hidden}
 [data-design-page=index-platform] .platform-services__grid>a .rk-card__photo{position:static;inset:auto;width:100%;height:100px;object-fit:cover;border-radius:9px;flex:none}
 [data-design-page=index-platform] .platform-services__grid>a.rk-card__media--photo::after{display:none}
}
/* These legacy labels carry inline white text from the original dark sidebar. */
[data-design-page=dashboard] .side__acct [data-me-name]{color:#0b214b!important}
[data-design-page=dashboard] .side__acct small,
[data-design-page=dashboard] .side__brand .rk-logo__en{color:#64738a!important}