/* ───────────────────────────────────────────────────────────── WikiTours — shared site styles Tokens, type, header, footer, search, cards, sections ───────────────────────────────────────────────────────────── */ /* Free fonts via Google CDN — preconnect is in the . Fraunces (display serif) + Inter (Latin body) + IBM Plex Sans Arabic (Arabic). */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap'); :root{ /* Earthy palette pulled from the WikiTours logo */ --brown: #000000; --brown-2: #3A1B0F; --brown-3: #2C140A; --gold: #EFC436; --gold-2: #D9AE21; --gold-soft: #FBE9A6; --teal: #46B8C5; --teal-2: #2FA0AE; --green: #6FBF4A; --green-2: #58A335; --blue: #2668B3; --terracotta: #C77B30; --brick: #C73E3E; --paper: #ffffff; --paper-2: #f1efe9; --paper-3: #faf8f3; --ink: #000000; --ink-2: #000000; --ink-3: #000000; --line: rgba(74,36,21,0.10); --line-2: rgba(74,36,21,0.20); --shadow-1: 0 1px 2px rgba(31,22,17,.05), 0 4px 14px rgba(31,22,17,.06); --shadow-2: 0 6px 18px rgba(31,22,17,.10), 0 18px 40px rgba(31,22,17,.12); --shadow-pop: 0 20px 60px rgba(31,22,17,.18); --radius-s: 8px; --radius: 14px; --radius-l: 22px; } /* Reset + base */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;font-family:'Inter','Helvetica Neue',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-weight:400;font-size:16px;line-height:1.55;color:var(--ink);background:#ffffff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img{max-width:100%;display:block} svg{display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer} input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4,h5,h6{font-family:'Fraunces','Times New Roman',serif;font-weight:600;line-height:1.1;letter-spacing:-.015em;color:var(--brown);margin:0 0 .6em;text-wrap:balance} h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:700} h2{font-size:clamp(1.7rem,3.5vw,2.6rem)} h3{font-size:clamp(1.25rem,2vw,1.6rem)} p{margin:0 0 1em} .container{max-width:1280px;margin:0 auto;padding:0 clamp(1.1rem,3vw,2.4rem)} .container-narrow{max-width:920px;margin:0 auto;padding:0 clamp(1.1rem,3vw,2.4rem)} ::selection{background:var(--gold);color:var(--brown)} .skip-link{position:absolute;top:-40px;left:0;background:#4A2415;color:var(--paper);padding:.6rem 1rem;z-index:9999;font-weight:600;border-radius:0 0 4px 0} .skip-link:focus{top:0;outline:2px solid var(--gold);outline-offset:2px} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px} /* Utility bar */ .utility{background:#ffffff;color:var(--ink-2);font-size:.83rem;padding:.5rem 0;border-bottom:1px solid var(--line)} .utility .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap} .utility .left{display:inline-flex;align-items:center;gap:.7rem} .utility .left .dot{width:6px;height:6px;background:var(--gold);border-radius:50%;display:inline-block} .utility .right{display:inline-flex;align-items:center;gap:1rem} .utility a:hover{color:var(--gold-2)} .lang-switch{display:inline-flex;gap:.1rem;align-items:center} .lang-switch a{padding:.18rem .5rem;border-radius:999px;transition:background .2s ease,color .2s ease;cursor:pointer;font-weight:500} .lang-switch a[aria-current="true"]{background:var(--gold);color:var(--brown);font-weight:700} /* Header */ header.main{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.96);-webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);border-bottom:1px solid var(--line)} header.main .container{display:flex;align-items:center;gap:1.4rem;padding-top:.9rem;padding-bottom:.9rem} header.main .mark{display:inline-flex;align-items:center;gap:.75rem;color:var(--brown);font-family:'Fraunces',serif;font-weight:700;font-size:1.45rem;letter-spacing:-.01em} header.main .mark img{height:62px;width:auto;object-fit:contain;display:block} header.main .mark .wt{display:inline-flex;flex-direction:column;line-height:1} header.main .mark .wt small{font-family:'Inter',sans-serif;font-weight:600;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-top:.28rem} @media(max-width:560px){header.main .mark img{height:50px}header.main .mark{font-size:1.25rem}} header.main nav.primary{display:flex;gap:1.6rem;margin-left:auto;font-size:.93rem;font-weight:500} header.main nav.primary a{color:var(--ink-2);transition:color .2s ease;position:relative;padding:.35rem 0} header.main nav.primary a:hover, header.main nav.primary a.active{color:var(--brown)} header.main nav.primary a.active{font-weight:600} header.main nav.primary a.active::after{content:"";position:absolute;left:0;right:0;bottom:-.15rem;height:2px;background:var(--gold);border-radius:1px} header.main .cta-pair{display:inline-flex;gap:.55rem;margin-left:1rem} .menu-btn{display:none;background:transparent;border:0;width:42px;height:42px;align-items:center;justify-content:center;color:var(--brown);margin-left:auto} .menu-btn svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.2} .menu-btn .close-icon{display:none} @media(max-width:920px){ header.main nav.primary,header.main .cta-pair{display:none} .menu-btn{display:inline-flex} } /* Mobile drawer */ .mobile-drawer{position:fixed;inset:0;background:rgba(31,22,17,.45);z-index:90;opacity:0;pointer-events:none;transition:opacity .25s ease} .mobile-drawer.open{opacity:1;pointer-events:auto} .mobile-drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(88vw,380px);background:var(--paper);padding:1.1rem 0 2rem;display:flex;flex-direction:column;gap:0;transform:translateX(100%);transition:transform .32s cubic-bezier(.16,1,.3,1);overflow-y:auto;box-shadow:-14px 0 44px -14px rgba(31,22,17,.3)} .mobile-drawer.open .panel{transform:translateX(0)} .mobile-drawer .panel a{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1.05rem 1.6rem;border-radius:0;color:var(--brown);font-size:1.1rem;font-weight:600;letter-spacing:.005em;border:0;border-bottom:1px solid var(--line);transition:background .18s ease,padding-inline-start .18s ease} .mobile-drawer .panel a:not(.phone):not([href^="tel"]):not([href^="mailto"])::after{content:"›";color:var(--gold-2);font-size:1.4rem;line-height:1;opacity:.55;transition:opacity .2s ease} html[dir="rtl"] .mobile-drawer .panel a:not(.phone):not([href^="tel"]):not([href^="mailto"])::after{content:"‹"} .mobile-drawer .panel a:hover,.mobile-drawer .panel a.active{background:var(--paper-2);color:var(--brown);padding-inline-start:1.9rem} .mobile-drawer .panel a.active,.mobile-drawer .panel a.active::after{opacity:1} .mobile-drawer .panel a.active{box-shadow:inset 3px 0 0 var(--gold-2)} html[dir="rtl"] .mobile-drawer .panel a.active{box-shadow:inset -3px 0 0 var(--gold-2)} .mobile-drawer .panel a.phone,.mobile-drawer .panel a[href^="tel"],.mobile-drawer .panel a[href^="mailto"]{font-size:.98rem;font-weight:500;color:var(--ink-2)} .mobile-drawer .panel hr{display:none} html[dir="rtl"] .mobile-drawer .panel{right:auto;left:0;transform:translateX(-100%)} html[dir="rtl"] .mobile-drawer.open .panel{transform:translateX(0)} /* Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.85rem 1.55rem;border-radius:999px;font-size:.95rem;font-weight:600;letter-spacing:.005em;border:1px solid transparent;cursor:pointer;transition:transform .25s cubic-bezier(.16,1,.3,1),background .2s ease,color .2s ease,border-color .2s ease,box-shadow .25s ease;white-space:nowrap} .btn-primary{background:var(--gold);color:var(--brown);box-shadow:0 6px 16px rgba(239,196,54,.35)} .btn-primary:hover{background:var(--gold-2);transform:translateY(-2px);box-shadow:0 10px 24px rgba(239,196,54,.45)} .btn-secondary{background:#4A2415;color:var(--paper)} .btn-secondary:hover{background:var(--brown-2);transform:translateY(-2px)} .btn-ghost{background:transparent;color:var(--brown);border-color:var(--line-2)} .btn-ghost:hover{background:var(--paper-2);border-color:#4A2415} .btn-on-photo{background:rgba(255,255,255,.96);color:var(--brown);backdrop-filter:blur(6px)} .btn-on-photo:hover{background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-2)} .btn svg{width:18px;height:18px} .btn-sm{padding:.55rem 1.1rem;font-size:.85rem} .btn-lg{padding:1rem 1.85rem;font-size:1.02rem} /* Page hero (subpages — slim brown band with paper-coloured title) */ .page-hero{background:#fff;color:var(--ink);padding:clamp(2rem,4.5vw,3.2rem) 0 clamp(1.4rem,3vw,2rem);position:relative;border-bottom:1px solid var(--line)} .page-hero .container{position:relative;z-index:1} .page-hero .crumb{font-size:.8rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3);margin-bottom:.8rem;font-weight:600} .page-hero h1{color:var(--brown);margin:0} .page-hero h1 .em{color:var(--gold-2);font-style:italic} .page-hero p.lede{font-size:1.08rem;max-width:62ch;margin-top:1rem;color:var(--ink-2);line-height:1.6} /* Photo banner variant — admin sets a background image + overlay opacity per page */ .page-hero.has-bg{background:#2a2320;color:#fff;padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.6rem,5vw,4rem);border-bottom:0;overflow:hidden} .page-hero.has-bg::before{content:"";position:absolute;inset:0;background-image:var(--hero-img);background-size:cover;background-position:center;z-index:0} .page-hero.has-bg::after{content:"";position:absolute;inset:0;background:rgba(12,9,6,var(--hero-overlay,.55));z-index:0} .page-hero.has-bg .crumb{color:rgba(255,255,255,.82)} .page-hero.has-bg h1{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45)} .page-hero.has-bg h1 .em{color:var(--gold)} .page-hero.has-bg p.lede{color:rgba(255,255,255,.94);text-shadow:0 1px 12px rgba(0,0,0,.45)} /* Kicker pill (used above section titles) */ .kicker{display:inline-flex;align-items:center;gap:.45rem;font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brown);background:var(--gold-soft);padding:.42rem .9rem;border-radius:999px;margin-bottom:1rem} .kicker .dot{width:6px;height:6px;background:var(--gold-2);border-radius:50%} /* Section frame */ .section{padding:clamp(3.5rem,7vw,6rem) 0;position:relative} .section-head{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:2.4rem} .section-head .title-block{max-width:62ch} .section-head h2{margin:0} .section-head h2 em{color:var(--gold-2);font-style:italic} .section-head p.lede{margin:.7rem 0 0;color:var(--ink-2);font-size:1.05rem;line-height:1.6} .section-head a.see-all{font-weight:600;color:var(--brown);border-bottom:2px solid var(--gold);padding-bottom:.18rem;align-self:end} .section-head a.see-all:hover{color:var(--brown-2);border-color:#4A2415} /* Trust strip (under the hero) */ .trust{background:var(--paper-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .trust .row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;padding:1.4rem 0} .trust .item{display:flex;align-items:center;gap:.85rem;color:var(--ink-2);font-size:.95rem} .trust .item .icon{width:38px;height:38px;border-radius:50%;background:var(--gold-soft);color:var(--brown);display:grid;place-items:center;flex-shrink:0} .trust .item .icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2} .trust .item strong{display:block;color:var(--brown);font-weight:700;font-size:1rem;margin-bottom:.1rem} @media(max-width:880px){.trust .row{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.trust .row{grid-template-columns:1fr}} /* Destination cards */ .dest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem} .dest-card{position:relative;display:block;border-radius:var(--radius);overflow:hidden;background:var(--paper-2);aspect-ratio:3/4;color:var(--paper);box-shadow:var(--shadow-1);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease} .dest-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)} .dest-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(20,12,8,.78) 100%)} .dest-card .body{position:absolute;inset:auto 0 0 0;padding:1.1rem 1.15rem 1.05rem;z-index:1} .dest-card h3{color:var(--paper);margin:0 0 .2rem;font-size:1.25rem;font-weight:600;letter-spacing:-.01em;text-shadow:0 1px 6px rgba(0,0,0,.4)} .dest-card .meta{display:inline-flex;align-items:center;gap:.4rem;font-size:.83rem;color:rgba(251,247,238,.88);font-weight:500} .dest-card .meta::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)} .dest-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)} .dest-card:hover img{transform:scale(1.06)} @media(max-width:1080px){.dest-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:720px){.dest-grid{grid-template-columns:repeat(2,1fr);gap:.85rem}} @media(max-width:420px){.dest-grid:not(.dest-rail){grid-template-columns:1fr}} /* Destinations as a horizontal scroll rail of small cards (GetYourGuide "Top destinations" style): square rounded image with the name BELOW it, slide sideways for more. Home only. */ .dest-grid.dest-rail{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:.35rem .15rem 1rem;grid-template-columns:none} .dest-grid.dest-rail::-webkit-scrollbar{display:none} .dest-rail .dest-card{flex:0 0 clamp(150px,20vw,200px);aspect-ratio:auto;background:none;border-radius:0;box-shadow:none;color:inherit;overflow:visible;scroll-snap-align:start} .dest-rail .dest-card img{position:static;width:100%;height:auto;aspect-ratio:1/1;border-radius:18px;box-shadow:var(--shadow-1)} .dest-rail .dest-card::after{display:none} .dest-rail .dest-card .body{position:static;inset:auto;padding:.7rem .15rem 0;z-index:auto} .dest-rail .dest-card h3{color:var(--brown);text-shadow:none;font-size:1.02rem;font-weight:700;margin:0;line-height:1.25} .dest-rail .dest-card .meta{display:none} /* reference shows just the name */ .dest-rail .dest-card:hover{transform:translateY(-3px)} .dest-rail .dest-card:hover img{transform:none} @media(max-width:680px){ .dest-grid.dest-rail{margin:0 -1.1rem;padding:.35rem 1.1rem 1rem;scroll-padding-inline-start:1.1rem;gap:.85rem} .dest-rail .dest-card{flex-basis:clamp(140px,42vw,168px)} .dest-rail .dest-card h3{font-size:.98rem} } /* Activity tiles */ .act-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem} .act-tile{display:block;background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.2rem;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;position:relative;overflow:hidden} .act-tile .icon{width:48px;height:48px;border-radius:12px;background:var(--gold-soft);color:var(--brown);display:grid;place-items:center;margin-bottom:.9rem;transition:background .2s ease,color .2s ease} .act-tile .icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2} .act-tile h3{margin:0 0 .25rem;font-size:1.1rem;font-weight:600} .act-tile p{margin:0;font-size:.88rem;color:var(--ink-3);line-height:1.5} .act-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-1);border-color:var(--line-2)} .act-tile:hover .icon{background:var(--gold);color:var(--brown-2)} .act-tile.t-teal .icon{background:rgba(70,184,197,.18);color:var(--teal-2)} .act-tile.t-teal:hover .icon{background:var(--teal);color:var(--paper)} .act-tile.t-green .icon{background:rgba(111,191,74,.18);color:var(--green-2)} .act-tile.t-green:hover .icon{background:var(--green);color:var(--paper)} .act-tile.t-terra .icon{background:rgba(199,123,48,.18);color:var(--terracotta)} .act-tile.t-terra:hover .icon{background:var(--terracotta);color:var(--paper)} .act-tile.t-brick .icon{background:rgba(199,62,62,.18);color:var(--brick)} .act-tile.t-brick:hover .icon{background:var(--brick);color:var(--paper)} @media(max-width:1080px){.act-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:720px){.act-grid{grid-template-columns:repeat(2,1fr);gap:.8rem}} @media(max-width:420px){.act-grid{grid-template-columns:1fr}} /* Tour cards (GetYourGuide-style — white card, image on top) */ .tour-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;align-items:stretch} .tour-card{display:flex;flex-direction:column;background:#ffffff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .25s ease,box-shadow .3s ease,border-color .25s ease;box-shadow:0 1px 3px rgba(31,22,17,.05)} .tour-card .photo{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--paper-2)} .tour-card .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)} .tour-card .photo .badge{position:absolute;top:.85rem;left:.85rem;background:var(--brown-3);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.04em;padding:.32rem .7rem;border-radius:6px;backdrop-filter:blur(6px)} .tour-card .photo .badge.t-gold{background:var(--gold);color:var(--brown-3)} .tour-card .photo .badge.t-green{background:var(--green-2);color:#fff} .tour-card .photo .badge.t-blue{background:var(--blue);color:#fff} .tour-card .photo .fav{position:absolute;top:.7rem;right:.7rem;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--brown);display:grid;place-items:center;border:0;backdrop-filter:blur(6px);transition:background .2s ease,color .2s ease} .tour-card .photo .fav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2} .tour-card .photo .fav:hover{background:var(--brick);color:#fff} .tour-card .body{padding:1.05rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.45rem;flex:1} .tour-card .body h3{margin:0;font-size:1.12rem;font-weight:600;line-height:1.25;letter-spacing:-.005em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty} .tour-card .body .region{font-size:.82rem;color:var(--ink-3);font-weight:500;text-transform:uppercase;letter-spacing:.08em} .tour-card .body .meta{display:flex;flex-wrap:wrap;gap:.5rem .9rem;font-size:.85rem;color:var(--ink-2);margin:.15rem 0 .35rem} .tour-card .body .meta span{display:inline-flex;align-items:center;gap:.32rem} .tour-card .body .meta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;color:var(--ink-3)} .tour-card .body .stars{display:inline-flex;align-items:center;gap:.35rem;font-size:.88rem;color:var(--ink-2)} .tour-card .body .stars b{color:var(--brown);font-weight:700} .tour-card .body .stars svg{width:14px;height:14px;fill:var(--gold-2);stroke:none} .tour-card .body .price-row{margin-top:auto;padding-top:.7rem;display:flex;align-items:end;justify-content:space-between;gap:1rem;border-top:1px dashed var(--line)} .tour-card .body .price{display:flex;flex-direction:column} .tour-card .body .price small{font-size:.74rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em;font-weight:600} .tour-card .body .price b{font-family:'Fraunces',serif;font-size:1.02rem;color:var(--brown);font-weight:700;line-height:1} .tour-card .body .price b sup{font-size:.62rem;font-weight:600;color:var(--ink-3);margin-left:.16rem} /* Offer / sale price — old price struck through in red, new price kept prominent */ .tour-card .body .price .price-set{display:flex;align-items:baseline;gap:.35rem;flex-wrap:wrap} .tour-card .body .price .was{font-family:'Fraunces',serif;font-weight:600;font-size:.82rem;color:#c0392b;text-decoration:line-through;text-decoration-thickness:1.5px;line-height:1} .tour-card .body .price b.now{color:var(--brown)} /* Official Omani Rial symbol (same asset SR Events ERP uses) — an inline glyph before the amount, sized in em so it scales with whatever price it sits in. */ .omr-sym{display:inline-block;width:1.15em;height:.8em;background:url('omr-symbol.png') no-repeat center center;background-size:contain;vertical-align:-.02em;margin-inline-end:.12em} html[lang="ar"] .omr-sym{vertical-align:baseline} .tour-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -8px rgba(31,22,17,.16);border-color:rgba(31,22,17,.18)} .tour-card:hover .photo img{transform:scale(1.04)} /* Trust line — WikiTours' real offer (free cancellation + reserve now, pay later) */ .tour-card .body .card-trust{display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--green-2);margin:.1rem 0 .05rem;line-height:1.3} .tour-card .body .card-trust svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.6;flex-shrink:0} /* Multi-day itinerary timeline */ .itinerary{margin:1.6rem 0;padding-left:.25rem} .itinerary .day{position:relative;padding-left:1.6rem;padding-bottom:1.1rem;border-left:2px solid rgba(239,196,54,.4)} .itinerary .day:last-child{padding-bottom:0;border-left-color:transparent} .itinerary .day::before{content:"";position:absolute;left:-9px;top:.25rem;width:16px;height:16px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px #fff;z-index:1} .itinerary .day-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;cursor:pointer;list-style:none;padding:.05rem 0;transition:opacity .15s ease} .itinerary .day-head::-webkit-details-marker{display:none} .itinerary .day-head::marker{content:""} .itinerary .day-head:hover{opacity:.7} .itinerary .day-htext{flex:1;min-width:0} .itinerary .day-label{display:block;font-size:.72rem;font-weight:700;color:var(--gold-2);text-transform:uppercase;letter-spacing:.14em;margin-bottom:.2rem} .itinerary .day-title{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:1.18rem;color:var(--brown);line-height:1.28} .itinerary .day-chevron{flex-shrink:0;color:var(--gold-2);margin-top:.3rem;transition:transform .25s ease} .itinerary .day[open] .day-chevron{transform:rotate(180deg)} .itinerary .day-body{overflow:hidden;animation:dayReveal .28s ease} @keyframes dayReveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .itinerary .day-body p{color:var(--ink-2);font-size:.96rem;line-height:1.6;margin:.55rem 0} .itinerary .day-body ul{margin:.45rem 0 0;padding-left:1.2rem;color:var(--ink-2)} .itinerary .day-body ul li{font-size:.92rem;line-height:1.6;margin-bottom:.2rem} html[dir="rtl"] .itinerary{padding-left:0;padding-right:.25rem} html[dir="rtl"] .itinerary .day{padding-left:0;padding-right:1.6rem;border-left:0;border-right:2px solid rgba(239,196,54,.4)} html[dir="rtl"] .itinerary .day:last-child{border-right-color:transparent} html[dir="rtl"] .itinerary .day::before{left:auto;right:-9px} html[dir="rtl"] .itinerary .day-body ul{padding-left:0;padding-right:1.2rem} /* Subtle alt-section helper (when you do want a wash of off-white) */ .alt-section{background:#FBFAF6} @media(max-width:1280px){.tour-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:1024px){.tour-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.tour-grid:not(.home-rail){grid-template-columns:1fr;gap:1rem}} /* Horizontal swipe rail for tour/car cards (Popular tours, Upcoming, Self-drive): 4 cards on desktop, scroll for the rest. Global so any page can use `tour-grid home-rail`. */ .tour-grid.home-rail{display:flex;flex-wrap:nowrap;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:.4rem .2rem 1rem;grid-template-columns:none} .tour-grid.home-rail::-webkit-scrollbar{display:none} .tour-grid.home-rail>.tour-card{flex:0 0 calc((100% - 3rem)/4);scroll-snap-align:start;min-width:0;margin:0} @media(max-width:1000px){.tour-grid.home-rail>.tour-card{flex-basis:calc((100% - 1rem)/2)}} @media(max-width:680px){ .tour-grid.home-rail{margin:.2rem -1.1rem 0;padding:.3rem 1.1rem 1rem;scroll-padding-left:1.1rem;gap:.9rem} .tour-grid.home-rail>.tour-card{flex-basis:84%} html[dir="rtl"] .tour-grid.home-rail{scroll-padding-left:0;scroll-padding-right:1.1rem} } /* Scroll arrows for horizontal rails (DESKTOP ONLY) — circular Google-Maps-style buttons. JS (site.js) wraps each rail in .rail-wrap and injects the prev/next buttons + hides them at the ends. Centred vertically on the card image via JS. */ .rail-wrap{position:relative} .rail-arrow{position:absolute;z-index:6;top:38%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:#fff;border:0;color:var(--brown);display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 2px 6px rgba(31,22,17,.12),0 8px 22px rgba(31,22,17,.20);transition:box-shadow .2s ease,transform .15s ease} .rail-arrow:hover{box-shadow:0 4px 10px rgba(31,22,17,.16),0 12px 28px rgba(31,22,17,.26);transform:translateY(-50%) scale(1.06)} .rail-arrow:active{transform:translateY(-50%) scale(.95)} .rail-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .rail-arrow.prev{left:-16px} .rail-arrow.next{right:-16px} .rail-arrow[hidden]{display:none} @media(max-width:820px){.rail-arrow{display:none!important}} /* Why-us 3-up */ .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem} .why-card{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius-l);padding:1.85rem 1.6rem 2rem;position:relative;overflow:hidden} .why-card .icon{width:52px;height:52px;border-radius:14px;background:var(--gold);color:var(--brown);display:grid;place-items:center;margin-bottom:1rem} .why-card.t-teal .icon{background:var(--teal);color:#fff} .why-card.t-green .icon{background:var(--green);color:#fff} .why-card .icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2} .why-card h3{margin:0 0 .35rem;font-size:1.2rem} .why-card p{margin:0;color:var(--ink-2);font-size:.96rem;line-height:1.6} @media(max-width:880px){.why-grid{grid-template-columns:1fr;gap:1rem}} /* Testimonials */ .testi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem} .testi-card{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius);padding:1.55rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.9rem} .testi-card .stars{display:inline-flex;gap:.15rem;color:var(--gold-2)} .testi-card .stars svg{width:16px;height:16px;fill:currentColor} .testi-card blockquote{font-family:'Fraunces',serif;font-size:1.06rem;color:var(--ink);line-height:1.55;font-style:italic;margin:0;text-wrap:pretty} .testi-card .who{display:flex;align-items:center;gap:.7rem;margin-top:auto} .testi-card .avatar{width:38px;height:38px;border-radius:50%;background:var(--gold-soft);color:var(--brown);display:grid;place-items:center;font-weight:700;font-family:'Fraunces',serif;font-size:1.05rem} .testi-card .who .meta{font-size:.85rem;color:var(--ink-3)} .testi-card .who .meta b{display:block;color:var(--brown);font-weight:600;font-size:.95rem} @media(max-width:880px){.testi-row{grid-template-columns:1fr}} /* Partners strip */ .partners{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2.2rem 3rem;padding:1.5rem 0;color:var(--ink-3);font-weight:600;letter-spacing:.05em} .partners .item{display:inline-flex;align-items:center;gap:.6rem;opacity:.78;transition:opacity .2s ease} .partners .item:hover{opacity:1} .partners .item .badge{width:34px;height:34px;border-radius:8px;background:var(--paper-2);color:var(--brown);display:grid;place-items:center;font-family:'Fraunces',serif;font-weight:700} /* Banded CTA */ .cta-band{background:var(--gold-soft);border:1px solid #F0DFA0;color:var(--brown);border-radius:var(--radius-l);padding:clamp(2.4rem,5vw,3.6rem) clamp(1.8rem,5vw,3.4rem);display:grid;grid-template-columns:1.5fr auto;gap:2rem;align-items:center;position:relative;overflow:hidden} .cta-band .text{position:relative;z-index:1} .cta-band h2{color:var(--brown);margin:0 0 .6rem} .cta-band h2 em{color:var(--gold-2);font-style:italic} .cta-band p{color:var(--ink-2);margin:0;font-size:1.05rem;line-height:1.55;max-width:46ch} .cta-band .actions{position:relative;z-index:1;display:flex;gap:.7rem;flex-wrap:wrap} @media(max-width:780px){.cta-band{grid-template-columns:1fr}} /* Accordion (about & services) */ details.acc{border-bottom:1px solid var(--line);padding:1.15rem 0} details.acc[open]{padding-bottom:1.25rem} details.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:'Fraunces',serif;font-size:1.2rem;font-weight:600;color:var(--brown)} details.acc>summary::-webkit-details-marker{display:none} details.acc>summary::after{content:"";width:30px;height:30px;border-radius:50%;background:var(--gold-soft);color:var(--brown);display:grid;place-items:center;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:center;transition:transform .25s ease,background-color .2s ease;flex-shrink:0} details.acc[open]>summary::after{transform:rotate(180deg)} details.acc .acc-body{padding-top:.85rem;color:var(--ink-2);font-size:1rem;line-height:1.65;max-width:78ch} /* Footer */ footer{background:var(--paper-3);color:var(--ink-2);padding:clamp(3rem,5vw,4rem) 0 1.5rem;font-size:.92rem;margin-top:clamp(3rem,5vw,4rem);border-top:1px solid var(--line)} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.4fr;gap:clamp(1.8rem,3.6vw,3rem);align-items:start;margin-bottom:2.5rem} .foot-brand{max-width:34ch} .foot-brand .mark{display:inline-flex;align-items:center;gap:.6rem;color:var(--brown);font-family:'Fraunces',serif;font-weight:700;font-size:1.4rem;margin-bottom:.85rem} .foot-brand .mark img{height:64px;width:auto;object-fit:contain} .foot-brand p{color:var(--ink-3);line-height:1.55;font-size:.93rem} footer h5{font-family:'Fraunces',serif;font-weight:600;font-size:1rem;letter-spacing:.02em;color:var(--brown);margin:.15rem 0 1rem} .foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem} .foot-grid a{color:var(--ink-2);transition:color .2s ease} .foot-grid a:hover{color:var(--gold-2)} .foot-contact{font-size:.92rem;color:var(--ink-2);line-height:1.7} .foot-contact a{color:var(--brown)} .foot-contact a:hover{color:var(--gold-2)} .foot-social{display:flex;gap:.55rem;margin-top:.9rem} .foot-social a{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--brown);background:#fff;border:1px solid var(--line);transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease} .foot-social a:hover{background:var(--gold);color:var(--brown);border-color:var(--gold);transform:translateY(-2px)} .foot-social a svg{width:16px;height:16px;fill:currentColor} .foot-bottom{border-top:1px solid var(--line);padding-top:1.25rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:var(--ink-3)} .foot-bottom a:hover{color:var(--gold-2)} @media(max-width:980px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:2rem}.foot-contact-col{grid-column:1/-1}} @media(max-width:640px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}} @media(max-width:440px){.foot-grid{grid-template-columns:1fr}} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ─── Filter chips (listing pages) ─── */ .chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.6rem} .chip{display:inline-flex;align-items:center;gap:.45rem;background:var(--paper-3);border:1px solid var(--line);color:var(--ink-2);padding:.55rem 1rem;border-radius:999px;font-size:.88rem;font-weight:500;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease} .chip:hover{background:var(--paper-2);border-color:var(--line-2)} .chip.active{background:#4A2415;color:var(--paper);border-color:#4A2415} .chip .ct{background:var(--paper-2);color:var(--ink-3);font-size:.72rem;font-weight:700;padding:.05rem .4rem;border-radius:999px} .chip.active .ct{background:rgba(251,247,238,.16);color:var(--paper)} /* Numbers strip */ .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center;padding:1.5rem 0} .stats-row .stat b{display:block;font-family:'Fraunces',serif;font-weight:700;font-size:clamp(1.9rem,4vw,2.8rem);color:var(--brown);line-height:1} .stats-row .stat span{display:block;color:var(--ink-3);font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin-top:.4rem} @media(max-width:640px){.stats-row{grid-template-columns:repeat(2,1fr);gap:1.4rem}} /* Contact-page contact block */ .contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:start} @media(max-width:880px){.contact-grid{grid-template-columns:1fr}} .contact-card{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.7rem} .contact-card h3{margin:0 0 1rem;font-size:1.25rem} .contact-card .item{display:flex;gap:.85rem;align-items:flex-start;padding:.7rem 0;border-top:1px solid var(--line);font-size:.96rem} .contact-card .item:first-of-type{border-top:0;padding-top:.2rem} .contact-card .item .ic{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:var(--gold-soft);color:var(--brown);display:grid;place-items:center} .contact-card .item .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2} .contact-card .item small{display:block;color:var(--ink-3);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;margin-bottom:.15rem} .contact-card .item a{color:var(--brown);font-weight:600} .contact-card .item a:hover{color:var(--gold-2)} /* Form */ .form-grid{display:grid;gap:1rem} .form-grid .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} @media(max-width:640px){.form-grid .row{grid-template-columns:1fr}} .field{display:flex;flex-direction:column;gap:.35rem} .field label{font-size:.84rem;font-weight:600;color:var(--ink-2)} .field input,.field textarea,.field select{appearance:none;background:var(--paper-3);border:1px solid var(--line-2);border-radius:10px;padding:.78rem .95rem;font-size:.97rem;color:var(--ink);transition:border-color .2s ease,box-shadow .2s ease} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold-2);box-shadow:0 0 0 4px rgba(239,196,54,.18)} .field textarea{min-height:130px;resize:vertical} /* ─── Bilingual EN ⇄ AR ─── */ html:not([lang="ar"]) .ar, html[lang="ar"] .en{display:none!important} html[lang="ar"]{direction:rtl} html[lang="ar"] body{text-align:right} html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,html[lang="ar"] h5,html[lang="ar"] p,html[lang="ar"] li,html[lang="ar"] label,html[lang="ar"] .crumb{text-align:right} html[lang="ar"] .ar{font-family:'IBM Plex Sans Arabic','Tajawal',system-ui,sans-serif;line-height:1.75} html[lang="ar"] h1.ar,html[lang="ar"] h2.ar,html[lang="ar"] h3.ar,html[lang="ar"] h4.ar,html[lang="ar"] h5.ar,html[lang="ar"] .display.ar{font-family:'IBM Plex Sans Arabic','Tajawal',serif;font-weight:700} html[lang="ar"] body{font-family:'IBM Plex Sans Arabic','Tajawal',system-ui,sans-serif} html[lang="ar"] header.main .container{flex-direction:row} html[lang="ar"] header.main nav.primary{margin-left:0;margin-right:auto} html[lang="ar"] .utility .container{flex-direction:row} html[lang="ar"] .foot-grid,html[lang="ar"] .foot-bottom{direction:rtl} html[lang="ar"] .section-head{flex-direction:row} html[lang="ar"] .tour-card .body .price-row{flex-direction:row} /* Phone in RTL — keep LTR */ a[href^="tel:"],.phone,bdi.ltr{unicode-bidi:isolate;direction:ltr} /* ─── PREVIEW MODE bar (only shown when ?_preview=1, injected by data.js) ─── */ #wt-preview-bar{ position: sticky; top: 0; z-index: 1000; background: linear-gradient(90deg, #EFC436 0%, #D9AE21 100%); color: #2C140A; padding: .75rem 1.4rem; font-family: 'Inter', sans-serif; font-size: .92rem; font-weight: 500; text-align: center; border-bottom: 3px solid #4A2415; box-shadow: 0 2px 8px rgba(74,36,21,.2); } #wt-preview-bar strong{ font-weight: 800; letter-spacing: .05em; margin-right: .5rem; } #wt-preview-bar a{ color: #2C140A; text-decoration: underline; font-weight: 700; margin-left: .75rem; } #wt-preview-bar a:hover{ color: #4A2415; } /* ─── KAYAK · Info & FAQ accordion (shared: kayak page, kayak tour detail, kayak booking) ─── */ .kfaq{ display: grid; gap: .6rem; } .kfaq-item{ background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; } .kfaq-item[open]{ border-color: var(--gold); box-shadow: 0 6px 20px rgba(31,22,17,.07); } .kfaq-item > summary{ cursor: pointer; padding: 1.05rem 1.25rem; font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.06rem; color: var(--brown); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .kfaq-item > summary::-webkit-details-marker{ display: none; } .kfaq-item > summary::after{ content: "+"; flex: 0 0 auto; color: var(--gold); font-size: 1.5rem; line-height: 1; font-family: 'Inter', sans-serif; transition: transform .2s ease; } .kfaq-item[open] > summary::after{ content: "−"; } .kfaq-answer{ padding: 0 1.25rem 1.1rem; color: var(--ink-2); font-size: .98rem; line-height: 1.75; } /* the bilingual spans inside the answer body */ .kfaq-answer .ar{ display: none; } html[lang="ar"] .kfaq-answer .ar{ display: block; } html[lang="ar"] .kfaq-answer .en{ display: none; } /* RTL: flip the +/− to the start side naturally via flex direction inheritance */ html[lang="ar"] .kfaq-item > summary{ text-align: right; } /* ─── Phone numbers always read left-to-right (+968 first), even in Arabic/RTL ─── The bidi algorithm reverses space-separated digit groups in an RTL context (and Arabic-Indic digits are type "AN", which reverses too). Isolating the phone as an LTR run keeps it identical to the English rendering everywhere. */ .phone{ direction: ltr; unicode-bidi: isolate; } /* ─── BLOG cards (GetYourGuide-style: image · category pill + date · bold title · author) ─── */ .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:1.6rem} @media(max-width:900px){.post-grid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.post-grid{grid-template-columns:1fr}} .blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;box-shadow:0 1px 2px rgba(31,22,17,.05);transition:transform .25s ease,box-shadow .3s ease} .blog-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px -14px rgba(31,22,17,.22)} .blog-card .bc-photo{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)} .blog-card .bc-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .blog-card:hover .bc-photo img{transform:scale(1.05)} .blog-card .bc-body{padding:1.15rem 1.25rem 1.3rem;display:flex;flex-direction:column;flex:1} .bc-meta{display:flex;align-items:center;gap:.7rem;margin-bottom:.75rem;flex-wrap:wrap} .bc-tag{background:#4A2415;color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:.34rem .72rem;border-radius:8px;white-space:nowrap} .bc-date{color:var(--ink-3);font-size:.82rem} .bc-title{font-family:'Fraunces',serif;color:var(--brown);font-size:1.18rem;line-height:1.32;margin:0 0 1.15rem;font-weight:600} .blog-card:hover .bc-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} .bc-author{display:flex;align-items:center;gap:.65rem;margin-top:auto} .bc-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--gold-soft)} .bc-avatar-ph{display:grid;place-items:center;color:var(--brown);font-family:'Fraunces',serif;font-weight:700;font-size:1.05rem} .bc-author-meta{display:flex;flex-direction:column;line-height:1.25;min-width:0} .bc-author-meta b{color:var(--ink);font-weight:700;font-size:.92rem} .bc-author-meta span{color:var(--ink-3);font-size:.82rem} /* ─── BLOG article (detail page) ─── */ .bp-wrap{max-width:760px;margin:0 auto;padding:2rem 0 3rem} .bp-crumb{font-size:.8rem;color:var(--ink-3);margin-bottom:1rem;letter-spacing:.04em} .bp-crumb a{color:var(--ink-3);text-decoration:none} .bp-crumb a:hover{color:var(--brown)} .bp-meta{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem;flex-wrap:wrap} .bp-title{font-family:'Fraunces',serif;color:var(--brown);font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.18;margin:0 0 1.2rem;font-weight:600} .bp-hero{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;margin-bottom:1.5rem;background:var(--paper-2)} .bp-author{display:flex;align-items:center;gap:.7rem;padding:1rem 0 1.4rem;border-bottom:1px solid var(--line);margin-bottom:1.6rem} .bp-body{color:var(--ink-2);font-size:1.06rem;line-height:1.8} .bp-body p{margin:0 0 1.15rem} html[lang="ar"] .bp-body,html[lang="ar"] .bp-title{text-align:right} /* ─── Google reviews section (home) ─── */ .gr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.2rem;flex-wrap:wrap} .gr-badge{display:inline-flex;align-items:center;gap:.7rem;margin-top:.9rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.55rem .95rem;box-shadow:0 2px 8px rgba(0,0,0,.05)} .gr-g{width:26px;height:26px;flex-shrink:0} .gr-meta{display:flex;flex-direction:column;line-height:1.25} .gr-meta b{color:var(--brown);font-size:1rem;display:flex;align-items:center;gap:.4rem} .gr-stars{color:#FBBC04;letter-spacing:1px;font-size:.95rem} .gr-meta small{color:var(--ink-3);font-size:.8rem} .gr-all{white-space:nowrap;align-self:center} /* Google G watermark on each review card */ .testi-card{position:relative} .testi-g{position:absolute;top:1.1rem;right:1.1rem;width:22px;height:22px;opacity:.9} html[dir="rtl"] .testi-g{right:auto;left:1.1rem} html[dir="rtl"] .gr-head{text-align:right} /* Bilingual list items: hide an item in whichever language its text is blank, so the English and Arabic bullet lists can have different lengths. */ html:not([lang="ar"]) li.no-en, html[lang="ar"] li.no-ar { display: none !important; } /* ═══ Price button (white, simple black border) — used on card price CTAs ═══ */ .btn-price{background:#fff;color:var(--ink);border-color:var(--ink);box-shadow:none;font-variant-numeric:tabular-nums} .btn-price:hover{background:var(--ink);color:#fff;border-color:var(--ink)} /* ═══ Mobile tour cards — clean & simple (Viator-style) ═══ */ @media(max-width:820px){ .tour-card{border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 4px rgba(31,22,17,.06);overflow:hidden;background:#fff} .tour-card .photo{border-radius:0;margin:0} .tour-card .photo img{border-radius:0;width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;display:block} .tour-card .body{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:.7rem;row-gap:.3rem;padding:.9rem 1rem 1rem} .tour-card .region{grid-column:1/-1;color:var(--ink-3);font-size:.82rem;font-weight:600;letter-spacing:0;text-transform:none;margin:0} .tour-card .body h3{grid-column:1/-1;font-size:1rem;font-weight:700;color:var(--brown);line-height:1.32;margin:.05rem 0 .1rem} .tour-card h3 a{color:inherit} .tour-card .meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0;margin:.05rem 0 .2rem} .tour-card .meta span{display:inline-flex;align-items:baseline;color:var(--ink-2);font-size:.9rem;gap:0} .tour-card .meta span svg{display:none} .tour-card .meta span + span::before{content:"·";margin:0 .45rem;color:var(--ink-3)} .tour-card .body .card-trust{display:none} .tour-card .stars{grid-column:1;justify-self:start;margin:0;font-size:.92rem;gap:.25rem} .tour-card .stars span{display:none} /* keep ★ + rating number only, drop "(N reviews)" */ .tour-card .body .price-row{grid-column:2;justify-self:end;border-top:0;padding:0;margin:0;flex-direction:row;align-items:baseline;gap:.35rem} /* Offer stacks on mobile: FROM + struck old price on the top line, new price below */ .tour-card .body .price{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;text-align:end;column-gap:.35rem;row-gap:0} .tour-card .body .price small{order:0;font-size:.74rem;text-transform:none;letter-spacing:0;color:var(--ink-3)} .tour-card .body .price .price-set{display:contents} .tour-card .body .price .was{order:1;font-size:.9rem} .tour-card .body .price b{order:2;flex-basis:100%;text-align:end;font-size:1.05rem} .tour-card .price-row .btn-primary{display:none} /* hide gold "Book" — whole card is tappable */ .tour-card .price-row .btn-price{background:none;border:0;box-shadow:none;color:var(--brown);padding:0;font-weight:700;font-size:1.05rem;white-space:nowrap} .tour-card .price-row .btn-price:hover{background:none;color:var(--brown);transform:none} } /* Language switcher moved into the header (utility strip removed) */ header.main .lang-switch{flex-shrink:0} header.main .lang-switch a{color:var(--ink-2)} @media(max-width:920px){header.main .lang-switch{margin-inline-start:auto}} /* Card Book button: white + simple border (not gold) — all sizes */ .tour-card .price-row .btn-primary{background:#fff;color:var(--ink);border-color:var(--ink);box-shadow:none;font-weight:700} .tour-card .price-row .btn-primary:hover{background:var(--ink);color:#fff;border-color:var(--ink)} /* Remove the green trust line on all cards */ .tour-card .body .card-trust{display:none}