/* ==================================================================
Haramain Taxi — full page styling (the "hrw-zy" design language)
Used by the one-shortcode route, tour and fleet pages. Every selector
is scoped under .hrw-zy so it cannot touch anything else on the site.
Colours on interactive elements are pinned with !important because many
themes repaint links and buttons on :focus, and on a phone a TAP matches
:focus -- which is what used to make tapped FAQ text unreadable.
================================================================== */
/* ==================================================================
Haramain Taxi — Ziyarat article
Self-contained: no external fonts, images, CDNs or HTTP requests of
any kind, so it can be pasted straight into a WordPress "Custom HTML"
block and render identically anywhere.
Every colour is pinned with !important on interactive elements. Many
WordPress themes repaint buttons/links on :focus, and on a phone a TAP
matches :focus (not :focus-visible, which is keyboard-only) — that is
exactly what previously made tapped text unreadable on our FAQ pages.
================================================================== */
.hrw-zy{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
color:#22312c;line-height:1.75;
/* Declare an explicit light theme so Android/Samsung "auto dark mode"
doesn't invert the cards and wash out the text. */
color-scheme:light;
-webkit-text-size-adjust:100%;
}
.hrw-zy,.hrw-zy *,.hrw-zy *::before,.hrw-zy *::after{box-sizing:border-box;}
.hrw-zy button,.hrw-zy a{-webkit-tap-highlight-color:transparent;}
.hrw-zy img{max-width:100%;height:auto;}
/* ---------- Hero ---------- */
.hrw-zy-hero{
position:relative;overflow:hidden;text-align:center;color:#fff;
background:linear-gradient(160deg,#0e6b4e 0%,#0b5d43 45%,#0a4a37 100%);
padding:56px 20px 52px;border-radius:18px;margin-bottom:36px;
}
.hrw-zy-hero::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.12),transparent 62%);
}
.hrw-zy-hero-inner{position:relative;z-index:2;max-width:760px;margin:0 auto;}
.hrw-zy-eyebrow{
display:inline-block;background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.30);color:#fff !important;
font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
padding:6px 16px;border-radius:30px;margin-bottom:18px;
}
.hrw-zy-hero h1{
color:#fff !important;font-size:clamp(1.55rem,4vw,2.5rem);line-height:1.25;
font-weight:800;margin:0 0 14px;letter-spacing:-.01em;
}
.hrw-zy-hero h1 .accent{color:#e6c563 !important;}
.hrw-zy-rule{width:66px;height:3px;border-radius:2px;background:#d4af37;margin:0 auto 20px;}
.hrw-zy-hero p{color:#dcece3 !important;font-size:clamp(.96rem,1.4vw,1.08rem);margin:0 auto;max-width:600px;}
.hrw-zy-meta{
display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px;
}
.hrw-zy-meta span{
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
color:#eaf4ef !important;font-size:.76rem;font-weight:600;padding:5px 14px;border-radius:30px;
}
/* ---------- Body ---------- */
.hrw-zy-wrap{max-width:820px;margin:0 auto;padding:0 20px 64px;}
.hrw-zy-lede{
font-size:clamp(1.02rem,1.5vw,1.14rem);color:#37474180;color:#374741;
line-height:1.85;margin:0 0 26px;
}
.hrw-zy-lede:first-letter{
float:left;font-size:3.1em;line-height:.86;font-weight:800;
color:#0b5d43;margin:.06em .12em 0 0;
}
/* ---------- Table of contents ---------- */
.hrw-zy-toc{
background:#f4f9f6;border:1px solid #dceae3;border-radius:14px;
padding:22px 24px;margin:0 0 40px;
}
.hrw-zy-toc h2{
font-size:.8rem !important;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:#0b5d43 !important;margin:0 0 14px !important;padding:0 !important;border:0 !important;
}
.hrw-zy-toc ol{list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 20px;counter-reset:toc;}
.hrw-zy-toc li{margin:0;counter-increment:toc;}
.hrw-zy-toc a{
display:flex;gap:9px;align-items:baseline;
color:#0b5d43 !important;text-decoration:none;font-weight:600;font-size:.9rem;
padding:5px 0;line-height:1.45;
}
.hrw-zy-toc a::before{
content:counter(toc);color:#a8801a !important;font-weight:800;font-size:.78rem;
min-width:1.3em;flex-shrink:0;
}
.hrw-zy-toc a:hover{color:#0e7a5f !important;text-decoration:underline;}
/* ---------- Sections ---------- */
.hrw-zy-sec{margin:0 0 34px;scroll-margin-top:100px;}
.hrw-zy-sec h2{
display:flex;align-items:flex-start;gap:13px;
font-size:clamp(1.18rem,2.6vw,1.5rem) !important;font-weight:800;line-height:1.35;
color:#0b5d43 !important;margin:0 0 14px !important;
padding-bottom:12px;border-bottom:2px solid #e2ede8;
}
.hrw-zy-num{
flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
min-width:34px;height:34px;border-radius:10px;
background:linear-gradient(135deg,#0e7a5f,#0b5d43);color:#fff !important;
font-size:.9rem;font-weight:800;
}
.hrw-zy-sec p{margin:0 0 14px;color:#374741;}
.hrw-zy-sec p:last-child{margin-bottom:0;}
.hrw-zy-sec strong{color:#0b5d43;}
/* ---------- Callout ---------- */
.hrw-zy-note{
background:#f4f9f6;border-left:4px solid #0e7a5f;border-radius:0 12px 12px 0;
padding:16px 20px;margin:18px 0;color:#2f4038;font-size:.95rem;
}
.hrw-zy-note strong{color:#0b5d43;}
.hrw-zy-quote{
background:linear-gradient(180deg,#f8f4e8 0%,#f4efe0 100%);
border:1px solid #ead9ae;border-radius:12px;padding:20px 22px;margin:20px 0;
font-size:1.02rem;line-height:1.7;color:#5a4718;font-style:italic;text-align:center;
}
.hrw-zy-quote cite{display:block;margin-top:9px;font-style:normal;font-size:.8rem;font-weight:700;
letter-spacing:.05em;text-transform:uppercase;color:#8a6d10;}
/* ---------- Other places grid ---------- */
.hrw-zy-places{
display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:11px;margin:20px 0 0;
list-style:none;padding:0;
}
.hrw-zy-places li{
background:#fff;border:1.5px solid #d5e2dc;border-radius:11px;
padding:13px 15px;font-size:.9rem;font-weight:600;color:#0b5d43;line-height:1.45;
display:flex;gap:9px;align-items:flex-start;
}
.hrw-zy-places li::before{content:"◆";color:#d4af37;font-size:.7rem;line-height:1.9;flex-shrink:0;}
.hrw-zy-places li small{display:block;font-weight:400;color:#6b7d75;font-size:.8rem;margin-top:2px;}
/* ---------- CTA ---------- */
.hrw-zy-cta{
background:linear-gradient(160deg,#0e6b4e 0%,#0b5d43 100%);
border-radius:16px;padding:32px 26px;text-align:center;color:#fff;margin:44px 0 30px;
}
.hrw-zy-cta h2{color:#fff !important;font-size:clamp(1.2rem,2.8vw,1.6rem) !important;
font-weight:800;margin:0 0 10px !important;border:0 !important;padding:0 !important;display:block !important;}
.hrw-zy-cta p{color:#cfe4da !important;margin:0 auto 20px;max-width:520px;font-size:.98rem;}
.hrw-zy-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:#d4af37 !important;color:#1c1200 !important;
font-weight:800;font-size:1rem;text-decoration:none !important;
padding:14px 30px;border-radius:10px;box-shadow:0 5px 16px rgba(0,0,0,.22);
}
.hrw-zy-btn:hover{background:#e6c563 !important;color:#1c1200 !important;}
/* ---------- Related ---------- */
.hrw-zy-rel{background:#f4f9f6;border:1px solid #dceae3;border-radius:14px;padding:20px 22px;}
.hrw-zy-rel h2{
font-size:1rem !important;font-weight:800;color:#0b5d43 !important;
margin:0 0 12px !important;border:0 !important;padding:0 !important;display:block !important;
}
.hrw-zy-rel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.hrw-zy-rel a{
display:flex;align-items:center;justify-content:space-between;gap:12px;
background:#fff;border:1px solid #d5e2dc;border-radius:10px;padding:12px 15px;
color:#0b5d43 !important;font-weight:600;font-size:.92rem;text-decoration:none !important;
}
.hrw-zy-rel a:hover{border-color:#0e7a5f;box-shadow:0 5px 14px rgba(11,93,67,.13);}
.hrw-zy-rel a span:last-child{color:#d4af37;font-weight:800;flex-shrink:0;}
.hrw-zy-foot{
margin-top:26px;padding-top:18px;border-top:1px solid #e2ede8;
color:#6b7d75;font-size:.82rem;line-height:1.65;
}
@media (max-width:640px){
.hrw-zy-hero{padding:38px 18px 36px;border-radius:14px;margin-bottom:26px;}
.hrw-zy-wrap{padding:0 16px 44px;}
.hrw-zy-toc{padding:18px 16px;margin-bottom:30px;}
.hrw-zy-toc ol{grid-template-columns:1fr;gap:2px;}
.hrw-zy-sec{margin-bottom:28px;scroll-margin-top:80px;}
.hrw-zy-num{min-width:29px;height:29px;font-size:.82rem;}
.hrw-zy-cta{padding:26px 18px;}
.hrw-zy-places{grid-template-columns:1fr;}
.hrw-zy-btn{width:100%;}
}
/* ---------- Fare panel (sits directly under the hero) ---------- */
.hrw-zy-farepanel{
background:linear-gradient(180deg,#f4f9f6 0%,#eaf4ef 100%);
border:1.5px solid #dceae3;border-radius:16px;padding:24px 26px;margin:0 0 22px;
}
.hrw-zy-farepanel h2{
font-size:1.12rem !important;font-weight:800;color:#0b5d43 !important;
margin:0 0 6px !important;border:0 !important;padding:0 !important;display:block !important;
}
.hrw-zy-farepanel .fp-sub{color:#566860;font-size:.88rem;line-height:1.55;margin:0 0 16px;}
.hrw-zy-farepanel .hrw-zy-tiles{max-width:none;}
.hrw-zy-farepanel .fp-note{
color:#566860;font-size:.82rem;line-height:1.6;margin:14px 0 0;
padding-top:13px;border-top:1px solid #dceae3;
}
.hrw-zy-farepanel .hrw-zy-calc{margin-top:18px;}
.hrw-zy-farepanel .hrw-quote-mount{background:none;border:0;padding:0;}
@media (max-width:560px){ .hrw-zy-farepanel{padding:18px 16px;border-radius:14px;} }
/* ---------- Embedded quote calculator ----------
NB: named .hrw-zy-calc, not .hrw-zy-quote — the latter is the italic
cream pull-quote style used on the Ziyarat pages. */
.hrw-zy-calc{margin-top:24px;}
.hrw-zy-calc h3{
font-size:.95rem !important;font-weight:800;color:#0b5d43 !important;
margin:0 0 12px !important;display:flex;align-items:center;gap:9px;
}
.hrw-zy-calc h3::before{content:"";width:26px;height:2px;background:#d4af37;border-radius:2px;flex-shrink:0;}
/* If the plugin stylesheet is missing (page previewed on its own) the mount
still needs sane padding so the widget never renders unstyled-flat. */
.hrw-zy-calc .hrw-quote-mount{min-height:10px;}
/* ---------- FAQ accordion ----------
Colours pinned across every state: a WordPress theme that repaints
button:focus would otherwise leave dark text on a dark background after
a tap on mobile (a tap matches :focus, not :focus-visible). */
.hrw-zy-faq{display:flex;flex-direction:column;gap:11px;margin-top:18px;}
.hrw-zy-fitem{background:#fff !important;border:1.5px solid #d5e2dc;border-radius:12px;overflow:hidden;
box-shadow:0 3px 11px rgba(11,93,67,.07);}
.hrw-zy-fq,.hrw-zy-fq:hover,.hrw-zy-fq:focus,.hrw-zy-fq:focus-visible,.hrw-zy-fq:active,
.hrw-zy-fitem.open .hrw-zy-fq{color:#0b5d43 !important;border:none !important;box-shadow:none !important;opacity:1 !important;}
.hrw-zy-fq{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
text-align:left;background-color:#fff !important;cursor:pointer;padding:16px 18px;
font-size:.97rem;font-weight:700;font-family:inherit;-webkit-appearance:none;appearance:none;
outline:none;-webkit-tap-highlight-color:transparent;white-space:normal !important;}
.hrw-zy-fq:hover,.hrw-zy-fq:focus,.hrw-zy-fitem.open .hrw-zy-fq{background-color:#f7faf8 !important;}
.hrw-zy-fq:active{background-color:#eaf2ee !important;}
.hrw-zy-fqt{flex:1 1 auto;min-width:0;white-space:normal !important;overflow-wrap:break-word;
line-height:1.45;color:#0b5d43 !important;}
.hrw-zy-fi{flex-shrink:0;width:23px;height:23px;border-radius:50%;background:#eef3f0 !important;
color:#0b5d43 !important;display:flex;align-items:center;justify-content:center;
font-size:.95rem;font-weight:800;line-height:1;margin-top:1px;transition:background .2s,color .2s;}
.hrw-zy-fitem.open .hrw-zy-fi{background:#0e7a5f !important;color:#fff !important;}
.hrw-zy-fa{max-height:0;overflow:hidden;transition:max-height .3s ease;background-color:#fff !important;}
.hrw-zy-fa-in{padding:0 18px 17px;}
.hrw-zy-fa-in p{color:#41504a !important;font-size:.92rem;line-height:1.75;margin:0 0 10px;}
.hrw-zy-fa-in p:last-child{margin-bottom:0;}
@media (max-width:560px){ .hrw-zy-fq{padding:14px 15px;font-size:.92rem;} .hrw-zy-fa-in{padding:0 15px 15px;} }
/* ---------- Fleet vehicle cards ---------- */
.hrw-zy-fleet{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;margin:20px 0 0;}
.hrw-zy-veh{
background:#fff;border:2px solid #cddfd7;border-radius:16px;overflow:hidden;
box-shadow:0 4px 14px rgba(11,93,67,.10);display:flex;flex-direction:column;
}
.hrw-zy-veh-media{
/* The vehicle icon sits behind the photo as a background. If an image
ever fails to load its onerror removes the ![]()
, and this shows
through instead of a broken-image box. */
background:linear-gradient(180deg,#f4f9f6 0%,#e6f1ec 100%),
url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230b5d43%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.45%22%3E%3Cpath%20d%3D%22M2%2015.5V8.6A1.6%201.6%200%200%201%203.6%207h9.6l3.8%204H20a2%202%200%200%201%202%202v2.5%22%2F%3E%3Cpath%20d%3D%22M2%2015.5h20%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2217.6%22%20r%3D%222.1%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2217.6%22%20r%3D%222.1%22%2F%3E%3Cpath%20d%3D%22M9.2%207v4%22%2F%3E%3Cpath%20d%3D%22M4%2011h9.2%22%2F%3E%3C%2Fsvg%3E") center/58px no-repeat;
background-blend-mode:normal;
aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden;
border-bottom:1px solid #dceae3;
}
.hrw-zy-veh-media{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230b5d43%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.45%22%3E%3Cpath%20d%3D%22M2%2015.5V8.6A1.6%201.6%200%200%201%203.6%207h9.6l3.8%204H20a2%202%200%200%201%202%202v2.5%22%2F%3E%3Cpath%20d%3D%22M2%2015.5h20%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2217.6%22%20r%3D%222.1%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2217.6%22%20r%3D%222.1%22%2F%3E%3Cpath%20d%3D%22M9.2%207v4%22%2F%3E%3Cpath%20d%3D%22M4%2011h9.2%22%2F%3E%3C%2Fsvg%3E"),linear-gradient(180deg,#f4f9f6 0%,#e6f1ec 100%);
background-position:center;background-size:58px,cover;background-repeat:no-repeat;}
.hrw-zy-veh-media img{width:100%;height:100%;display:block;}
/* transparent PNG cut-outs sit inside the tile; a photographed JPG fills it */
.hrw-zy-veh-media img.fit-contain{object-fit:contain;padding:10px;}
.hrw-zy-veh-media img.fit-cover{object-fit:cover;}
.hrw-zy-veh-media .ph{width:64px;height:64px;color:#0b5d43;opacity:.55;}
.hrw-zy-veh-media .ph svg{width:100%;height:100%;}
.hrw-zy-veh-in{padding:18px 18px 20px;display:flex;flex-direction:column;flex-grow:1;}
.hrw-zy-veh h3{font-size:1.05rem !important;font-weight:800;color:#0b5d43 !important;margin:0 0 3px !important;line-height:1.3;}
.hrw-zy-veh .cls{font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#8a6d10;margin:0 0 10px;}
.hrw-zy-veh p{color:#566860;font-size:.87rem;line-height:1.6;margin:0 0 14px;flex-grow:1;}
.hrw-zy-specs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
.hrw-zy-spec{
background:linear-gradient(180deg,#f4f9f6 0%,#eaf4ef 100%);
border:1px solid #dcebe4;border-radius:10px;padding:9px 8px;text-align:center;
}
.hrw-zy-spec b{display:block;font-size:1.05rem;font-weight:800;color:#0b5d43;line-height:1.15;}
.hrw-zy-spec span{display:block;font-size:.68rem;font-weight:700;color:#566860;text-transform:uppercase;letter-spacing:.03em;margin-top:2px;}
.hrw-zy-veh-cta{
display:block;text-align:center;background:#0b5d43;color:#fff !important;
font-weight:700;font-size:.86rem;padding:11px 16px;border-radius:9px;text-decoration:none !important;
}
.hrw-zy-veh-cta:hover{background:#0e7a5f;}
@media (max-width:560px){ .hrw-zy-fleet{grid-template-columns:1fr;} }
/* ---------- Ziyarah rate cards ---------- */
.hrw-zy-rates{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:18px 0 0;}
.hrw-zy-rate{
background:#fff;border:2px solid #cddfd7;border-radius:15px;overflow:hidden;
box-shadow:0 4px 14px rgba(11,93,67,.10);display:flex;flex-direction:column;
}
.hrw-zy-rate-top{height:5px;background:linear-gradient(90deg,#0e7a5f 0%,#0b5d43 45%,#d4af37 100%);}
.hrw-zy-rate-in{padding:18px 18px 20px;display:flex;flex-direction:column;flex-grow:1;}
.hrw-zy-rate h3{
font-size:1rem !important;font-weight:800;color:#0b5d43 !important;
margin:0 0 4px !important;line-height:1.35;
}
.hrw-zy-rate .sub{color:#566860;font-size:.82rem;margin:0 0 14px;line-height:1.5;}
.hrw-zy-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:auto;}
.hrw-zy-tile{
background:linear-gradient(180deg,#f4f9f6 0%,#eaf4ef 100%);
border:1px solid #dcebe4;border-radius:10px;padding:11px 5px;text-align:center;
}
.hrw-zy-tile b{display:block;font-size:.68rem;font-weight:800;color:#0b5d43;text-transform:uppercase;letter-spacing:.02em;line-height:1.25;}
.hrw-zy-tile i{display:block;font-style:normal;font-size:.62rem;color:#566860;margin-top:1px;}
.hrw-zy-tile strong{display:block;font-size:clamp(.9rem,2.2vw,1.05rem);font-weight:800;color:#0b5d43;margin-top:4px;line-height:1.2;}
.hrw-zy-rate-cta{
display:block;text-align:center;margin-top:14px;background:#0b5d43;color:#fff !important;
font-weight:700;font-size:.86rem;padding:11px 16px;border-radius:9px;text-decoration:none !important;
}
.hrw-zy-rate-cta:hover{background:#0e7a5f;}
@media (max-width:560px){ .hrw-zy-rates{grid-template-columns:1fr;} }
/* ---------- Big WhatsApp panel (replaces the old contact form) ---------- */
.hrw-zy-wa{
background:linear-gradient(160deg,#128C7E 0%,#0b7a63 55%,#0b5d43 100%);
border-radius:16px;padding:34px 26px;text-align:center;color:#fff;margin:0 0 34px;
}
.hrw-zy-wa h2{
color:#fff !important;font-size:clamp(1.25rem,3vw,1.7rem) !important;font-weight:800;
margin:0 0 10px !important;border:0 !important;padding:0 !important;display:block !important;
}
.hrw-zy-wa p{color:#d8efe8 !important;margin:0 auto 22px;max-width:540px;font-size:.98rem;}
.hrw-zy-wa .num{
display:block;font-size:clamp(1.1rem,2.6vw,1.4rem);font-weight:800;
letter-spacing:.02em;color:#fff !important;margin-bottom:20px;direction:ltr;
}
/* ---------- Contact method cards ---------- */
.hrw-zy-cards{
display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:0 0 34px;
}
.hrw-zy-card{
display:flex;gap:13px;align-items:flex-start;
background:#fff;border:1.5px solid #d5e2dc;border-radius:13px;padding:17px 18px;
text-decoration:none !important;color:inherit !important;
box-shadow:0 3px 11px rgba(11,93,67,.07);
transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
a.hrw-zy-card:hover{border-color:#0e7a5f;box-shadow:0 9px 20px rgba(11,93,67,.15);transform:translateY(-2px);}
.hrw-zy-card-ico{
flex-shrink:0;width:42px;height:42px;border-radius:12px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#0e7a5f,#0b5d43);color:#fff;
}
.hrw-zy-card-ico svg{width:21px;height:21px;display:block;}
.hrw-zy-card b{display:block;color:#0b5d43 !important;font-size:.95rem;font-weight:800;margin-bottom:3px;}
.hrw-zy-card span{display:block;color:#5b6b78 !important;font-size:.85rem;line-height:1.5;word-break:break-word;}
/* ---------- Checklist ---------- */
.hrw-zy-check{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.hrw-zy-check li{
display:flex;gap:11px;align-items:flex-start;
background:#fff;border:1px solid #d5e2dc;border-radius:11px;padding:13px 15px;
font-size:.92rem;color:#374741;line-height:1.55;
}
.hrw-zy-check li::before{
content:"\2713";flex-shrink:0;width:21px;height:21px;border-radius:50%;
background:#0e7a5f;color:#fff;font-size:.72rem;font-weight:800;
display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.hrw-zy-check b{color:#0b5d43;}
/* ---------- Service / value grid ---------- */
.hrw-zy-svc{
display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:18px 0 0;
}
.hrw-zy-svc-item{
background:#fff;border:1.5px solid #d5e2dc;border-radius:13px;padding:20px;
box-shadow:0 3px 11px rgba(11,93,67,.07);
}
.hrw-zy-svc-item h3{
display:flex;gap:10px;align-items:center;
font-size:1rem !important;font-weight:800;color:#0b5d43 !important;margin:0 0 8px !important;
}
.hrw-zy-svc-item h3 em{
flex-shrink:0;width:36px;height:36px;border-radius:10px;font-style:normal;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#0e7a5f,#0b5d43);color:#fff;
}
.hrw-zy-svc-item h3 em svg{width:19px;height:19px;display:block;}
.hrw-zy-svc-item p{margin:0;color:#5b6b78;font-size:.88rem;line-height:1.6;}
/* ---------- Stat strip ---------- */
.hrw-zy-stats{
display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:0 0 34px;
}
.hrw-zy-stat{
background:#f4f9f6;border:1px solid #dceae3;border-radius:13px;padding:18px 14px;text-align:center;
}
.hrw-zy-stat b{display:block;font-size:1.5rem;font-weight:800;color:#0b5d43;line-height:1.1;}
.hrw-zy-stat span{display:block;color:#5b6b78;font-size:.8rem;font-weight:600;margin-top:5px;line-height:1.4;}
@media (max-width:640px){
.hrw-zy-wa{padding:26px 18px;}
.hrw-zy-cards,.hrw-zy-svc{grid-template-columns:1fr;}
.hrw-zy-stats{grid-template-columns:1fr 1fr;}
}
/* ---------- Numbered steps list (e.g. "Pickup at Jeddah Airport") ----------
Same card look as .hrw-zy-check, but a counted number instead of a
checkmark — for a sequence of steps rather than a set of inclusions. */
.hrw-zy-steps{list-style:none;margin:16px 0 0;padding:0;counter-reset:steps;display:flex;flex-direction:column;gap:10px;}
.hrw-zy-steps li{
display:flex;gap:13px;align-items:flex-start;
background:#fff;border:1px solid #d5e2dc;border-radius:11px;padding:13px 15px;
font-size:.92rem;color:#374741;line-height:1.55;counter-increment:steps;
}
.hrw-zy-steps li::before{
content:counter(steps);flex-shrink:0;width:23px;height:23px;border-radius:50%;
background:linear-gradient(135deg,#0e7a5f,#0b5d43);color:#fff !important;
font-size:.74rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.hrw-zy-steps b{color:#0b5d43;}
/* ---------- Comparison table (e.g. "Taxi vs Haramain Train") ----------
A real — comparisons like this are exactly what a table is
for, and it keeps the data readable to screen readers and to Google.
Wrapped in a horizontally-scrolling container so it never forces the
whole page wider than the viewport on a phone. */
.hrw-zy-cmp-wrap{overflow-x:auto;margin:18px 0 0;border:1px solid #d5e2dc;border-radius:14px;-webkit-overflow-scrolling:touch;}
.hrw-zy-cmp{width:100%;border-collapse:collapse;font-size:.88rem;min-width:480px;}
.hrw-zy-cmp th,.hrw-zy-cmp td{padding:12px 14px;text-align:left;border-bottom:1px solid #e2ede8;color:#374741;}
.hrw-zy-cmp thead th{background:#0b5d43;color:#fff !important;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;}
.hrw-zy-cmp tbody tr:last-child td{border-bottom:0;}
.hrw-zy-cmp tbody tr:nth-child(even){background:#f4f9f6;}
.hrw-zy-cmp td:first-child{font-weight:700;color:#0b5d43;white-space:nowrap;}
@media (max-width:560px){ .hrw-zy-cmp{font-size:.82rem;} .hrw-zy-cmp th,.hrw-zy-cmp td{padding:10px 11px;} }
/* ------------------------------------------------------------------
The booking step diagram.
Cards rather than one wide drawing: five steps side by side on a
desktop reflow to a single column on a phone and stay legible, which
a scaled-down SVG of the same thing does not.
------------------------------------------------------------------ */
.hrw-zy .hrw-zy-flow{
display:grid;gap:14px;margin:18px 0 6px;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
/* Five steps read as one process; four and a stray fifth read as a mistake,
so the row is pinned to five once there is room for it. */
@media (min-width:880px){
.hrw-zy .hrw-zy-flow{grid-template-columns:repeat(5,1fr);}
}
.hrw-zy .hrw-zy-step{
position:relative;background:#fff;border:1px solid #dce9e2;border-radius:14px;
padding:18px 16px 16px;text-align:center;
}
.hrw-zy .hrw-zy-step-n{
position:absolute;top:-11px;left:50%;transform:translateX(-50%);
width:26px;height:26px;border-radius:50%;background:#0b5d43;color:#fff !important;
font-size:13px;font-weight:800;line-height:26px;
}
.hrw-zy .hrw-zy-step-ic{
display:block;margin:6px auto 10px;width:42px;height:42px;color:#0b5d43;
}
.hrw-zy .hrw-zy-step-ic svg{width:100%;height:100%;display:block;}
.hrw-zy .hrw-zy-step h4{
margin:0 0 6px;font-size:15px;line-height:1.3;color:#0b3b2c !important;font-weight:800;
}
.hrw-zy .hrw-zy-step p{margin:0;font-size:13.5px;line-height:1.5;color:#4a5a53 !important;}
.hrw-zy .hrw-zy-flow-note{
margin:14px 0 0;font-size:14px;color:#4a5a53;
}
/* The two route cards on the booking page. */
.hrw-zy .hrw-zy-routecard{
background:#f4f9f6;border:1px solid #cfe4da;border-radius:14px;
padding:16px 18px;margin:16px 0;
}
.hrw-zy .hrw-zy-routecard h4{
margin:0 0 6px;font-size:17px;color:#0b3b2c !important;font-weight:800;
}
.hrw-zy .hrw-zy-routecard p{margin:0 0 10px;}
.hrw-zy .hrw-zy-langs{
display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0;
}
.hrw-zy .hrw-zy-lang{
display:inline-block;background:#0b5d43;color:#fff !important;text-decoration:none !important;
border-radius:30px;padding:9px 18px;font-weight:700;font-size:14px;
}
.hrw-zy .hrw-zy-lang:hover,.hrw-zy .hrw-zy-lang:focus{background:#0a4a37;color:#fff !important;}