/*
Theme Name: DNHA Transfer Classic
Author: DNHA
Version: 5.0.0
Text Domain: dnha-transfer-classic
*/

:root{
  --ink:#1a1a1a;
  --muted:#6b5d55;
  --paper:#f7f1ea;
  --paper2:#efe5db;
  --card:#ffffff;
  --line:rgba(255,255,255,.35);
  --shadow:0 16px 36px rgba(30,18,10,.22);
  --shadow2:0 10px 18px rgba(30,18,10,.18);
  --orange:#d97706;
  --orange2:#f59e0b;
  --brown:#3a2b22;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--ink);background:var(--paper)}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
.container{width:min(1140px,92vw);margin:0 auto}

/* Header */
.header{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(20,10,5,.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}
.brand-badge{width:36px;height:36px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#f97316)}
.nav{display:flex;gap:14px;align-items:center}
.nav a{padding:8px 10px;border-radius:12px;color:#4b403a;font-weight:700}
.nav a:hover{background:rgba(0,0,0,.05)}
.cta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lang{
  display:inline-flex;gap:10px;align-items:center;
  padding:9px 12px;border-radius:14px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.08);
}
.lang a{font-weight:900;color:#665a52}
.lang a.active{color:var(--ink)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:14px;font-weight:900;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.85);
}
.btn-primary{
  border-color:transparent;
  background:linear-gradient(180deg,var(--orange2),var(--orange));
  color:#fff;
  box-shadow:0 14px 28px rgba(217,119,6,.28);
}

/* HERO like the screenshot */
.hero{
  position:relative;
  min-height:420px;
  padding:24px 0 16px;
  color:#fff;
  background:#3b2b22;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(1.05);
  transform:scale(1.02);
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(36,23,16,.82) 0%, rgba(36,23,16,.56) 42%, rgba(36,23,16,.15) 78%, rgba(36,23,16,.10) 100%);
}
.hero-inner{position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:end}
.h1{font-size:44px;line-height:1.05;margin:0 0 8px;text-shadow:0 10px 20px rgba(0,0,0,.35)}
.h2sub{font-size:18px;opacity:.9;margin:0 0 14px}
.rating{
  display:inline-flex;gap:10px;align-items:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  padding:10px 12px;border-radius:14px;
  box-shadow:0 12px 24px rgba(0,0,0,.2);
}
.rating b{letter-spacing:.2px}
.hero-form{
  max-width:520px;
  background:rgba(255,255,255,.92);
  color:var(--ink);
  border-radius:20px;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.55);
  padding:14px 14px 12px;
}
.hero-car{
  position:absolute;
  right:calc((100vw - min(1140px,92vw))/2 - 40px);
  bottom:-12px;
  width:min(520px,46vw);
  opacity:.95;
  pointer-events:none;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.35));
}
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-car{position:relative;right:auto;bottom:auto;width:88vw;margin:10px auto 0}
  .h1{font-size:34px}
}

/* Sections */
.section{
  position:relative;
  padding:18px 0;
}
.section-warm{
  background:linear-gradient(180deg,var(--paper2),var(--paper));
}
.feature-row{
  margin-top:-18px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.feature{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:12px 14px;
  box-shadow:var(--shadow2);
  display:flex;gap:12px;align-items:center;
}
.feature .ico{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(180deg,#fff7ed,#ffedd5); border:1px solid rgba(217,119,6,.25)}
.feature b{display:block}
.feature span{display:block;color:var(--muted);font-size:13px;margin-top:2px}
@media(max-width:980px){.feature-row{grid-template-columns:1fr}}

/* Route cards */
.title-center{text-align:center;margin:10px 0 14px}
.title-center h2{margin:0;font-size:28px;color:var(--brown)}
.route-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.route{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow2);
}
.route .thumb{height:120px;background:#ddd;background-size:cover;background-position:center}
.route .body{padding:12px}
.route h3{margin:0 0 8px;font-size:14px;color:#3a2b22}
.route .prices{display:grid;grid-template-columns:1fr;gap:6px;color:#2d1f18;font-weight:800}
.route .prices div{display:flex;justify-content:space-between;gap:10px}
.route .btnwrap{padding:0 12px 12px}
.route .btn-primary{width:100%;justify-content:center}
@media(max-width:980px){.route-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.route-grid{grid-template-columns:1fr}}

/* Why us / testimonials */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.why{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:14px;
  box-shadow:var(--shadow2);
  text-align:center;
}
.avatar{width:64px;height:64px;border-radius:999px;margin:0 auto 8px;background:linear-gradient(135deg,#cbd5e1,#f1f5f9);border:2px solid rgba(255,255,255,.8)}
.stars{color:#f59e0b;font-weight:900;letter-spacing:1px}
@media(max-width:980px){.why-grid{grid-template-columns:1fr}}

/* CTA bar */
.hotline{
  margin:14px auto 0;
  display:inline-flex;gap:10px;align-items:center;
  padding:10px 14px;border-radius:14px;
  background:linear-gradient(180deg,var(--orange2),var(--orange));
  color:#fff;font-weight:900;
  box-shadow:0 14px 28px rgba(217,119,6,.28);
}

/* FAQ block */
.faq-wrap{
  background:linear-gradient(180deg, rgba(58,43,34,.92), rgba(58,43,34,.98));
  color:#fff;
  padding:18px 0 22px;
}
.faq-title{text-align:center;margin:6px 0 14px;font-size:24px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.faq-item{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  padding:10px 12px;
}
.faq-item summary{cursor:pointer;font-weight:900}
.faq-item p{margin:8px 0 0;opacity:.92}
.faq-btn{display:flex;justify-content:center;margin-top:12px}
@media(max-width:980px){.faq-grid{grid-template-columns:1fr}}

/* Footer */
.footer{
  background:#2b201a;color:rgba(255,255,255,.85);
  padding:18px 0;
}
.footer a{color:rgba(255,255,255,.9)}
.footer-nav{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.mobile-bar{display:none;position:fixed;bottom:10px;left:0;right:0;z-index:90}
.mobile-bar .inner{width:min(1140px,92vw);margin:0 auto;display:flex;gap:10px}
@media(max-width:980px){.nav{display:none}.mobile-bar{display:block}}

/* Booking form styling (match screenshot) */
.dnha-booking-form h2{margin:0 0 10px;font-size:18px}
.dnha-booking-form label{display:block;margin-top:10px;font-weight:900;color:#2d1f18}
.dnha-booking-form input,.dnha-booking-form select,.dnha-booking-form textarea{
  width:100%;padding:11px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.12);
  margin-top:6px;font:inherit;background:#fff
}

/* Mobile (iOS Safari) fix: prevent default blue text color on <select> */
.dnha-booking-form select{
  color:var(--ink);
  -webkit-text-fill-color:var(--ink);
}

.dnha-btn{
  width:100%;margin-top:12px;
  border:0;border-radius:14px;
  padding:12px 14px;
  font-weight:900;
  background:linear-gradient(180deg,var(--orange2),var(--orange));
  color:#fff;
  box-shadow:0 14px 28px rgba(217,119,6,.28);
  cursor:pointer;
}
.dnha-msg{margin-top:10px;color:#5b6b86}


/* Feature icon circle */
.feature-icon{
  width:90px;
  height:90px;
  margin:0 auto 15px auto;
  border-radius:50%;
  background:#f3f4f6;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
  overflow:hidden;
}
.feature-icon img{
  width:56px;
  height:56px;
  object-fit:contain;
  display:block;
}

/* v3.5: restore centered text */
.route h3{ text-align:center !important; }
.route .service-text,
.route .service,
.route p.service,
.route p{ text-align:center; }


/* v3.7: prices as 3-column boxed table (rows zebra), centered */
.route .body h3{ text-align:center !important; }
.route .prices.prices-table{
  margin-top:12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.85);
}
.route .prices.prices-table .prow{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  text-align:center;
  padding:10px 8px;
  border-bottom:1px solid rgba(0,0,0,.06);
  font-size:14px;
}
.route .prices.prices-table .prow:last-child{ border-bottom:0; }
.route .prices.prices-table .prow:nth-child(odd){ background:rgba(255,247,237,.70); }
.route .prices.prices-table .prow:nth-child(even){ background:rgba(255,255,255,.92); }
.route .prices.prices-table .c1{ font-weight:800; color:#2d1f18; }
.route .prices.prices-table .c2{ color:#334155; white-space:nowrap; }
.route .prices.prices-table .c3{ font-weight:900; color:#2d1f18; font-variant-numeric: tabular-nums; white-space:nowrap; }


/* v3.9: spacing between pricing box and CTA */
.route .prices.prices-table{ margin-bottom:14px; }
.route .btnwrap, .route .cta, .route a.btn, .route .btn-book{ margin-top:12px; }

.route .btn{ margin-top:12px; }


/* v4.1: show icons inside the 3 avatar circles (no admin upload needed) */
.why-grid .avatar {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 999px;
  background: #eef2f7;
  margin: 0 auto 14px auto;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}
.why-grid .avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 42px;
  height: 42px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.why-grid .why:nth-child(1) .avatar::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22#f59e0b%22%3E%3Cpath%20d=%22M5%2011l1-3h12l1%203v5h-1a2%202%200%2001-4%200H10a2%202%200%2001-4%200H5v-5z%22/%3E%3C/svg%3E"); }
.why-grid .why:nth-child(2) .avatar::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22#2563eb%22%3E%3Ccircle%20cx=%2212%22%20cy=%228%22%20r=%224%22/%3E%3Cpath%20d=%22M4%2022c0-4%204-6%208-6s8%202%208%206%22/%3E%3C/svg%3E"); }
.why-grid .why:nth-child(3) .avatar::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22#10b981%22%3E%3Cpath%20d=%22M13%202L3%2014h7v8l10-12h-7z%22/%3E%3C/svg%3E"); }


/* v4.2: render SVG inside avatar circles reliably */
.why-grid .avatar{
  display:flex;
  align-items:center;
  justify-content:center;
}
.why-grid .avatar svg{
  display:block;
}


/* Route title link */
.route-link{color:inherit;text-decoration:none;}
.route-link:hover{text-decoration:underline;}

/* Single route page */
.dnha-single-route .hero-title{margin:0 0 10px 0;}
.dnha-single-route .content{max-width:900px;margin:0 auto;padding:24px 0;}
.dnha-single-route .route-meta{color:var(--muted);margin-bottom:14px;}


.btn-submit {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}