/*
Theme Name: Yapi
Theme URI: https://yapi.co.za
Author: Man From Blouberg
Author URI: https://www.montshobrands.co.za/matome-stephen-nkgoeng/
Description: Standalone theme for Yapi Rides. No parent theme dependency.
Version: 1.0.0
Text Domain: yapi
*/

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root{
  --yapi-navy:#0a192f;
  --yapi-navy-light:#1a2d4a;
  --yapi-gold:#FF6900;
  --yapi-gold-dark:#FF6900;
  --yapi-bg:#f8f9fc;
  --yapi-text:#1a1a2e;
  --yapi-muted:#5a5a7a;
  --yapi-muted-2:#7a7a9a;
  --yapi-border:#f0f2f5;
  --yapi-field-bg:#f4f6fa;
  --yapi-success-bg:#e6f7ec;
  --yapi-success-text:#166534;
  --yapi-success-border:#a7e0bb;
  --yapi-error-bg:#fde8e8;
  --yapi-error-text:#9b1c1c;
  --yapi-error-border:#f3a9a9;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

/* SIDE-SCROLL FIX: belt-and-braces safety net. The real fixes below
   (min-width:0 on grid/flex tracks, clamp() on the hero heading, and
   overflow-wrap on free-text areas) remove the actual overflow causes,
   but this stops anything we missed from ever showing a horizontal
   scrollbar. */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--yapi-bg);
  color:var(--yapi-text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; overflow-wrap:break-word; }
ul{ list-style:none; margin:0; padding:0; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.yapi-header{
  background:rgba(255,255,255,0.92);
  border-bottom:1px solid rgba(0,0,0,0.04);
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(12px);
}
.yapi-header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
/* ==========================================================================
   YAPI LOGO (FORCED ASPECT RATIO & OVERRIDES)
   ========================================================================== */
.yapi-logo {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	text-decoration: none !important;
	line-height: 1 !important;
	flex-shrink: 0 !important;
	height: auto !important;
}

.yapi-logo-image {
	height: 90px !important;
	width: auto !important;
	max-height: 90px !important;
	max-width: none !important;
	object-fit: contain !important;
	display: block !important;
	transform: translateY(3px);
}

/* Tablet & Mobile responsive scaling */
@media (max-width: 1024px) {
	.yapi-logo-image {
		height: 42px !important;
		max-height: 42px !important;
	}
}

@media (max-width: 780px) {
	.yapi-logo-image {
		height: 36px !important;
		max-height: 36px !important;
	}
}
.yapi-nav{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.yapi-nav ul{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.yapi-nav a{
  text-decoration:none; color:var(--yapi-muted); font-size:14px; font-weight:500;
  padding:8px 16px; border-radius:50px; transition:all .2s ease; display:inline-block;
  white-space:nowrap;
}
.yapi-nav a:hover{ background:var(--yapi-border); color:var(--yapi-navy); }
.yapi-nav .current-menu-item a,
.yapi-nav a.is-active{ background:var(--yapi-navy); color:#fff; }
.yapi-nav .yapi-btn-book{ background:var(--yapi-gold); color:#ffffff ; font-weight:700; padding:8px 20px; }
.yapi-nav .yapi-btn-book:hover{ background:var(--yapi-gold-dark); color:var(--yapi-navy); transform:scale(1.02); }

.yapi-nav-toggle{ display:none; }

@media (max-width:780px){
  .yapi-header-inner{ flex-wrap:wrap; gap:12px; }
  .yapi-nav ul{ width:100%; justify-content:center; flex-wrap:wrap; }
  .yapi-nav a{ font-size:13px; padding:6px 12px; }
}

/* ==========================================================================
   HERO / HOMEPAGE LAYOUT
   ========================================================================== */
.yapi-hero{
  flex:1;
  max-width:1200px;
  margin:0 auto;
  padding:40px 24px 60px;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  min-width:0; /* SIDE-SCROLL FIX: let the grid shrink below its content's intrinsic width */
}
.yapi-hero-left{ max-width:520px; min-width:0; }

.yapi-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(245,166,35,0.12); color:#f78502;
  font-size:13px; font-weight:600; padding:6px 14px; border-radius:50px;
  margin-bottom:20px; letter-spacing:.3px;
}
.yapi-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--yapi-gold); animation:yapi-pulse 1.8s ease-in-out infinite; }
@keyframes yapi-pulse{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.7);} }

/* SIDE-SCROLL FIX: this was a static 130px with no rule between the
   1024px and 640px breakpoints, and no wrap guard. A single long word
   at 130px is wider than the 520px column, which forced the grid
   track (and the whole page) wider than the viewport. clamp() scales
   it smoothly with the viewport instead of jumping between fixed
   sizes, and overflow-wrap/word-break stop a single long word from
   ever exceeding the column width. */
.yapi-hero h1{
  font-size:clamp(32px, 8vw, 130px);
  font-weight:900;
  line-height:1.08;
  color:#010833;
  margin:0 0 12px;
  letter-spacing:-1.5px;
  overflow-wrap:break-word;
  word-break:break-word;
}
.yapi-hero h1 .highlight{ color:#f78502 ; position:relative; }
.yapi-hero h1 .highlight::after{ content:""; position:absolute; bottom:4px; left:0; right:0; height:8px; background:rgba(245,166,35,0.25); border-radius:4px; }
.yapi-hero p.lead{ font-size:18px; color:var(--yapi-muted); line-height:1.6; margin:0 0 28px; max-width:420px; }

.yapi-stats{ display:flex; gap:40px; margin-top:8px; flex-wrap:wrap; }
.yapi-stat{ display:flex; flex-direction:column; }
.yapi-stat-number{ font-size:28px; font-weight:800; color:var(--yapi-navy); }
.yapi-stat-label{ font-size:13px; color:var(--yapi-muted-2); font-weight:500; }

/* ---- Booking card ---- */
.yapi-card{
  background:#fff; border-radius:24px; padding:32px 28px 28px;
  box-shadow:0 20px 60px rgba(10,25,47,.08), 0 8px 24px rgba(0,0,0,.04);
  max-width:460px; width:100%; justify-self:end;
  min-width:0; /* SIDE-SCROLL FIX: card is a grid item too, don't let it force the track wider */
  transition:box-shadow .3s ease;
}
.yapi-card:hover{ box-shadow:0 24px 72px rgba(10,25,47,.12), 0 8px 24px rgba(0,0,0,.04); }

.yapi-tabs{ display:flex; gap:4px; background:var(--yapi-border); border-radius:14px; padding:4px; margin-bottom:24px; }
.yapi-tab{
  flex:1; padding:10px 16px; border:none; background:transparent; border-radius:11px;
  font-size:14px; font-weight:600; color:#6a6a8a; cursor:pointer; transition:all .25s ease;
  display:flex; align-items:center; justify-content:center; gap:8px; font-family:inherit;
  min-width:0;
}
.yapi-tab:hover{ color:var(--yapi-navy); }
.yapi-tab.is-active{ background:#fff; color:var(--yapi-navy); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.yapi-tab .icon{ font-size:18px; }

.yapi-fg{ margin-bottom:14px; min-width:0; }
.yapi-fg label{ display:block; font-size:12px; font-weight:600; color:#4a4a6a; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.yapi-fg .input-wrap{ position:relative; display:flex; align-items:center; background:var(--yapi-field-bg); border-radius:14px; transition:all .2s ease; border:2px solid transparent; min-width:0; }
.yapi-fg .input-wrap:focus-within{ border-color:var(--yapi-navy); background:#fff; box-shadow:0 0 0 4px rgba(10,25,47,.06); }
.yapi-fg .input-icon{ padding:0 0 0 16px; font-size:18px; opacity:.5; flex-shrink:0; }
.yapi-fg input, .yapi-fg select, .yapi-fg textarea{
  width:100%; min-width:0; padding:14px 16px 14px 10px; border:none; background:transparent;
  font-size:16px; font-weight:500; color:var(--yapi-navy); outline:none; font-family:inherit;
}
.yapi-fg input::placeholder, .yapi-fg textarea::placeholder{ color:#9a9aba; font-weight:400; }
.yapi-fg select{ appearance:none; cursor:pointer; }
.yapi-fg textarea{ resize:vertical; min-height:90px; padding-left:16px; }

.yapi-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; min-width:0; }
.yapi-row .input-wrap{ padding:0 12px; }
.yapi-row input[type="date"], .yapi-row input[type="time"]{ padding:14px 8px; font-size:14px; color:var(--yapi-navy); }

.yapi-return-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 0 12px; border-bottom:1px solid var(--yapi-border); margin-bottom:16px; gap:12px; }
.yapi-return-row span{ font-size:14px; font-weight:500; color:#4a4a6a; }
.yapi-toggle{ position:relative; width:44px; height:24px; cursor:pointer; flex-shrink:0; display:block; }
.yapi-toggle input{ opacity:0; width:0; height:0; }
.yapi-toggle .slider{ position:absolute; inset:0; background:#d0d2e0; border-radius:24px; transition:.3s ease; }
.yapi-toggle .slider::before{ content:""; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.3s ease; box-shadow:0 2px 4px rgba(0,0,0,.15); }
.yapi-toggle input:checked + .slider{ background:var(--yapi-navy); }
.yapi-toggle input:checked + .slider::before{ transform:translateX(20px); }

.yapi-btn-primary{
  width:100%; padding:16px; background:var(--yapi-navy); color:#fff; border:none; border-radius:16px;
  font-size:18px; font-weight:700; cursor:pointer; transition:all .25s ease;
  display:flex; align-items:center; justify-content:center; gap:10px; margin-top:4px; font-family:inherit;
}
.yapi-btn-primary:hover{ background:var(--yapi-navy-light); transform:translateY(-2px); box-shadow:0 8px 24px rgba(10,25,47,.25); }
.yapi-btn-primary:active{ transform:translateY(0); }
.yapi-btn-primary:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.yapi-btn-primary .arrow{ transition:transform .25s ease; }
.yapi-btn-primary:hover .arrow{ transform:translateX(4px); }

.yapi-btn-secondary{
  width:100%; padding:14px; background:#fff; color:var(--yapi-navy); border:2px solid var(--yapi-navy);
  border-radius:16px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:8px; transition:all .2s ease;
}
.yapi-btn-secondary:hover{ background:var(--yapi-navy); color:#fff; }

.yapi-price{ margin-top:16px; padding:16px 20px; background:#f4f8ff; border-radius:14px; display:none; align-items:center; justify-content:space-between; border:1px solid rgba(10,25,47,.06); gap:12px; flex-wrap:wrap; }
.yapi-price.show{ display:flex; animation:yapi-fade-up .4s ease; }
@keyframes yapi-fade-up{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }
.yapi-price .price-label{ font-size:14px; color:#4a4a6a; }
.yapi-price .price-amount{ font-size:28px; font-weight:800; color:var(--yapi-navy); }
.yapi-price .price-amount .currency{ font-size:18px; font-weight:600; color:#5a5a7a; }
.yapi-price .price-note{ font-size:12px; color:#7a7a9a; }

.yapi-msg{ font-size:13px; padding:10px 14px; border-radius:10px; margin-top:10px; display:none; overflow-wrap:break-word; }
.yapi-msg.show{ display:block; }
.yapi-msg.success{ background:var(--yapi-success-bg); color:var(--yapi-success-text); border:1px solid var(--yapi-success-border); }
.yapi-msg.error{ background:var(--yapi-error-bg); color:var(--yapi-error-text); border:1px solid var(--yapi-error-border); }

.yapi-package-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; min-width:0; }
.yapi-package-row .input-wrap{ padding:0 12px; }
.yapi-package-row select, .yapi-package-row input{ padding:14px 8px; font-size:14px; }

.yapi-when-row{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.yapi-when-btn{
	flex:1; padding:10px 14px; border:1px solid var(--yapi-border); border-radius:12px;
	background:#fff; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--yapi-muted);
	cursor:pointer; transition:all .2s ease; min-width:0;
}
.yapi-when-btn.is-active{ background:var(--yapi-navy); border-color:var(--yapi-navy); color:#fff; }

/* ---- City page (single-yapi_city.php) ---- */
.yapi-breadcrumb{ font-size:13px; color:var(--yapi-muted); margin-bottom:24px; overflow-wrap:break-word; }
.yapi-breadcrumb a{ color:var(--yapi-muted); text-decoration:underline; }
.yapi-breadcrumb .sep{ margin:0 6px; color:var(--yapi-muted-2); }
.yapi-breadcrumb .current{ color:var(--yapi-text); font-weight:600; }

.yapi-city-hero{ max-width:1200px; margin:0 auto; padding:48px 24px 56px; display:flex; gap:56px; align-items:flex-start; flex-wrap:wrap; }
.yapi-city-hero-left{ flex:1; min-width:320px; max-width:480px; }
.yapi-city-hero-right{ flex:1; min-width:320px; }
.yapi-city-h1 {
  font-size:clamp(32px, 8vw, 95px);
  font-weight:900;
  line-height:1.08;
  color:#010833;
  margin:0 0 12px;
  letter-spacing:-1.5px;
  overflow-wrap:break-word;
  word-break:break-word;
}
.yapi-city-h1 .highlight{
  color:#f78502;
  position:relative;
}
.yapi-city-h1 .highlight::after{
  content:"";
  position:absolute;
  bottom:4px;
  left:0;
  right:0;
  height:8px;
  background:rgba(245,166,35,0.25);
  border-radius:4px;
}
.yapi-city-h1 .yapi-city-name{
  font-size:0.52em;
}
.yapi-city-desc{ font-size:15px; color:var(--yapi-muted); line-height:1.6; margin:0 0 6px; overflow-wrap:break-word; }
.yapi-city-desc .more-link{ color:var(--yapi-navy); font-weight:600; text-decoration:underline; cursor:pointer; background:none; border:none; padding:0; font-size:15px; font-family:inherit; }
.yapi-city-desc-full{ display:none; font-size:15px; color:var(--yapi-muted); line-height:1.6; margin:0 0 6px; overflow-wrap:break-word; }
.yapi-city-badges{ display:flex; gap:8px; margin:18px 0 22px; flex-wrap:wrap; }
.yapi-city-badge{ font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:50px; }
.yapi-city-badge.on{ background:var(--yapi-success-bg); color:var(--yapi-success-text); border:1px solid var(--yapi-success-border); }
.yapi-city-badge.off{ background:#fff4e5; color:#8a5a00; border:1px solid #ffdca3; }

.yapi-widget-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; min-width:0; }
.yapi-widget-field{ position:relative; display:flex; align-items:center; gap:10px; background:var(--yapi-field-bg); border-radius:12px; padding:12px 14px; cursor:pointer; min-width:0; }
.yapi-widget-field .icon{ font-size:16px; opacity:.6; }
.yapi-widget-field .field-label{ font-size:11px; color:var(--yapi-muted-2); }
.yapi-widget-field .field-value{ font-size:14px; font-weight:600; color:var(--yapi-navy); overflow-wrap:break-word; }
.yapi-widget-field input{ position:absolute; inset:0; opacity:0; pointer-events:none; }

.yapi-city-illustration{ border-radius:24px; overflow:hidden; aspect-ratio:4/5; background:linear-gradient(135deg, var(--yapi-navy) 0%, #142a4a 55%, var(--yapi-gold-dark) 130%); position:relative; }

.yapi-city-section2{ max-width:1200px; margin:0 auto; padding:8px 24px 64px; }
.yapi-city-section2 h2{ font-size:28px; font-weight:900; color:var(--yapi-navy); margin:0 0 14px; letter-spacing:-.5px; }
.yapi-city-section2 p{ font-size:15px; color:var(--yapi-muted); line-height:1.7; max-width:700px; overflow-wrap:break-word; }

@media (max-width:900px){
  .yapi-city-hero{ flex-direction:column; }
  .yapi-city-hero-left{ max-width:100%; }
  .yapi-widget-row-2{ grid-template-columns:1fr; }
  .yapi-city-h1{ font-size:32px; }
}

@media (max-width:1024px){
  .yapi-hero{ grid-template-columns:1fr; gap:40px; padding:32px 20px 40px; }
  .yapi-hero-left{ max-width:100%; text-align:center; }
  .yapi-hero p.lead{ max-width:100%; margin-left:auto; margin-right:auto; }
  .yapi-stats{ justify-content:center; }
  .yapi-card{ max-width:100%; justify-self:center; }
}
@media (max-width:640px){
  .yapi-hero h1{ font-size:32px; }
  .yapi-hero p.lead{ font-size:16px; }
  .yapi-stats{ gap:24px; flex-wrap:wrap; }
  .yapi-stat-number{ font-size:22px; }
  .yapi-card{ padding:24px 18px 20px; }
  .yapi-row, .yapi-package-row{ grid-template-columns:1fr; }
}

/* ==========================================================================
   PAGE BANNER & FULL WIDTH CONTENT (Gutentor Compatible)
   ========================================================================== */
.yapi-page-banner{
  background:var(--yapi-navy);
  color:#fff;
  padding:64px 24px;
  text-align:center;
}
.yapi-page-banner h1{ font-size:38px; font-weight:800; margin:0 0 10px; letter-spacing:-1px; overflow-wrap:break-word; }
.yapi-page-banner p{ font-size:16px; color:rgba(255,255,255,.7); max-width:100%; margin:0 auto; overflow-wrap:break-word; }

/* Allow the outer container to stretch fully */
.yapi-page-content{ 
  width:100%;
  max-width:100%; 
  margin:0 auto; 
  padding:56px 0; 
  overflow-x:hidden; /* SIDE-SCROLL FIX: this container intentionally spans full width for
                         Gutentor's own grid — clip anything a page-builder block pushes past it */
}

/* Retain default container bounds for standard text elements while letting Gutentor manage its own grid */
.yapi-page-content > h1,
.yapi-page-content > h2,
.yapi-page-content > h3,
.yapi-page-content > h4,
.yapi-page-content > h5,
.yapi-page-content > h6,
.yapi-page-content > p,
.yapi-page-content > ul,
.yapi-page-content > ol {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  overflow-wrap: break-word;
}

.yapi-page-content h2{ font-size:26px; color:var(--yapi-navy); margin-top:0; margin-bottom:14px; }
.yapi-page-content p{ font-size:16px; line-height:1.7; color:var(--yapi-muted); margin-bottom:18px; }

/* Gutentor preservation rules */
.yapi-page-content .gutentor-section,
.yapi-page-content .gutentor-element {
  width: 100%;
  max-width: 100%; /* SIDE-SCROLL FIX: page-builder blocks can otherwise ship their own
                       fixed pixel widths that exceed the viewport on smaller screens */
}

/* ---- Booking/tracking sections on Ridez & Deliveriz pages ---- */
.yapi-section{ max-width:640px; margin:0 auto; padding:56px 24px; }
.yapi-section-card{
  background:#fff; border-radius:24px; padding:32px 28px;
  box-shadow:0 20px 60px rgba(10,25,47,.08), 0 8px 24px rgba(0,0,0,.04);
}
.yapi-section-heading{ text-align:center; margin-bottom:24px; }
.yapi-section-heading h2{ font-size:24px; color:var(--yapi-navy); margin:0 0 8px; }
.yapi-section-heading p{ font-size:14px; color:var(--yapi-muted); margin:0; }

/* Deliveriz plugin shortcode fields reuse .dlv-* classes from its own
   stylesheet — this just makes the surrounding card/typography match. */
.yapi-section-card .dlv-mode-toggle .dlv-mode-btn{ font-family:'Inter',sans-serif; }

/* ---- Contact page ---- */
.yapi-contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; max-width:960px; margin:0 auto; padding:56px 24px; min-width:0; }
.yapi-contact-info{ min-width:0; }
.yapi-contact-info h2{ font-size:24px; color:var(--yapi-navy); margin:0 0 14px; }
.yapi-contact-info p{ color:var(--yapi-muted); line-height:1.7; margin:0 0 20px; overflow-wrap:break-word; }
.yapi-contact-detail{ display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:15px; color:var(--yapi-text); overflow-wrap:break-word; min-width:0; }
.yapi-contact-form{ min-width:0; }
.yapi-contact-form .yapi-fg .input-wrap{ background:var(--yapi-field-bg); }
@media (max-width:780px){ .yapi-contact-grid{ grid-template-columns:1fr; } }

/* ---- About page stats/values reuse ---- */
.yapi-values{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; max-width:900px; margin:0 auto; padding:0 24px 56px; min-width:0; }
.yapi-value-card{ background:#fff; border-radius:18px; padding:24px; box-shadow:0 10px 30px rgba(10,25,47,.06); text-align:center; min-width:0; }
.yapi-value-card .icon{ font-size:28px; margin-bottom:10px; }
.yapi-value-card h3{ font-size:16px; color:var(--yapi-navy); margin:0 0 6px; }
.yapi-value-card p{ font-size:13.5px; color:var(--yapi-muted); margin:0; line-height:1.5; overflow-wrap:break-word; }
@media (max-width:780px){ .yapi-values{ grid-template-columns:1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.yapi-footer{ border-top:1px solid rgba(0,0,0,.04); padding:24px 24px 32px; background:#fff; margin-top:auto; }
.yapi-footer-inner{ max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.yapi-footer-text{ font-size:14px; color:#7a7a9a; }
.yapi-footer-links{ display:flex; gap:24px; flex-wrap:wrap; }
.yapi-footer-links a{ text-decoration:none; font-size:14px; color:#4a4a6a; font-weight:500; transition:color .2s ease; }
.yapi-footer-links a:hover{ color:var(--yapi-navy); }
@media (max-width:640px){ .yapi-footer-inner{ flex-direction:column; text-align:center; } .yapi-footer-links{ justify-content:center; } }

/* ==========================================================================
   404
   ========================================================================== */
.yapi-404{ text-align:center; padding:100px 24px; max-width:520px; margin:0 auto; }
.yapi-404 h1{ font-size:72px; color:var(--yapi-navy); margin:0; }
.yapi-404 p{ color:var(--yapi-muted); margin:12px 0 24px; overflow-wrap:break-word; }

.yapi-fw-title{
	display:flex;
	align-items:center;
	gap:10px;
	font-size:15px;
	font-weight:700;
	color:#fff;
	margin:0 0 16px;
	text-transform:uppercase;
	letter-spacing:.04em;
}
.yapi-fw-icon{
	flex:0 0 auto;
	color:#E87722;
}
.yapi-fw-list{
	list-style:none;
	margin:0;
	padding:0;
	min-width:0; /* SIDE-SCROLL FIX: footer widget content is admin/user-entered and
                    can include long unbroken URLs or phone strings */
}
.yapi-fw-list li{
	margin-bottom:10px;
	font-size:14px;
	line-height:1.6;
	color:#94A3B8;
	overflow-wrap:break-word;
	word-break:break-word;
}
.yapi-fw-list li:last-child{
	margin-bottom:0;
}
.yapi-fw-list a{
	color:#94A3B8;
	text-decoration:none;
	transition:color .15s ease;
	overflow-wrap:break-word;
	word-break:break-word;
}
.yapi-fw-list a:hover{
	color:#fff;
}
.yapi-fw-text{
	font-size:14px;
	line-height:1.7;
	color:#94A3B8;
	margin:0 0 16px;
	overflow-wrap:break-word;
}

/* ==========================================================================
   GOOGLE REVIEWS SECTION (Repocean plugin wrapper)
   ========================================================================== */
.yapi-reviews{
	padding: 64px 24px;
	background: #F8FAFC;
	overflow-x: hidden; /* SIDE-SCROLL FIX: guards against any wide element injected by the
                            Repocean plugin's own markup/inline styles inside this section */
}
.yapi-reviews-inner{
	max-width: 1100px;
	margin: 0 auto;
}
.yapi-reviews-head{
	text-align: center;
	margin-bottom: 32px;
}
.yapi-reviews-head h2{
	font-size: 32px;
	font-weight: 800;
	color: var(--yapi-navy);
	margin: 0 0 8px;
}
.yapi-reviews-subtext{
	font-size: 15px;
	color: var(--yapi-muted);
	margin: 0;
	overflow-wrap: break-word;
}
@media (max-width: 640px){
	.yapi-reviews{ padding: 48px 20px; }
	.yapi-reviews-head h2{ font-size: 26px; }
}
/* ==========================================================================
   BOOKING WIDGET — LOCKED/BLURRED CTA STATE
   ========================================================================== */
.ys-cta-btn{
	transition: filter .25s ease, opacity .25s ease;
}
.ys-cta-btn--locked{
	filter: blur(0px);
	opacity: .30;
	pointer-events: none;
	user-select: none;
}
/* ==========================================================================
   CITY PAGE — Ride / Reserve / Courier services row
   ========================================================================== */
.yapi-city-services{max-width:1200px;margin:0 auto;padding:60px 24px}
.yapi-city-services h2{font-size:28px;margin-bottom:24px}
.yapi-city-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.yapi-city-service-card{background:#F8FAFC;border-radius:14px;padding:24px}
.yapi-city-service-card h3{margin:0 0 8px;font-size:18px}
.yapi-city-service-card p{color:#64748B;font-size:14px;margin:0 0 16px}
.yapi-city-btn{display:inline-block;background:#fff;border:1px solid #CBD5E1;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;color:#0F172A;text-decoration:none}
.yapi-city-btn:hover{background:#F1F5F9}
@media(max-width:800px){.yapi-city-services-grid{grid-template-columns:1fr}}

/* ==========================================================================
   HEADER — City Switcher Dropdown
   ========================================================================== */
.yapi-city-dropdown {
	position: relative;
	display: inline-block;
}

.yapi-city-pill {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #F1F5F9;
	border: none;
	border-radius: 20px;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 600;
	color: #0F172A;
	cursor: pointer;
}

.yapi-city-pill:hover {
	background: #E2E8F0;
}

/* Dropdown Menu replacing the Modal */
.yapi-city-dropdown-menu {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	background: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
	min-width: 180px;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	z-index: 999;
}

.yapi-city-dropdown-menu.is-active {
	display: block;
}

.yapi-city-dropdown-menu li a {
	display: block;
	padding: 8px 16px;
	color: #0F172A;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}

.yapi-city-dropdown-menu li a:hover {
	background: #F1F5F9;
}

.yapi-city-empty {
	padding: 8px 16px;
	color: #94A3B8;
	font-size: 13px;
}
/* ==========================================================================
   TOP BAR STYLES
   ========================================================================== */
.yapi-top-bar {
	background-color: #0F172A;
	color: #94A3B8;
	font-size: 13px;
	border-bottom: 1px solid #1E293B;
	padding: 09px 0;
}

.yapi-top-bar-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.yapi-top-bar-left span {
	font-weight: 600;
	letter-spacing: 0.5px;
	color: #E2E8F0;
}

.yapi-top-bar-right ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 20px;
}

.yapi-top-bar-right li a {
	color: #94A3B8;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: color 0.2s ease;
}

.yapi-top-bar-right li a:hover {
	color: #FFFFFF;
}

.yapi-top-icon {
	font-size: 14px;
}

/* Responsive adjustment */
@media (max-width: 768px) {
	.yapi-top-bar-left {
		display: none;
	}
	.yapi-top-bar-inner {
		justify-content: center;
	}
	.yapi-top-bar-right ul {
		gap: 12px;
		font-size: 12px;
	}
}
/* ============================================================
     BASE
     ============================================================ */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
    body.home {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    background: #0a0e14;
    color: #f8fafc;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }

  /* ============================================================
     CINEMATIC HERO
     ============================================================ */
  .cinematic {
  position: relative;
  height: 150vh;
  background: #000;
}

  .cinematic .sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── OPTION 2 & 3: Static background image ── */
  .cinematic .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* REPLACE THIS URL WITH YOUR OWN IMAGE */
    background-image: url('https://www.yapi.co.za/wp-content/uploads/2026/09/Yapi-Rides-Cape-Town2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: center;
    will-change: transform;
  }

  /* ── OPTION 1: Canvas (image sequence) — hidden by default ── */
  .cinematic canvas {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }
  .cinematic.use-canvas canvas { display: block; }
  .cinematic.use-canvas .hero-bg { display: none; }

  .cinematic .vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
      radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,0.75) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
  }

  .cinematic .overlay {
    position: relative;
    z-index: 3;
    text-align: center;
    width: 100%;
    max-width: 1100px;
    padding: 0 24px;
  }

  .reveal-line {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 30px));
    font-size: clamp(2.4rem, 7vw, 6rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.05;
    text-shadow: 0 4px 40px rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity 0.4s linear, transform 0.4s linear;
    width: 100%;
  }

  .reveal-line.accent {
    background: linear-gradient(135deg, #00b4d8 0%, #f77f00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .reveal-line .sub {
    display: block;
    font-size: clamp(0.85rem, 1.6vw, 1.2rem);
    font-weight: 500;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    margin-top: 18px;
    color: rgba(255,255,255,0.75);
    -webkit-text-fill-color: rgba(255,255,255,0.75);
    background: none;
  }

    /* Trust Pills */
  .badge-row {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 20px;
  }

  .pill {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    letter-spacing: 0.02em;
    /* ── Clickable additions ── */
    text-decoration: none;      /* no underline on <a> */
    cursor: pointer;            /* hand cursor */
    display: inline-flex;
    align-items: center;
    transition: all 0.25s ease;
  }

  /* Hover feedback so users know it's clickable */
  .pill:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(247,127,0,0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(247,127,0,0.2);
  }

  .pill-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
  }

  .pill-rating strong { color: #fa7b05; font-weight: 800; }
  .pill-rating em {
    font-style: normal;
    color: rgba(255,255,255,0.6);
    font-size: 0.72rem;
    font-weight: 500;
  }

  /* Scroll hint */
  .scroll-hint {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    font-size: 0.68rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
    animation: bounce 2s ease-in-out infinite;
    transition: opacity 0.4s;
  }
  .scroll-hint::after {
    content: '';
    display: block;
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,0.4);
    margin: 12px auto 0;
  }
  @keyframes bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 8px); }
  }

  /* Mobile CTA */
  .hero-cta-mobile {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: none;
    background: linear-gradient(135deg, #f77f00 0%, #d66400 100%);
    color: #fff;
    text-decoration: none;
    padding: 14px 32px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 12px 32px rgba(247,127,0,0.4);
    white-space: nowrap;
  }

  /* ============================================================
     STATS
     ============================================================ */
  .stats {
    background: #0a0e14;
    padding: 100px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .stat { text-align: center; }

  .stat .num {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 900;
    background: linear-gradient(135deg, #000436 0%, #f77f00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .stat .label {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
  }

  /* ============================================================
     FLEET
     ============================================================ */
  .fleet { background: #0d1117; padding: 120px 24px; }
  .fleet-inner { max-width: 1200px; margin: 0 auto; }

  .section-tag {
    font-size: 0.72rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #f77f00;
    font-weight: 700;
    margin-bottom: 16px;
  }

  .section-title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 20px;
    max-width: 700px;
  }

  .section-desc {
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.7;
    max-width: 640px;
    margin-bottom: 60px;
  }

  .fleet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
  }

  .fleet-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(252,252,252,0.08);
    border-radius: 24px;
    padding: 36px 32px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .fleet-card:hover {
    border-color: rgba(247,127,0,0.08);
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(247,127,0,0.08);
  }

  .fleet-tag {
    display: inline-block;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #f77f00;
    font-weight: 700;
    margin-bottom: 20px;
  }

  .fleet-card h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: 8px; letter-spacing: -0.02em; }
  .fleet-model { color: #94a3b8; font-size: 0.9rem; margin-bottom: 24px; }
  .fleet-card .desc { color: #cbd5e1; font-size: 0.92rem; line-height: 1.7; margin-bottom: 28px; }

  .fleet-specs {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  /* Offset for sticky header when scrolling to anchors */
html { 
    scroll-behavior: smooth; }
    
.fleet {
  scroll-margin-top: 80px;
}

  .spec { display: flex; justify-content: space-between; font-size: 0.85rem; }
  .spec span:first-child {
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }
  .spec span:last-child { color: #f8fafc; font-weight: 600; }

  /* ============================================================
     CTA SPLIT — Booking widget (left) + text (right)
     ============================================================ */
  .cta-split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
  }

  .cta-widget {
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.3);
  }

  .cta-copy .section-title { max-width: 100%; }
  .cta-copy .section-desc  { max-width: 100%; margin-bottom: 0; }

  /* Stack on tablet/mobile */
  @media (max-width: 900px) {
    .cta-split {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .cta-widget { padding: 24px; }
  }
  /* ============================================================
     VALUES — 2x2 grid
     ============================================================ */
  .values { background: #0a0e14; padding: 120px 24px; }
  .values-inner { max-width: 1100px; margin: 0 auto; }

  .values-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 60px;
  }

  .value-card {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 24px;
    padding: 36px 32px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 22px;
    align-items: start;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .value-card:hover {
    border-color: rgba(247,127,0,0.25);
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(247,127,0,0.08);
  }

  .value-num {
    font-size: 1.8rem;
    font-weight: 900;
    background: linear-gradient(135deg, #000436 0%, #f77f00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
    line-height: 1;
  }

  .value-content h3 {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
    line-height: 1.3;
  }

  .value-content p {
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1.7;
  }

  /* Stack to single column on mobile */
  @media (max-width: 768px) {
    .values-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
    .value-card { grid-template-columns: 48px 1fr; gap: 16px; padding: 28px 24px; }
    .value-num  { font-size: 1.4rem; }
  }
  /* ============================================================
     REVIEWS
     ============================================================ */
  .reviews { background: #0d1117; padding: 120px 24px; }
  .reviews-inner { max-width: 1200px; margin: 0 auto; }

  .reviews-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 60px;
  }

  .google-score {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 24px 32px;
    text-align: right;
    flex-shrink: 0;
  }

  .google-score .stars { color: #fbbf24; font-size: 1.4rem; letter-spacing: 2px; }
  .google-score .score {
    font-size: 2.2rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.1;
    margin: 8px 0 4px;
  }
  .google-score .sub { font-size: 0.78rem; color: #94a3b8; }
  .google-score .live { font-size: 0.7rem; color: #64748b; margin-top: 10px; letter-spacing: 0.08em; }

  .reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
  }

  .review-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(247,127,0,0.08);
    border-radius: 22px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: all 0.3s;
  }

  .review-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(247,127,0,0.08);
    transform: translateY(-4px);
  }

  .review-stars { color: #fbbf24; font-size: 1rem; letter-spacing: 2px; }
  .review-text { color: #cbd5e1; font-size: 0.92rem; line-height: 1.75; flex: 1; }

  .review-link {
    color: #cbd5e1;
    font-size: 0.8rem;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: color 0.2s;
  }
  .review-link:hover { color: #f77f00; }

  .review-author { padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.06); }
  .review-author .name { font-weight: 700; font-size: 0.9rem; color: #ffffff; }
  .review-author .when { font-size: 0.78rem; color: #64748b; margin-top: 3px; }

  /* ============================================================
     CTA
     ============================================================ */
  .cta {
    background: linear-gradient(135deg, #0a0e14 0%, #0d1a2b 100%);
    padding: 140px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(0,180,216,0.15) 0%, transparent 50%);
    pointer-events: none;
  }

  .cta-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
  .cta h2 {
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 20px;
  }
  .cta p { color: #94a3b8; font-size: 1.05rem; line-height: 1.7; margin-bottom: 44px; }

  .cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #f77f00 0%, #d66400 100%);
    color: #ffffff;
    text-decoration: none;
    padding: 18px 44px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.02em;
    box-shadow: 0 16px 48px rgba(247,127,0,0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .cta-btn:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(247,127,0,0.55); }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 768px) {
    .cinematic { height: 120vh; }
    .reveal-line { font-size: clamp(1.8rem, 9vw, 3rem); }
    .badge-row { bottom: 110px; gap: 8px; }
    .pill { padding: 8px 16px; font-size: 0.72rem; }
    .pill-rating em { display: none; }
    .hero-cta-mobile { display: none; }
    .scroll-hint { display: none; }
    .value-row { grid-template-columns: 60px 1fr; gap: 20px; padding: 36px 0; }
    .value-num { font-size: 1.5rem; }
    .google-score { text-align: left; width: 100%; }
  }