/* ===========================================================
   التمني - نظام التصميم v2 (إعادة تصميم الهيرو وقسم الحجز)
   =========================================================== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --green:#1a6b3c;--green-dark:#0f4a28;--green-mid:#2d8a55;--green-light:#e8f5ee;--green-pale:#f3faf6;
  --gold:#c9a227;--gold-dark:#8a6d12;--gold-light:#f5e3a8;--gold-pale:#fdf8ea;
  --ink:#15291d;--text:#222;--muted:#666;--line:#e6e6e1;--white:#fff;--bg:#fbfbf9;
  --r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:28px;
  --shadow-sm:0 2px 8px rgba(15,74,40,.08);
  --shadow-md:0 12px 32px rgba(15,74,40,.12);
  --shadow-lg:0 24px 64px rgba(15,74,40,.18);
}
html{scroll-behavior:smooth}
body{font-family:'Cairo',sans-serif;color:var(--text);background:var(--bg);overflow-x:hidden;direction:rtl}
img{max-width:100%}
button{font-family:inherit}
a{color:inherit}
::selection{background:var(--gold-light)}

.container{max-width:1180px;margin:0 auto;padding:0 24px}
.eyebrow{display:inline-flex;align-items:center;gap:6px;background:var(--green-light);color:var(--green);font-size:13px;font-weight:700;padding:6px 16px;border-radius:30px;margin-bottom:14px}
.h2{font-size:clamp(26px,3.4vw,36px);font-weight:800;color:var(--ink);margin-bottom:10px;line-height:1.3}
.sub{color:var(--muted);font-size:15px;line-height:1.8;max-width:560px}
.section{padding:76px 0}
.section-head{margin-bottom:40px}
.section-head.center{text-align:center;display:flex;flex-direction:column;align-items:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--r-md);font-family:inherit;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}
.btn-primary{background:var(--green);color:#fff;padding:14px 28px;font-size:15px;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-gold{background:linear-gradient(135deg,var(--gold),#dfb83a);color:#1a1305;padding:14px 28px;font-size:15px;box-shadow:0 8px 22px rgba(201,162,39,.3)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(201,162,39,.4)}
.btn-outline{background:transparent;border:1.5px solid var(--line);color:var(--text);padding:12px 22px;font-size:14px}
.btn-outline:hover{border-color:var(--green);color:var(--green)}

/* ===== TOP CONTACT BAR ===== */
.topbar{background:var(--green-dark);color:rgba(255,255,255,.85);font-size:13px;padding:8px 24px;display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.topbar a{color:var(--gold-light);text-decoration:none;font-weight:600}
.topbar span.sep{opacity:.6}

/* ===== NAV ===== */
nav.mainnav{background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:200}
.nav-inner{max-width:1180px;margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:44px;height:44px;object-fit:contain}
.brand-text{font-size:17px;font-weight:800;color:var(--green);direction:ltr;display:flex;gap:4px}
.nav-links{display:flex;gap:4px;list-style:none;align-items:center}
.nav-links a{padding:9px 13px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--text);text-decoration:none;transition:background .2s,color .2s;white-space:nowrap}
.nav-links a:hover{background:var(--green-light);color:var(--green)}
.nav-cta-group{display:flex;align-items:center;gap:10px}
.nav-wa{display:flex;align-items:center;gap:6px;background:#25d366;color:#fff;padding:9px 16px;border-radius:24px;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.burger{display:none;background:none;border:none;font-size:24px;cursor:pointer;color:var(--green)}
@media(max-width:1040px){
  .nav-links{display:none}
  .burger{display:block}
}
.nav-links.mobile-open{display:flex;position:absolute;top:100%;right:0;left:0;background:#fff;flex-direction:column;padding:10px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);gap:2px;z-index:150}
.nav-links.mobile-open a{padding:12px 14px}

/* =====================================================================
   HERO + BOOKING WIDGET — REDESIGNED
   Visual concept: hero copy sits ABOVE the widget with generous breathing
   room; the widget itself is the focal "card" floating on the green field,
   with a clean tab rail and a clearly separated search bar below it.
   ===================================================================== */
.hero{position:relative;background:linear-gradient(150deg,var(--green-dark) 0%,var(--green) 55%,#23945a 100%);padding:56px 0 64px;overflow:hidden;color:#fff}
.hero::before{content:'';position:absolute;inset:0;opacity:.05;background-image:radial-gradient(circle,#fff 1px,transparent 1px);background-size:28px 28px}
.hero-glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,39,.22),transparent 70%);top:-220px;right:-80px;pointer-events:none}
.hero-content{position:relative;text-align:center;max-width:740px;margin:0 auto}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(201,162,39,.18);border:1px solid rgba(201,162,39,.5);padding:7px 18px;border-radius:30px;font-size:13px;font-weight:700;margin-bottom:18px}
.hero h1{font-size:clamp(28px,4.6vw,44px);font-weight:900;line-height:1.25;margin-bottom:14px}
.hero h1 span{color:var(--gold)}
.hero-sub{font-size:16.5px;opacity:.88;line-height:1.8;margin-bottom:0}

/* booking card: solid white panel, clearly separated from the green hero */
.booking-card-wrap{position:relative;max-width:1000px;margin:40px auto 0;padding:0 16px}
.bw-tabs{display:flex;gap:4px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:16px 16px 0 0;padding:6px 6px 0;width:fit-content;margin:0 auto;position:relative;z-index:2;backdrop-filter:blur(6px)}
.bw-tab{display:flex;align-items:center;gap:7px;padding:12px 22px;border-radius:10px 10px 0 0;border:none;background:transparent;color:rgba(255,255,255,.85);font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s}
.bw-tab.active{background:#fff;color:var(--green-dark)}

.bw-panel{background:#fff;border-radius:0 var(--r-xl) var(--r-xl) var(--r-xl);box-shadow:var(--shadow-lg);padding:30px;position:relative;z-index:1;margin-top:-1px}
.bw-panel.first-tab{border-radius:0 var(--r-xl) var(--r-xl) var(--r-xl)}

.bw-triptype{display:flex;gap:8px;margin-bottom:18px}
.bw-tt-btn{padding:8px 18px;border-radius:20px;border:1.5px solid var(--line);background:#fff;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .2s}
.bw-tt-btn.active{background:var(--green-light);border-color:var(--green);color:var(--green)}

.bw-grid{display:grid;grid-template-columns:1.1fr 1.1fr 1fr auto;gap:0;border:1.5px solid var(--line);border-radius:var(--r-md);overflow:visible;position:relative}
.bw-grid.two-col{grid-template-columns:1.3fr 1fr auto}
.bw-field{padding:13px 18px;border-left:1px solid var(--line);position:relative;background:#fff;transition:background .2s}
.bw-field:last-of-type{border-left:none}
.bw-field:hover{background:var(--green-pale)}
.bw-field label{display:block;font-size:11px;color:var(--muted);font-weight:700;margin-bottom:5px;text-transform:uppercase;letter-spacing:.3px}
.bw-field .val{font-size:14.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:7px;cursor:pointer;min-height:22px}
.bw-field-input-wrap{position:relative}
.bw-field input.city-input{border:none;outline:none;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--ink);width:100%;background:transparent}
.bw-field input.city-input::placeholder{color:#aaa;font-weight:500}
.bw-go{background:var(--green);color:#fff;border:none;padding:0 32px;font-size:15px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .2s;border-radius:0 var(--r-md) var(--r-md) 0}
.bw-go:hover{background:var(--green-dark)}
.bw-swap{position:absolute;left:calc(33.33% - 17px);top:50%;transform:translateY(-50%);width:32px;height:32px;background:#fff;border:1.5px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;z-index:5;color:var(--green);transition:transform .3s,border-color .2s}
.bw-swap:hover{transform:translateY(-50%) rotate(180deg);border-color:var(--green)}
.bw-extra-row{display:flex;gap:18px;margin-top:16px;flex-wrap:wrap;align-items:center}
.bw-pill-select{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);font-weight:600;cursor:pointer;padding:6px 0}
.bw-pill-select select{border:none;background:transparent;font-family:inherit;font-weight:700;color:var(--ink);font-size:13px;cursor:pointer}
.bw-check{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);font-weight:600}

/* city autocomplete dropdown */
.city-dropdown{position:absolute;top:calc(100% + 8px);right:-1px;left:-1px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);max-height:320px;overflow-y:auto;z-index:60;display:none}
.city-dropdown.open{display:block}
.cd-item{display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;font-size:13.5px;font-weight:600;transition:background .15s;border-bottom:1px solid #f5f5f3}
.cd-item:last-child{border-bottom:none}
.cd-item:hover{background:var(--green-pale)}
.cd-item .cd-code{font-size:11px;color:var(--green);font-weight:800;background:var(--green-light);padding:2px 7px;border-radius:5px;flex-shrink:0}
.cd-item .cd-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.cd-item .cd-city{font-weight:700;color:var(--ink)}
.cd-item .cd-detail{font-size:11.5px;color:var(--muted);font-weight:500}
.cd-empty,.cd-loading{padding:18px;text-align:center;color:var(--muted);font-size:13px}
.cd-loading::before{content:'⏳ ';margin-right:4px}

@media(max-width:760px){
  .bw-grid,.bw-grid.two-col{grid-template-columns:1fr}
  .bw-field{border-left:none;border-bottom:1px solid var(--line)}
  .bw-go{padding:16px;border-radius:0 0 var(--r-md) var(--r-md)}
  .bw-swap{display:none}
  .bw-panel{padding:20px}
  .bw-tabs{width:100%;overflow-x:auto;border-radius:14px 14px 0 0}
}

/* hero stats — moved to a separate calm strip below the card */
.hero-stats-strip{background:var(--green-dark);padding:30px 0;position:relative;z-index:1}
.hero-stats-row{display:flex;justify-content:center;gap:56px;flex-wrap:wrap}
.hstat{text-align:center}
.hstat h3{font-size:28px;font-weight:900;color:var(--gold)}
.hstat p{font-size:12.5px;opacity:.7;margin-top:2px;color:#fff}

/* ===== TRUST STRIP ===== */
.trust-strip{background:var(--green-pale);padding:22px 0;border-bottom:1px solid var(--line)}
.trust-grid{display:flex;justify-content:center;gap:40px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:10px}
.trust-item .ic{width:40px;height:40px;background:var(--green-light);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px}
.trust-item h4{font-size:13.5px;font-weight:700}
.trust-item p{font-size:11.5px;color:var(--muted)}

/* ===== SERVICE CARDS GRID ===== */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.svc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;transition:transform .3s,box-shadow .3s;cursor:pointer;position:relative;overflow:hidden}
.svc-card::before{content:'';position:absolute;top:0;right:0;width:100%;height:3px;background:linear-gradient(90deg,var(--gold),var(--green));transform:scaleX(0);transform-origin:right;transition:transform .35s}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.svc-card:hover::before{transform:scaleX(1)}
.svc-icon{width:52px;height:52px;border-radius:14px;background:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.svc-card h3{font-size:16.5px;font-weight:800;margin-bottom:6px}
.svc-card p{font-size:13.5px;color:var(--muted);line-height:1.7;margin-bottom:14px}
.svc-link{font-size:13px;font-weight:700;color:var(--green);display:flex;align-items:center;gap:5px}

/* ===== PACKAGE CARDS — fixed proportions / consistent height ===== */
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px}
.pkg-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column}
.pkg-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.pkg-img{height:180px;background-size:cover;background-position:center;position:relative;flex-shrink:0;background-color:var(--green)}
.pkg-img .emoji-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:46px}
.pkg-badge{position:absolute;top:12px;right:12px;background:var(--gold);color:#1a1305;font-size:11px;font-weight:800;padding:5px 12px;border-radius:8px;z-index:1}
.pkg-body{padding:20px;display:flex;flex-direction:column;flex:1}
.pkg-body h3{font-size:17px;font-weight:800;margin-bottom:6px;min-height:24px}
.pkg-body .pkg-dest{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-bottom:10px}
.pkg-body .pkg-desc-text{font-size:13px;color:var(--muted);margin-bottom:10px;line-height:1.6;flex:1}
.pkg-feat{list-style:none;display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.pkg-feat li{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.pkg-feat li::before{content:'✓';color:var(--green);font-weight:800}
.pkg-foot{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--line);margin-top:auto}
.pkg-price{font-size:19px;font-weight:900;color:var(--green)}
.pkg-price span{font-size:11.5px;color:var(--muted);font-weight:500}
.pkg-btn{background:var(--green);color:#fff;border:none;padding:9px 18px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;flex-shrink:0}
.pkg-btn:hover{background:var(--green-dark)}

/* ===== VISA SERVICES GRID ===== */
.visa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.visa-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .3s,box-shadow .3s;text-align:center}
.visa-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.visa-img{height:120px;background-size:cover;background-position:center;background-color:var(--green-light);display:flex;align-items:center;justify-content:center;font-size:40px}
.visa-body{padding:18px}
.visa-body h3{font-size:15.5px;font-weight:800;margin-bottom:12px}
.visa-btn{background:var(--green);color:#fff;border:none;padding:9px 20px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;width:100%}
.visa-btn:hover{background:var(--green-dark)}

/* ===== HONEYMOON SECTION ===== */
.honeymoon-bg{background:linear-gradient(135deg,#fdf3e7,#fbe8d8);padding:76px 0}
.hm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.hm-card{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .3s}
.hm-card:hover{transform:translateY(-6px)}
.hm-img{height:170px;background-size:cover;background-position:center;position:relative;background-color:#e8a857}
.hm-ribbon{position:absolute;top:14px;left:0;background:var(--gold);color:#1a1305;font-size:11px;font-weight:800;padding:5px 14px 5px 10px;border-radius:0 16px 16px 0}
.hm-body{padding:18px}
.hm-body h3{font-size:16px;font-weight:800;margin-bottom:5px}
.hm-body p{font-size:13px;color:var(--muted);line-height:1.6}

/* ===== OFFERS SLIDER ===== */
.offers-section{background:var(--ink);padding:76px 0;position:relative;overflow:hidden;color:#fff}
.offers-section .section-head h2,.offers-section .sub{color:#fff}
.offers-section .sub{opacity:.65}
.offer-slider{position:relative;overflow:hidden;border-radius:var(--r-lg)}
.offer-track{display:flex;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.offer-slide{min-width:100%;display:grid;grid-template-columns:1fr 1fr;background:#1c2e22;border-radius:var(--r-lg);overflow:hidden}
.offer-slide .info{padding:40px;display:flex;flex-direction:column;justify-content:center}
.offer-slide .tag{display:inline-block;background:rgba(201,162,39,.2);color:var(--gold);font-size:12px;font-weight:700;padding:5px 14px;border-radius:20px;margin-bottom:14px;width:fit-content}
.offer-slide h3{font-size:24px;font-weight:800;margin-bottom:10px}
.offer-slide p{font-size:14px;opacity:.75;line-height:1.8;margin-bottom:20px}
.offer-slide .img{background-size:cover;background-position:center;min-height:220px;background-color:var(--green-dark)}
.offer-dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.offer-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25);border:none;cursor:pointer;transition:background .25s,transform .25s}
.offer-dot.active{background:var(--gold);transform:scale(1.3)}
.offer-arrows{display:flex;justify-content:space-between;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);padding:0 10px;pointer-events:none}
.offer-arrow{pointer-events:auto;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.offer-arrow:hover{background:rgba(255,255,255,.22)}
@media(max-width:760px){.offer-slide{grid-template-columns:1fr}.offer-slide .img{min-height:160px;order:-1}}

/* ===== HAJJ/UMRAH SECTION ===== */
.hajj-section{background:linear-gradient(155deg,#0c2818,var(--green-dark) 50%,#123a22);padding:80px 0;color:#fff;position:relative;overflow:hidden}
.hajj-pattern{position:absolute;inset:0;opacity:.05;background-image:radial-gradient(circle,#c9a227 1.5px,transparent 1.5px);background-size:30px 30px}
.hajj-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;position:relative}
.hajj-visual{background:rgba(255,255,255,.06);border:1px solid rgba(201,162,39,.3);border-radius:var(--r-xl);padding:36px;text-align:center}
.hajj-visual .kaaba{font-size:60px;margin-bottom:14px}
.hajj-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.hajj-stat{background:rgba(255,255,255,.08);border-radius:12px;padding:14px}
.hajj-stat h4{font-size:20px;font-weight:900;color:var(--gold)}
.hajj-stat p{font-size:11px;opacity:.7}
.hajj-pkgs{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.hajj-pkg-row{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px 18px}
.hajj-pkg-row .nm{font-weight:700;font-size:14.5px}
.hajj-pkg-row .pr{color:var(--gold);font-weight:800;font-size:15px}
@media(max-width:840px){.hajj-grid{grid-template-columns:1fr}}

/* ===== WHY US ===== */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.why-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;text-align:center;transition:transform .3s,box-shadow .3s}
.why-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.why-icon{font-size:34px;margin-bottom:12px}
.why-card h3{font-size:15px;font-weight:800;margin-bottom:6px}
.why-card p{font-size:12.5px;color:var(--muted);line-height:1.7}

/* ===== TESTIMONIALS ===== */
.test-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.test-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.test-stars{color:var(--gold);font-size:14px;margin-bottom:10px}
.test-card p{font-size:13.5px;color:var(--muted);line-height:1.8;margin-bottom:14px}
.test-author{display:flex;align-items:center;gap:10px}
.test-avatar{width:36px;height:36px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.test-author h4{font-size:13.5px;font-weight:700}
.test-author p{font-size:11.5px;color:var(--muted);margin:0}

/* ===== FAQ ===== */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:18px 4px;cursor:pointer;font-size:15px;font-weight:700}
.faq-q .plus{font-size:20px;color:var(--green);transition:transform .3s;font-weight:400}
.faq-item.open .plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:13.5px;color:var(--muted);line-height:1.8}
.faq-item.open .faq-a{max-height:200px;padding-bottom:18px}

/* ===== ABOUT ===== */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.about-card{background:linear-gradient(135deg,var(--green-dark),var(--green-mid));border-radius:var(--r-xl);padding:36px;color:#fff;text-align:center}
.about-card img{width:80px;height:80px;object-fit:contain;margin-bottom:14px}
.about-stats-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.about-stats-mini div{background:rgba(255,255,255,.12);border-radius:10px;padding:12px}
.about-stats-mini h4{color:var(--gold);font-size:20px;font-weight:900}
.about-stats-mini p{font-size:11px;opacity:.7}
@media(max-width:840px){.about-grid{grid-template-columns:1fr}}

/* ===== CONTACT ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.contact-info-item{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.contact-ic{width:44px;height:44px;background:var(--green-light);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px}
.contact-form-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.form-row{margin-bottom:14px}
.form-row label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:5px}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:14px;outline:none;transition:border-color .2s}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--green)}
@media(max-width:840px){.contact-grid{grid-template-columns:1fr}}

/* ===== FLOATING WHATSAPP ===== */
.wa-float{position:fixed;bottom:24px;left:24px;width:58px;height:58px;background:linear-gradient(145deg,#2bdb6f,#1fae54);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,.5);z-index:999;text-decoration:none}
.wa-float svg{width:30px;height:30px}
.wa-ring{position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:waring 2s infinite}
@keyframes waring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.8);opacity:0}}

/* ===== FOOTER ===== */
footer.site-footer{background:var(--green-dark);color:rgba(255,255,255,.85);padding-top:56px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px}
.footer-col h4{color:var(--gold);font-size:14.5px;font-weight:800;margin-bottom:16px}
.footer-col p{font-size:13px;line-height:1.8;opacity:.75}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-col ul a{font-size:13px;text-decoration:none;color:rgba(255,255,255,.75)}
.footer-col ul a:hover{color:#fff}
.footer-social{display:flex;gap:9px;margin-top:14px}
.footer-social a{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;text-align:center;font-size:12.5px;opacity:.6}
@media(max-width:840px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* reveal anim */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ===== VISA DETAIL PAGE (full standalone page, tasahel-style) ===== */
.visa-detail-page{display:none}
.visa-detail-page.active{display:block}
.vd-hero{background:linear-gradient(150deg,var(--green-dark),var(--green) 60%,#23945a);color:#fff;padding:54px 0;position:relative;overflow:hidden}
.vd-hero::before{content:'';position:absolute;inset:0;opacity:.05;background-image:radial-gradient(circle,#fff 1px,transparent 1px);background-size:28px 28px}
.vd-breadcrumb{font-size:13px;opacity:.8;margin-bottom:16px;position:relative}
.vd-breadcrumb a{color:var(--gold-light);text-decoration:none;cursor:pointer}
.vd-hero-grid{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;position:relative}
.vd-flag-box{width:84px;height:84px;border-radius:18px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:42px;flex-shrink:0;overflow:hidden;background-size:cover;background-position:center}
.vd-hero h1{font-size:clamp(24px,3.6vw,34px);font-weight:900;margin-bottom:6px}
.vd-hero p{opacity:.85;font-size:14.5px}
.vd-body{padding:56px 0}
.vd-grid{display:grid;grid-template-columns:2fr 1fr;gap:40px}
.vd-section{margin-bottom:32px}
.vd-section h2{font-size:19px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.vd-section p{font-size:14.5px;color:var(--muted);line-height:1.9}
.vd-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.vd-list li{font-size:14px;color:var(--text);display:flex;align-items:flex-start;gap:10px;line-height:1.7}
.vd-list li::before{content:'✓';color:var(--green);font-weight:900;flex-shrink:0;margin-top:2px}
.vd-sidebar{background:var(--green-pale);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;align-self:start;position:sticky;top:90px}
.vd-sidebar h3{font-size:16px;font-weight:800;margin-bottom:16px}
.vd-sidebar-row{display:flex;justify-content:space-between;font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--line)}
.vd-sidebar-row:last-of-type{border-bottom:none}
.vd-sidebar-row span:first-child{color:var(--muted)}
.vd-sidebar-row span:last-child{font-weight:700}
@media(max-width:840px){.vd-grid{grid-template-columns:1fr}.vd-sidebar{position:static}.vd-hero-grid{grid-template-columns:1fr;text-align:center}.vd-flag-box{margin:0 auto}}


/* ===========================================================
   لوحة التحكم - التصميم
   =========================================================== */

/* ===== LOGIN SCREEN ===== */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,var(--green-dark) 0%,var(--green) 60%,#1f8a4f 100%);position:relative;overflow:hidden;padding:20px}
.login-screen::before{content:'';position:absolute;inset:0;opacity:.05;background-image:radial-gradient(circle,#fff 1px,transparent 1px);background-size:28px 28px}
.login-box{position:relative;z-index:1;background:rgba(255,255,255,.97);border-radius:var(--r-xl);padding:44px 40px;width:100%;max-width:400px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.login-box img{width:64px;height:64px;object-fit:contain;display:block;margin:0 auto 14px}
.login-box h2{text-align:center;font-size:20px;font-weight:800;color:var(--ink);margin-bottom:4px}
.login-box .lsub{text-align:center;font-size:13px;color:var(--muted);margin-bottom:28px}
.login-field{margin-bottom:16px}
.login-field label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:6px}
.login-field input{width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:14.5px;outline:none;transition:border-color .2s}
.login-field input:focus{border-color:var(--green)}
.login-error{background:#fce8e8;color:#a32d2d;font-size:13px;font-weight:600;padding:10px 14px;border-radius:8px;margin-bottom:14px;display:none}
.login-error.show{display:block}
.login-btn{width:100%;background:var(--green);color:#fff;border:none;padding:14px;border-radius:10px;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;margin-top:6px;transition:background .2s}
.login-btn:hover{background:var(--green-dark)}
.login-hint{text-align:center;font-size:11.5px;color:#aaa;margin-top:18px}

/* ===== DASHBOARD SHELL ===== */
.dash-shell{display:flex;min-height:100vh;background:#f4f5f3}
.dash-sidebar{width:248px;background:var(--green-dark);color:#fff;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.ds-brand{display:flex;align-items:center;gap:10px;padding:22px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.ds-brand img{width:36px;height:36px;object-fit:contain}
.ds-brand-text{font-size:14.5px;font-weight:800;direction:ltr}
.ds-nav{flex:1;overflow-y:auto;padding:14px 10px}
.ds-nav-group{margin-bottom:6px}
.ds-nav-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;opacity:.45;padding:14px 12px 6px;font-weight:700}
.ds-link{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;color:rgba(255,255,255,.78);text-decoration:none;font-size:14px;font-weight:600;cursor:pointer;margin-bottom:2px;transition:background .15s,color .15s}
.ds-link:hover{background:rgba(255,255,255,.08);color:#fff}
.ds-link.active{background:rgba(201,162,39,.18);color:var(--gold-light)}
.ds-link .ic{font-size:16px;width:20px;text-align:center}
.ds-link .badge-count{margin-right:auto;background:rgba(255,255,255,.15);font-size:11px;padding:2px 7px;border-radius:10px}
.ds-foot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.1)}
.ds-logout{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.7);font-size:13px;cursor:pointer;background:none;border:none;font-family:inherit}
.ds-logout:hover{color:#fff}

.dash-main{flex:1;min-width:0;overflow-y:auto;height:100vh}
.dash-topbar{background:#fff;border-bottom:1px solid var(--line);padding:18px 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.dt-title h1{font-size:21px;font-weight:800}
.dt-title p{font-size:12.5px;color:var(--muted);margin-top:2px}
.dt-actions{display:flex;align-items:center;gap:10px}
.dash-body{padding:24px 28px}
.dash-page{display:none}
.dash-page.active{display:block}

/* stat cards */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.stat-card .si{font-size:20px;margin-bottom:8px}
.stat-card h4{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px}
.stat-card .sv{font-size:25px;font-weight:900}
.stat-card .sc{font-size:11.5px;margin-top:4px;color:#27a560;font-weight:700}
.stat-card .sc.neg{color:#e24b4a}
@media(max-width:1000px){.stat-row{grid-template-columns:repeat(2,1fr)}}

/* generic dash card */
.d-card{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:20px;overflow:hidden}
.d-card-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.d-card-head h3{font-size:15.5px;font-weight:800}
.d-card-head .meta{font-size:12px;color:var(--muted)}
.d-card-body{padding:20px}

/* table */
.d-table-wrap{overflow-x:auto}
table.d-table{width:100%;border-collapse:collapse;min-width:600px}
.d-table th{text-align:right;padding:11px 18px;font-size:11.5px;color:var(--muted);font-weight:700;background:#fafaf8;border-bottom:1px solid var(--line);white-space:nowrap}
.d-table td{padding:13px 18px;font-size:13.5px;border-bottom:1px solid #f3f3f0;white-space:nowrap}
.d-table tr:last-child td{border-bottom:none}
.d-table tr:hover td{background:#fafaf8}
.badge{display:inline-block;padding:3px 10px;border-radius:7px;font-size:11.5px;font-weight:700}
.badge.green{background:#e8f5ee;color:#1a6b3c}
.badge.gold{background:#fdf3da;color:#8a6d12}
.badge.red{background:#fce8e8;color:#a32d2d}
.badge.blue{background:#e8f0fe;color:#1a5ba8}
.row-actions{display:flex;gap:6px}
.icon-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;color:var(--muted);transition:background .15s,color .15s,border-color .15s}
.icon-btn:hover{background:var(--green-light);color:var(--green);border-color:var(--green)}
.icon-btn.danger:hover{background:#fce8e8;color:#a32d2d;border-color:#e8a0a0}

/* search/filter row */
.filter-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filter-row input,.filter-row select{padding:9px 13px;border:1px solid var(--line);border-radius:9px;font-family:inherit;font-size:13px;outline:none}
.filter-row input:focus,.filter-row select:focus{border-color:var(--green)}

/* admin add/edit form */
.dform-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dform-grid .full{grid-column:1/-1}
.dform-row label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:5px}
.dform-row input,.dform-row select,.dform-row textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-family:inherit;font-size:13.5px;outline:none}
.dform-row input:focus,.dform-row select:focus,.dform-row textarea:focus{border-color:var(--green)}
.dform-row textarea{resize:vertical;min-height:80px}
.dform-actions{display:flex;gap:10px;margin-top:18px}
.btn-save{background:var(--green);color:#fff;border:none;padding:11px 24px;border-radius:9px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.btn-save:hover{background:var(--green-dark)}
.btn-cancel{background:transparent;border:1px solid var(--line);color:var(--muted);padding:11px 24px;border-radius:9px;font-family:inherit;font-size:14px;cursor:pointer}
.btn-add{background:var(--green);color:#fff;border:none;padding:10px 18px;border-radius:9px;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px}
.btn-add:hover{background:var(--green-dark)}

/* image upload preview */
.img-upload-box{border:2px dashed var(--line);border-radius:12px;padding:16px;text-align:center;cursor:pointer;transition:border-color .2s}
.img-upload-box:hover{border-color:var(--green)}
.img-preview-grid{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.img-preview-item{position:relative;width:70px;height:70px;border-radius:8px;overflow:hidden;background-size:cover;background-position:center;border:1px solid var(--line)}
.img-preview-item .rm{position:absolute;top:2px;left:2px;width:18px;height:18px;background:rgba(0,0,0,.6);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer}

/* mini bar chart */
.bar-chart{display:flex;align-items:flex-end;gap:10px;height:140px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.bar-col .bar{background:linear-gradient(180deg,var(--green-mid),var(--green));border-radius:5px 5px 0 0;width:100%}
.bar-col span{font-size:10.5px;color:var(--muted);margin-top:4px}
.bar-col .bv{font-size:10.5px;color:var(--green);font-weight:700}

.empty-state{text-align:center;padding:50px 20px;color:var(--muted)}
.empty-state .ic{font-size:40px;margin-bottom:10px;opacity:.5}
.empty-state h4{font-size:15px;font-weight:700;margin-bottom:6px;color:var(--text)}
.empty-state p{font-size:13px}

@media(max-width:900px){
  .dash-sidebar{position:fixed;right:-260px;z-index:300;transition:right .3s;box-shadow:8px 0 30px rgba(0,0,0,.2)}
  .dash-sidebar.open{right:0}
  .dform-grid{grid-template-columns:1fr}
  .dash-body{padding:16px}
  .dash-topbar{padding:14px 16px}
}
.ds-burger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink)}
@media(max-width:900px){.ds-burger{display:block}}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:250}
.sidebar-backdrop.show{display:block}

/* visa flag preview in dashboard table */
.flag-thumb{width:32px;height:24px;border-radius:4px;background-size:cover;background-position:center;background-color:#eee;display:inline-block;vertical-align:middle}


/* ===========================================================
   التمني - طبقة الأنيميشن والحركة
   خلفيات متحركة مرسومة بـ CSS/SVG (بدون صور خارجية لضمان الثبات)
   =========================================================== */

/* ---------- GLOBAL SCROLL-REVEAL UPGRADES ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-scale{opacity:0;transform:scale(.86);transition:opacity .7s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
.reveal-scale.visible{opacity:1;transform:scale(1)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
[dir="rtl"] .reveal-right{transform:translateX(-40px)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-stagger > *{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.reveal-stagger.visible > *{opacity:1;transform:translateY(0)}
.reveal-stagger.visible > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.visible > *:nth-child(2){transition-delay:.12s}
.reveal-stagger.visible > *:nth-child(3){transition-delay:.19s}
.reveal-stagger.visible > *:nth-child(4){transition-delay:.26s}
.reveal-stagger.visible > *:nth-child(5){transition-delay:.33s}
.reveal-stagger.visible > *:nth-child(6){transition-delay:.40s}

/* ---------- ANIMATED GRADIENT TEXT / GLOW ---------- */
@keyframes textGlow{0%,100%{text-shadow:0 0 18px rgba(201,162,39,.45)}50%{text-shadow:0 0 36px rgba(201,162,39,.85)}}
.hero h1 span{animation:textGlow 2.6s ease-in-out infinite}

/* ---------- HERO: ANIMATED SKY BACKGROUND (SVG layer) ---------- */
.hero{isolation:isolate}
.hero-bg-scene{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.hero-bg-scene svg{position:absolute;inset:0;width:100%;height:100%}

/* drifting clouds */
.cloud-layer{position:absolute;inset:0;overflow:hidden}
.cloud-shape{position:absolute;opacity:.14;filter:blur(.5px)}
@keyframes cloudDrift{from{transform:translateX(-120px)}to{transform:translateX(calc(100vw + 120px))}}
.cloud-1{top:8%;animation:cloudDrift 48s linear infinite}
.cloud-2{top:22%;animation:cloudDrift 65s linear infinite;animation-delay:-20s;opacity:.10}
.cloud-3{top:5%;animation:cloudDrift 55s linear infinite;animation-delay:-35s;opacity:.08}

/* flying plane with trail */
.plane-wrap{position:absolute;animation:planeFly linear infinite}
@keyframes planeFly{from{transform:translateX(-10vw) translateY(0)}to{transform:translateX(110vw) translateY(-30px)}}
.plane-1{top:18%;animation-duration:22s}
.plane-2{top:48%;animation-duration:30s;animation-delay:-12s}
.plane-3{top:68%;animation-duration:26s;animation-delay:-6s}
.plane-icon{font-size:22px;display:inline-block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));opacity:.55}
.plane-2 .plane-icon{font-size:15px;opacity:.4}
.plane-3 .plane-icon{font-size:13px;opacity:.3}

/* twinkling stars / sparkles */
.sparkle{position:absolute;color:var(--gold);font-size:13px;animation:sparkleAnim 3s ease-in-out infinite;opacity:0;pointer-events:none}
@keyframes sparkleAnim{0%,100%{opacity:0;transform:scale(0) rotate(0deg)}50%{opacity:.9;transform:scale(1) rotate(180deg)}}

/* glowing orb pulse behind headline */
.hero-glow{animation:glowPulse 5s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.55;transform:translate(0,0) scale(1)}50%{opacity:.9;transform:translate(-20px,15px) scale(1.18)}}

/* parallax mountain silhouettes at hero base */
.hero-mountains{position:absolute;bottom:-2px;left:0;right:0;height:140px;z-index:0;pointer-events:none}
.hero-mountains svg{width:100%;height:100%;display:block}
.mtn-back{animation:mtnDriftSlow 70s linear infinite alternate}
.mtn-front{animation:mtnDriftSlow 45s linear infinite alternate-reverse}
@keyframes mtnDriftSlow{from{transform:translateX(0)}to{transform:translateX(-3%)}}

/* ---------- SECTION BACKGROUND: ANIMATED WORLD MAP DOTS (services/why-us) ---------- */
.bg-dots-anim{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:.5}
.bg-dots-anim .dot{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--green);opacity:.15;animation:dotPulse 4s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:.08;transform:scale(1)}50%{opacity:.35;transform:scale(1.8)}}

/* ---------- FLOATING TRAVEL ICONS (ambient, used in section backgrounds) ---------- */
.ambient-icons{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ambient-ic{position:absolute;opacity:.08;font-size:34px;animation:ambientFloat ease-in-out infinite}
@keyframes ambientFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-22px) rotate(8deg)}}

/* ---------- HONEYMOON SECTION: floating hearts ---------- */
.hearts-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.heart-piece{position:absolute;bottom:-30px;opacity:0;animation:heartRise linear infinite}
@keyframes heartRise{0%{opacity:0;transform:translateY(0) scale(.7) rotate(0deg)}10%{opacity:.35}85%{opacity:.25}100%{opacity:0;transform:translateY(-380px) scale(1.1) rotate(25deg)}}

/* ---------- HAJJ SECTION: rotating geometric pattern ---------- */
.hajj-pattern{animation:patternRotate 90s linear infinite}
@keyframes patternRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.hajj-visual{position:relative;overflow:hidden}
.hajj-visual::after{content:'';position:absolute;width:200%;height:200%;top:-50%;left:-50%;background:radial-gradient(circle,rgba(201,162,39,.08),transparent 60%);animation:rotateGlow 14s linear infinite}
@keyframes rotateGlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.kaaba{display:inline-block;animation:kaabaFloat 3.5s ease-in-out infinite}
@keyframes kaabaFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- OFFERS SECTION: shimmer sweep ---------- */
.offers-section{position:relative}
.offers-section::before{content:'';position:absolute;top:0;left:-150%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.04),transparent);animation:offerSweep 7s ease-in-out infinite;pointer-events:none;z-index:0}
@keyframes offerSweep{0%{left:-150%}100%{left:150%}}

/* ---------- CARDS: richer hover micro-interactions ---------- */
.svc-card,.pkg-card,.why-card,.visa-card,.hm-card,.test-card{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1)}
.svc-card:hover{transform:translateY(-8px) scale(1.015)}
.svc-card:hover .svc-icon{animation:iconWiggle .5s ease}
@keyframes iconWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.1)}}
.pkg-card:hover{transform:translateY(-10px)}
.pkg-card:hover .pkg-img{transform:scale(1.04)}
.pkg-img{transition:transform .5s cubic-bezier(.16,1,.3,1);overflow:hidden}
.why-card:hover{transform:translateY(-8px) scale(1.02)}
.why-card:hover .why-icon{animation:iconBounce .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes iconBounce{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-10px) scale(1.15)}}
.visa-card:hover{transform:translateY(-8px)}
.visa-card:hover .visa-img{transform:scale(1.06)}
.visa-img{transition:transform .5s cubic-bezier(.16,1,.3,1);overflow:hidden}
.hm-card:hover{transform:translateY(-10px) rotate(-.5deg)}
.hm-card:hover .hm-img{transform:scale(1.05)}
.hm-img{transition:transform .5s cubic-bezier(.16,1,.3,1);overflow:hidden}
.test-card:hover{transform:translateY(-6px)}

/* buttons: shimmer sweep on hover */
.btn-primary,.btn-gold{position:relative;overflow:hidden}
.btn-primary::after,.btn-gold::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transition:left .6s ease}
.btn-primary:hover::after,.btn-gold:hover::after{left:150%}
.pkg-btn,.visa-btn{transition:transform .25s,background .25s}
.pkg-btn:hover,.visa-btn:hover{transform:translateY(-2px)}

/* nav logo float */
.brand img{animation:logoFloatSlow 4s ease-in-out infinite;transition:transform .3s}
@keyframes logoFloatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.brand:hover img{transform:rotate(-6deg) scale(1.08)}

/* hero badge entrance */
.hero-badge{animation:fadeDown .8s ease both}
@keyframes fadeDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
.hero h1{animation:fadeUpHero .9s ease .15s both}
.hero-sub{animation:fadeUpHero .9s ease .3s both}
.booking-card-wrap{animation:fadeUpHero .9s ease .45s both}
@keyframes fadeUpHero{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* stat counters pop-in handled via JS class */
.hstat.counted h3{animation:popNumber .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes popNumber{0%{transform:scale(.7)}60%{transform:scale(1.15)}100%{transform:scale(1)}}

/* offer slider: slide direction transitions already via transform; add fade-through on tag */
.offer-slide .tag{animation:tagPulse 2.4s ease-in-out infinite}
@keyframes tagPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,.4)}50%{box-shadow:0 0 0 6px rgba(201,162,39,0)}}

/* scroll-to-top + whatsapp button breathing */
.wa-float{animation:waBreathe 2.6s ease-in-out infinite}
@keyframes waBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* trust strip icons gentle pulse on view */
.trust-item .ic{transition:transform .3s}
.trust-strip .trust-item:hover .ic{transform:scale(1.15) rotate(-6deg)}

/* faq plus rotation already exists; add smooth color */
.faq-q{transition:color .2s}
.faq-q:hover{color:var(--green)}

/* section dividers: subtle animated wave between sections */
.wave-divider{position:relative;height:60px;overflow:hidden;margin-top:-1px}
.wave-divider svg{position:absolute;width:140%;height:100%;animation:waveSlide 18s linear infinite}
@keyframes waveSlide{from{transform:translateX(0)}to{transform:translateX(-30%)}}

/* visa detail page entrance */
.visa-detail-page.active .vd-hero{animation:fadeUpHero .5s ease both}
.visa-detail-page.active .vd-body{animation:fadeUpHero .6s ease .1s both}

/* image preview items pop */
.img-preview-item{animation:popIn .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

/* booking widget tab switch animation */
.bw-content{animation:tabFadeIn .35s ease}
@keyframes tabFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

@media(max-width:760px){
  .hero-mountains{height:80px}
  .plane-icon{font-size:16px}
}

/* eyebrow badge subtle entrance */
.eyebrow{animation:eyebrowPop .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes eyebrowPop{from{opacity:0;transform:scale(.8) translateY(-6px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* visa detail flag box subtle float */
.vd-flag-box{animation:logoFloatSlow 3.5s ease-in-out infinite}

/* trust strip icon idle pulse */
@keyframes idlePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.trust-item .ic{animation:idlePulse 3s ease-in-out infinite}
.trust-item:nth-child(2) .ic{animation-delay:.3s}
.trust-item:nth-child(3) .ic{animation-delay:.6s}
.trust-item:nth-child(4) .ic{animation-delay:.9s}

/* about card subtle rotation glow already exists in v2 css? add safe fallback */
.about-card{position:relative;overflow:hidden}
.about-card::before{content:'';position:absolute;width:200%;height:200%;top:-50%;left:-50%;background:radial-gradient(circle,rgba(201,162,39,.10),transparent 60%);animation:rotateGlow 14s linear infinite;pointer-events:none}


/* ===========================================================
   التمني - نظام الصفحات المتعددة (Router) + تحسينات الواجهة
   =========================================================== */

/* ---------- PAGE ROUTER ---------- */
.app-page{display:none}
.app-page.active{display:block;animation:pageEnter .45s cubic-bezier(.16,1,.3,1) both}
@keyframes pageEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* generic page header used by list/detail pages */
.page-hero{background:linear-gradient(150deg,var(--green-dark),var(--green) 60%,#23945a);color:#fff;padding:50px 0;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;opacity:.05;background-image:radial-gradient(circle,#fff 1px,transparent 1px);background-size:28px 28px}
.page-breadcrumb{font-size:13px;opacity:.8;margin-bottom:14px;position:relative;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.page-breadcrumb a{color:var(--gold-light);text-decoration:none;cursor:pointer}
.page-breadcrumb a:hover{text-decoration:underline}
.page-hero h1{font-size:clamp(24px,3.8vw,36px);font-weight:900;position:relative}
.page-hero p{opacity:.85;font-size:14.5px;margin-top:8px;position:relative;max-width:600px}
.page-body{padding:56px 0}

/* back button */
.back-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;padding:8px 16px;border-radius:24px;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;margin-bottom:14px;transition:background .2s}
.back-btn:hover{background:rgba(255,255,255,.22)}

/* ---------- TABS for داخلية/خارجية packages ---------- */
.region-tabs{display:flex;gap:8px;margin-bottom:32px;flex-wrap:wrap}
.region-tab{padding:11px 22px;border-radius:24px;border:1.5px solid var(--line);background:#fff;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .25s}
.region-tab.active{background:var(--green);border-color:var(--green);color:#fff}
.region-tab:hover:not(.active){border-color:var(--green);color:var(--green)}

/* ---------- IMAGE-TOP SERVICE CARDS ---------- */
.svc-card-v2{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s;display:flex;flex-direction:column}
.svc-card-v2:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.svc-card-v2-img{height:140px;background-size:cover;background-position:center;position:relative;flex-shrink:0;transition:transform .5s cubic-bezier(.16,1,.3,1);overflow:hidden}
.svc-card-v2:hover .svc-card-v2-img{transform:scale(1.06)}
.svc-card-v2-img .emoji-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:40px;background:linear-gradient(135deg,var(--green-light),var(--green-pale))}
.svc-card-v2-body{padding:18px;text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center}
.svc-card-v2-body h3{font-size:15.5px;font-weight:800;margin-bottom:4px}
.svc-card-v2-body p{font-size:12px;color:var(--muted)}

/* ---------- IMAGE GALLERY (detail pages) ---------- */
.gallery-wrap{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);position:relative;background:var(--green-dark)}
.gallery-main{height:380px;background-size:cover;background-position:center;position:relative;transition:opacity .3s}
.gallery-main .emoji-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:80px;background:linear-gradient(135deg,var(--green),var(--green-mid));color:#fff}
.gallery-arrows{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;padding:0 14px;pointer-events:none}
.gallery-arrow{pointer-events:auto;width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.gallery-arrow:hover{background:rgba(0,0,0,.55)}
.gallery-thumbs{display:flex;gap:8px;padding:12px;background:#000;overflow-x:auto}
.gallery-thumb{width:64px;height:48px;border-radius:8px;background-size:cover;background-position:center;flex-shrink:0;cursor:pointer;border:2px solid transparent;opacity:.6;transition:opacity .2s,border-color .2s}
.gallery-thumb.active{opacity:1;border-color:var(--gold)}
.gallery-dots{display:flex;justify-content:center;gap:7px;position:absolute;bottom:14px;left:0;right:0}
.gallery-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);border:none;cursor:pointer;transition:background .2s,transform .2s}
.gallery-dot.active{background:var(--gold);transform:scale(1.3)}
@media(max-width:700px){.gallery-main{height:240px}}

/* ---------- DETAIL PAGE LAYOUT (reused for package/honeymoon/umrah/hotel) ---------- */
.detail-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:36px;align-items:start}
.detail-info h2{font-size:24px;font-weight:900;margin-bottom:10px}
.detail-info .meta-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.detail-meta-item{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);background:var(--green-pale);padding:7px 14px;border-radius:20px}
.detail-info p.desc{font-size:14.5px;color:var(--muted);line-height:1.9;margin-bottom:20px}
.detail-section{margin-bottom:24px}
.detail-section h3{font-size:16px;font-weight:800;margin-bottom:12px}
.detail-sidebar{background:var(--green-pale);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;position:sticky;top:90px}
.detail-price{font-size:28px;font-weight:900;color:var(--green);margin-bottom:4px}
.detail-price span{font-size:12.5px;color:var(--muted);font-weight:500}
@media(max-width:840px){.detail-grid{grid-template-columns:1fr}.detail-sidebar{position:static}}

/* ---------- BIG CLEAR CTA BUTTONS ---------- */
.btn-cta-big{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:linear-gradient(135deg,var(--green),var(--green-mid));color:#fff;border:none;padding:18px 24px;border-radius:14px;font-family:inherit;font-size:17px;font-weight:800;cursor:pointer;box-shadow:0 10px 28px rgba(26,107,60,.3);transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden}
.btn-cta-big::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transition:left .6s}
.btn-cta-big:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(26,107,60,.4)}
.btn-cta-big:hover::after{left:150%}
.btn-cta-big .arrow{font-size:20px;animation:arrowPulse 1.6s ease-in-out infinite}
@keyframes arrowPulse{0%,50%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}}
.pkg-btn,.visa-btn{font-size:14px !important;padding:11px 22px !important;font-weight:800 !important}

/* ---------- HOTELS ---------- */
.hotel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px}
.hotel-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .3s,box-shadow .3s;cursor:pointer}
.hotel-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.hotel-card-img{height:170px;background-size:cover;background-position:center;position:relative;overflow:hidden;transition:transform .5s}
.hotel-card:hover .hotel-card-img{transform:scale(1.05)}
.hotel-card-img .emoji-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:42px;background:linear-gradient(135deg,var(--green-light),var(--green-pale))}
.hotel-card-body{padding:18px}
.hotel-card-body h3{font-size:16px;font-weight:800;margin-bottom:6px}
.hotel-card-body .addr{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-bottom:10px}
.hotel-card-body p{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:12px}

/* ---------- CLICKABLE CONTACT (everywhere) ---------- */
.contact-link{text-decoration:none;color:inherit;cursor:pointer;transition:color .2s}
.contact-link:hover{color:var(--green)}

/* ---------- FLOATING ACTION BUTTONS (call above whatsapp) ---------- */
.fab-stack{position:fixed;bottom:24px;left:24px;z-index:999;display:flex;flex-direction:column;gap:14px;align-items:center}
.fab-call{width:54px;height:54px;background:linear-gradient(145deg,var(--green-mid),var(--green-dark));border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(15,74,40,.45);text-decoration:none;position:relative;animation:fabBreathe 2.8s ease-in-out infinite}
.fab-call svg{width:26px;height:26px;fill:#fff}
@keyframes fabBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.fab-tooltip{position:absolute;right:64px;top:50%;transform:translateY(-50%);background:#111;color:#fff;font-size:12.5px;padding:7px 13px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s}
.fab-call:hover .fab-tooltip,.wa-float:hover .fab-tooltip{opacity:1}

/* ---------- NAV: more items, scroll on overflow ---------- */
.nav-links{flex-wrap:nowrap}

/* ---------- HOME TEASER CARDS (link out to full pages) ---------- */
.teaser-row{display:flex;justify-content:center;gap:12px;margin-top:18px;flex-wrap:wrap;position:relative;animation:fadeUpHero .9s ease .55s both}
.teaser-link{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;padding:9px 18px;border-radius:22px;font-size:13px;font-weight:700;text-decoration:none;transition:background .2s,transform .2s}
.teaser-link:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}

/* date range fields inside booking widget */
.bw-date-row{display:grid;grid-template-columns:1fr 1fr;border-left:1px solid var(--line)}
.bw-date-row .bw-field{border-left:1px solid var(--line)}
.bw-date-row .bw-field:last-child{border-left:none}
.bw-field input[type="date"]{border:none;outline:none;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);width:100%;background:transparent;cursor:pointer}
@media(max-width:760px){.bw-date-row{grid-template-columns:1fr}.bw-date-row .bw-field{border-left:none;border-bottom:1px solid var(--line)}}

/* ---------- BOOKING PAGE (dedicated, light background variant) ---------- */
.hero-booking-cta{margin-top:30px;display:flex;justify-content:center;animation:fadeUpHero .9s ease .5s both}
.booking-page-wrap{max-width:1000px;margin:0 auto;padding:0}
.bw-tabs-page{background:var(--green-pale);border:1px solid var(--line);border-radius:16px 16px 0 0}
.bw-tabs-page .bw-tab{color:var(--muted)}
.bw-tabs-page .bw-tab.active{background:#fff;color:var(--green-dark)}
.bw-note{margin-top:14px;font-size:12.5px;color:var(--muted);background:var(--green-pale);border:1px solid var(--line);border-radius:10px;padding:10px 14px;line-height:1.7}
@media(max-width:760px){
  .bw-tabs-page{overflow-x:auto;flex-wrap:nowrap}
}


/* ===========================================================
   إشعارات + حالة الرفع (نسخة السيرفر)
   =========================================================== */
.app-toast{position:fixed;bottom:24px;right:24px;background:#15291d;color:#fff;padding:14px 22px;border-radius:12px;font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;box-shadow:0 12px 34px rgba(0,0,0,.3);z-index:99999;opacity:0;transform:translateY(16px);transition:opacity .3s,transform .3s;pointer-events:none;max-width:min(420px,90vw);line-height:1.6}
.app-toast.show{opacity:1;transform:translateY(0)}
.app-toast.ok{background:#1a6b3c}
.app-toast.err{background:#a32d2d}
.img-preview-item.uploading{display:flex;align-items:center;justify-content:center;background:var(--green-light);font-size:18px;color:var(--green);animation:pulseUp 1s ease-in-out infinite}
@keyframes pulseUp{0%,100%{opacity:.55}50%{opacity:1}}
/* شاشة تحميل أولية */
#bootLoader{position:fixed;inset:0;background:linear-gradient(150deg,#0f4a28,#1a6b3c 60%,#23945a);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:99998;transition:opacity .4s}
#bootLoader.hide{opacity:0;pointer-events:none}
#bootLoader img{width:78px;height:78px;object-fit:contain;border-radius:14px}
#bootLoader .spin{width:34px;height:34px;border:3px solid rgba(255,255,255,.25);border-top-color:#c9a227;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#bootLoader p{color:rgba(255,255,255,.8);font-family:'Cairo',sans-serif;font-size:14px;font-weight:600}