/* Zovya Travels — Footer + global-blocks stylesheet (Phase 2).
   Source: template/frontend.php §8 (site footer) + theme tokens.
   Depends on header-style.css tokens + .btn-gold/.btn-whatsapp (always linked together).
   Covers blocks 06 Reviews, 06b Inquiry, 07 FAQs, 08 Updates, 09 Lead CTA, 10 Footer, 11 Copyright. */

/* Shared section rhythm + headings */
.ftr-block { padding: 64px 0; border-top: 1px solid var(--color-border-dark); }
.ftr-eyebrow {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 8px;
  text-align: center;
}
.ftr-block h2, .ftr-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.16;
  color: var(--color-text-on-dark);
  margin: 0 0 12px;
  text-align: center;
}
.ftr-sub { font-size: 15px; color: var(--color-text-on-dark-2); max-width: 62ch; margin: 0 0 24px; }
.ftr-sub-center { font-size: 15px; color: var(--color-text-on-dark-2); max-width: 62ch; margin: 0 auto 26px; text-align: center; }

/* 06. Reviews (renderer paints its own cards; we frame heading + spacing) */
.ftr-reviews .zovrev h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  color: var(--color-text-on-dark);
  margin-bottom: 10px;
  text-align: center;
}

/* 06b. Inquiry (global lead form, id="inquiry") — luxe gradient panel + ivory form card,
   stands out between flat dark Reviews and the light FAQ band. Copy left, form right. */
.ftr-inquiry {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background:
    radial-gradient(900px 420px at 50% -80px, rgba(201, 168, 76, 0.16), transparent 70%),
    linear-gradient(180deg, #10182B 0%, #0B0F1A 100%);
  border-top: 1px solid rgba(201, 168, 76, 0.25);
}
/* Slideshow: same images + same crossfade language as the home hero (18s/3, 12s/2, static/1) */
.inq-bg-slider { position: absolute; inset: 0; z-index: 0; }
.inq-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.08);
  animation: inqSlideFade3 18s infinite;
}
.inq-n2 .inq-slide { animation-name: inqSlideFade2; animation-duration: 12s; }
.inq-slide.single { opacity: 0.85; transform: none; animation: none; }
@keyframes inqSlideFade3 {
  0% { opacity: 0; transform: scale(1.08); }
  8% { opacity: 0.85; }
  33% { opacity: 0.85; }
  41% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; }
}
@keyframes inqSlideFade2 {
  0% { opacity: 0; transform: scale(1.08); }
  12% { opacity: 0.85; }
  50% { opacity: 0.85; }
  62% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; }
}
.inq-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11, 15, 26, 0.78) 0%, rgba(11, 15, 26, 0.86) 50%, rgba(11, 15, 26, 0.94) 100%);
}
.ftr-inquiry .container-wide { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .inq-slide { animation: none; }
  .inq-slide:first-child { opacity: 0.85; transform: none; }
}
/* CTA slideshow: same hero images with dark blue overlay */
.ftr-cta-slide { position: relative; overflow: hidden; }
.cta-bg-slider { position: absolute; inset: 0; z-index: 0; }
.cta-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.08);
  animation: ctaSlideFade3 18s infinite;
}
.cta-slide.single { opacity: 0.85; transform: none; animation: none; }
@keyframes ctaSlideFade3 {
  0% { opacity: 0; transform: scale(1.08); }
  8% { opacity: 0.85; }
  33% { opacity: 0.85; }
  41% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; }
}
.cta-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11, 15, 26, 0.82) 0%, rgba(11, 15, 26, 0.90) 50%, rgba(11, 15, 26, 0.96) 100%);
}
.ftr-cta-slide .container-wide { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .cta-slide { animation: none; }
  .cta-slide:first-child { opacity: 0.85; transform: none; }
}
.inq-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
}
.inq-copy .ftr-eyebrow { text-align: left; }
.ftr-inquiry h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.16;
  color: var(--color-text-on-dark);
  margin: 0 0 12px;
  text-align: left;
}
.inq-sub { font-size: 15px; line-height: 1.65; color: var(--color-text-on-dark-2); max-width: 46ch; margin: 0 0 22px; }
.inq-ticks { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.inq-ticks li { display: flex; align-items: center; gap: 10px; color: var(--color-text-on-dark); font-weight: 600; font-size: 14.5px; }
.inq-ticks i { color: var(--color-gold); font-size: 16px; }
.inq-alt { font-size: 14px; color: var(--color-text-on-dark-2); margin: 0 0 12px; }
.ftr-inquiry .inq-actions { justify-content: flex-start; }
.inq-card {
  background: #FFFDF7;
  color: var(--color-navy);
  border-radius: var(--radius-xl);
  border-top: 4px solid var(--color-gold);
  padding: 32px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  min-width: 0;
}
.inq-card .fb-form label { color: var(--color-navy); }
/* modern-web-guidance "forms": 16px inputs (no iOS zoom), 48px submit target, brand accent */
.ftr-inquiry .fb-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
.ftr-inquiry .fb-form select,
.ftr-inquiry .fb-form textarea { font-size: 16px; }
.ftr-inquiry .fb-form { accent-color: var(--color-gold); color-scheme: light; }
.ftr-inquiry .fb-form .fb-submit { min-height: 48px; }
.ftr-inquiry .fb-form input:focus-visible,
.ftr-inquiry .fb-form select:focus-visible,
.ftr-inquiry .fb-form textarea:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }
/* Inquiry form layout: 2-col desktop (dense flow pairs Name + Phone), 1-col mobile/tablet.
   Radio group + message + submit always full-row; options inline with aligned input+text. */
.ftr-inquiry .fb-form .rendered-form { grid-auto-flow: dense; }
.ftr-inquiry .fb-form .rendered-form > * { grid-column: span 6; }
.ftr-inquiry .fb-form .rendered-form div:has(.radio-group),
.ftr-inquiry .fb-form .rendered-form div:has(textarea) { grid-column: span 12; }
.ftr-inquiry .fb-form .rendered-form .form-group { margin-bottom: 0; }
.ftr-inquiry .fb-form .rendered-form .formbuilder-required { color: #DC2626; }
.ftr-inquiry .fb-form .rendered-form .radio-group {
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 28px;
}
.ftr-inquiry .fb-form .rendered-form .radio-group .radio,
.ftr-inquiry .fb-form .rendered-form .radio-group .formbuilder-radio {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
}
.ftr-inquiry .fb-form .rendered-form .radio-group input[type=radio] {
  margin: 0; width: 20px; height: 20px; flex: none;
}
.ftr-inquiry .fb-form > .fb-submit { width: 100%; }
@media (max-width: 900px) {
  .ftr-inquiry .fb-form .rendered-form { grid-auto-flow: row; }
  .ftr-inquiry .fb-form .rendered-form > * { grid-column: span 12; }
}

/* 07. FAQs — light surface band matching Top Picks (bg-light, navy ink) */
.ftr-faqs {
  background-color: var(--color-bg-light);
  border-top-color: var(--color-border-light);
}
.ftr-faqs h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  color: var(--color-navy);
  margin-bottom: 10px;
  text-align: center;
}
.ftr-faqs .ftr-sub-center { color: var(--color-navy-muted); }
.ftr-faqs details {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  margin-bottom: 12px;
  overflow: hidden;
  transition: background-color 300ms ease, border-color 300ms ease;
}
.ftr-faqs summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-navy);
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ftr-faqs summary::-webkit-details-marker { display: none; }
.ftr-faqs summary::after {
  content: "+";
  color: var(--color-gold-muted);
  font-size: 20px; font-weight: 700; line-height: 1;
  flex-shrink: 0;
}
.ftr-faqs details[open] summary::after { content: "–"; }
.ftr-faqs details[open] { border-color: var(--color-gold); background: #FFFFFF; }
.ftr-faqs details[open] summary, .ftr-faqs details[open] summary::after { color: var(--color-navy); }
.ftr-faqs details[open] .faq-a > p { color: var(--color-navy-muted); }
.ftr-faqs details p, .ftr-faqs details .faq-a > p {
  padding: 0 18px;
  font-size: 14px;
  color: var(--color-navy-muted);
  line-height: 1.65;
  margin: 0;
}
/* Smooth 300ms open/close (grid-rows technique animates both directions) */
.ftr-faqs .faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease;
}
.ftr-faqs details[open] .faq-a { grid-template-rows: 1fr; }
.ftr-faqs .faq-a > p {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  padding-bottom: 0;
  transition: opacity 300ms ease, padding-bottom 300ms ease;
}
.ftr-faqs details[open] .faq-a > p { opacity: 1; padding-bottom: 16px; }

/* 08. Latest Updates — white surface band matching How Booking Works */
.ftr-updates {
  background-color: #FFFFFF;
  border-top-color: var(--color-border-light);
}
.ftr-updates .ftr-eyebrow { color: var(--color-gold-muted); }
.ftr-updates h2 { color: var(--color-navy); }
.ftr-updates .ftr-sub-center { color: var(--color-navy-muted); }
.ftr-updates-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ftr-updates-list li {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ftr-updates-list li:hover { border-color: var(--color-gold); transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.ftr-updates-list a { display: block; color: var(--color-navy); }
.ftr-updates-list a img { display: block; width: 100%; height: 170px; object-fit: cover; }
.ftr-updates-list .ftr-updates-title { display: block; padding: 16px 18px 4px; font-weight: 700; font-size: 15.5px; line-height: 1.5; transition: color 0.2s ease; }
.ftr-updates-list li:hover .ftr-updates-title { color: var(--color-gold-muted); }
.ftr-updates-list .ftr-updates-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0 18px;
  margin-bottom: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-navy-muted);
}
.ftr-updates-list .ftr-updates-date { display: block; padding: 0 18px 16px; font-size: 12.5px; color: var(--color-navy-muted); }
.ftr-center-actions { text-align: center; margin-top: 26px; }

/* 09. Lead Gen CTA */
.ftr-cta-card {
  background: linear-gradient(135deg, rgba(26, 34, 54, 0.95) 0%, rgba(11, 15, 26, 0.98) 100%);
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius-xl);
  padding: 48px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 35px rgba(201, 168, 76, 0.12);
}
.ftr-cta-card h2 { margin-bottom: 12px; }
.ftr-cta-card p { color: var(--color-text-on-dark-2); margin: 0 auto 26px; max-width: 52ch; }
.ftr-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* 10. Site Footer (template §8) */
.site-footer {
  background-color: var(--color-bg-dark);
  border-top: 1px solid var(--color-border-dark);
  color: var(--color-text-on-dark-2);
  padding: 60px 0 30px;
  font-size: 13.5px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 30% 40% 30%;
  gap: 36px;
  margin-bottom: 40px;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 700;
  color: var(--color-text-on-dark);
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
.footer-col p { line-height: 1.65; margin-bottom: 10px; }
.footer-col p strong { color: var(--color-text-on-dark); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 8px; min-width: 0; }
/* Footer menu auto-columns: count adapts to quantity + width (never one long line) */
.footer-col > .footer-links { columns: 105px 2; column-gap: 20px; }
.footer-col > .footer-links li { break-inside: avoid; }
.footer-links a { color: var(--color-text-on-dark-2); transition: color 0.2s ease; overflow-wrap: anywhere; }
.footer-links a:hover { color: var(--color-gold); }
.footer-brand-logo { height: 42px; width: auto; object-fit: contain; display: block; margin-bottom: 16px; }
.ftr-assist-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
/* 11. Copyright */
.footer-bottom {
  border-top: 1px solid rgba(201, 168, 76, 0.15);
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  font-size: 12px;
  color: var(--color-text-on-dark-3);
}

/* Footer responsive */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .ftr-updates-list { grid-template-columns: 1fr 1fr; }
  .inq-grid { grid-template-columns: 1fr; gap: 32px; }
  .inq-copy .ftr-eyebrow, .ftr-inquiry h2 { text-align: center; }
  .inq-sub { margin-inline: auto; text-align: center; }
  .inq-ticks { align-items: center; }
  .inq-alt { text-align: center; }
  .ftr-inquiry .inq-actions { justify-content: flex-start; }
}
@media (max-width: 768px) {
  .ftr-block { padding: 48px 0; }
  .ftr-inquiry { padding: 96px 0; }
  .site-footer { padding: 45px 0 96px; } /* clearance for sticky bottom bar */
  .ftr-cta-card { padding: 32px 20px; }
}
@media (max-width: 576px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .ftr-updates-list { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
  .ftr-cta-actions .btn-gold, .ftr-cta-actions .btn-whatsapp { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ftr-updates-list li { transition: none; }
}