/* KAAF Umrah Package Calculator — retheme to match kaaftravel.com (navy & gold) */
:root {
    --blue-deep: #0d2b4e;   /* main site navy */
    --blue: #123a67;        /* main site navy-mid */
    --blue-light: #1c4d85;  /* lighter navy accent (derived) */
    --navy-deep: #071a30;   /* main site darkest navy — topbar */
    --gold: #c9973b;        /* main site gold */
    --gold-light: #e6c584;  /* main site gold-light */
    --gold-ink: #20160a;    /* dark text used on gold buttons */
    --sky: #f6f2e8;         /* main site "sand" tint (replaces old light-blue tint) */
    --paper: #fffdf9;       /* main site paper background */
    --ink: #1b2430;         /* main site ink */
    --ink-soft: #5c6672;    /* main site muted text */
    --line: #e6e1d3;        /* main site hairline color */
    --white: #ffffff;
    --radius: 14px;
    --shadow: 0 14px 34px rgba(7,26,48,.10);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--ink); background: var(--paper); line-height: 1.6; }
h1, h2, h3, h4 { font-family: 'Lora', Georgia, serif; color: var(--blue-deep); line-height: 1.25; margin: 0 0 .5em; }
p { margin: 0 0 1em; color: var(--ink-soft); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
svg { width: 22px; height: 22px; vertical-align: -4px; flex-shrink: 0; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.islamic-bg {
    background-image: radial-gradient(circle at 0 0, rgba(255,255,255,.08) 1px, transparent 1px), radial-gradient(circle at 20px 20px, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 10px; font-weight: 600; font-size: .95rem; cursor: pointer; border: 2px solid transparent; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(201,151,59,.35); }
.btn-gold { background: var(--gold); color: var(--gold-ink); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(201,151,59,.35); }
.btn-outline { background: transparent; color: var(--blue-deep); border-color: var(--blue-deep); }
.btn-outline:hover { background: var(--blue-deep); color: #fff; }
.btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-outline-white:hover { border-color: var(--gold-light); color: var(--gold-light); }
.btn-danger { background: #b3261e; color: #fff; padding: 8px 14px; border-radius: 8px; font-size: .82rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* Top bar & Nav — identical classes/values to kaaftravel.com's live header,
   so the calculator's header is pixel-for-pixel the same as the main site. */
.topbar { background: var(--navy-deep); color: #cfe0f2; font-size: 13px; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; padding: 8px 24px; flex-wrap: wrap; gap: 8px; }
.topbar a { color: var(--gold-light); }

.navbar { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 2px 18px rgba(7,26,48,.1); border-bottom: 1px solid var(--line); }
.navbar .container { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; position: relative; }
.brand { display: flex; align-items: center; }
.brand-logo-chip { display: flex; align-items: center; }
.brand-logo-chip img { height: 40px; width: auto; display: block; }
.nav-menu { display: flex; align-items: center; gap: 32px; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { color: var(--blue-deep); font-size: 14.5px; font-weight: 500; transition: color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--gold); }
.nav-cta { display: flex; gap: 10px; }
.navToggle { display: none; background: none; border: 0; color: var(--blue-deep); font-size: 24px; cursor: pointer; }

/* Nav dropdown (matches kaaftravel.com's Destinations / Umrah Services dropdowns) */
.nav-dropdown{position:relative;}
.nav-dropdown-toggle{background:none; border:0; color:var(--blue-deep); font-size:14.5px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:5px; font-family:'Inter'; padding:0; transition:color .15s;}
.nav-dropdown-toggle:hover{color:var(--gold);}
.nav-dropdown-toggle svg{width:10px; height:10px; vertical-align:0; transition:transform .18s ease;}
.nav-dropdown.open .nav-dropdown-toggle svg{transform:rotate(180deg);}
.nav-dropdown-menu{position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%); background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 16px 34px rgba(7,26,48,.16); min-width:190px; padding:8px; display:none; z-index:60;}
.nav-dropdown.open .nav-dropdown-menu{display:block;}
.nav-dropdown-menu a{display:block; padding:10px 14px; border-radius:7px; font-size:14px; color:var(--blue-deep); font-weight:500;}
.nav-dropdown-menu a:hover{background:var(--sky); color:var(--gold);}
.nav-dropdown-menu a.active{color:var(--gold); font-weight:700;}

@media (max-width: 980px) {
    .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; padding: 18px 24px 22px; gap: 18px; box-shadow: 0 14px 24px rgba(7,26,48,.15); border-bottom: 1px solid var(--line); }
    .nav-menu.open { display: flex; }
    .nav-menu .nav-links { flex-direction: column; align-items: flex-start; gap: 14px; }
    .nav-menu .nav-cta { flex-direction: column; align-items: stretch; }
    .navToggle { display: block; }
    .nav-dropdown-menu{position:static; transform:none; box-shadow:none; border:0; padding:6px 0 2px 12px; min-width:0;}
}

/* Hero — two-column layout (text left, portrait image right), matches
   kaaftravel.com's homepage hero exactly. */
.hero{
  position:relative; overflow:hidden;
  background:radial-gradient(ellipse 120% 90% at 15% -10%, var(--blue) 0%, var(--blue-deep) 45%, var(--navy-deep) 100%);
  color:#fff; padding:86px 0 60px;
}
.hero .motif{
  position:absolute; inset:0; opacity:.14; pointer-events:none;
  background-image:
    radial-gradient(circle at 82% 20%, transparent 0 58px, rgba(230,197,132,.5) 59px 60px, transparent 61px),
    radial-gradient(circle at 82% 20%, transparent 0 90px, rgba(230,197,132,.28) 91px 92px, transparent 93px);
}
.hero .container{position:relative; z-index:2; text-align:left; max-width:1180px;}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;}
.hero .eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:13.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-light); margin-bottom:16px;}
.hero .eyebrow::before, .hero .eyebrow::after{content:""; width:26px; height:1.5px; background:var(--gold-light);}
.hero h1{color:#fff; font-family:'Montserrat','Inter',sans-serif; font-size:clamp(1.9rem, 1.2rem + 2.8vw, 3.2rem); font-weight:800; letter-spacing:-0.01em; margin:0 0 16px; max-width:760px;}
.hero p.lead{color:#c8d5e5; font-size:17.5px; line-height:1.65; max-width:520px; margin:0 0 30px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.hero-art{
  position:relative; aspect-ratio:4/5; border-radius:18px;
  background:linear-gradient(155deg, var(--blue), var(--navy-deep));
  border:1px solid rgba(230,197,132,.25);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:0; overflow:hidden;
}
.hero-art img{width:100%; height:100%; object-fit:cover;}
.hero-art::before{
  content:""; position:absolute; inset:14px; border:1px dashed rgba(230,197,132,.35); border-radius:12px; pointer-events:none;
}
.hero-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.hero-benefit { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 20px; }
.hero-benefit svg { width: 26px; height: 26px; color: var(--gold); margin-bottom: 10px; }
.hero-benefit strong { display: block; color: #fff; font-size: .95rem; }
@media(max-width: 900px) {
  .hero-grid{grid-template-columns:1fr;}
  .hero-art{aspect-ratio:16/9; order:-1;}
  .hero .container{text-align:center;}
  .hero .eyebrow{justify-content:center;}
  .hero p.lead{margin-left:auto; margin-right:auto;}
  .hero-actions{justify-content:center;}
}
@media(max-width: 760px) { .hero h1 { font-size: 1.9rem; } .hero-benefits { grid-template-columns: 1fr; } }

/* Section basics */
section { padding: 96px 0; }
.section-alt { background: var(--sky); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 46px; }
.section-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.section-head .eyebrow::before, .section-head .eyebrow::after { content: ""; width: 24px; height: 2px; background: var(--gold); }

/* Cards */
.icon-badge { width: 54px; height: 54px; border-radius: 14px; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.icon-badge svg { width: 26px; height: 26px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card { background: #fff; border-radius: var(--radius); padding: 30px 24px; text-align: center; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px rgba(10,56,102,.16); }
@media(max-width: 860px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

/* Hotel cards */
.hotel-filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 28px; }
.filter-pill { background: #fff; border: 1.5px solid #dbe6f0; color: var(--blue-deep); padding: 10px 18px; border-radius: 999px; font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .15s ease; }
.filter-pill:hover { border-color: var(--blue); }
.filter-pill.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.hotel-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.badge { font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.badge-star { background: #fdf1de; color: #a8730d; }
.badge-category { background: var(--sky); color: var(--blue-deep); }
.badge-shuttle { background: var(--sky); color: var(--blue-deep); }
.badge-walk { background: #e6f6ec; color: #1c7a41; }
.hotel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hotel-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; border: 2px solid transparent; }
.hotel-card:hover { transform: translateY(-6px); box-shadow: 0 24px 46px rgba(10,56,102,.18); }
.hotel-card.selected { border-color: var(--gold); }
.hotel-card img { width: 100%; height: 190px; object-fit: cover; }
.hotel-card .hotel-body { padding: 20px; }
.hotel-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.stars { color: var(--gold); font-size: .85rem; margin-bottom: 8px; }
.hotel-meta { font-size: .82rem; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.hotel-meta svg { width: 15px; height: 15px; flex-shrink: 0; }
.hotel-facilities { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.hotel-facilities span { background: var(--sky); color: var(--blue-deep); font-size: .72rem; padding: 3px 9px; border-radius: 999px; }
.hotel-room-select { width: 100%; padding: 9px 10px; border: 1px solid #dbe6f0; border-radius: 8px; font-size: .85rem; margin: 10px 0; background: #fff; }
.hotel-price { font-weight: 700; color: var(--blue-deep); font-size: 1.05rem; }
.hotel-price small { font-weight: 400; color: var(--ink-soft); font-size: .74rem; }
@media(max-width: 980px) { .hotel-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width: 620px) { .hotel-grid { grid-template-columns: 1fr; } }

/* Transport cards */
.transport-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.transport-card { background: #fff; border-radius: var(--radius); padding: 20px; text-align: center; box-shadow: var(--shadow); border: 2px solid transparent; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.transport-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(10,56,102,.16); }
.transport-card.selected { border-color: var(--gold); background: #fffaf0; }
.transport-card svg { width: 34px; height: 34px; color: var(--blue); margin-bottom: 10px; }
.transport-card h4 { font-size: .98rem; margin-bottom: 4px; }
.transport-card .cap { font-size: .78rem; color: var(--ink-soft); margin-bottom: 8px; }
.transport-card .price { font-weight: 700; color: var(--blue-deep); }
@media(max-width: 900px) { .transport-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width: 520px) { .transport-grid { grid-template-columns: 1fr; } }

/* On the calculator page, a fixed bottom bar with Back/Total/Next is also on screen — lift the WhatsApp bubble clear of it so it never covers the Next button. */
.has-sticky-total .whatsapp-float { bottom: 92px; }
@media(max-width: 560px) { .has-sticky-total .whatsapp-float { bottom: 78px; } }

/* ---- Calculator ---- */
.calc-shell { max-width: 980px; margin: 0 auto; }
.calc-steps-nav { display: flex; justify-content: space-between; margin-bottom: 40px; list-style: none; padding: 0; position: relative; }
.calc-steps-nav::before { content: ""; position: absolute; top: 17px; left: 5%; right: 5%; height: 2px; background: #dce6f0; z-index: 0; }
.calc-steps-nav li { text-align: center; flex: 1; position: relative; z-index: 1; font-size: .72rem; color: var(--ink-soft); font-weight: 600; cursor: pointer; }
.calc-steps-nav .dot { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2px solid #dce6f0; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-weight: 700; transition: all .2s ease; }
.calc-steps-nav li:hover .dot { border-color: var(--gold); color: var(--blue-deep); transform: translateY(-2px); }
.calc-steps-nav li.active .dot { border-color: var(--blue); background: var(--blue); color: #fff; }
.calc-steps-nav li.done .dot { border-color: var(--gold); background: var(--gold); color: #fff; }
.calc-steps-nav li.active { color: var(--blue-deep); }

.calc-card { background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 36px; margin-bottom: 24px; }
.calc-step { display: none; }
.calc-step.active { display: block; animation: fadein .25s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.traveler-row, .nights-row { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid #eef2f7; }
.traveler-row:last-child, .nights-row:last-child { border-bottom: none; }
.traveler-row .label strong, .nights-row .label strong { display: block; color: var(--blue-deep); font-size: 1rem; }
.traveler-row .label span, .nights-row .label span { font-size: .8rem; color: var(--ink-soft); }
.stepper { display: flex; align-items: center; gap: 14px; }
.stepper button { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--blue); background: #fff; color: var(--blue); font-size: 1.2rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; }
.stepper button:hover { background: var(--blue); color: #fff; }
.stepper button:disabled { opacity: .35; cursor: not-allowed; border-color: #ccc; color: #ccc; background: #fff; }
.stepper .val { min-width: 34px; text-align: center; font-size: 1.15rem; font-weight: 700; color: var(--blue-deep); }
.total-nights-banner { background: var(--sky); border-radius: 12px; padding: 16px 20px; text-align: center; font-weight: 700; color: var(--blue-deep); margin-top: 10px; }

.calc-shell { padding-bottom: 100px; }

.sticky-total { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: linear-gradient(90deg, var(--blue-deep), var(--blue)); color: #fff; padding: 14px 0; box-shadow: 0 -6px 24px rgba(0,0,0,.18); }
.sticky-total-inner { max-width: 980px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.sticky-total-amount { text-align: center; }
.sticky-total .label { font-size: .74rem; opacity: .85; display: block; }
.sticky-total .amount { font-size: 1.4rem; font-weight: 800; font-family: 'Lora', Georgia, serif; line-height: 1.2; }
.sticky-total .btn { padding: 11px 20px; flex-shrink: 0; }
@media(max-width: 640px) { .sticky-total .label, .sticky-total #stickyMeta { display: none; } .sticky-total .amount { font-size: 1.15rem; } .sticky-total .btn { padding: 10px 14px; font-size: .85rem; } }

.service-check-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border: 1px solid #e8eef4; border-radius: 12px; margin-bottom: 12px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.service-check-row:hover { border-color: var(--blue-light); }
.service-check-row.checked { border-color: var(--gold); background: #fffaf0; }
.service-check-row input { width: 19px; height: 19px; accent-color: var(--blue); }
.service-check-row .info strong { display: block; color: var(--blue-deep); font-size: .95rem; }
.service-check-row .info span { font-size: .78rem; color: var(--ink-soft); }
.service-check-row .price { font-weight: 700; color: var(--blue-deep); white-space: nowrap; }

.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-bottom: 24px; }
.summary-item { padding: 12px 0; border-bottom: 1px solid #eef2f7; }
.summary-item .k { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.summary-item .v { font-weight: 600; color: var(--blue-deep); }
.summary-breakdown { background: var(--sky); border-radius: 12px; padding: 20px 24px; margin-bottom: 24px; }
.summary-breakdown .row { display: flex; justify-content: space-between; padding: 8px 0; font-size: .9rem; border-bottom: 1px dashed #cfe0f0; }
.summary-breakdown .row:last-child { border-bottom: none; }
.summary-breakdown .row.total { font-weight: 800; font-size: 1.2rem; color: var(--blue-deep); border-top: 2px solid var(--blue); padding-top: 14px; margin-top: 6px; }
@media(max-width: 680px) { .summary-grid { grid-template-columns: 1fr; } }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: .85rem; font-weight: 600; color: var(--blue-deep); margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1.5px solid #dbe6f0; border-radius: 10px; font-size: .92rem; font-family: inherit; background: #fbfdff; color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: #fff; }
.field textarea { resize: vertical; min-height: 100px; }

/* Password field with show/hide eye toggle */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 44px !important; }
.password-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--ink-soft, #6b7c8f); border-radius: 8px; padding: 0; }
.password-toggle:hover { color: var(--blue); background: #eef4fb; }
.password-toggle svg { width: 19px; height: 19px; pointer-events: none; }
.password-toggle .eye-off { display: none; }
.password-toggle.is-visible .eye-on { display: none; }
.password-toggle.is-visible .eye-off { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media(max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

.alert { padding: 14px 18px; border-radius: 10px; margin-bottom: 20px; font-size: .9rem; font-weight: 500; }
.alert-success { background: #e6f6ec; color: #1c7a41; border: 1px solid #b6e6c6; }
.alert-error { background: #fdecec; color: #b3261e; border: 1px solid #f5c2c0; }

.cta-banner { background: linear-gradient(120deg, var(--blue-deep), var(--blue)); border-radius: 22px; padding: 50px; text-align: center; color: #fff; }
.cta-banner h2 { color: #fff; }
.cta-banner p { color: rgba(255,255,255,.82); max-width: 520px; margin: 0 auto 26px; }

/* ---------- Umrah Guide — numbered step list ---------- */
.guide-steps{max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:6px;}
.guide-step{display:flex; gap:24px; padding:32px 0; border-bottom:1px solid var(--line);}
.guide-step:last-child{border-bottom:none;}
.guide-num{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  background:var(--blue-deep); color:var(--gold-light);
  display:flex; align-items:center; justify-content:center;
  font-family:'Lora', Georgia, serif; font-weight:700; font-size:22px;
}
.guide-body{flex:1; min-width:0;}
.guide-body h3{margin:4px 0 10px; font-size:1.3rem;}
.guide-body p{margin-bottom:12px;}
.guide-body ul{margin:0; padding:0 0 0 20px;}
.guide-body li{margin-bottom:10px; color:var(--ink-soft); line-height:1.6;}
.guide-body li strong{color:var(--blue-deep);}
.guide-body li em{color:var(--ink); font-style:italic;}
@media(max-width:640px){
  .guide-step{gap:16px; padding:24px 0;}
  .guide-num{width:42px; height:42px; font-size:18px;}
}

/* Guide callout box (authenticity note / disclaimer) */
.guide-note{
  background:var(--sky); border-left:4px solid var(--gold);
  border-radius:10px; padding:22px 26px; margin:0 auto 8px; max-width:860px;
}
.guide-note h4{margin:0 0 8px; font-size:15px; color:var(--blue-deep); display:flex; align-items:center; gap:8px;}
.guide-note p{margin:0 0 8px; font-size:14.5px; color:var(--ink-soft); line-height:1.65;}
.guide-note p:last-child{margin-bottom:0;}

/* Dua block — Arabic + transliteration + meaning + source */
.dua-block{background:#fff; border:1px solid var(--line); border-radius:12px; padding:26px 28px; margin:14px 0; text-align:center;}
.dua-arabic{
  font-family:'Amiri', 'Traditional Arabic', serif; font-size:28px; line-height:2.1;
  color:var(--blue-deep); direction:rtl; text-align:center;
  background:linear-gradient(180deg, var(--sky), #fbf6ea);
  border:1px solid rgba(201,151,59,.35); border-radius:10px;
  padding:18px 22px; margin-bottom:16px;
}
.dua-translit{font-style:italic; color:var(--ink); font-size:14.5px; margin-bottom:8px; line-height:1.6; text-align:center;}
.dua-meaning{color:var(--ink-soft); font-size:14.5px; margin-bottom:8px; line-height:1.6; text-align:center;}
.dua-source{font-size:12.5px; color:var(--gold-dark, #a8730d); font-weight:600; text-align:center; display:block;}

/* Qur'an-specific variant — a richer, more prominent highlight than the
   Hadith/Talbiyah dua blocks, plus a small "Qur'an" badge, so the actual
   Qur'anic verses are visually distinct from Hadith-sourced text. */
.dua-block.quran-verse{border-color:rgba(201,151,59,.55); box-shadow:0 8px 24px rgba(201,151,59,.14);}
.dua-block.quran-verse .dua-arabic{
  background:linear-gradient(180deg, #fbf0d4, #f6e3ae);
  border:1.5px solid var(--gold);
  font-size:29px;
}
/* Hero ayat box — bold Qur'anic verse inside the hero (dark background) */
.hero-ayat{
  position:relative; max-width:560px; margin:22px 0 28px; padding:30px 26px 20px; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  border:1.5px solid rgba(230,197,132,.6); border-radius:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.hero-ayat .quran-tag{position:absolute; top:-13px; left:50%; transform:translateX(-50%); margin:0; background:var(--gold); color:var(--gold-ink);}
.hero-ayat-arabic{font-family:'Amiri','Traditional Arabic',serif; font-weight:700; font-size:34px; line-height:1.9; color:var(--gold-light); direction:rtl; margin:2px 0 8px;}
.hero-ayat-trans{color:#fff; font-weight:700; font-size:16.5px; line-height:1.5; margin-bottom:8px;}
.hero-ayat-src{color:var(--gold-light); font-size:12.5px; font-weight:600; letter-spacing:.04em;}
@media(max-width:900px){.hero-ayat{margin-left:auto; margin-right:auto;}}

.quran-tag{
  display:inline-block; background:var(--blue-deep); color:var(--gold-light);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 12px; border-radius:999px; margin-bottom:14px;
}

/* Sub-heading inside a guide step (e.g. "For men" / "For women") */
.guide-body h4{font-size:15px; color:var(--blue-deep); margin:18px 0 8px; font-family:'Inter'; font-weight:700; text-transform:uppercase; letter-spacing:.03em;}

/* Common mistakes — warning-style list */
.mistake-list{max-width:860px; margin:0 auto; list-style:none; padding:0;}
.mistake-list li{
  display:flex; align-items:flex-start; gap:12px; padding:14px 18px;
  background:#fdf3f0; border-left:3px solid #c0503f; border-radius:8px;
  margin-bottom:10px; font-size:14.5px; color:var(--ink); line-height:1.55;
}
.mistake-list li::before{content:"✕"; flex:0 0 auto; color:#c0503f; font-weight:700; font-size:13px; margin-top:2px;}

/* Visual checklist */
.check-list{max-width:640px; margin:0 auto; list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 24px;}
.check-list li{display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--ink);}
.check-list li::before{
  content:""; flex:0 0 auto; width:20px; height:20px; border-radius:5px;
  border:2px solid var(--gold); background:#fff;
}
@media(max-width:600px){.check-list{grid-template-columns:1fr;}}

/* References list */
.ref-list{max-width:860px; margin:0 auto; padding:0; list-style:none;}
.ref-list li{font-size:13px; color:var(--ink-soft); padding:8px 0; border-bottom:1px solid var(--line);}
.ref-list li:last-child{border-bottom:none;}


/* ---- Admin ---- */
.admin-body { background: var(--paper); min-height: 100vh; }
.admin-shell { max-width: 1150px; margin: 0 auto; padding: 30px 24px 60px; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.admin-nav { display: flex; gap: 6px; flex-wrap: wrap; background: #fff; border-radius: 12px; padding: 8px; box-shadow: var(--shadow); margin-bottom: 24px; }
.admin-nav a { padding: 9px 14px; border-radius: 8px; font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.admin-nav a:hover { background: var(--sky); color: var(--blue-deep); }
.admin-card { background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 26px; margin-bottom: 22px; }
.admin-card h3 { margin-bottom: 6px; }
.admin-form { max-width: 780px; }
.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 26px; }
.stat-box { background: #fff; border-radius: 14px; padding: 20px; text-align: center; box-shadow: var(--shadow); }
.stat-box strong { display: block; font-size: 1.7rem; color: var(--blue-deep); font-family: 'Lora', Georgia, serif; }
.stat-box span { font-size: .78rem; color: var(--ink-soft); }
@media(max-width: 980px) { .stat-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media(max-width: 620px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
.admin-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.admin-table th { background: var(--blue-deep); color: #fff; text-align: left; padding: 10px 12px; white-space: nowrap; }
.admin-table td { padding: 10px 12px; border-bottom: 1px solid #eef2f7; }
.admin-table tbody tr:nth-child(even) { background: #f9fbfd; }
.login-card { max-width: 420px; margin: 80px auto; background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 40px; text-align: center; }
.login-card img { width: 70px; margin: 0 auto 16px; }

.breadcrumb { font-size: .82rem; color: rgba(255,255,255,.65); margin-bottom: 10px; }
.page-hero { background: linear-gradient(120deg, var(--blue-deep), var(--blue)); color: #fff; padding: 60px 0 44px; text-align: center; }
.page-hero h1 { color: #fff; margin-bottom: 8px; }
.page-hero p { color: rgba(255,255,255,.78); max-width: 55ch; margin: 0 auto; }

/* ---------- Footer — same navy & gold look as kaaftravel.com ---------- */
footer.site-footer{position:relative; overflow:hidden; background:var(--navy-deep); color:#c8d5e5; margin-top:72px;}
footer.site-footer::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,var(--gold),var(--gold-light),var(--gold),transparent);}
footer.site-footer::after{
  content:""; position:absolute; top:-70px; right:-70px; width:340px; height:340px; pointer-events:none; opacity:.55;
  background:
    radial-gradient(circle at center,transparent 0 96px,rgba(230,197,132,.16) 97px 98px,transparent 99px),
    radial-gradient(circle at center,transparent 0 150px,rgba(230,197,132,.10) 151px 152px,transparent 153px);
}
.footer-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.5fr .9fr 1.15fr 1.25fr; gap:44px; padding:72px 24px 52px; max-width:1180px; margin:0 auto;}
.footer-col h4{position:relative; margin:0 0 24px; padding-bottom:13px; font-family:'Lora',Georgia,serif; font-size:1.05rem; font-weight:600; color:#fff;}
.footer-col h4::after{content:""; position:absolute; left:0; bottom:0; width:32px; height:2px; background:var(--gold);}

.footer-logo{display:inline-block; width:96px; height:96px; margin-bottom:18px;}
.footer-logo img{width:100%; height:100%; object-fit:contain;}
.footer-about{margin:0 0 14px; font-size:.93rem; line-height:1.75; color:#a9bcd0; max-width:380px;}
.footer-group{margin:0 0 24px; padding-top:14px; border-top:1px solid rgba(255,255,255,.09); max-width:380px; font-size:.82rem; line-height:1.6; color:#8ea3ba;}
.footer-cta{padding:12px 24px; font-size:.9rem;}

.footer-links, .footer-contact{list-style:none; margin:0; padding:0;}
.footer-links li{margin:0 0 13px;}
.footer-links a{display:inline-flex; align-items:center; gap:9px; font-size:.94rem; color:#a9bcd0; transition:color .2s ease, transform .2s ease;}
.footer-links a::before{content:"\203A"; color:var(--gold); font-size:1.25rem; line-height:1; transition:transform .2s ease;}
.footer-links a:hover{color:var(--gold-light); transform:translateX(4px);}

.footer-contact li{display:flex; align-items:flex-start; gap:14px; margin:0 0 20px;}
.fc-ico{flex:none; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold-light); background:rgba(230,197,132,.10); border:1px solid rgba(230,197,132,.28); transition:background .25s ease, transform .25s ease;}
.fc-ico svg{width:18px; height:18px;}
.footer-contact li:hover .fc-ico{background:rgba(230,197,132,.2); transform:scale(1.06);}
.fc-text{min-width:0;}
.fc-text small{display:block; margin-bottom:4px; font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#7f93a8;}
.fc-text a, .fc-text span{display:block; font-size:.94rem; line-height:1.55; color:#dbe6f2;}
.fc-text a{transition:color .2s ease;}
.fc-text a:hover{color:var(--gold-light);}

.footer-bottom{position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.08);}
.footer-bottom-in{display:flex; align-items:center; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; max-width:1180px; margin:0 auto; padding:20px 24px; font-size:.82rem; color:#7f93a8;}
.footer-bottom-in a{color:var(--gold-light); font-weight:600; transition:color .2s ease;}
.footer-bottom-in a:hover{color:#fff;}
@media (max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr; gap:38px 32px; padding:60px 24px 40px;}}
@media (max-width:600px){
  .footer-grid{grid-template-columns:1fr; gap:34px;}
  .footer-bottom-in{flex-direction:column; align-items:flex-start;}
}

/* ---------- WhatsApp float ---------- */
.whatsapp-float{
  position:fixed; right:22px; bottom:22px; z-index:60;
  display:flex; align-items:center; gap:8px;
  background:#25D366; color:#fff; padding:12px 18px; border-radius:50px;
  box-shadow:0 10px 26px rgba(0,0,0,.25); font-size:14px; font-weight:600;
}
.whatsapp-float svg{width:20px; height:20px;}

/* ---------- Scroll reveal (matches kaaftravel.com's fade-up motion) ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; }
.reveal.in-view { animation: fadeUp .6s ease forwards; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; animation: none !important; }
}