/*
Theme Name: Al Rifai Umrah
Theme URI: https://alrifai.example
Author: Al Rifai
Author URI: https://alrifai.example
Description: قالب ووردبريس متكامل — تصميم فلات سريع بألوان موحدة (كحلي × ذهبي × واتساب أخضر)، RTL، صفحة واحدة، أداء عالي و SEO كامل.
Version: 6.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: al-rifai
*/

/* ============================================================
 * 1) DESIGN TOKENS
 * ============================================================ */
:root{
  /* Brand palette — Navy × Gold */
  --navy:#0f1d43;
  --navy-2:#152860;
  --navy-3:#1e3a7d;
  --navy-deep:#0a1430;

  --gold:#c9962f;
  --gold-2:#b8873a;
  --gold-3:#a1762c;
  --gold-soft:#fbf3df;

  /* WhatsApp unified green */
  --wa:#128c7e;
  --wa-hover:#0e6b60;

  /* Surfaces & ink */
  --bg:#f6f5f0;
  --bg-2:#eeece3;
  --card:#ffffff;
  --ink:#0a1024;
  --text:#1a2340;
  --muted:#5b6480;
  --muted-2:#7a8199;
  --border:#e6e0d0;
  --line:#e6e0d0;

  /* Shadows */
  --shadow-1:0 1px 2px rgba(15,29,67,.05), 0 3px 10px -4px rgba(15,29,67,.08);
  --shadow-2:0 6px 18px -8px rgba(15,29,67,.15);
  --shadow-3:0 14px 36px -12px rgba(15,29,67,.22);

  /* Radii */
  --r-sm:.6rem;
  --r-md:.9rem;
  --r-lg:1.25rem;
  --r-xl:1.5rem;

  /* Typography */
  --font-heading:'Cairo', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:'Tajawal', system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Font weight scale — used consistently across the site */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;
  --fw-black:900;

  /* Layout */
  --header-h:78px;
  --container-max:1240px;
  --container-narrow:860px;

  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:.28s;
}

/* ============================================================
 * 2) BASE
 * ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{
  font-family:var(--font-body);
  font-weight:var(--fw-regular);
  background:var(--bg);
  color:var(--text);
  direction:rtl;
  line-height:1.8;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:var(--fw-extrabold);
  line-height:1.3;
  color:var(--navy);
  letter-spacing:-.01em;
}
p{line-height:1.85}
::selection{background:var(--gold);color:#fff}

/* Arabic never gets uppercased or letter-spaced */
html[lang="ar"] *{text-transform:none !important}

.container{max-width:var(--container-max);margin-inline:auto;padding:0 1.25rem}
.container-narrow{max-width:var(--container-narrow);margin-inline:auto;padding:0 1.25rem}
.text-center{text-align:center}

/* ============================================================
 * 3) BUTTONS — unified motion & brand identity
 * ============================================================ */
.btn-gold,
.btn-outline-gold,
.btn-whatsapp,
.btn-call{
  font-family:var(--font-heading);
  font-weight:var(--fw-bold);
  font-size:1rem;
  padding:.9rem 1.75rem;
  border-radius:9999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  border:2px solid transparent;
  transition:background var(--dur) var(--ease),
             color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
  white-space:nowrap;
  letter-spacing:0;
}
.btn-gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-2);border-color:var(--gold-2);transform:translateY(-2px);box-shadow:0 8px 20px -8px rgba(201,150,47,.55)}

.btn-outline-gold{background:transparent;color:#fff;border-color:var(--gold);padding:.8rem 1.75rem}
.btn-outline-gold:hover{background:var(--gold);color:#fff;transform:translateY(-2px)}

.btn-whatsapp{background:var(--wa);color:#fff;border-color:var(--wa)}
.btn-whatsapp:hover{background:var(--wa-hover);border-color:var(--wa-hover);transform:translateY(-2px);box-shadow:0 8px 20px -8px rgba(18,140,126,.55)}
.btn-whatsapp .wa-icon{flex-shrink:0}

/* Tel links look like navy call buttons */
a[href^="tel:"],
.btn-call{
  background:var(--navy);color:#fff;border-color:var(--navy);
}
a[href^="tel:"]:hover,
.btn-call:hover{background:var(--navy-2);border-color:var(--navy-2);color:#fff;transform:translateY(-2px)}

/* ============================================================
 * 4) SECTIONS — symmetric layout defaults
 * ============================================================ */
.section{padding:5.5rem 0;position:relative}
.section-alt{background:var(--bg-2)}
.section-dark{background:var(--navy);color:#fff}
.section-dark h2,.section-dark h3{color:#fff}

/* All section containers center their intro, then let content align naturally */
.section .container,
.section .container-narrow{text-align:center}
.section .container > *,
.section .container-narrow > *{text-align:initial}
.section .container > .eyebrow,
.section .container > .section-title,
.section .container > .section-subtitle,
.section .container-narrow > .eyebrow,
.section .container-narrow > .section-title,
.section .container-narrow > .section-subtitle{text-align:center}

/* Eyebrow — unified branded chip */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  background:rgba(201,150,47,.10);
  color:var(--gold-3);
  border:1px solid rgba(201,150,47,.30);
  padding:.42rem 1rem;
  border-radius:9999px;
  font-family:var(--font-heading);
  font-weight:var(--fw-extrabold);
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:1.1rem;
  line-height:1;
}
.eyebrow::before{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 3px rgba(201,150,47,.18);
  display:inline-block;
}
.section-dark .eyebrow{
  background:rgba(255,255,255,.08);
  color:#f6d68a;
  border-color:rgba(255,255,255,.18);
}

/* Section titles */
.section-title{
  font-family:var(--font-heading);
  font-size:clamp(1.9rem, 3.8vw, 2.75rem);
  font-weight:var(--fw-black);
  color:var(--navy);
  text-align:center;
  position:relative;
  padding-bottom:1.25rem;
  margin-bottom:1.25rem;
  line-height:1.25;
}
.section-title::after{
  content:"";
  position:absolute;
  left:50%;bottom:0;
  transform:translateX(-50%);
  width:70px;height:3px;
  border-radius:3px;
  background:var(--gold);
}
.section-subtitle{
  text-align:center;
  color:var(--muted);
  max-width:680px;
  margin:0 auto 3.5rem;
  font-family:var(--font-body);
  font-weight:var(--fw-medium);
  font-size:1.05rem;
  line-height:1.85;
}
.section-title + *:not(.section-subtitle){margin-top:2.5rem}

/* ============================================================
 * 5) HEADER / NAVIGATION
 * ============================================================ */
.site-header{
  position:fixed;top:0;inset-inline:0;z-index:100;
  padding:.85rem 0;background:transparent;
  transition:background var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             padding var(--dur) var(--ease);
}
.site-header.scrolled{
  background:#fff;
  box-shadow:0 6px 20px -12px rgba(15,29,67,.25);
  padding:.5rem 0;
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  display:flex;align-items:center;
  justify-content:space-between;gap:1rem;
  position:relative;
}
.nav-wrap .brand,
.nav-wrap .nav-cta{flex:0 0 auto;z-index:2}

.brand{display:flex;align-items:center;gap:.75rem}
.brand-logo-circle{
  width:56px;height:56px;border-radius:9999px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.35);
  border:2px solid rgba(255,255,255,.9);
  flex-shrink:0;overflow:hidden;padding:5px;
  transition:transform var(--dur) var(--ease);
}
.brand-logo-circle img{width:100%;height:100%;object-fit:contain;border-radius:9999px}
.brand:hover .brand-logo-circle{transform:scale(1.05)}
.site-header.scrolled .brand-logo-circle{border-color:var(--border)}
.brand-text{display:flex;flex-direction:column;line-height:1.25;text-align:right}
.brand-name{
  font-family:var(--font-heading);
  font-weight:var(--fw-black);
  font-size:1.1rem;
  color:var(--gold);
}
.brand-sub{
  font-family:var(--font-heading);
  font-weight:var(--fw-semibold);
  font-size:.88rem;
  color:#fff;opacity:.92;
  margin-top:2px;
}
.site-header.scrolled .brand-name{color:var(--gold-2)}
.site-header.scrolled .brand-sub{color:var(--navy)}

.main-nav{display:flex;align-items:center;gap:.15rem;background:transparent;padding:0}
.main-nav a{
  font-family:var(--font-heading);
  font-weight:var(--fw-bold);
  font-size:.94rem;
  padding:.55rem 1rem;
  border-radius:9999px;
  color:#fff;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
  cursor:pointer;
  display:inline-flex;align-items:center;gap:.3rem;
}
.main-nav a:hover{background:rgba(255,255,255,.15)}
.site-header.scrolled .main-nav a{color:var(--navy)}
.site-header.scrolled .main-nav a:hover{background:var(--gold-soft);color:var(--gold-2)}

@media (min-width:960px){
  .main-nav{
    position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);
  }
}

/* Desktop CTA */
.nav-cta{
  font-family:var(--font-heading);
  font-weight:var(--fw-extrabold);
  font-size:.95rem;
  background:var(--gold);color:#fff;
  padding:.6rem 1.35rem;
  border-radius:9999px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
  white-space:nowrap;
  border:2px solid var(--gold);
}
.nav-cta:hover{background:var(--gold-2);border-color:var(--gold-2);transform:translateY(-2px);color:#fff}

.menu-toggle{
  display:none;font-size:1.6rem;color:#fff;
  width:44px;height:44px;border-radius:.6rem;
  align-items:center;justify-content:center;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.menu-toggle:hover{background:rgba(255,255,255,.15)}
.menu-toggle.is-open{transform:rotate(90deg)}
.site-header.scrolled .menu-toggle{color:var(--navy);background:rgba(15,29,67,.06)}

.mobile-nav{
  display:block;background:#fff;margin:.5rem 1rem 0;
  border-radius:1rem;padding:0 .75rem;
  box-shadow:var(--shadow-2);border:1px solid var(--line);
  max-height:0;overflow:hidden;opacity:0;transform:translateY(-8px);
  pointer-events:none;
  transition:max-height .4s var(--ease),
             opacity var(--dur) var(--ease),
             transform var(--dur) var(--ease),
             padding var(--dur) var(--ease);
}
.mobile-nav a{
  display:block;padding:.85rem 1rem;
  font-family:var(--font-heading);
  font-weight:var(--fw-bold);
  font-size:1rem;
  color:var(--navy);
  border-radius:.6rem;
  text-align:right;
}
.mobile-nav a:hover{background:var(--gold-soft);color:var(--gold-2)}
.mobile-nav a.nav-book{
  background:var(--gold);color:#fff;
  margin-top:.4rem;text-align:center;
  font-weight:var(--fw-extrabold);
}
.mobile-nav a.nav-book:hover{background:var(--gold-2);color:#fff}
.mobile-nav.open{max-height:600px;opacity:1;transform:translateY(0);padding:.75rem;pointer-events:auto}

@media (max-width:959px){
  .main-nav{display:none}
  .menu-toggle{display:inline-flex}
  .site-header .nav-wrap > .nav-cta{display:none}
}
@media (max-width:640px){
  .brand-logo-circle{width:48px;height:48px;padding:4px}
  .brand-name{font-size:1rem}
  .brand-sub{font-size:.85rem}
}

/* ============================================================
 * 6) HERO — enlarged, balanced, high-contrast
 * ============================================================ */
.hero{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;text-align:center;color:#fff;
  padding:calc(var(--header-h) + 2.5rem) 1rem 4.5rem;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg, rgba(10,20,48,.78) 0%, rgba(10,20,48,.68) 55%, rgba(10,20,48,.82) 100%);
}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero picture{display:contents}
.hero-content{
  position:relative;z-index:3;
  max-width:1040px;margin-inline:auto;
  animation:fadeInUp .7s var(--ease) both;
}

.hero-rating{
  display:inline-flex;align-items:center;gap:.7rem;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  padding:.55rem 1.1rem;border-radius:9999px;
  margin-bottom:1.5rem;
  font-size:.95rem;
  font-family:var(--font-heading);
  font-weight:var(--fw-semibold);
}
.hero-rating .stars{color:var(--gold);letter-spacing:2px}
.hero-rating strong{color:var(--gold);font-weight:var(--fw-extrabold)}
.hero-rating .rating-text{color:#fff}

/* Enlarged, dominant hero title */
.hero-title{
  font-family:var(--font-heading);
  font-weight:var(--fw-black);
  font-size:clamp(2.15rem, 5.6vw, 4.5rem);
  line-height:1.18;
  color:#fff;
  margin:.35rem 0 1.4rem;
  letter-spacing:-.015em;
  text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.28);
  display:flex;flex-direction:column;align-items:center;gap:.35em;
}
.hero-title__line{display:block;white-space:normal}
.hero-title__line--sub{
  font-size:.78em;
  font-weight:var(--fw-extrabold);
  color:#fff;
  opacity:.96;
}
.hl-city{
  color:var(--gold);
  display:inline-block;
  padding:0 .18em .12em;
  position:relative;
  font-weight:var(--fw-black);
  text-shadow:0 1px 0 rgba(0,0,0,.15);
}
.hl-city::after{
  content:"";
  position:absolute;left:2%;right:2%;bottom:-.14em;
  height:.34em;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'><path d='M2 6 Q 20 1 40 5 T 80 5 T 118 4' fill='none' stroke='%23c9962f' stroke-width='2.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-size:100% 100%;
  pointer-events:none;
}

.hero-sub{
  font-size:clamp(1.02rem, 1.6vw, 1.22rem);
  color:rgba(255,255,255,.94);
  max-width:720px;margin:0 auto 2rem;
  line-height:1.9;
  font-weight:var(--fw-medium);
}
.hero-buttons{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:2.25rem}

/* Feature chips — aligned with hero typography */
.hero-features{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:.7rem;
  margin:0 auto;max-width:880px;
  padding:0;list-style:none;
}
.hero-features li{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
  padding:.65rem 1rem;
  border-radius:9999px;
  font-family:var(--font-heading);
  font-weight:var(--fw-bold);
  font-size:clamp(.85rem, 1.1vw, .98rem);
  line-height:1.2;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
  white-space:nowrap;
}
.hero-features li:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.16);
  border-color:rgba(201,150,47,.55);
}
.hero-features .hf-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.35em;height:1.35em;border-radius:9999px;
  background:var(--gold);color:#0a1430;
  font-weight:var(--fw-black);font-size:.72em;
  flex-shrink:0;
}

/* ============================================================
 * 7) BOOKING FORM
 * ============================================================ */
.booking-card{
  background:#fff;
  border-radius:var(--r-xl);
  padding:2.25rem;
  border:1px solid var(--border);
  box-shadow:var(--shadow-2);
  position:relative;overflow:hidden;
  margin-inline:auto;
  max-width:760px;
}
.booking-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--gold);
}
.booking-card-title{
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:var(--fw-black);
  color:var(--navy);
  margin-bottom:.35rem;
  text-align:center;
}
.booking-card-sub{
  color:var(--muted);
  text-align:center;
  margin-bottom:1.5rem;
  font-weight:var(--fw-medium);
}
.booking-form{position:relative}
.form-row{display:grid;gap:1rem;margin-bottom:1rem}
.form-row.two{grid-template-columns:1fr}
@media (min-width:640px){.form-row.two{grid-template-columns:1fr 1fr}}
.form-group{display:flex;flex-direction:column}
.form-group label{
  font-family:var(--font-heading);
  font-weight:var(--fw-bold);
  font-size:.9rem;
  color:var(--navy);
  margin-bottom:.4rem;
}
.form-group input,
.form-group select,
.form-group textarea{
  font-family:var(--font-body);
  font-size:1rem;
  padding:.85rem 1rem;
  border:1.5px solid var(--border);
  border-radius:.7rem;
  background:#fff;
  color:var(--text);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width:100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,150,47,.18);
}
.form-submit{
  width:100%;justify-content:center;
  margin-top:.75rem;padding:1rem 1.5rem;font-size:1.05rem;
}
.form-note{
  text-align:center;
  font-size:.82rem;
  color:var(--muted);
  margin-top:.9rem;
}

/* ============================================================
 * 8) STATS — flat navy
 * ============================================================ */
.stats-section{padding:4.5rem 0;background:var(--navy);color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr);gap:1.5rem}}
.stat-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);
  padding:1.85rem 1rem;
  text-align:center;
  transition:transform var(--dur) var(--ease),
             background var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.stat-card:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,.10);
  border-color:rgba(201,150,47,.5);
}
.stat-num{
  font-family:var(--font-heading);
  font-weight:var(--fw-black);
  font-size:clamp(2rem,4vw,2.85rem);
  color:var(--gold);
  margin-bottom:.35rem;line-height:1;
}
.stat-lbl{
  color:rgba(255,255,255,.9);
  font-size:.98rem;
  font-weight:var(--fw-semibold);
}

/* ============================================================
 * 9) CARDS & PACKAGES
 * ============================================================ */
.card{
  background:var(--card);
  border-radius:var(--r-xl);
  padding:1.95rem;
  box-shadow:var(--shadow-1);
  border:1px solid var(--line);
  transition:transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
  height:100%;
  display:flex;flex-direction:column;
  position:relative;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-2);
  border-color:rgba(201,150,47,.35);
}

.packages-grid{display:grid;gap:1.5rem;grid-template-columns:1fr;text-align:right}
@media (min-width:640px){.packages-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.packages-grid-4{grid-template-columns:repeat(4,1fr)}}

.pkg-card{overflow:hidden}
.pkg-card.is-popular{
  border:2px solid var(--gold);
  transform:translateY(-4px);
  box-shadow:var(--shadow-2);
}
.pkg-badge{
  position:absolute;top:1rem;left:1rem;
  background:var(--gold);color:#fff;
  font-family:var(--font-heading);
  font-weight:var(--fw-extrabold);
  font-size:.75rem;
  padding:.38rem .9rem;
  border-radius:9999px;
  box-shadow:0 4px 10px -3px rgba(201,150,47,.5);
}
.pkg-icon{
  width:60px;height:60px;border-radius:1rem;
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;
  background:var(--gold);color:#fff;
  margin-bottom:1.15rem;
}
.pkg-icon .ic{width:36px;height:36px;color:#fff}
.pkg-title{
  font-size:1.3rem;
  color:var(--navy);
  margin-bottom:.6rem;
  font-weight:var(--fw-black);
}
.pkg-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.pkg-tag{
  padding:.32rem .82rem;
  border-radius:9999px;
  background:var(--gold-soft);
  color:var(--gold-3);
  font-family:var(--font-heading);
  font-weight:var(--fw-bold);
  font-size:.82rem;
  border:1px solid rgba(201,150,47,.28);
  display:inline-flex;align-items:center;gap:.35rem;
}
.pkg-tag .ic{width:.95em;height:.95em;color:var(--gold-3)}
.pkg-features{margin-bottom:1.5rem;flex:1}
.pkg-features li{
  display:flex;align-items:center;gap:.7rem;
  padding:.45rem 0;
  color:var(--text);
  font-weight:var(--fw-medium);
  font-size:.96rem;
}
.pkg-features li::before{
  content:"\2713";
  width:22px;height:22px;flex-shrink:0;border-radius:50%;
  background:var(--gold);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);
  font-size:.72rem;
  font-weight:var(--fw-black);
  line-height:1;
  box-shadow:0 1px 2px rgba(15,29,67,.12);
}
.pkg-features li > .ic{display:none}
.pkg-cta-wrap{margin-top:auto}
.pkg-cta{width:100%;justify-content:center}

/* ============================================================
 * 10) WHY US
 * ============================================================ */
.why-grid{display:grid;gap:1.5rem;grid-template-columns:1fr;text-align:right}
@media (min-width:640px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.why-grid{grid-template-columns:repeat(3,1fr)}}
.why-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:2rem 1.7rem;
  transition:transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.why-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-2);
  border-color:rgba(201,150,47,.4);
}
.why-icon{
  width:58px;height:58px;
  border-radius:.9rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--navy);color:var(--gold);
  font-size:1.5rem;
  margin-bottom:1.1rem;
}
.why-icon .ic{width:32px;height:32px;color:var(--gold)}
.why-card h3{
  font-size:1.15rem;
  color:var(--navy);
  margin-bottom:.55rem;
  font-weight:var(--fw-extrabold);
}
.why-card p{
  color:var(--muted);
  font-size:.96rem;
  line-height:1.9;
  font-weight:var(--fw-regular);
}

/* ============================================================
 * 11) JOURNEY TIMELINE
 * ============================================================ */
.journey-timeline{
  display:grid;gap:1.25rem;grid-template-columns:1fr;
  max-width:1120px;margin:0 auto;
  text-align:right;position:relative;
}
@media (min-width:640px){.journey-timeline{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.journey-timeline{grid-template-columns:repeat(4,1fr)}}

.jt-step{
  position:relative;
  background:#fff;
  border-radius:var(--r-xl);
  padding:1.75rem 1.4rem 1.5rem;
  border:1px solid var(--line);
  box-shadow:var(--shadow-1);
  transition:transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
  display:flex;flex-direction:column;
}
.jt-step:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-2);
  border-color:rgba(201,150,47,.35);
}
.jt-head{
  display:flex;align-items:center;gap:.75rem;
  margin-bottom:.9rem;padding-bottom:.9rem;
  border-bottom:1px dashed var(--line);
}
.jt-num{
  width:44px;height:44px;
  border-radius:12px;
  background:var(--navy);color:var(--gold);
  font-family:var(--font-heading);
  font-weight:var(--fw-black);
  font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.jt-ic{
  display:inline-flex;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  border-radius:.75rem;
  background:var(--gold-soft);
  border:1px solid rgba(201,150,47,.28);
  flex-shrink:0;
}
.jt-ic .ic{width:26px;height:26px;color:var(--gold-3)}
.jt-title{
  font-size:1.06rem;
  color:var(--navy);
  font-weight:var(--fw-extrabold);
  margin-bottom:.4rem;
}
.jt-desc{
  color:var(--muted);
  font-size:.93rem;
  line-height:1.8;
}

/* ============================================================
 * 12) HOTELS & BUSES GRID
 * ============================================================ */
.hotels-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:768px){.hotels-grid{grid-template-columns:repeat(4,1fr);gap:1.25rem}}
.hotel{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  aspect-ratio:4/3;
  box-shadow:var(--shadow-1);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hotel:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.hotel img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
.hotel:hover img{transform:scale(1.06)}

.bus-features{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
  max-width:820px;margin:0 auto 2.5rem;
}
.bus-features li{
  display:inline-flex;align-items:center;gap:.4rem;
  background:#fff;border:1px solid var(--border);
  padding:.55rem 1rem;
  border-radius:9999px;
  font-family:var(--font-heading);
  font-weight:var(--fw-bold);
  font-size:.9rem;
  color:var(--navy);
}
.bus-features li .ic{width:1em;height:1em;color:var(--gold-3)}

/* ============================================================
 * 13) REVIEWS
 * ============================================================ */
.reviews-grid{display:grid;gap:1.5rem;grid-template-columns:1fr;text-align:right}
@media (min-width:768px){.reviews-grid{grid-template-columns:repeat(3,1fr)}}
.review-card{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:1.95rem;
  box-shadow:var(--shadow-1);
  position:relative;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.review-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.review-stars{
  display:flex;gap:.18rem;
  color:var(--gold);
  margin-bottom:.8rem;
  font-size:1.05rem;
}
.review-stars .ic{width:1.05em;height:1.05em;color:var(--gold)}
.review-text{
  color:var(--text);
  font-size:1rem;
  line-height:1.95;
  margin-bottom:1.2rem;
  font-weight:var(--fw-medium);
}
.review-author{display:flex;align-items:center;gap:.75rem}
.review-avatar{
  width:44px;height:44px;
  border-radius:50%;
  background:var(--navy);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);
  font-weight:var(--fw-black);
  font-size:1.1rem;
}
.review-author strong{
  display:block;
  color:var(--navy);
  font-weight:var(--fw-extrabold);
}
.review-city{font-size:.86rem;color:var(--muted)}

/* ============================================================
 * 14) FAQ
 * ============================================================ */
.faq-list{display:flex;flex-direction:column;gap:.75rem;text-align:right}
.faq-item{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq-item[open]{border-color:var(--gold);box-shadow:var(--shadow-1)}
.faq-item summary{
  padding:1.15rem 1.35rem;
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--font-heading);
  font-weight:var(--fw-bold);
  font-size:1rem;
  color:var(--navy);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-plus{
  width:28px;height:28px;
  border-radius:50%;
  background:var(--gold-soft);
  color:var(--gold-3);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.2rem;
  font-weight:var(--fw-extrabold);
  flex-shrink:0;
  transition:transform var(--dur) var(--ease),
             background var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.faq-item[open] .faq-plus{transform:rotate(45deg);background:var(--gold);color:#fff}
.faq-answer{
  padding:0 1.35rem 1.2rem;
  color:var(--muted);
  line-height:1.95;
  font-weight:var(--fw-regular);
}

/* ============================================================
 * 15) FINAL CTA
 * ============================================================ */
.final-cta{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  padding:5rem 0 4rem;
  color:#fff;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.final-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(201,150,47,.10), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(201,150,47,.08), transparent 55%);
}
.final-cta > .container{position:relative;z-index:1}
.final-cta h2{
  color:#fff;
  font-size:clamp(1.85rem, 3.8vw, 2.65rem);
  margin-bottom:.9rem;
  font-weight:var(--fw-black);
}
.final-cta h2::after{
  content:"";display:block;width:64px;height:3px;
  background:var(--gold);border-radius:3px;
  margin:1rem auto 0;
}
.final-cta p{
  max-width:640px;margin:0 auto 2rem;
  color:rgba(255,255,255,.85);
  font-size:1.05rem;line-height:1.9;
  font-weight:var(--fw-medium);
}
.cta-buttons{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}

/* ============================================================
 * 16) FOOTER — minimal, centered, flat navy
 * ============================================================ */
.site-footer-minimal{
  background:var(--navy-deep);
  padding:2.25rem 0 1.75rem;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
  color:rgba(255,255,255,.85);
}
.site-footer-minimal .footer-bottom{
  max-width:var(--container-max);
  margin-inline:auto;
  padding:0 1.25rem;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:.6rem;
}
.footer-bottom-logo{
  display:inline-flex;width:60px;height:60px;
  background:#fff;border-radius:50%;
  padding:6px;margin-bottom:.35rem;
}
.footer-bottom-logo img{
  width:100%;height:100%;
  object-fit:contain;border-radius:50%;
}
.footer-bottom-name{
  font-family:var(--font-heading);
  font-weight:var(--fw-extrabold);
  font-size:1.08rem;
  color:#fff;
  margin:0;
}
.footer-bottom-copy{
  color:rgba(255,255,255,.6);
  font-size:.86rem;
  margin:0;
}

/* ============================================================
 * 17) FLOATING BUTTONS — WhatsApp LEFT, Call RIGHT
 * ============================================================ */
.float-btn{
  position:fixed;bottom:1.5rem;
  width:58px !important;height:58px !important;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;z-index:99;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.35);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.float-btn:hover{transform:scale(1.08);box-shadow:0 12px 26px -6px rgba(0,0,0,.45)}
.float-btn:active{transform:scale(.96)}
.float-btn > svg,
.float-btn > .ic{
  width:26px !important;height:26px !important;
  display:block;position:relative;z-index:2;
  fill:#fff;color:#fff;
}
.float-btn > .wa-icon{
  width:30px !important;height:30px !important;
  display:block;position:relative;z-index:2;
  fill:#fff;
}
.float-call{right:1.25rem;background:var(--navy)}
.float-call:hover{background:var(--navy-2)}
.float-wa{left:1.25rem;background:var(--wa)}
.float-wa:hover{background:var(--wa-hover)}

.float-pulse{
  position:absolute;inset:0;border-radius:50%;
  animation:floatPulse 2.2s ease-out infinite;
  pointer-events:none;opacity:.55;
}
.float-wa .float-pulse{background:var(--wa)}
.float-call .float-pulse{background:var(--navy)}
@keyframes floatPulse{
  0%{transform:scale(1);opacity:.55}
  80%{opacity:0}
  100%{transform:scale(1.65);opacity:0}
}
@media (max-width:640px){
  .float-btn{width:52px !important;height:52px !important}
  .float-btn > svg,
  .float-btn > .ic{width:24px !important;height:24px !important}
  .float-btn > .wa-icon{width:28px !important;height:28px !important}
}

/* ============================================================
 * 18) ICONS — shared sizing
 * ============================================================ */
.ic{
  width:1em;height:1em;
  display:inline-block;
  vertical-align:-.15em;
  fill:currentColor;flex:none;
}
.btn-gold .ic,
.btn-outline-gold .ic{
  width:1.05em;height:1.05em;
  margin-inline-end:.15rem;
  fill:#fff;color:#fff;
  vertical-align:-.15em;
}

/* ============================================================
 * 19) REVEAL ANIMATION
 * ============================================================ */
.reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.reveal.in{opacity:1;transform:translateY(0)}

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}

/* ============================================================
 * 20) MOBILE REFINEMENTS
 * ============================================================ */
@media (max-width:900px){
  .hero-features{grid-template-columns:repeat(2, minmax(0,1fr));max-width:520px}
}
@media (max-width:640px){
  .section{padding:4rem 0}
  .eyebrow{font-size:.72rem;letter-spacing:.20em;padding:.38rem .85rem}
  .eyebrow::before{width:7px;height:7px}
  .hero{padding:calc(var(--header-h) + 1.5rem) 1rem 3.5rem}
  .hero-title{font-size:clamp(1.85rem, 7.6vw, 2.6rem);line-height:1.22;gap:.25em;margin-bottom:1.15rem}
  .hero-title__line--sub{font-size:.72em}
  .hero-sub{font-size:.98rem;line-height:1.8;margin-bottom:1.6rem}
  .hero-features{grid-template-columns:repeat(2, minmax(0,1fr));gap:.55rem;max-width:100%}
  .hero-features li{padding:.6rem .75rem;font-size:.86rem}
  .section-title{font-size:clamp(1.6rem, 6vw, 2.05rem);line-height:1.3}
  .section-subtitle{font-size:.98rem;margin-bottom:2.5rem}
  .jt-title{font-size:1rem}
  .pkg-title{font-size:1.18rem}
  .booking-card{padding:1.5rem 1.15rem}
  .booking-card-title{font-size:1.2rem}
  .cta-buttons{flex-direction:column;align-items:stretch;padding:0 1rem}
  .cta-buttons > *{justify-content:center}
}