Domain Default page

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8"/>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>IHRAMHUB — Sacred Journeys, Perfected</title>

<link rel="preconnect" href="https://fonts.googleapis.com"/>

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>

<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=Noto+Naskh+Arabic:wght@400;500&display=swap" rel="stylesheet"/>

<style>

/* ===== CSS VARIABLES ===== */

:root {

--white: #FFFFFF;

--black: #111111;

--gold: #C8A96B;

--gold-light: #E8D5A3;

--gold-dark: #A8893B;

--base: #F0EDE8;

--base-dark: #E4E0D8;

--base-deeper: #D8D2C8;

--shadow-light: rgba(255,255,255,0.85);

--shadow-dark: rgba(180,168,148,0.45);

--text-primary: #1A1714;

--text-secondary: #6B6358;

--text-muted: #9B9188;

--neu-shadow: 6px 6px 14px rgba(180,168,148,0.4), -4px -4px 10px rgba(255,255,255,0.9);

--neu-shadow-sm: 3px 3px 8px rgba(180,168,148,0.35), -2px -2px 6px rgba(255,255,255,0.9);

--neu-inset: inset 4px 4px 10px rgba(180,168,148,0.4), inset -4px -4px 10px rgba(255,255,255,0.9);

--neu-inset-sm: inset 2px 2px 6px rgba(180,168,148,0.35), inset -2px -2px 6px rgba(255,255,255,0.9);

--radius: 20px;

--radius-sm: 12px;

--radius-xs: 8px;

--transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

--font-display: 'Cormorant Garamond', serif;

--font-body: 'DM Sans', sans-serif;

--font-arabic: 'Noto Naskh Arabic', serif;

}

/* ===== RESET & BASE ===== */

, ::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {

font-family: var(--font-body);

background: var(--base);

color: var(--text-primary);

min-height: 100vh;

overflow-x: hidden;

}

img { max-width: 100%; display: block; }

button { cursor: pointer; border: none; outline: none; font-family: var(--font-body); }

input, select, textarea { font-family: var(--font-body); outline: none; border: none; }

a { text-decoration: none; color: inherit; }

ul { list-style: none; }

/* ===== SCROLLBAR ===== */

::-webkit-scrollbar { width: 6px; }

::-webkit-scrollbar-track { background: var(--base); }

::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }

/* ===== PAGE SYSTEM ===== */

.page { display: none; min-height: 100vh; }

.page.active { display: block; animation: pageIn 0.5s cubic-bezier(0.4,0,0.2,1); }

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

/* ===== NAVBAR ===== */

.navbar {

position: fixed; top: 0; left: 0; right: 0; z-index: 1000;

background: rgba(240,237,232,0.92);

backdrop-filter: blur(20px);

border-bottom: 1px solid rgba(200,169,107,0.15);

padding: 0 clamp(16px,4vw,60px);

height: 70px;

display: flex; align-items: center; justify-content: space-between;

box-shadow: 0 2px 30px rgba(180,168,148,0.2);

}

.nav-logo {

display: flex; align-items: center; gap: 10px; cursor: pointer;

}

.nav-logo-mark {

width: 38px; height: 38px;

background: linear-gradient(135deg, var(--gold), var(--gold-dark));

border-radius: 10px;

display: flex; align-items: center; justify-content: center;

font-family: var(--font-arabic); color: #fff; font-size: 18px;

box-shadow: 2px 2px 8px rgba(168,137,59,0.4);

}

.nav-logo-text { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: 0.03em; }

.nav-logo-text span { color: var(--gold); }

.nav-links { display: flex; align-items: center; gap: 28px; }

.nav-link {

font-size: 0.875rem; font-weight: 400; color: var(--text-secondary);

transition: var(--transition); cursor: pointer; letter-spacing: 0.02em;

}

.nav-link:hover { color: var(--text-primary); }

.nav-actions { display: flex; align-items: center; gap: 12px; }

.btn-nav-login {

padding: 8px 20px; border-radius: 50px;

background: transparent;

box-shadow: var(--neu-shadow-sm);

font-size: 0.875rem; font-weight: 500; color: var(--text-primary);

transition: var(--transition);

}

.btn-nav-login:hover { box-shadow: var(--neu-inset-sm); }

.btn-nav-cta {

padding: 8px 22px; border-radius: 50px;

background: linear-gradient(135deg, var(--gold), var(--gold-dark));

color: white; font-size: 0.875rem; font-weight: 500;

box-shadow: 3px 3px 10px rgba(168,137,59,0.4);

transition: var(--transition); letter-spacing: 0.03em;

}

.btn-nav-cta:hover { transform: translateY(-1px); box-shadow: 4px 5px 14px rgba(168,137,59,0.5); }

.nav-avatar {

width: 38px; height: 38px; border-radius: 50%;

background: linear-gradient(135deg, var(--gold-light), var(--gold));

display: flex; align-items: center; justify-content: center;

font-size: 0.8rem; font-weight: 600; color: var(--black);

box-shadow: var(--neu-shadow-sm); cursor: pointer; display:none;

}

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }

.hamburger span { width: 22px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: var(--transition); }

/* ===== NEUMORPHIC COMPONENTS ===== */

.neu-card {

background: var(--base);

border-radius: var(--radius);

box-shadow: var(--neu-shadow);

padding: 28px;

transition: var(--transition);

}

.neu-card:hover { box-shadow: 8px 8px 20px rgba(180,168,148,0.45), -4px -4px 12px rgba(255,255,255,0.95); }

.neu-card-sm {

background: var(--base);

border-radius: var(--radius-sm);

box-shadow: var(--neu-shadow-sm);

padding: 20px;

transition: var(--transition);

}

.neu-input {

background: var(--base);

box-shadow: var(--neu-inset);

border-radius: var(--radius-sm);

padding: 14px 18px;

font-size: 0.9rem; color: var(--text-primary);

width: 100%; transition: var(--transition);

}

.neu-input::placeholder { color: var(--text-muted); }

.neu-input:focus { box-shadow: var(--neu-inset-sm), 0 0 0 2px rgba(200,169,107,0.25); }

.neu-select {

background: var(--base);

box-shadow: var(--neu-inset);

border-radius: var(--radius-sm);

padding: 14px 18px;

font-size: 0.9rem; color: var(--text-primary);

width: 100%; appearance: none;

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C8A96B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

background-repeat: no-repeat;

background-position: right 16px center;

cursor: pointer;

}

.btn-primary {

background: linear-gradient(135deg, var(--gold), var(--gold-dark));

color: white; border-radius: 50px;

padding: 14px 32px; font-size: 0.95rem; font-weight: 500;

box-shadow: 4px 4px 14px rgba(168,137,59,0.45);

transition: var(--transition); letter-spacing: 0.04em;

display: inline-flex; align-items: center; gap: 8px;

}

.btn-primary:hover { transform: translateY(-2px); box-shadow: 5px 6px 18px rgba(168,137,59,0.55); }

.btn-secondary {

background: var(--base);

color: var(--text-primary); border-radius: 50px;

padding: 13px 28px; font-size: 0.9rem; font-weight: 500;

box-shadow: var(--neu-shadow-sm);

transition: var(--transition);

display: inline-flex; align-items: center; gap: 8px;

}

.btn-secondary:hover { box-shadow: var(--neu-inset-sm); }

.btn-ghost {

background: transparent; color: var(--gold);

font-size: 0.875rem; font-weight: 500;

padding: 8px 16px; border-radius: 50px;

transition: var(--transition);

display: inline-flex; align-items: center; gap: 6px;

}

.btn-ghost:hover { background: rgba(200,169,107,0.1); }

/* ===== GOLD BADGE ===== */

.gold-badge {

display: inline-flex; align-items: center; gap: 5px;

background: linear-gradient(135deg, rgba(200,169,107,0.15), rgba(200,169,107,0.08));

border: 1px solid rgba(200,169,107,0.3);

border-radius: 50px; padding: 5px 14px;

font-size: 0.78rem; font-weight: 500; color: var(--gold-dark);

letter-spacing: 0.06em; text-transform: uppercase;

}

/* ===== STAR RATING ===== */

.stars { color: var(--gold); letter-spacing: 2px; font-size: 0.85rem; }

/* ===== SECTION LAYOUT ===== */

.section { padding: 80px clamp(16px,5vw,80px); }

.section-header { text-align: center; margin-bottom: 56px; }

.section-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 500; line-height: 1.2; margin-bottom: 14px; }

.section-sub { color: var(--text-secondary); font-size: 1rem; max-width: 520px; margin: 0 auto; line-height: 1.7; }

/* ===== MODAL ===== */

.modal-overlay {

position: fixed; inset: 0; z-index: 2000;

background: rgba(26,23,20,0.6);

backdrop-filter: blur(8px);

display: none; align-items: center; justify-content: center;

padding: 20px;

}

.modal-overlay.open { display: flex; animation: fadeIn 0.3s ease; }

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.modal-box {

background: var(--base);

border-radius: 28px;

box-shadow: 20px 20px 50px rgba(100,90,75,0.3), -8px -8px 20px rgba(255,255,255,0.8);

width: 100%; max-width: 460px;

padding: 40px;

animation: slideUp 0.4s cubic-bezier(0.4,0,0.2,1);

position: relative;

}

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

.modal-close {

position: absolute; top: 18px; right: 20px;

width: 32px; height: 32px; border-radius: 50%;

background: var(--base); box-shadow: var(--neu-shadow-sm);

display: flex; align-items: center; justify-content: center;

cursor: pointer; font-size: 1rem; color: var(--text-secondary);

transition: var(--transition);

}

.modal-close:hover { box-shadow: var(--neu-inset-sm); }

/* ===== TOAST ===== */

.toast {

position: fixed; bottom: 30px; right: 30px; z-index: 3000;

background: var(--black); color: white;

padding: 14px 22px; border-radius: var(--radius-sm);

font-size: 0.875rem; font-weight: 400;

box-shadow: 0 8px 30px rgba(0,0,0,0.25);

display: flex; align-items: center; gap: 10px;

transform: translateX(120%); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);

}

.toast.show { transform: translateX(0); }

.toast-icon { color: var(--gold); font-size: 1rem; }

/* ===== PROGRESS BAR ===== */

.progress-bar { height: 4px; background: var(--base-dark); border-radius: 2px; overflow: hidden; }

.progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 2px; transition: width 0.8s ease; }

/* ===== TRUST SCORE ===== */

.trust-score {

display: flex; align-items: center; gap: 8px;

}

.trust-ring {

width: 44px; height: 44px; border-radius: 50%;

background: conic-gradient(var(--gold) calc(var(--score)*3.6deg), var(--base-dark) 0deg);

display: flex; align-items: center; justify-content: center;

position: relative;

}

.trust-ring::before {

content: ''; position: absolute; inset: 5px;

background: var(--base); border-radius: 50%;

}

.trust-ring-val { position: relative; z-index: 1; font-size: 0.65rem; font-weight: 600; color: var(--gold-dark); }

/* ===== TAG ===== */

.tag {

display: inline-block; padding: 4px 12px; border-radius: 50px;

font-size: 0.75rem; font-weight: 500; letter-spacing: 0.03em;

}

.tag-gold { background: rgba(200,169,107,0.15); color: var(--gold-dark); border: 1px solid rgba(200,169,107,0.25); }

.tag-green { background: rgba(72,168,112,0.12); color: #2D7A52; border: 1px solid rgba(72,168,112,0.2); }

.tag-blue { background: rgba(72,120,200,0.1); color: #2D5A9A; border: 1px solid rgba(72,120,200,0.2); }

.tag-red { background: rgba(220,80,80,0.1); color: #A03030; border: 1px solid rgba(220,80,80,0.2); }

/* ===== DIVIDER ===== */

.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--base-dark), transparent); margin: 24px 0; }

.divider-gold { height: 1px; background: linear-gradient(90deg, transparent, rgba(200,169,107,0.4), transparent); margin: 24px 0; }

/* ===== TOOLTIP ===== */

.tooltip-wrap { position: relative; display: inline-flex; }

.tooltip-wrap .tooltip-text {

position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);

background: var(--black); color: white; padding: 6px 12px; border-radius: 8px;

font-size: 0.75rem; white-space: nowrap; pointer-events: none;

opacity: 0; transition: opacity 0.2s;

}

.tooltip-wrap:hover .tooltip-text { opacity: 1; }

/* ===== SKELETON ===== */

.skeleton { background: linear-gradient(90deg, var(--base-dark) 25%, var(--base-deeper) 50%, var(--base-dark) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }

@keyframes shimmer { 0%{ background-position: 200% 0; } 100%{ background-position: -200% 0; } }

/* ======================= */

/* ===== PAGE: HOME ===== */

/* ======================= */

#page-home { padding-top: 70px; }

/* Hero */

.hero {

min-height: 100vh;

background: var(--base);

display: flex; flex-direction: column; align-items: center; justify-content: center;

text-align: center; padding: clamp(60px,8vh,100px) clamp(16px,5vw,60px) 60px;

position: relative; overflow: hidden;

}

.hero-bg-pattern {

position: absolute; inset: 0; pointer-events: none; opacity: 0.04;

background-image: repeating-linear-gradient(45deg, var(--gold) 0, var(--gold) 1px, transparent 0, transparent 50%);

background-size: 30px 30px;

}

.hero-arabic {

font-family: var(--font-arabic); font-size: clamp(1rem,2.5vw,1.4rem);

color: var(--gold); margin-bottom: 20px; letter-spacing: 0.05em;

opacity: 0.8;

}

.hero-title {

font-family: var(--font-display);

font-size: clamp(2.8rem,7vw,6rem);

font-weight: 400; line-height: 1.05; letter-spacing: -0.01em;

margin-bottom: 22px;

}

.hero-title .accent { color: var(--gold); font-style: italic; }

.hero-sub {

font-size: clamp(0.95rem,1.8vw,1.1rem); color: var(--text-secondary);

max-width: 540px; margin: 0 auto 48px; line-height: 1.75;

}

.hero-stats {

display: flex; gap: 40px; justify-content: center; margin-bottom: 56px;

flex-wrap: wrap;

}

.hero-stat { text-align: center; }

.hero-stat-val { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; color: var(--text-primary); }

.hero-stat-lbl { font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }

/* Search Box */

.search-box {

background: var(--base);

border-radius: 28px;

box-shadow: var(--neu-shadow);

padding: clamp(22px,3vw,36px);

width: 100%; max-width: 880px;

margin: 0 auto;

}

.search-tabs { display: flex; gap: 8px; margin-bottom: 24px; }

.search-tab {

padding: 9px 22px; border-radius: 50px;

font-size: 0.875rem; font-weight: 500; cursor: pointer;

transition: var(--transition); color: var(--text-secondary);

background: transparent;

}

.search-tab.active {

background: var(--base);

box-shadow: var(--neu-shadow-sm);

color: var(--text-primary);

}

.search-fields { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 14px; align-items: end; }

.search-field label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; }

.search-btn {

background: linear-gradient(135deg, var(--gold), var(--gold-dark));

color: white; border-radius: var(--radius-sm);

padding: 14px 28px; font-size: 0.95rem; font-weight: 500;

box-shadow: 4px 4px 14px rgba(168,137,59,0.4);

transition: var(--transition); white-space: nowrap;

display: flex; align-items: center; gap: 8px;

}

.search-btn:hover { transform: translateY(-2px); box-shadow: 5px 6px 18px rgba(168,137,59,0.55); }

.search-quick-filters { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.qf-chip {

padding: 6px 16px; border-radius: 50px; font-size: 0.8rem;

background: var(--base); box-shadow: var(--neu-shadow-sm);

cursor: pointer; transition: var(--transition); color: var(--text-secondary);

}

.qf-chip:hover, .qf-chip.active { box-shadow: var(--neu-inset-sm); color: var(--gold-dark); }

/* Featured Packages */

.packages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 24px; }

.pkg-card {

background: var(--base);

border-radius: var(--radius);

box-shadow: var(--neu-shadow);

overflow: hidden; cursor: pointer;

transition: var(--transition);

position: relative;

}

.pkg-card:hover { transform: translateY(-4px); box-shadow: 10px 10px 28px rgba(180,168,148,0.5), -4px -4px 12px rgba(255,255,255,0.95); }

.pkg-img {

height: 200px;

background: linear-gradient(135deg, var(--base-deeper), var(--base-dark));

position: relative; overflow: hidden;

display: flex; align-items: center; justify-content: center;

}

.pkg-img-placeholder {

font-family: var(--font-arabic); font-size: 3rem; color: rgba(200,169,107,0.3);

}

.pkg-img-overlay {

position: absolute; inset: 0;

background: linear-gradient(to top, rgba(26,23,20,0.5), transparent);

}

.pkg-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }

.pkg-fav {

position: absolute; top: 12px; right: 12px;

width: 34px; height: 34px; border-radius: 50%;

background: rgba(240,237,232,0.9); backdrop-filter: blur(10px);

display: flex; align-items: center; justify-content: center;

font-size: 1rem; cursor: pointer; transition: var(--transition);

box-shadow: 2px 2px 8px rgba(0,0,0,0.1);

}

.pkg-fav:hover { transform: scale(1.1); }

.pkg-fav.saved { color: #E04040; }

.pkg-body { padding: 20px; }

.pkg-agency { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }

.pkg-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; margin-bottom: 8px; line-height: 1.3; }

.pkg-meta { display: flex; gap: 16px; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 14px; flex-wrap: wrap; }

.pkg-meta-item { display: flex; align-items: center; gap: 4px; }

.pkg-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(200,169,107,0.12); }

.pkg-price-lbl { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

.pkg-price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--text-primary); }

.pkg-price span { font-size: 0.85rem; font-weight: 400; color: var(--text-muted); }

.pkg-actions { display: flex; gap: 8px; }

.pkg-btn { padding: 8px 18px; border-radius: 50px; font-size: 0.8rem; font-weight: 500; }

/* How It Works */

.hiw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 28px; counter-reset: hiw; }

.hiw-card { text-align: center; padding: 36px 24px; position: relative; }

.hiw-num {

width: 52px; height: 52px; border-radius: 50%;

background: var(--base); box-shadow: var(--neu-shadow-sm);

display: flex; align-items: center; justify-content: center;

margin: 0 auto 20px;

font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--gold);

}

.hiw-icon { font-size: 1.8rem; margin-bottom: 14px; }

.hiw-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; margin-bottom: 10px; }

.hiw-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.7; }

/* Testimonials */

.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 24px; }

.testimonial-card { padding: 28px; }

.testi-quote { font-size: 2.5rem; color: var(--gold-light); font-family: var(--font-display); line-height: 1; margin-bottom: 12px; }

.testi-text { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.75; margin-bottom: 20px; font-style: italic; }

.testi-author { display: flex; align-items: center; gap: 12px; }

.testi-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-light), var(--gold)); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.9rem; color: var(--black); }

.testi-name { font-weight: 500; font-size: 0.875rem; }

.testi-trip { font-size: 0.78rem; color: var(--text-muted); }

/* Footer */

.footer {

background: var(--black); color: rgba(255,255,255,0.75);

padding: clamp(50px,6vw,80px) clamp(16px,5vw,80px) 30px;

}

.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }

.footer-brand .nav-logo-mark { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); }

.footer-brand .nav-logo-text { color: white; }

.footer-brand .nav-logo-text span { color: var(--gold); }

.footer-tagline { font-size: 0.875rem; color: rgba(255,255,255,0.5); margin-top: 14px; line-height: 1.7; }

.footer-col-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 18px; font-weight: 500; }

.footer-col li { margin-bottom: 10px; font-size: 0.875rem; cursor: pointer; transition: var(--transition); }

.footer-col li:hover { color: white; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 0.8rem; color: rgba(255,255,255,0.4); }

/* ================================= */

/* ===== PAGE: SEARCH RESULTS ===== */

/* ================================= */

#page-results { padding-top: 70px; }

.results-header { padding: 30px clamp(16px,5vw,60px); border-bottom: 1px solid rgba(200,169,107,0.1); }

.results-search-bar {

background: var(--base);

border-radius: var(--radius);

box-shadow: var(--neu-shadow-sm);

padding: 16px 22px;

display: flex; align-items: center; gap: 16px; flex-wrap: wrap;

}

.results-search-bar .rsc-item { display: flex; align-items: center; gap: 8px; }

.results-search-bar .rsc-sep { color: var(--base-deeper); }

.rsc-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

.rsc-val { font-size: 0.9rem; font-weight: 500; }

.results-body { display: flex; padding: 28px clamp(16px,5vw,60px); gap: 28px; }

/* Filters sidebar */

.filters-sidebar { width: 280px; flex-shrink: 0; }

.filters-sticky { position: sticky; top: 90px; }

.filter-section { margin-bottom: 20px; }

.filter-section-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 12px; font-weight: 500; }

.filter-range { width: 100%; position: relative; }

.range-input { width: 100%; -webkit-appearance: none; height: 4px; background: var(--base-dark); border-radius: 2px; outline: none; }

.range-input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); box-shadow: 2px 2px 6px rgba(168,137,59,0.4); cursor: pointer; }

.range-labels { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-muted); margin-top: 8px; }

.filter-checkbox { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; }

.filter-checkbox input { display: none; }

.filter-check {

width: 18px; height: 18px; border-radius: 5px;

background: var(--base); box-shadow: var(--neu-shadow-sm);

flex-shrink: 0; position: relative; transition: var(--transition);

}

.filter-checkbox input:checked ~ .filter-check { box-shadow: var(--neu-inset-sm); }

.filter-checkbox input:checked ~ .filter-check::after {

content: '✓'; position: absolute; inset: 0;

display: flex; align-items: center; justify-content: center;

font-size: 0.65rem; color: var(--gold-dark);

}

.filter-label { font-size: 0.875rem; color: var(--text-secondary); }

.filter-count { font-size: 0.75rem; color: var(--text-muted); margin-left: auto; }

/* Results list */

.results-list { flex: 1; }

.results-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }

.results-count { font-size: 0.875rem; color: var(--text-secondary); }

.results-count strong { color: var(--text-primary); }

.sort-select { background: var(--base); box-shadow: var(--neu-shadow-sm); border-radius: 50px; padding: 8px 18px; font-size: 0.85rem; appearance: none; cursor: pointer; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23C8A96B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }

.compare-bar {

background: var(--base);

border-radius: var(--radius);

box-shadow: var(--neu-shadow);

padding: 16px 20px;

display: none; align-items: center; justify-content: space-between;

margin-bottom: 20px; gap: 12px;

}

.compare-bar.visible { display: flex; }

.compare-slots { display: flex; gap: 10px; }

.compare-slot {

background: var(--base); box-shadow: var(--neu-inset-sm);

border-radius: var(--radius-sm); padding: 8px 14px;

font-size: 0.8rem; min-width: 120px;

display: flex; align-items: center; justify-content: space-between; gap: 8px;

}

.compare-slot-empty { color: var(--text-muted); font-style: italic; }

.result-card {

background: var(--base);

border-radius: var(--radius);

box-shadow: var(--neu-shadow);

margin-bottom: 20px;

display: flex; overflow: hidden; cursor: pointer;

transition: var(--transition);

}

.result-card:hover { transform: translateY(-3px); box-shadow: 8px 8px 24px rgba(180,168,148,0.5), -4px -4px 12px rgba(255,255,255,0.95); }

.result-card-img {

width: 240px; flex-shrink: 0;

background: linear-gradient(135deg, var(--base-deeper), var(--base-dark));

position: relative; display: flex; align-items: center; justify-content: center;

}

.result-card-img-ph { font-family: var(--font-arabic); font-size: 2.5rem; color: rgba(200,169,107,0.3); }

.result-card-body { flex: 1; padding: 22px; }

.result-card-footer { padding: 22px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; border-left: 1px solid rgba(200,169,107,0.1); width: 180px; }

.result-tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

.result-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; margin-bottom: 6px; }

.result-agency-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.result-agency-name { font-size: 0.8rem; color: var(--text-muted); }

.result-features { display: flex; flex-wrap: wrap; gap: 8px; }

.result-feature { font-size: 0.78rem; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }

.compare-cb { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 12px; cursor: pointer; }

.compare-cb input { display: none; }

.compare-cb-box { width: 16px; height: 16px; border-radius: 4px; background: var(--base); box-shadow: var(--neu-shadow-sm); position: relative; transition: var(--transition); }

.compare-cb input:checked ~ .compare-cb-box { box-shadow: var(--neu-inset-sm); }

.compare-cb input:checked ~ .compare-cb-box::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; color: var(--gold-dark); }

/* ================================ */

/* ===== PAGE: PACKAGE DETAIL ===== */

/* ================================ */

#page-detail { padding-top: 70px; }

.detail-hero {

height: 420px;

background: linear-gradient(135deg, var(--base-deeper), var(--base-dark));

position: relative; display: flex; align-items: center; justify-content: center;

overflow: hidden;

}

.detail-hero-ph { font-family: var(--font-arabic); font-size: 6rem; color: rgba(200,169,107,0.2); }

.detail-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(26,23,20,0.2), rgba(26,23,20,0.7)); }

.detail-hero-content { position: relative; z-index: 1; text-align: center; color: white; padding: 20px; }

.detail-hero-content h1 { font-family: var(--font-display); font-size: clamp(1.8rem,4vw,3rem); font-weight: 400; margin-bottom: 12px; }

.detail-hero-content p { color: rgba(255,255,255,0.75); font-size: 1rem; }

.detail-body { padding: 40px clamp(16px,5vw,80px); display: grid; grid-template-columns: 1fr 350px; gap: 32px; }

.detail-main {}

.detail-sidebar {}

.detail-tabs { display: flex; gap: 4px; margin-bottom: 30px; border-bottom: 1px solid rgba(200,169,107,0.1); }

.detail-tab { padding: 12px 20px; font-size: 0.875rem; cursor: pointer; color: var(--text-secondary); border-bottom: 2px solid transparent; transition: var(--transition); }

.detail-tab.active { color: var(--gold-dark); border-bottom-color: var(--gold); }

.detail-tab:hover { color: var(--text-primary); }

.detail-panel { display: none; }

.detail-panel.active { display: block; animation: fadeIn 0.3s ease; }

.detail-section-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; margin-bottom: 16px; }

.inclusions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.inclusion-item { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--text-secondary); padding: 6px 0; }

.inclusion-icon { color: var(--gold); width: 16px; }

.itinerary-item { display: flex; gap: 16px; margin-bottom: 20px; }

.itinerary-day { flex-shrink: 0; text-align: center; }

.day-num { width: 36px; height: 36px; border-radius: 50%; background: var(--base); box-shadow: var(--neu-shadow-sm); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; color: var(--gold-dark); }

.day-line { width: 1px; height: calc(100% - 40px); background: linear-gradient(to bottom, rgba(200,169,107,0.3), transparent); margin: 4px auto 0; }

.itinerary-content { flex: 1; padding-bottom: 20px; }

.itinerary-title { font-weight: 500; margin-bottom: 4px; }

.itinerary-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }

.hotel-card-row { display: flex; gap: 16px; margin-bottom: 14px; background: var(--base); border-radius: var(--radius-sm); box-shadow: var(--neu-shadow-sm); padding: 16px; }

.hotel-img { width: 80px; height: 70px; border-radius: 10px; background: linear-gradient(135deg, var(--base-deeper), var(--base-dark)); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: rgba(200,169,107,0.3); flex-shrink: 0; }

/* Booking card */

.booking-card { position: sticky; top: 90px; }

.price-display { text-align: center; margin-bottom: 24px; }

.price-from { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; }

.price-main { font-family: var(--font-display); font-size: 2.8rem; font-weight: 500; color: var(--text-primary); line-height: 1; }

.price-per { font-size: 0.85rem; color: var(--text-muted); }

.price-breakdown { margin: 14px 0; }

.price-row { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 6px 0; }

.price-row.total { font-weight: 600; font-size: 0.95rem; border-top: 1px solid rgba(200,169,107,0.15); padding-top: 10px; margin-top: 4px; }

.agency-card { margin-top: 16px; }

.agency-info { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }

.agency-logo { width: 48px; height: 48px; border-radius: var(--radius-xs); background: linear-gradient(135deg, var(--gold-light), var(--gold)); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

.agency-name-main { font-weight: 500; font-size: 0.9rem; }

.agency-since { font-size: 0.75rem; color: var(--text-muted); }

.agency-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

.agency-stat { text-align: center; }

.agency-stat-val { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; color: var(--text-primary); }

.agency-stat-lbl { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ================================= */

/* ===== PAGE: COMPARE ===== */

/* ================================= */

#page-compare { padding-top: 70px; }

.compare-header { padding: 40px clamp(16px,5vw,60px); text-align: center; }

.compare-table-wrapper { overflow-x: auto; padding: 0 clamp(16px,5vw,60px) 60px; }

.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; }

.compare-table th { padding: 0 16px 24px; vertical-align: bottom; min-width: 220px; }

.compare-table td { padding: 12px 16px; vertical-align: middle; font-size: 0.875rem; border-top: 1px solid rgba(200,169,107,0.08); }

.compare-table tr:first-child td { border-top: none; }

.compare-pkg-header { background: var(--base); border-radius: var(--radius); box-shadow: var(--neu-shadow-sm); padding: 20px; text-align: center; }

.compare-pkg-img { height: 90px; background: linear-gradient(135deg, var(--base-deeper), var(--base-dark)); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; font-family: var(--font-arabic); font-size: 2rem; color: rgba(200,169,107,0.3); }

.compare-pkg-name { font-family: var(--font-display); font-size: 1rem; font-weight: 500; margin-bottom: 6px; }

.compare-pkg-price { font-family: var(--font-display); font-size: 1.4rem; color: var(--gold-dark); font-weight: 600; }

.compare-row-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 500; padding: 12px 16px 12px 0; border-top: 1px solid rgba(200,169,107,0.08); white-space: nowrap; }

.compare-check { color: #2D7A52; font-size: 1rem; }

.compare-cross { color: #A03030; font-size: 1rem; }

.compare-highlight { background: rgba(200,169,107,0.05); }

/* =============================== */

/* ===== PAGE: USER DASHBOARD ===== */

/* =============================== */

#page-dashboard { padding-top: 70px; }

.dashboard-layout { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 70px); }

.dashboard-sidebar {

background: var(--base);

border-right: 1px solid rgba(200,169,107,0.1);

padding: 32px 20px;

box-shadow: 4px 0 20px rgba(180,168,148,0.15);

}

.dash-avatar-section { text-align: center; margin-bottom: 32px; }

.dash-avatar {

width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 12px;

background: linear-gradient(135deg, var(--gold-light), var(--gold));

display: flex; align-items: center; justify-content: center;

font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--black);

box-shadow: var(--neu-shadow);

}

.dash-name { font-weight: 500; font-size: 1rem; }

.dash-email { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

.dash-nav { display: flex; flex-direction: column; gap: 4px; }

.dash-nav-item {

display: flex; align-items: center; gap: 12px;

padding: 12px 16px; border-radius: var(--radius-sm);

font-size: 0.875rem; cursor: pointer; transition: var(--transition);

color: var(--text-secondary);

}

.dash-nav-item:hover { background: rgba(200,169,107,0.08); color: var(--text-primary); }

.dash-nav-item.active {

background: var(--base);

box-shadow: var(--neu-shadow-sm);

color: var(--gold-dark); font-weight: 500;

}

.dash-nav-item.active .dash-nav-icon { color: var(--gold); }

.dash-nav-icon { font-size: 1.1rem; width: 20px; text-align: center; }

.dash-main { flex: 1; padding: 32px clamp(20px,3vw,50px); overflow-y: auto; }

.dash-section { display: none; }

.dash-section.active { display: block; animation: fadeIn 0.3s ease; }

.dash-greeting { font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; margin-bottom: 4px; }

.dash-greeting span { color: var(--gold); font-style: italic; }

.dash-sub { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 28px; }

.dash-cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 18px; margin-bottom: 32px; }

.dash-stat-card { text-align: center; padding: 24px 16px; }

.dash-stat-icon { font-size: 1.8rem; margin-bottom: 10px; }

.dash-stat-val { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; }

.dash-stat-lbl { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }

/* Booking timeline */

.booking-timeline { position: relative; }

.booking-item { display: flex; gap: 16px; margin-bottom: 28px; position: relative; }

.booking-item::after { content: ''; position: absolute; left: 15px; top: 32px; bottom: -28px; width: 1px; background: linear-gradient(to bottom, rgba(200,169,107,0.3), transparent); }

.booking-item:last-child::after { display: none; }

.booking-dot { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; box-shadow: var(--neu-shadow-sm); }

.booking-dot.confirmed { background: linear-gradient(135deg, #48A870, #2D7A52); color: white; }

.booking-dot.pending { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--black); }

.booking-dot.waiting { background: var(--base); color: var(--text-muted); }

.booking-content { flex: 1; }

.booking-title { font-weight: 500; font-size: 0.9rem; margin-bottom: 2px; }

.booking-sub { font-size: 0.8rem; color: var(--text-secondary); }

.booking-time { font-size: 0.75rem; color: var(--text-muted); }

/* Confirm My Booking CTA — THE SIGNATURE FEATURE */

.confirm-booking-section {

background: linear-gradient(135deg, rgba(200,169,107,0.12), rgba(200,169,107,0.05));

border: 1px solid rgba(200,169,107,0.25);

border-radius: var(--radius);

padding: 30px; margin-bottom: 28px;

position: relative; overflow: hidden;

}

.confirm-booking-section::before {

content: '٭'; position: absolute; right: 24px; top: 20px;

font-family: var(--font-arabic); font-size: 4rem; color: rgba(200,169,107,0.1);

}

.confirm-booking-badge {

display: inline-flex; align-items: center; gap: 6px;

background: rgba(200,169,107,0.15); border: 1px solid rgba(200,169,107,0.3);

border-radius: 50px; padding: 4px 12px; margin-bottom: 12px;

font-size: 0.72rem; font-weight: 600; color: var(--gold-dark); text-transform: uppercase; letter-spacing: 0.08em;

}

.confirm-booking-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: pulse 2s infinite; }

@keyframes pulse { 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:0.6; transform:scale(1.3);} }

.confirm-booking-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; margin-bottom: 6px; }

.confirm-booking-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.65; margin-bottom: 20px; }

.btn-confirm-booking {

background: linear-gradient(135deg, var(--gold), var(--gold-dark));

color: white; border-radius: var(--radius-sm);

padding: 14px 28px; font-size: 0.95rem; font-weight: 500;

box-shadow: 4px 4px 16px rgba(168,137,59,0.45);

transition: var(--transition); display: inline-flex; align-items: center; gap: 10px;

letter-spacing: 0.03em;

}

.btn-confirm-booking:hover { transform: translateY(-2px); box-shadow: 5px 6px 20px rgba(168,137,59,0.55); }

.btn-confirm-booking .btn-icon { font-size: 1.1rem; }

/* Checklist */

.checklist { display: flex; flex-direction: column; gap: 8px; }

.check-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--base); border-radius: var(--radius-sm); box-shadow: var(--neu-shadow-sm); cursor: pointer; transition: var(--transition); }

.check-item:hover { box-shadow: var(--neu-inset-sm); }

.check-box { width: 20px; height: 20px; border-radius: 6px; background: var(--base); box-shadow: var(--neu-shadow-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: transparent; transition: var(--transition); }

.check-item.done .check-box { box-shadow: var(--neu-inset-sm); color: var(--gold-dark); }

.check-item.done .check-box::after { content: '✓'; }

.check-item.done .check-text { text-decoration: line-through; color: var(--text-muted); }

.check-text { font-size: 0.875rem; color: var(--text-secondary); }

.check-category { font-size: 0.7rem; color: var(--text-muted); margin-left: auto; }

/* Countdown */

.countdown-widget {

background: linear-gradient(135deg, var(--black), #2A2520);

border-radius: var(--radius);

padding: 28px; color: white; text-align: center;

box-shadow: 8px 8px 24px rgba(26,23,20,0.25);

}

.countdown-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); margin-bottom: 20px; }

.countdown-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }

.countdown-unit { background: rgba(255,255,255,0.05); border-radius: var(--radius-sm); padding: 16px 8px; }

.countdown-val { font-family: var(--font-display); font-size: 2.2rem; font-weight: 500; color: var(--gold); line-height: 1; }

.countdown-unit-lbl { font-size: 0.65rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }

/* =============================== */

/* ===== PAGE: BOOKING WIZARD ===== */

/* =============================== */

#page-booking { padding-top: 70px; }

.booking-wizard { max-width: 800px; margin: 0 auto; padding: 40px clamp(16px,4vw,40px); }

.wizard-header { text-align: center; margin-bottom: 40px; }

.wizard-steps { display: flex; justify-content: center; align-items: center; gap: 0; margin-bottom: 40px; }

.wizard-step { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }

.wizard-step:not(:last-child)::after {

content: ''; position: absolute; left: 50%; top: 16px;

width: calc(100% + 40px); height: 1px;

background: linear-gradient(90deg, rgba(200,169,107,0.3), rgba(200,169,107,0.1));

}

.ws-circle {

width: 32px; height: 32px; border-radius: 50%;

background: var(--base); box-shadow: var(--neu-shadow-sm);

display: flex; align-items: center; justify-content: center;

font-size: 0.8rem; font-weight: 600; color: var(--text-muted);

transition: var(--transition); z-index: 1;

}

.wizard-step.active .ws-circle { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: white; box-shadow: 3px 3px 10px rgba(168,137,59,0.4); }

.wizard-step.done .ws-circle { background: var(--base); box-shadow: var(--neu-inset-sm); color: var(--gold-dark); }

.ws-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; width: 80px; text-align: center; }

.wizard-step.active .ws-label { color: var(--gold-dark); }

.wizard-panel { display: none; }

.wizard-panel.active { display: block; animation: fadeIn 0.3s ease; }

.form-row { display: grid; gap: 18px; margin-bottom: 18px; }

.form-row-2 { grid-template-columns: 1fr 1fr; }

.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }

.form-group label { display: block; font-size: 0.78rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; }

.room-option {

display: flex; align-items: center; justify-content: space-between;

padding: 16px 18px; border-radius: var(--radius-sm);

background: var(--base); box-shadow: var(--neu-shadow-sm);

cursor: pointer; transition: var(--transition); margin-bottom: 10px;

}

.room-option.selected { box-shadow: var(--neu-inset-sm); }

.room-option input { display: none; }

.room-option-info {}

.room-option-name { font-weight: 500; font-size: 0.9rem; }

.room-option-desc { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }

.room-option-price { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--gold-dark); }

.order-summary { background: var(--base); border-radius: var(--radius); box-shadow: var(--neu-shadow); padding: 28px; }

.order-summary-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; margin-bottom: 20px; }

.summary-pkg-row { display: flex; gap: 14px; margin-bottom: 20px; }

.summary-pkg-img { width: 80px; height: 64px; border-radius: var(--radius-xs); background: linear-gradient(135deg, var(--base-deeper), var(--base-dark)); display: flex; align-items: center; justify-content: center; font-family: var(--font-arabic); font-size: 1.5rem; color: rgba(200,169,107,0.3); flex-shrink: 0; }

.wizard-nav { display: flex; justify-content: space-between; margin-top: 28px; }

/* ================================ */

/* ===== PAGE: BOOKING STATUS ===== */

/* ================================ */

#page-status { padding-top: 70px; }

.status-page { max-width: 720px; margin: 0 auto; padding: 40px clamp(16px,4vw,40px); }

.status-hero-card {

background: linear-gradient(135deg, var(--black), #2A2520);

border-radius: var(--radius); padding: 32px; color: white; margin-bottom: 28px;

box-shadow: 8px 8px 24px rgba(26,23,20,0.25);

position: relative; overflow: hidden;

}

.status-hero-card::before {

content: 'بسم الله'; font-family: var(--font-arabic);

position: absolute; right: 24px; top: 20px;

font-size: 3rem; color: rgba(200,169,107,0.1);

}

.booking-ref { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); margin-bottom: 6px; }

.booking-ref-val { font-family: var(--font-display); font-size: 1.4rem; color: var(--gold); }

.status-badge-big {

display: inline-flex; align-items: center; gap: 8px;

margin: 16px 0;

background: rgba(72,168,112,0.2); border: 1px solid rgba(72,168,112,0.3);

padding: 8px 18px; border-radius: 50px; font-size: 0.875rem; color: #6DD8A0;

}

.status-meta-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 20px; }

.status-meta-item {}

.status-meta-lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.4); margin-bottom: 4px; }

.status-meta-val { font-size: 0.9rem; font-weight: 500; }

.status-timeline { }

.st-item { display: flex; gap: 16px; margin-bottom: 0; position: relative; }

.st-line-wrap { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }

.st-dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0; }

.st-dot.done { background: linear-gradient(135deg, #48A870, #2D7A52); color: white; box-shadow: 2px 2px 8px rgba(45,122,82,0.3); }

.st-dot.active { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: white; box-shadow: 2px 2px 8px rgba(168,137,59,0.4); animation: glowPulse 2s infinite; }

@keyframes glowPulse { 0%,100%{box-shadow: 2px 2px 8px rgba(168,137,59,0.4);} 50%{box-shadow: 2px 2px 16px rgba(168,137,59,0.7);} }

.st-dot.waiting { background: var(--base); color: var(--text-muted); box-shadow: var(--neu-shadow-sm); }

.st-connector { width: 1px; flex: 1; min-height: 24px; background: linear-gradient(to bottom, rgba(200,169,107,0.3), rgba(200,169,107,0.1)); margin: 2px 0; }

.st-content { flex: 1; padding: 6px 0 28px; }

.st-title { font-weight: 500; font-size: 0.9rem; margin-bottom: 2px; }

.st-sub { font-size: 0.8rem; color: var(--text-secondary); }

.st-time { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }

/* CONFIRM BOOKING PAGE MODAL VERSION */

.confirm-modal-box {

text-align: center;

}

.confirm-success-icon {

width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 20px;

background: linear-gradient(135deg, var(--gold), var(--gold-dark));

display: flex; align-items: center; justify-content: center;

font-size: 2rem; color: white;

box-shadow: 4px 4px 16px rgba(168,137,59,0.4);

}

/* =============================== */

/* ===== PAGE: PILGRIMAGE PREP ===== */

/* =============================== */

#page-prep { padding-top: 70px; }

.prep-body { padding: 40px clamp(16px,5vw,60px); }

.prep-header-card {

background: linear-gradient(135deg, var(--black), #2A2520);

border-radius: var(--radius); padding: 36px; color: white; margin-bottom: 32px;

display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px;

box-shadow: 8px 8px 24px rgba(26,23,20,0.25);

}

.prep-header-info h2 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; margin-bottom: 6px; }

.prep-header-info p { color: rgba(255,255,255,0.6); font-size: 0.9rem; }

.prep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }

.prep-full { grid-column: 1 / -1; }

.prep-section-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; margin-bottom: 16px; }

.progress-ring-wrap { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }

.progress-ring-chart { position: relative; width: 80px; height: 80px; }

.progress-ring-chart svg { transform: rotate(-90deg); }

.progress-ring-chart circle { fill: none; stroke-width: 8; }

.prc-bg { stroke: var(--base-dark); }

.prc-fill { stroke: url(#goldGrad); stroke-linecap: round; transition: stroke-dashoffset 1s ease; }

.prc-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--gold-dark); }

.checklist-category-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 16px 0 8px; font-weight: 500; }

.dua-card { padding: 20px; margin-bottom: 14px; }

.dua-arabic { font-family: var(--font-arabic); font-size: 1.4rem; color: var(--text-primary); line-height: 1.8; text-align: right; margin-bottom: 10px; direction: rtl; }

.dua-transliteration { font-size: 0.8rem; font-style: italic; color: var(--text-secondary); margin-bottom: 6px; }

.dua-meaning { font-size: 0.85rem; color: var(--text-muted); }

/* ============================ */

/* ===== PAGE: REVIEW ===== */

/* ============================ */

#page-review { padding-top: 70px; }

.review-body { max-width: 720px; margin: 0 auto; padding: 40px clamp(16px,4vw,40px); }

.star-selector { display: flex; gap: 10px; margin: 12px 0; }

.star-btn { font-size: 1.8rem; cursor: pointer; color: var(--base-darker); transition: var(--transition); filter: grayscale(1); opacity: 0.4; }

.star-btn.selected, .star-btn:hover { filter: grayscale(0); opacity: 1; color: var(--gold); transform: scale(1.1); }

.review-category { margin-bottom: 20px; }

.review-cat-title { font-size: 0.875rem; font-weight: 500; margin-bottom: 8px; }

.rating-slider-wrap { display: flex; align-items: center; gap: 12px; }

.rating-slider-wrap .range-input { flex: 1; }

.rating-val { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--gold-dark); width: 30px; text-align: right; }

/* ===== MESSAGING CENTER ===== */

.messages-layout { display: grid; grid-template-columns: 280px 1fr; height: 600px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--neu-shadow); }

.msg-sidebar { background: var(--base); border-right: 1px solid rgba(200,169,107,0.1); overflow-y: auto; }

.msg-sidebar-header { padding: 16px; border-bottom: 1px solid rgba(200,169,107,0.1); }

.msg-thread { padding: 14px 16px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; transition: var(--transition); border-bottom: 1px solid rgba(200,169,107,0.06); }

.msg-thread:hover { background: rgba(200,169,107,0.05); }

.msg-thread.active { background: rgba(200,169,107,0.08); }

.msg-thread-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-light), var(--gold)); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; flex-shrink: 0; }

.msg-thread-name { font-size: 0.875rem; font-weight: 500; margin-bottom: 2px; }

.msg-thread-preview { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }

.msg-thread-time { font-size: 0.7rem; color: var(--text-muted); margin-left: auto; }

.msg-chat { display: flex; flex-direction: column; background: var(--base); }

.msg-chat-header { padding: 16px 20px; border-bottom: 1px solid rgba(200,169,107,0.1); display: flex; align-items: center; gap: 12px; }

.msg-chat-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }

.msg-bubble { max-width: 70%; }

.msg-bubble.received { align-self: flex-start; }

.msg-bubble.sent { align-self: flex-end; }

.msg-bubble-text { padding: 12px 16px; border-radius: 16px; font-size: 0.875rem; line-height: 1.55; }

.msg-bubble.received .msg-bubble-text { background: var(--base); box-shadow: var(--neu-shadow-sm); border-bottom-left-radius: 4px; }

.msg-bubble.sent .msg-bubble-text { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: white; border-bottom-right-radius: 4px; }

.msg-bubble-time { font-size: 0.68rem; color: var(--text-muted); margin-top: 4px; padding: 0 4px; }

.msg-bubble.sent .msg-bubble-time { text-align: right; }

.msg-input-bar { padding: 14px 16px; border-top: 1px solid rgba(200,169,107,0.1); display: flex; gap: 10px; align-items: center; }

.msg-input { flex: 1; background: var(--base); box-shadow: var(--neu-inset-sm); border-radius: 50px; padding: 10px 18px; font-size: 0.875rem; }

.msg-send-btn { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-dark)); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.9rem; box-shadow: 2px 2px 8px rgba(168,137,59,0.35); transition: var(--transition); }

.msg-send-btn:hover { transform: scale(1.05); }

/* ===== LOGIN MODAL ===== */

.auth-tabs { display: flex; gap: 4px; margin-bottom: 28px; background: var(--base); box-shadow: var(--neu-inset); border-radius: 50px; padding: 4px; }

.auth-tab { flex: 1; text-align: center; padding: 10px; border-radius: 50px; font-size: 0.875rem; cursor: pointer; transition: var(--transition); color: var(--text-secondary); }

.auth-tab.active { background: var(--base); box-shadow: var(--neu-shadow-sm); color: var(--text-primary); font-weight: 500; }

.auth-form { display: none; }

.auth-form.active { display: block; }

.auth-input-group { margin-bottom: 16px; }

.auth-input-group label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; }

.social-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; }

.social-divider::before, .social-divider::after { content: ''; flex: 1; height: 1px; background: rgba(200,169,107,0.15); }

.social-divider span { font-size: 0.78rem; color: var(--text-muted); }

.social-btns { display: flex; gap: 10px; }

.social-btn { flex: 1; padding: 11px; border-radius: var(--radius-sm); background: var(--base); box-shadow: var(--neu-shadow-sm); font-size: 0.85rem; font-weight: 500; transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 8px; }

.social-btn:hover { box-shadow: var(--neu-inset-sm); }

/* ===== RESPONSIVE ===== */

@media (max-width: 1100px) {

.detail-body { grid-template-columns: 1fr; }

.booking-card { position: static; }

.footer-grid { grid-template-columns: 1fr 1fr; }

}

@media (max-width: 900px) {

.nav-links { display: none; }

.hamburger { display: flex; }

.search-fields { grid-template-columns: 1fr 1fr; }

.search-fields .search-btn { grid-column: 1 / -1; }

.result-card { flex-direction: column; }

.result-card-img { width: 100%; height: 160px; }

.result-card-footer { width: 100%; border-left: none; border-top: 1px solid rgba(200,169,107,0.1); flex-direction: row; justify-content: space-between; align-items: center; }

.dashboard-layout { grid-template-columns: 1fr; }

.dashboard-sidebar { display: none; }

.prep-grid { grid-template-columns: 1fr; }

.messages-layout { grid-template-columns: 1fr; }

.msg-sidebar { display: none; }

.form-row-2, .form-row-3 { grid-template-columns: 1fr; }

}

@media (max-width: 640px) {

.search-fields { grid-template-columns: 1fr; }

.filters-sidebar { display: none; }

.results-body { padding: 20px 16px; }

.footer-grid { grid-template-columns: 1fr; }

.hero-stats { gap: 24px; }

.inclusions-grid { grid-template-columns: 1fr; }

.compare-pkg-header { min-width: 160px; }

.wizard-steps { gap: 0; overflow-x: auto; }

.ws-label { display: none; }

}

/* ===== FADE IN ANIMATION ===== */

.fade-in { animation: fadeInUp 0.6s ease both; }

.fade-in-1 { animation-delay: 0.1s; }

.fade-in-2 { animation-delay: 0.2s; }

.fade-in-3 { animation-delay: 0.3s; }

.fade-in-4 { animation-delay: 0.4s; }

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

/* ===== LOADING OVERLAY ===== */

.loader-overlay { position: fixed; inset: 0; z-index: 9999; background: var(--base); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.5s; }

.loader-overlay.hide { opacity: 0; pointer-events: none; }

.loader-logo { font-family: var(--font-display); font-size: 3rem; font-weight: 400; color: var(--text-primary); margin-bottom: 8px; }

.loader-logo span { color: var(--gold); font-style: italic; }

.loader-arabic { font-family: var(--font-arabic); color: var(--gold); font-size: 1.2rem; margin-bottom: 32px; }

.loader-bar { width: 200px; height: 2px; background: var(--base-dark); border-radius: 1px; overflow: hidden; }

.loader-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); animation: loadFill 1.5s ease forwards; }

@keyframes loadFill { from{ width:0%; } to{ width: 100%; } }

/* ===== MISC ===== */

.text-gold { color: var(--gold); }

.text-muted { color: var(--text-muted); }

.text-center { text-align: center; }

.mt-8 { margin-top: 8px; }

.mt-16 { margin-top: 16px; }

.mt-24 { margin-top: 24px; }

.mb-16 { margin-bottom: 16px; }

.mb-24 { margin-bottom: 24px; }

.flex { display: flex; }

.items-center { align-items: center; }

.gap-8 { gap: 8px; }

.gap-12 { gap: 12px; }

.font-display { font-family: var(--font-display); }

.fw-500 { font-weight: 500; }

</style>

</head>

<body>

<div class="loader-overlay" id="loader">

<div class="loader-logo">IHRAM<span>HUB</span></div>

<div class="loader-arabic">رحلة مباركة</div>

<div class="loader-bar"><div class="loader-fill"></div></div>

</div>

<nav class="navbar" id="navbar">

<div class="nav-logo" onclick="showPage('home')">

<div class="nav-logo-mark">إح</div>

<div class="nav-logo-text">IHRAM<span>HUB</span></div>

</div>

<div class="nav-links">

<span class="nav-link" onclick="showPage('results')">Find Packages</span>

<span class="nav-link" onclick="showPage('compare')">Compare</span>

<span class="nav-link">Destinations</span>

<span class="nav-link">About</span>

</div>

<div class="nav-actions">

<button class="btn-nav-login" id="nav-login-btn" onclick="openModal('login-modal')">Log In</button>

<button class="btn-nav-cta" id="nav-signup-btn" onclick="openModal('login-modal')">Sign Up</button>

<div class="nav-avatar" id="nav-avatar" onclick="showPage('dashboard')">AH</div>

</div>

<div class="hamburger" onclick="toggleMobile()">

<span></span><span></span><span></span>

</div>

</nav>

<div class="page active" id="page-home">

<section class="hero">

<div class="hero-bg-pattern"></div>

<div class="gold-badge fade-in">✦ The Sacred Journey Marketplace</div>

<h1 class="hero-title fade-in fade-in-1">

Discover Your<br><span class="accent">Perfect Pilgrimage</span>

</h1>

<p class="hero-sub fade-in fade-in-2">Compare hundreds of verified Umrah packages from trusted agencies. Transparent pricing, trusted reviews, seamless booking — all in one sacred space.</p>

<div class="hero-stats fade-in fade-in-2">

<div class="hero-stat"><div class="hero-stat-val">480+</div><div class="hero-stat-lbl">Verified Agencies</div></div>

<div class="hero-stat"><div class="hero-stat-val">12K+</div><div class="hero-stat-lbl">Packages Listed</div></div>

<div class="hero-stat"><div class="hero-stat-val">98K+</div><div class="hero-stat-lbl">Pilgrims Served</div></div>

<div class="hero-stat"><div class="hero-stat-val">4.9★</div><div class="hero-stat-lbl">Average Rating</div></div>

</div>

<div class="search-box fade-in fade-in-3">

<div class="search-tabs">

<button class="search-tab active" onclick="setTab(this,'umrah')">🕋 Umrah</button>

<button class="search-tab" onclick="setTab(this,'hajj')">☪ Hajj 2026</button>

<button class="search-tab" onclick="setTab(this,'group')">👥 Group Tours</button>

</div>

<div class="search-fields">

<div class="search-field">

<label>Departing From</label>

<select class="neu-select">

<option>Kuala Lumpur (KUL)</option>

<option>Singapore (SIN)</option>

<option>Jakarta (CGK)</option>

<option>London (LHR)</option>

<option>Dubai (DXB)</option>

</select>

</div>

<div class="search-field">

<label>Travel Month</label>

<select class="neu-select">

<option>June 2025</option>

<option>July 2025</option>

<option>August 2025</option>

<option>Ramadan 2026</option>

<option>Flexible</option>

</select>

</div>

<div class="search-field">

<label>Pilgrims</label>

<select class="neu-select">

<option>1 Adult</option>

<option>2 Adults</option>

<option>2 Adults, 1 Child</option>

<option>Group (6+)</option>

</select>

</div>

<button class="search-btn" onclick="showPage('results')">

<span>Search</span> <span style="font-size:1.1rem">→</span>

</button>

</div>

<div class="search-quick-filters">

<span>Popular:</span>

<span class="qf-chip active">Economy</span>

<span class="qf-chip">Premium</span>

<span class="qf-chip">5-Star Hotels</span>

<span class="qf-chip">With Guide</span>

<span class="qf-chip">Ramadan Special</span>

<span class="qf-chip">Family Package</span>

</div>

</div>

</section>

<section class="section" style="background: var(--white);">

<div class="section-header">

<div class="gold-badge" style="margin-bottom:14px">How It Works</div>

<h2 class="section-title">Your Sacred Journey,<br><em style="color:var(--gold)">Simplified</em></h2>

<p class="section-sub">From search to Makkah in four easy steps. We handle the complexity so you can focus on your intention.</p>

</div>

<div class="hiw-grid">

<div class="neu-card hiw-card">

<div class="hiw-num">1</div>

<div class="hiw-icon">🔍</div>

<div class="hiw-title">Search & Compare</div>

<div class="hiw-desc">Browse hundreds of verified packages. Filter by price, duration, hotel rating, and more.</div>

</div>

<div class="neu-card hiw-card">

<div class="hiw-num">2</div>

<div class="hiw-icon">📋</div>

<div class="hiw-title">Select & Book</div>

<div class="hiw-desc">Choose your perfect package and send a booking request directly to the agency.</div>

</div>

<div class="neu-card hiw-card">

<div class="hiw-num">3</div>

<div class="hiw-icon">✅</div>

<div class="hiw-title">Confirm My Booking</div>

<div class="hiw-desc">After paying the agency, use our signature "Confirm My Booking" button to reconcile and protect your booking.</div>

</div>

<div class="neu-card hiw-card">

<div class="hiw-num">4</div>

<div class="hiw-icon">🕋</div>

<div class="hiw-title">Journey with Peace</div>

<div class="hiw-desc">Travel confidently with your digital itinerary, checklist, and live booking tracking.</div>

</div>

</div>

</section>

<section class="section">

<div class="section-header">

<div class="gold-badge" style="margin-bottom:14px">✦ Featured Packages</div>

<h2 class="section-title">Curated for Your<br><em style="color:var(--gold)">Sacred Journey</em></h2>

</div>

<div class="packages-grid">

<div class="pkg-card" onclick="showPage('detail')">

<div class="pkg-img">

<div class="pkg-img-placeholder">الكعبة</div>

<div class="pkg-img-overlay"></div>

<div class="pkg-badges"><span class="tag tag-gold">⭐ Top Rated</span></div>

<div class="pkg-fav" onclick="event.stopPropagation(); toggleFav(this)">♡</div>

</div>

<div class="pkg-body">

<div class="pkg-agency">Al-Barakah Travel</div>

<div class="pkg-name">Premium Umrah — 14 Nights Makkah & Madinah</div>

<div class="pkg-meta">

<span class="pkg-meta-item">📅 14 Nights</span>

<span class="pkg-meta-item">🏨 5-Star</span>

<span class="pkg-meta-item">✈️ MAS Airlines</span>

</div>

<div style="display:flex;align-items:center;gap:10px;margin-bottom:4px;">

<div class="stars">★★★★★</div>

<span style="font-size:0.78rem;color:var(--text-muted)">4.9 (312 reviews)</span>

</div>

</div>

<div class="pkg-footer">

<div>

<div class="pkg-price-lbl">Per Person from</div>

<div class="pkg-price">MYR 8,200 <span>/ pax</span></div>

</div>

<div class="pkg-actions">

<button class="pkg-btn btn-secondary" onclick="event.stopPropagation(); addCompare(this,'Premium Umrah 14N')">Compare</button>

<button class="pkg-btn btn-primary" onclick="event.stopPropagation(); showPage('detail')">View</button>

</div>

</div>

</div>

<div class="pkg-card" onclick="showPage('detail')">

<div class="pkg-img" style="background: linear-gradient(135deg,#E8E0D0,#D8D0C0);">

<div class="pkg-img-placeholder">المدينة</div>

<div class="pkg-img-overlay"></div>

<div class="pkg-badges"><span class="tag tag-green">✓ Best Value</span></div>

<div class="pkg-fav saved" onclick="event.stopPropagation(); toggleFav(this)">♥</div>

</div>

<div class="pkg-body">

<div class="pkg-agency">Zahra Pilgrimage</div>

<div class="pkg-name">Economy Umrah — 10 Nights Dual City</div>

<div class="pkg-meta">

<span class="pkg-meta-item">📅 10 Nights</span>

<span class="pkg-meta-item">🏨 4-Star</span>

<span class="pkg-meta-item">✈️ AirAsia X</span>

</div>

<div style="display:flex;align-items:center;gap:10px;margin-bottom:4px;">

<div class="stars">★★★★☆</div>

<span style="font-size:0.78rem;color:var(--text-muted)">4.6 (188 reviews)</span>

</div>

</div>

<div class="pkg-footer">

<div>

<div class="pkg-price-lbl">Per Person from</div>

<div class="pkg-price">MYR 4,800 <span>/ pax</span></div>

</div>

<div class="pkg-actions">

<button class="pkg-btn btn-secondary" onclick="event.stopPropagation(); addCompare(this,'Economy Umrah 10N')">Compare</button>

<button class="pkg-btn btn-primary" onclick="event.stopPropagation(); showPage('detail')">View</button>

</div>

</div>

</div>

<div class="pkg-card" onclick="showPage('detail')">

<div class="pkg-img" style="background: linear-gradient(135deg,#D0D8E8,#C8D0DC);">

<div class="pkg-img-placeholder">الروضة</div>

<div class="pkg-img-overlay"></div>

<div class="pkg-badges"><span class="tag tag-blue">🕌 Ramadan</span></div>

<div class="pkg-fav" onclick="event.stopPropagation(); toggleFav(this)">♡</div>

</div>

<div class="pkg-body">

<div class="pkg-agency">Nusantara Holy Tours</div>

<div class="pkg-name">Ramadan Umrah — 21 Nights Spiritual Retreat</div>

<div class="pkg-meta">

<span class="pkg-meta-item">📅 21 Nights</span>

<span class="pkg-meta-item">🏨 5-Star</span>

<span class="pkg-meta-item">✈️ Saudia</span>

</div>

<div style="display:flex;align-items:center;gap:10px;margin-bottom:4px;">

<div class="stars">★★★★★</div>

<span style="font-size:0.78rem;color:var(--text-muted)">5.0 (97 reviews)</span>

</div>

</div>

<div class="pkg-footer">

<div>

<div class="pkg-price-lbl">Per Person from</div>

<div class="pkg-price">MYR 14,500 <span>/ pax</span></div>

</div>

<div class="pkg-actions">

<button class="pkg-btn btn-secondary" onclick="event.stopPropagation(); addCompare(this,'Ramadan Umrah 21N')">Compare</button>

<button class="pkg-btn btn-primary" onclick="event.stopPropagation(); showPage('detail')">View</button>

</div>

</div>

</div>

</div>

<div style="text-align:center;margin-top:40px;">

<button class="btn-secondary" onclick="showPage('results')">View All Packages  →</button>

</div>

</section>

<section class="section" style="background: var(--white);">

<div class="section-header">

<div class="gold-badge" style="margin-bottom:14px">✦ Pilgrim Stories</div>

<h2 class="section-title">Journeys That<br><em style="color:var(--gold)">Transformed Lives</em></h2>

</div>

<div class="testimonials-grid">

<div class="neu-card testimonial-card">

<div class="testi-quote">"</div>

<div class="testi-text">IhramHub made finding the right package so effortless. The comparison tool saved us hours, and the Confirm My Booking feature gave us complete peace of mind after paying the agency.</div>

<div class="testi-author">

<div class="testi-avatar">FA</div>

<div><div class="testi-name">Faridah Ahmad</div><div class="testi-trip">Umrah · Ramadan 2024</div></div>

<div class="stars" style="margin-left:auto">★★★★★</div>

</div>

</div>

<div class="neu-card testimonial-card">

<div class="testi-quote">"</div>

<div class="testi-text">As someone booking for the whole family, the filters were incredibly helpful. Found a premium package within budget. The pilgrimage preparation dashboard kept us perfectly organized.</div>

<div class="testi-author">

<div class="testi-avatar">MZ</div>

<div><div class="testi-name">Muhammad Zulkifli</div><div class="testi-trip">Family Umrah · June 2024</div></div>

<div class="stars" style="margin-left:auto">★★★★★</div>

</div>

</div>

<div class="neu-card testimonial-card">

<div class="testi-quote">"</div>

<div class="testi-text">The agency trust scores are genius. I finally had confidence choosing a lesser-known agency after seeing their verified ratings and pilgrim reviews. Absolutely worth every ringgit.</div>

<div class="testi-author">

<div class="testi-avatar">NN</div>

<div><div class="testi-name">Nur Nabilah</div><div class="testi-trip">Solo Umrah · February 2025</div></div>

<div class="stars" style="margin-left:auto">★★★★★</div>

</div>

</div>

</div>

</section>

<footer class="footer">

<div class="footer-grid">

<div class="footer-brand">

<div class="nav-logo"><div class="nav-logo-mark">إح</div><div class="nav-logo-text">IHRAM<span>HUB</span></div></div>

<div class="footer-tagline">The world's first sacred journey marketplace. Compare, book, and travel with complete confidence and peace of mind.</div>

</div>

<div class="footer-col">

<div class="footer-col-title">Platform</div>

<ul>

<li>Search Packages</li><li>Compare</li><li>Agency Directory</li><li>Reviews</li>

</ul>

</div>

<div class="footer-col">

<div class="footer-col-title">For Pilgrims</div>

<ul>

<li>My Dashboard</li><li>Bookings</li><li>Prep Checklist</li><li>Community</li>

</ul>

</div>

<div class="footer-col">

<div class="footer-col-title">Company</div>

<ul>

<li>About Us</li><li>For Agencies</li><li>Press</li><li>Contact</li>

</ul>

</div>

</div>

<div class="footer-bottom">

<span>© 2025 IhramHub Sdn Bhd. All rights reserved.</span>

<span>بسم الله الرحمن الرحيم</span>

</div>

</footer>

</div>

<div class="page" id="page-results">

<div class="results-header">

<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">

<button class="btn-ghost" onclick="showPage('home')">← Back</button>

<h2 style="font-family:var(--font-display);font-size:1.5rem;font-weight:500">Search Results</h2>

</div>

<div class="results-search-bar">

<div class="rsc-item">

<span style="font-size:1.2rem">🛫</span>

<div><div class="rsc-label">From</div><div class="rsc-val">Kuala Lumpur</div></div>

</div>

<div class="rsc-sep">|</div>

<div class="rsc-item">

<span style="font-size:1.2rem">📅</span>

<div><div class="rsc-label">When</div><div class="rsc-val">June 2025</div></div>

</div>

<div class="rsc-sep">|</div>

<div class="rsc-item">

<span style="font-size:1.2rem">👥</span>

<div><div class="rsc-label">Pilgrims</div><div class="rsc-val">2 Adults</div></div>

</div>

<div class="rsc-sep">|</div>

<div class="rsc-item">

<span style="font-size:1.2rem">🕋</span>

<div><div class="rsc-label">Type</div><div class="rsc-val">Umrah</div></div>

</div>

<button class="btn-ghost" style="margin-left:auto" onclick="showPage('home')">✏️ Edit Search</button>

</div>

</div>

<div class="results-body">

<aside class="filters-sidebar">

<div class="filters-sticky">

<div class="neu-card" style="padding:22px;">

<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;">

<span style="font-weight:500;font-size:0.95rem;">Filters</span>

<button class="btn-ghost" style="padding:4px 10px;font-size:0.78rem;">Reset All</button>

</div>

<div class="filter-section">

<div class="filter-section-title">Budget (per person)</div>

<input type="range" class="range-input" min="3000" max="20000" value="12000" oninput="document.getElementById('budget-val').textContent='MYR '+this.value.toLocaleString()">

<div class="range-labels"><span>MYR 3K</span><span id="budget-val">MYR 12,000</span></div>

</div>

<div class="divider"></div>

<div class="filter-section">

<div class="filter-section-title">Duration</div>

<label class="filter-checkbox"><input type="checkbox" checked><div class="filter-check"></div><span class="filter-label">7 – 10 Nights</span><span class="filter-count">34</span></label>

<label class="filter-checkbox"><input type="checkbox" checked><div class="filter-check"></div><span class="filter-label">11 – 14 Nights</span><span class="filter-count">52</span></label>

<label class="filter-checkbox"><input type="checkbox"><div class="filter-check"></div><span class="filter-label">15 – 21 Nights</span><span class="filter-count">28</span></label>

<label class="filter-checkbox"><input type="checkbox"><div class="filter-check"></div><span class="filter-label">22+ Nights</span><span class="filter-count">12</span></label>

</div>

<div class="divider"></div>

<div class="filter-section">

<div class="filter-section-title">Hotel Star Rating</div>

<label class="filter-checkbox"><input type="checkbox"><div class="filter-check"></div><span class="filter-label">★★★★★ 5-Star</span><span class="filter-count">38</span></label>

<label class="filter-checkbox"><input type="checkbox" checked><div class="filter-check"></div><span class="filter-label">★★★★☆ 4-Star</span><span class="filter-count">67</span></label>

<label class="filter-checkbox"><input type="checkbox"><div class="filter-check"></div><span class="filter-label">★★★☆☆ 3-Star</span><span class="filter-count">29</span></label>

</div>

<div class="divider"></div>

<div class="filter-section">

<div class="filter-section-title">Airline</div>

<label class="filter-checkbox"><input type="checkbox" checked><div class="filter-check"></div><span class="filter-label">Malaysia Airlines</span><span class="filter-count">24</span></label>

<label class="filter-checkbox"><input type="checkbox"><div class="filter-check"></div><span class="filter-label">AirAsia X</span><span class="filter-count">31</span></label>

<label class="filter-checkbox"><input type="checkbox"><div class="filter-check"></div><span class="filter-label">Saudia</span><span class="filter-count">18</span></label>

<label class="filter-checkbox"><input type="checkbox"><div class="filter-check"></div><span class="filter-label">Emirates</span><span class="filter-count">15</span></label>

</div>

<div class="divider"></div>

<div class="filter-section">

<div class="filter-section-title">Agency Trust Score</div>

<input type="range" class="range-input" min="60" max="100" value="80" oninput="document.getElementById('trust-val').textContent=this.value+'%+'">

<div class="range-labels"><span>60%</span><span id="trust-val">80%+</span></div>

</div>

</div>

</div>

</aside>

<div class="results-list">

<div class="results-toolbar">

<div class="results-count">Showing <strong>126 packages</strong> for Umrah from Kuala Lumpur</div>

<div style="display:flex;gap:10px;align-items:center;">

<span style="font-size:0.8rem;color:var(--text-muted)">Sort by:</span>

<select class="sort-select" style="color:var(--text-primary)">

<option>Best Match</option>

<option>Price: Low to High</option>

<option>Price: High to Low</option>

<option>Highest Rated</option>

<option>Shortest Duration</option>

</select>

</div>

</div>

<div class="compare-bar" id="compare-bar">

<div style="font-size:0.875rem;font-weight:500;">Comparing <span id="compare-count">0</span> packages</div>

<div class="compare-slots" id="compare-slots">

<div class="compare-slot"><span class="compare-slot-empty" id="cslot-0">Empty slot</span></div>

<div class="compare-slot"><span class="compare-slot-empty" id="cslot-1">Empty slot</span></div>

<div class="compare-slot"><span class="compare-slot-empty" id="cslot-2">Empty slot</span></div>

</div>

<button class="btn-primary" style="padding:10px 22px;font-size:0.85rem" onclick="showPage('compare')">Compare Now →</button>

<button class="btn-ghost" onclick="clearCompare()">Clear</button>

</div>

<div class="result-card" onclick="showPage('detail')">

<div class="result-card-img">

<div class="result-card-img-ph">الكعبة</div>

<div class="pkg-badges" style="position:absolute;top:12px;left:12px;"><span class="tag tag-gold">⭐ Top Pick</span></div>

</div>

<div class="result-card-body">

<div class="result-tag-row">

<span class="tag tag-gold">14 Nights</span>

<span class="tag tag-green">Visa Included</span>

<span class="tag tag-blue">5-Star Hotels</span>

</div>

<div class="result-name">Premium Umrah — Makkah & Madinah Dual City</div>

<div class="result-agency-row">

<div class="result-agency-name">Al-Barakah Travel & Tours Sdn Bhd</div>

<div class="trust-score">

<div class="trust-ring" style="--score:96">

<span class="trust-ring-val">96</span>

</div>

<span style="font-size:0.72rem;color:var(--text-muted)">Trust Score</span>

</div>

</div>

<div class="result-features">

<span class="result-feature">✈️ MAS Airlines</span>

<span class="result-feature">🏨 5★ Hilton Makkah</span>

<span class="result-feature">🚌 Private Transport</span>

<span class="result-feature">🍽️ Full Board</span>

<span class="result-feature">👨‍🏫 Licensed Mutawwif</span>

<span class="result-feature">🎫 Visa Included</span>

</div>

<div style="display:flex;align-items:center;gap:8px;margin-top:12px;">

<div class="stars">★★★★★</div>

<span style="font-size:0.8rem;color:var(--text-secondary)">4.9 · 312 reviews</span>

</div>

</div>

<div class="result-card-footer">

<div>

<label class="compare-cb" onclick="event.stopPropagation(); addCompare(this,'Premium Umrah 14N')">

<input type="checkbox">

<div class="compare-cb-box"></div>

Compare

</label>

<button class="pkg-fav" onclick="event.stopPropagation(); toggleFav(this)" style="margin-bottom:10px;position:relative;top:0;right:0;width:34px;height:34px;">♡</button>

</div>

<div style="text-align:right;">

<div class="pkg-price-lbl">From</div>

<div class="pkg-price">MYR 8,200</div>

<div style="font-size:0.75rem;color:var(--text-muted);">/ person</div>

<button class="btn-primary" style="margin-top:10px;padding:10px 20px;font-size:0.85rem" onclick="event.stopPropagation();showPage('detail')">View Details</button>

</div>

</div>

</div>

<div class="result-card" onclick="showPage('detail')">

<div class="result-card-img" style="background:linear-gradient(135deg,#E0D8C8,#D4CCA8);">

<div class="result-card-img-ph">المدينة</div>

</div>

<div class="result-card-body">

<div class="result-tag-row">

<span class="tag tag-gold">10 Nights</span>

<span class="tag tag-green">Best Value</span>

</div>

<div class="result-name">Economy Plus Umrah — Budget-Friendly Sacred Journey</div>

<div class="result-agency-row">

<div class="result-agency-name">Zahra Pilgrimage Sdn Bhd</div>

<div class="trust-score">

<div class="trust-ring" style="--score:88">

<span class="trust-ring-val">88</span>

</div>

<span style="font-size:0.72rem;color:var(--text-muted)">Trust Score</span>

</div>

</div>

<div class="result-features">

<span class="result-feature">✈️ AirAsia X</span>

<span class="result-feature">🏨 4★ Millennium</span>

<span class="result-feature">🚌 Coach Transport</span>

<span class="result-feature">🍽️ Breakfast</span>

</div>

<div style="display:flex;align-items:center;gap:8px;margin-top:12px;">

<div class="stars">★★★★☆</div>

<span style="font-size:0.8rem;color:var(--text-secondary)">4.6 · 188 reviews</span>

</div>

</div>

<div class="result-card-footer">

<div>

<label class="compare-cb" onclick="event.stopPropagation(); addCompare(this,'Economy Plus 10N')">

<input type="checkbox">

<div class="compare-cb-box"></div>

Compare

</label>

</div>

<div style="text-align:right;">

<div class="pkg-price-lbl">From</div>

<div class="pkg-price">MYR 4,800</div>

<div style="font-size:0.75rem;color:var(--text-muted);">/ person</div>

<button class="btn-primary" style="margin-top:10px;padding:10px 20px;font-size:0.85rem" onclick="event.stopPropagation();showPage('detail')">View Details</button>

</div>

</div>

</div>

<div class="result-card" onclick="showPage('detail')">

<div class="result-card-img" style="background:linear-gradient(135deg,#C8D4E8,#B8C8D8);">

<div class="result-card-img-ph">الروضة</div>

<div class="pkg-badges" style="position:absolute;top:12px;left:12px;"><span class="tag tag-blue">Ramadan 2026</span></div>

</div>

<div class="result-card-body">

<div class="result-tag-row">

<span class="tag tag-blue">21 Nights</span>

<span class="tag tag-gold">Ramadan Special</span>

<span class="tag tag-green">Visa Included</span>

</div>

<div class="result-name">Ramadan Umrah Retreat — 21 Nights Full Spiritual Immersion</div>

<div class="result-agency-row">

<div class="result-agency-name">Nusantara Holy Tours</div>

<div class="trust-score">

<div class="trust-ring" style="--score:94">

<span class="trust-ring-val">94</span>

</div>

<span style="font-size:0.72rem;color:var(--text-muted)">Trust Score</span>

</div>

</div>

<div class="result-features">

<span class="result-feature">✈️ Saudia</span>

<span class="result-feature">🏨 5★ Clock Tower</span>

<span class="result-feature">🚌 Private VIP</span>

<span class="result-feature">🍽️ Full Board + Iftar</span>

<span class="result-feature">👨‍🏫 Senior Scholar</span>

</div>

<div style="display:flex;align-items:center;gap:8px;margin-top:12px;">

<div class="stars">★★★★★</div>

<span style="font-size:0.8rem;color:var(--text-secondary)">5.0 · 97 reviews</span>

</div>

</div>

<div class="result-card-footer">

<div>

<label class="compare-cb" onclick="event.stopPropagation(); addCompare(this,'Ramadan 21N')">

<input type="checkbox">

<div class="compare-cb-box"></div>

Compare

</label>

</div>

<div style="text-align:right;">

<div class="pkg-price-lbl">From</div>

<div class="pkg-price">MYR 14,500</div>

<div style="font-size:0.75rem;color:var(--text-muted);">/ person</div>

<button class="btn-primary" style="margin-top:10px;padding:10px 20px;font-size:0.85rem" onclick="event.stopPropagation();showPage('detail')">View Details</button>

</div>

</div>

</div>

<div style="text-align:center;padding:20px 0;color:var(--text-muted);font-size:0.875rem;">Showing 3 of 126 packages · <button class="btn-ghost" style="display:inline-flex">Load more →</button></div>

</div>

</div>

</div>

<div class="page" id="page-detail">

<div class="detail-hero">

<div class="detail-hero-ph">الكعبة المشرفة</div>

<div class="detail-hero-overlay"></div>

<div class="detail-hero-content">

<div class="gold-badge" style="margin-bottom:12px;color:var(--gold-light);border-color:rgba(200,169,107,0.3)">Al-Barakah Travel & Tours</div>

<h1>Premium Umrah — 14 Nights<br>Makkah & Madinah</h1>

<p>June 15 – June 29, 2025 · Departing Kuala Lumpur</p>

</div>

</div>

<div style="padding:16px clamp(16px,5vw,80px);display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid rgba(200,169,107,0.1);">

<button class="btn-ghost" onclick="showPage('results')">← Results</button>

<span class="tag tag-gold">14 Nights</span>

<span class="tag tag-green">Visa Included</span>

<span class="tag tag-blue">5-Star Hotels</span>

<span class="tag tag-gold">Full Board</span>

<div style="margin-left:auto;display:flex;gap:10px;">

<button class="btn-secondary" onclick="addCompare(this,'Premium Umrah 14N'); showPage('compare')">Add to Compare</button>

<button class="btn-ghost" onclick="toggleFav(this)">♡ Save</button>

</div>

</div>

<div class="detail-body">

<div class="detail-main">

<div class="detail-tabs">

<span class="detail-tab active" onclick="showDetailTab(this,'tab-overview')">Overview</span>

<span class="detail-tab" onclick="showDetailTab(this,'tab-itinerary')">Itinerary</span>

<span class="detail-tab" onclick="showDetailTab(this,'tab-hotels')">Hotels</span>

<span class="detail-tab" onclick="showDetailTab(this,'tab-reviews')">Reviews</span>

</div>

<div class="detail-panel active" id="tab-overview">

<div class="detail-section-title">What's Included</div>

<div class="inclusions-grid">

<div class="inclusion-item"><span class="inclusion-icon">✈️</span>Return flights (MAS Airlines)</div>

<div class="inclusion-item"><span class="inclusion-icon">🏨</span>14 nights 5-star accommodation</div>

<div class="inclusion-item"><span class="inclusion-icon">🎫</span>Umrah visa processing</div>

<div class="inclusion-item"><span class="inclusion-icon">🍽️</span>Full board meals (3x daily)</div>

<div class="inclusion-item"><span class="inclusion-icon">🚌</span>Private VIP transport</div>

<div class="inclusion-item"><span class="inclusion-icon">👨‍🏫</span>Licensed Mutawwif guide</div>

<div class="inclusion-item"><span class="inclusion-icon">📋</span>Umrah manasik briefing</div>

<div class="inclusion-item"><span class="inclusion-icon">🧳</span>Ihram kit included</div>

<div class="inclusion-item"><span class="inclusion-icon">💊</span>Group insurance coverage</div>

<div class="inclusion-item"><span class="inclusion-icon">📖</span>Dua & ziyarah guide book</div>

</div>

<div class="divider-gold"></div>

<div class="detail-section-title">About This Package</div>

<p style="color:var(--text-secondary);line-height:1.8;font-size:0.9rem;margin-bottom:20px;">Experience the journey of a lifetime with our premium 14-night Umrah package. Stay at the iconic Hilton Makkah Convention Hotel — a 2-minute walk from Masjid al-Haram — and the luxurious Madinah Oberoi. This package is designed for pilgrims who seek comfort, guidance, and a deeply spiritual experience without compromise.</p>

<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;">

<div class="neu-card-sm" style="text-align:center;">

<div style="font-size:1.5rem;margin-bottom:6px;">📏</div>

<div style="font-size:0.8rem;color:var(--text-muted)">Distance Haram</div>

<div style="font-weight:600;font-size:1rem;margin-top:2px;">50m</div>

</div>

<div class="neu-card-sm" style="text-align:center;">

<div style="font-size:1.5rem;margin-bottom:6px;">🕌</div>

<div style="font-size:0.8rem;color:var(--text-muted)">Makkah Nights</div>

<div style="font-weight:600;font-size:1rem;margin-top:2px;">8 Nights</div>

</div>

<div class="neu-card-sm" style="text-align:center;">

<div style="font-size:1.5rem;margin-bottom:6px;">🌹</div>

<div style="font-size:0.8rem;color:var(--text-muted)">Madinah Nights</div>

<div style="font-weight:600;font-size:1rem;margin-top:2px;">6 Nights</div>

</div>

<div class="neu-card-sm" style="text-align:center;">

<div style="font-size:1.5rem;margin-bottom:6px;">👥</div>

<div style="font-size:0.8rem;color:var(--text-muted)">Group Size</div>

<div style="font-weight:600;font-size:1rem;margin-top:2px;">Max 30</div>

</div>

</div>

</div>

<div class="detail-panel" id="tab-itinerary">

<div class="detail-section-title">Day-by-Day Itinerary</div>

<div class="itinerary-item">

<div class="itinerary-day"><div class="day-num">1</div><div class="day-line"></div></div>

<div class="itinerary-content"><div class="itinerary-title">Departure from KUL · Arrival Madinah</div><div class="itinerary-desc">Check-in MAS Airlines flight MH060 at KLIA. Arrive at Prince Mohammad Bin Abdul Aziz Airport, Madinah. Transfer to Oberoi Madinah Hotel. Dinner included.</div></div>

</div>

<div class="itinerary-item">

<div class="itinerary-day"><div class="day-num">2–6</div><div class="day-line"></div></div>

<div class="itinerary-content"><div class="itinerary-title">Madinah — Spiritual Enrichment</div><div class="itinerary-desc">Visits to Masjid Nabawi, Raudhah, Masjid Quba, Masjid Al-Qiblatayn, Uhud Mountain, and Dates Market. Daily lectures with our licensed Ustaz.</div></div>

</div>

<div class="itinerary-item">

<div class="itinerary-day"><div class="day-num">7</div><div class="day-line"></div></div>

<div class="itinerary-content"><div class="itinerary-title">Transfer to Makkah · Miqat</div><div class="itinerary-desc">Depart Madinah by luxury coach. Don ihram at Miqat Bir Ali. Arrive Makkah and check in to Hilton Makkah Convention Hotel. Begin Umrah rituals.</div></div>

</div>

<div class="itinerary-item">

<div class="itinerary-day"><div class="day-num">8–13</div><div class="day-line"></div></div>

<div class="itinerary-content"><div class="itinerary-title">Makkah — Tawaf & Worship</div><div class="itinerary-desc">Free time for worship, Tawaf, and Sa'ie. Ziyarah visits to Jabal Rahmah, Muzdalifah, and Mina. Evening reflections and dua sessions with Mutawwif.</div></div>

</div>

<div class="itinerary-item">

<div class="itinerary-day"><div class="day-num">14</div></div>

<div class="itinerary-content"><div class="itinerary-title">Farewell Tawaf · Departure</div><div class="itinerary-desc">Perform Tawaf al-Wida. Transfer to King Abdul Aziz International Airport. Return flight MH061 to Kuala Lumpur. Arrive KLIA with barakah.</div></div>

</div>

</div>

<div class="detail-panel" id="tab-hotels">

<div class="detail-section-title">Your Accommodation</div>

<div class="hotel-card-row">

<div class="hotel-img">🕌</div>

<div>

<div style="font-weight:600;margin-bottom:4px;">Hilton Makkah Convention Hotel</div>

<div class="stars" style="margin-bottom:4px;">★★★★★</div>

<div style="font-size:0.8rem;color:var(--text-secondary);">📍 50m from Masjid al-Haram · 8 Nights</div>

<div style="font-size:0.78rem;color:var(--text-muted);margin-top:4px;">Deluxe room with Kaaba view available</div>

</div>

</div>

<div class="hotel-card-row">

<div class="hotel-img">🌹</div>

<div>

<div style="font-weight:600;margin-bottom:4px;">The Oberoi Madinah</div>

<div class="stars" style="margin-bottom:4px;">★★★★★</div>

<div style="font-size:0.8rem;color:var(--text-secondary);">📍 Direct view of Masjid Nabawi · 6 Nights</div>

<div style="font-size:0.78rem;color:var(--text-muted);margin-top:4px;">Superior room with green dome view</div>

</div>

</div>

</div>

<div class="detail-panel" id="tab-reviews">

<div class="detail-section-title">Pilgrim Reviews</div>

<div style="display:flex;gap:20px;align-items:center;margin-bottom:28px;flex-wrap:wrap;">

<div style="text-align:center;">

<div style="font-family:var(--font-display);font-size:4rem;font-weight:600;line-height:1;color:var(--text-primary);">4.9</div>

<div class="stars" style="font-size:1.2rem;">★★★★★</div>

<div style="font-size:0.78rem;color:var(--text-muted);margin-top:4px;">312 reviews</div>

</div>

<div style="flex:1;min-width:200px;">

<div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;"><span style="font-size:0.8rem;color:var(--text-muted);width:80px;">Hotel Quality</span><div class="progress-bar" style="flex:1;"><div class="progress-fill" style="width:96%;"></div></div><span style="font-size:0.8rem;width:28px;">4.8</span></div>

<div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;"><span style="font-size:0.8rem;color:var(--text-muted);width:80px;">Transport</span><div class="progress-bar" style="flex:1;"><div class="progress-fill" style="width:90%;"></div></div><span style="font-size:0.8rem;width:28px;">4.5</span></div>

<div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;"><span style="font-size:0.8rem;color:var(--text-muted);width:80px;">Guide</span><div class="progress-bar" style="flex:1;"><div class="progress-fill" style="width:98%;"></div></div><span style="font-size:0.8rem;width:28px;">4.9</span></div>

<div style="display:flex;align-items:center;gap:10px;"><span style="font-size:0.8rem;color:var(--text-muted);width:80px;">Value</span><div class="progress-bar" style="flex:1;"><div class="progress-fill" style="width:92%;"></div></div><span style="font-size:0.8rem;width:28px;">4.6</span></div>

</div>

</div>

<div class="neu-card" style="margin-bottom:14px;padding:20px;">

<div style="display:flex;justify-content:space-between;margin-bottom:8px;"><span style="font-weight:500;font-size:0.9rem;">Nur Aminah B.</span><div class="stars" style="font-size:0.8rem;">★★★★★</div></div>

<p style="font-size:0.875rem;color:var(--text-secondary);line-height:1.7;font-style:italic;">"Alhamdulillah, this was the most profound journey of my life. The Mutawwif was exceptionally knowledgeable and patient. The hotel was exactly as advertised — 50 meters from the Haram. Worth every ringgit."</p>

<div style="font-size:0.72rem;color:var(--text-muted);margin-top:8px;">Traveled December 2024</div>

</div>

</div>

</div>

<div class="detail-sidebar">

<div class="neu-card booking-card">

<div class="price-display">

<div class="price-from">Starting from</div>

<div class="price-main">MYR 8,200</div>

<div class="price-per">per person</div>

</div>

<div class="divider-gold"></div>

<div class="price-breakdown">

<div class="price-row"><span>Package base price</span><span>MYR 7,200</span></div>

<div class="price-row"><span>Visa & processing</span><span>MYR 650</span></div>

<div class="price-row"><span>Airport tax</span><span>MYR 350</span></div>

<div class="divider" style="margin:8px 0;"></div>

<div class="price-row total"><span>Total per person</span><span>MYR 8,200</span></div>

</div>

<button class="btn-primary" style="width:100%;justify-content:center;margin-bottom:10px;" onclick="showPage('booking')">Book This Package →</button>

<button class="btn-secondary" style="width:100%;justify-content:center;" onclick="addCompare(this,'Premium Umrah 14N'); showPage('compare')">Compare Package</button>

<div style="text-align:center;margin-top:12px;font-size:0.75rem;color:var(--text-muted);">Free cancellation within 48 hours</div>

<div class="divider-gold"></div>

<div class="agency-card">

<div style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-muted);margin-bottom:12px;">Your Agency</div>

<div class="agency-info">

<div class="agency-logo">🕌</div>

<div>

<div class="agency-name-main">Al-Barakah Travel</div>

<div class="agency-since">Est. 2005 · KL Licensed</div>

</div>

</div>

<div class="agency-stats">

<div class="agency-stat"><div class="agency-stat-val">96</div><div class="agency-stat-lbl">Trust</div></div>

<div class="agency-stat"><div class="agency-stat-val">4.9★</div><div class="agency-stat-lbl">Rating</div></div>

<div class="agency-stat"><div class="agency-stat-val">20yr</div><div class="agency-stat-lbl">Exp.</div></div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="page" id="page-compare">

<div class="compare-header">

<button class="btn-ghost" onclick="showPage('results')" style="margin-bottom:16px;">← Back to Results</button>

<div class="gold-badge" style="margin-bottom:12px;">Side-by-Side Comparison</div>

<h2 class="section-title">Compare Packages</h2>

<p class="section-sub" style="margin-top:8px;">Make the perfect choice for your sacred journey</p>

</div>

<div class="compare-table-wrapper">

<table class="compare-table">

<thead>

<tr>

<th style="width:180px;text-align:left;padding-bottom:24px;"><span style="font-size:0.78rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-muted);">FEATURES</span></th>

<th>

<div class="compare-pkg-header">

<div class="compare-pkg-img">الكعبة</div>

<div style="font-size:0.7rem;color:var(--text-muted);margin-bottom:4px;">Al-Barakah Travel</div>

<div class="compare-pkg-name">Premium Umrah 14N</div>

<div class="compare-pkg-price">MYR 8,200</div>

<div style="margin-top:8px;" class="stars">★★★★★</div>

<button class="btn-primary" style="width:100%;justify-content:center;margin-top:12px;padding:10px;" onclick="showPage('booking')">Book Now</button>

</div>

</th>

<th>

<div class="compare-pkg-header">

<div class="compare-pkg-img">المدينة</div>

<div style="font-size:0.7rem;color:var(--text-muted);margin-bottom:4px;">Zahra Pilgrimage</div>

<div class="compare-pkg-name">Economy Plus 10N</div>

<div class="compare-pkg-price">MYR 4,800</div>

<div style="margin-top:8px;" class="stars">★★★★☆</div>

<button class="btn-secondary" style="width:100%;justify-content:center;margin-top:12px;padding:10px;" onclick="showPage('booking')">Book Now</button>

</div>

</th>

<th>

<div class="compare-pkg-header">

<div class="compare-pkg-img">الروضة</div>

<div style="font-size:0.7rem;color:var(--text-muted);margin-bottom:4px;">Nusantara Tours</div>

<div class="compare-pkg-name">Ramadan 21N</div>

<div class="compare-pkg-price">MYR 14,500</div>

<div style="margin-top:8px;" class="stars">★★★★★</div>

<button class="btn-secondary" style="width:100%;justify-content:center;margin-top:12px;padding:10px;" onclick="showPage('booking')">Book Now</button>

</div>

</th>

</tr>

</thead>

<tbody>

<tr><td class="compare-row-label">Duration</td><td>14 Nights</td><td>10 Nights</td><td>21 Nights</td></tr>

<tr class="compare-highlight"><td class="compare-row-label">Hotel — Makkah</td><td>5★ Hilton (50m)</td><td>4★ Millennium</td><td>5★ Clock Tower</td></tr>

<tr><td class="compare-row-label">Hotel — Madinah</td><td>5★ Oberoi</td><td>4★ Le Meridien</td><td>5★ Anwar Al Madinah</td></tr>

<tr class="compare-highlight"><td class="compare-row-label">Airline</td><td>MAS (Direct)</td><td>AirAsia X</td><td>Saudia (Direct)</td></tr>

<tr><td class="compare-row-label">Meals</td><td>Full Board</td><td>Breakfast</td><td>Full Board + Iftar</td></tr>

<tr class="compare-highlight"><td class="compare-row-label">Transport</td><td>Private VIP</td><td>Coach</td><td>Private VIP</td></tr>

<tr><td class="compare-row-label">Visa Included</td><td><span class="compare-check">✓</span></td><td><span class="compare-check">✓</span></td><td><span class="compare-check">✓</span></td></tr>

<tr class="compare-highlight"><td class="compare-row-label">Licensed Mutawwif</td><td><span class="compare-check">✓</span></td><td><span class="compare-check">✓</span></td><td><span class="compare-check">✓ (Senior Scholar)</span></td></tr>

<tr><td class="compare-row-label">Ihram Kit</td><td><span class="compare-check">✓</span></td><td><span class="compare-cross">✗</span></td><td><span class="compare-check">✓</span></td></tr>

<tr class="compare-highlight"><td class="compare-row-label">Insurance</td><td><span class="compare-check">✓</span></td><td><span class="compare-cross">✗</span></td><td><span class="compare-check">✓</span></td></tr>

<tr><td class="compare-row-label">Ziyarah Visits</td><td>Full (12 sites)</td><td>Standard (8 sites)</td><td>Full Extended (15)</td></tr>

<tr class="compare-highlight"><td class="compare-row-label">Trust Score</td>

<td><div style="display:flex;align-items:center;gap:6px;"><div class="trust-ring" style="--score:96;width:36px;height:36px;"><span class="trust-ring-val" style="font-size:0.6rem;">96</span></div><span style="font-size:0.8rem;">Excellent</span></div></td>

<td><div style="display:flex;align-items:center;gap:6px;"><div class="trust-ring" style="--score:88;width:36px;height:36px;"><span class="trust-ring-val" style="font-size:0.6rem;">88</span></div><span style="font-size:0.8rem;">Very Good</span></div></td>

<td><div style="display:flex;align-items:center;gap:6px;"><div class="trust-ring" style="--score:94;width:36px;height:36px;"><span class="trust-ring-val" style="font-size:0.6rem;">94</span></div><span style="font-size:0.8rem;">Excellent</span></div></td>

</tr>

<tr><td class="compare-row-label">Overall Rating</td>

<td><span class="stars">★★★★★</span> 4.9</td>

<td><span class="stars">★★★★☆</span> 4.6</td>

<td><span class="stars">★★★★★</span> 5.0</td>

</tr>

</tbody>

</table>

</div>

</div>

<div class="page" id="page-dashboard">

<div class="dashboard-layout">

<aside class="dashboard-sidebar">

<div class="dash-avatar-section">

<div class="dash-avatar">AH</div>

<div class="dash-name">Ahmad Hassan</div>

<div class="dash-email">ahmad@email.com</div>

</div>

<div class="dash-nav">

<div class="dash-nav-item active" onclick="showDashSection(this,'dash-overview')"><span class="dash-nav-icon">🏠</span> Overview</div>

<div class="dash-nav-item" onclick="showDashSection(this,'dash-bookings')"><span class="dash-nav-icon">📋</span> My Bookings</div>

<div class="dash-nav-item" onclick="showDashSection(this,'dash-confirm')"><span class="dash-nav-icon">✅</span> Confirm Booking</div>

<div class="dash-nav-item" onclick="showDashSection(this,'dash-saved')"><span class="dash-nav-icon">♡</span> Saved Packages</div>

<div class="dash-nav-item" onclick="showPage('prep')"><span class="dash-nav-icon">🕋</span> Prep Dashboard</div>

<div class="dash-nav-item" onclick="showDashSection(this,'dash-messages')"><span class="dash-nav-icon">💬</span> Messages</div>

<div class="dash-nav-item" onclick="showPage('review')"><span class="dash-nav-icon">⭐</span> Write Review</div>

<div class="divider"></div>

<div class="dash-nav-item" onclick="logOut()"><span class="dash-nav-icon">🚪</span> Log Out</div>

</div>

</aside>

<div class="dash-main">

<div class="dash-section active" id="dash-overview">

<div class="dash-greeting">Assalamu alaikum, <span>Ahmad</span> 👋</div>

<div class="dash-sub">Your sacred journey to Makkah is 47 days away. Stay prepared.</div>

<div class="dash-cards-row">

<div class="neu-card dash-stat-card"><div class="dash-stat-icon">📋</div><div class="dash-stat-val" style="color:var(--gold)">1</div><div class="dash-stat-lbl">Active Booking</div></div>

<div class="neu-card dash-stat-card"><div class="dash-stat-icon">♡</div><div class="dash-stat-val">5</div><div class="dash-stat-lbl">Saved Packages</div></div>

<div class="neu-card dash-stat-card"><div class="dash-stat-icon">✅</div><div class="dash-stat-val" style="color:#48A870">68%</div><div class="dash-stat-lbl">Prep Complete</div></div>

<div class="neu-card dash-stat-card"><div class="dash-stat-icon">📅</div><div class="dash-stat-val">47</div><div class="dash-stat-lbl">Days to Depart</div></div>

</div>

<div class="confirm-booking-section">

<div class="confirm-booking-badge"><span class="dot"></span> Action Required</div>

<div class="confirm-booking-title">Confirm Your Booking with IhramHub</div>

<div class="confirm-booking-desc">You have made payment to Al-Barakah Travel for your Umrah package (Booking REF: IH-2025-8821). <strong>Tap below to officially confirm</strong> your booking on IhramHub. This activates your tracking, protection, and pilgrimage prep dashboard.</div>

<button class="btn-confirm-booking" onclick="openConfirmModal()">

<span class="btn-icon">✅</span> Confirm My Booking

</button>

</div>

<div class="countdown-widget mb-24">

<div class="countdown-label">✈ Departure Countdown · KUL → JED</div>

<div class="countdown-grid">

<div class="countdown-unit"><div class="countdown-val" id="cd-days">47</div><div class="countdown-unit-lbl">Days</div></div>

<div class="countdown-unit"><div class="countdown-val" id="cd-hours">14</div><div class="countdown-unit-lbl">Hours</div></div>

<div class="countdown-unit"><div class="countdown-val" id="cd-mins">32</div><div class="countdown-unit-lbl">Mins</div></div>

<div class="countdown-unit"><div class="countdown-val" id="cd-secs">08</div><div class="countdown-unit-lbl">Secs</div></div>

</div>

</div>

<div class="neu-card" style="padding:24px;">

<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">

<div class="detail-section-title" style="margin:0;">Preparation Checklist</div>

<button class="btn-ghost" onclick="showPage('prep')">View All →</button>

</div>

<div class="checklist">

<div class="check-item done" onclick="toggleCheck(this)"><div class="check-box"></div><span class="check-text">Book Umrah package</span><span class="check-category">Booking</span></div>

<div class="check-item done" onclick="toggleCheck(this)"><div class="check-box"></div><span class="check-text">Passport validity check (min 6 months)</span><span class="check-category">Documents</span></div>

<div class="check-item" onclick="toggleCheck(this)"><div class="check-box"></div><span class="check-text">Submit visa application to agency</span><span class="check-category">Visa</span></div>

<div class="check-item" onclick="toggleCheck(this)"><div class="check-box"></div><span class="check-text">Meningitis vaccination (ACWY)</span><span class="check-category">Health</span></div>

<div class="check-item" onclick="toggleCheck(this)"><div class="check-box"></div><span class="check-text">Ihram garments ready</span><span class="check-category">Clothing</span></div>

</div>

</div>

</div>

<div class="dash-section" id="dash-bookings">

<div class="dash-greeting">My <span>Bookings</span></div>

<div class="dash-sub">Track and manage your pilgrimage bookings.</div>

<div class="neu-card" style="margin-bottom:20px;">

<div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:20px;">

<div>

<div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-muted);margin-bottom:4px;">Booking Reference</div>

<div style="font-family:var(--font-display);font-size:1.4rem;font-weight:500;color:var(--gold-dark);">IH-2025-8821</div>

</div>

<span class="tag tag-gold" style="padding:8px 16px;">⏳ Pending Confirmation</span>

</div>

<div style="font-family:var(--font-display);font-size:1.2rem;font-weight:500;margin-bottom:6px;">Premium Umrah — 14 Nights</div>

<div style="font-size:0.875rem;color:var(--text-secondary);margin-bottom:16px;">Al-Barakah Travel · Jun 15–29, 2025 · 2 Adults</div>

<div class="progress-bar" style="margin-bottom:8px;"><div class="progress-fill" style="width:40%;"></div></div>

<div style="font-size:0.78rem;color:var(--text-muted);">Booking progress: 40% · Next: Confirm Payment</div>

<div class="divider-gold"></div>

<div style="display:flex;gap:10px;flex-wrap:wrap;">

<button class="btn-primary" style="padding:10px 20px;font-size:0.85rem;" onclick="showPage('status')">View Status →</button>

<button class="btn-secondary" style="padding:10px 20px;font-size:0.85rem;" onclick="openConfirmModal()">✅ Confirm My Booking</button>

</div>

</div>

</div>

<div class="dash-section" id="dash-confirm">

<div class="dash-greeting">Confirm My <span>Booking</span></div>

<div class="dash-sub">After paying your agency, confirm here to activate your full IhramHub protection and tracking.</div>

<div class="neu-card" style="margin-bottom:24px;padding:28px;">

<div style="display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap;">

<div style="flex:1;min-width:200px;">

<div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-muted);margin-bottom:4px;">Your Package</div>

<div style="font-family:var(--font-display);font-size:1.1rem;font-weight:500;">Premium Umrah — 14 Nights</div>

<div style="font-size:0.85rem;color:var(--text-secondary);">Al-Barakah Travel · REF: IH-2025-8821</div>

</div>

<div>

<div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-muted);margin-bottom:4px;">Total Paid to Agency</div>

<div style="font-family:var(--font-display);font-size:1.6rem;font-weight:600;color:var(--gold-dark);">MYR 16,400</div>

<div style="font-size:0.78rem;color:var(--text-muted);">2 Adults × MYR 8,200</div>

</div>

</div>

<div class="divider-gold"></div>

<div style="margin-bottom:16px;">

<div style="font-size:0.875rem;font-weight:500;margin-bottom:12px;">Upload Your Payment Proof</div>

<div style="background:var(--base);box-shadow:var(--neu-inset);border-radius:var(--radius-sm);padding:28px;text-align:center;cursor:pointer;transition:var(--transition);" onclick="showToast('📎 File upload simulated')">

<div style="font-size:2rem;margin-bottom:8px;">📄</div>

<div style="font-size:0.875rem;color:var(--text-secondary);">Drop receipt or tap to upload</div>

<div style="font-size:0.75rem;color:var(--text-muted);margin-top:4px;">PDF, JPG, PNG accepted</div>

</div>

</div>

<div class="form-group" style="margin-bottom:16px;">

<label>Agency Payment Reference / Receipt Number</label>

<input class="neu-input" placeholder="e.g. AB-2025-REF-0821" value="AB-2025-REF-0821">

</div>

<div class="form-group" style="margin-bottom:20px;">

<label>Payment Date</label>

<input class="neu-input" type="date" value="2025-04-10">

</div>

<button class="btn-confirm-booking" style="width:100%;justify-content:center;padding:16px;" onclick="openConfirmModal()">

<span class="btn-icon">✅</span> Confirm My Booking with IhramHub

</button>

<div style="text-align:center;margin-top:12px;font-size:0.78rem;color:var(--text-muted);">

🔒 Your booking details are securely stored and protected by IhramHub

</div>

</div>

<div class="neu-card" style="padding:24px;">

<div style="font-size:0.875rem;font-weight:500;margin-bottom:16px;">What happens after you confirm?</div>

<div style="display:flex;flex-direction:column;gap:12px;">

<div style="display:flex;gap:12px;align-items:flex-start;">

<div style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-dark));display:flex;align-items:center;justify-content:center;color:white;font-size:0.72rem;font-weight:600;flex-shrink:0;">1</div>

<div><div style="font-size:0.875rem;font-weight:500;">IhramHub verifies with agency</div><div style="font-size:0.8rem;color:var(--text-secondary);">We cross-verify your payment with the agency within 24 hours.</div></div>

</div>

<div style="display:flex;gap:12px;align-items:flex-start;">

<div style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-dark));display:flex;align-items:center;justify-content:center;color:white;font-size:0.72rem;font-weight:600;flex-shrink:0;">2</div>

<div><div style="font-size:0.875rem;font-weight:500;">Booking officially activated</div><div style="font-size:0.8rem;color:var(--text-secondary);">Your booking status updates to "Confirmed" and tracking activates.</div></div>

</div>

<div style="display:flex;gap:12px;align-items:flex-start;">

<div style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-dark));display:flex;align-items:center;justify-content:center;color:white;font-size:0.72rem;font-weight:600;flex-shrink:0;">3</div>

<div><div style="font-size:0.875rem;font-weight:500;">Prep Dashboard unlocked</div><div style="font-size:0.8rem;color:var(--text-secondary);">Access your full pilgrimage preparation tools, documents, and countdown.</div></div>

</div>

</div>

</div>

</div>

<div class="dash-section" id="dash-saved">

<div class="dash-greeting">Saved <span>Packages</span></div>

<div class="dash-sub">Your shortlisted sacred journeys.</div>

<div class="packages-grid" style="margin-top:8px;">

<div class="pkg-card" onclick="showPage('detail')">

<div class="pkg-img"><div class="pkg-img-placeholder">الكعبة</div><div class="pkg-img-overlay"></div><div class="pkg-fav saved" onclick="event.stopPropagation(); toggleFav(this)">♥</div></div>

<div class="pkg-body">

<div class="pkg-agency">Al-Barakah Travel</div>

<div class="pkg-name">Premium Umrah 14N</div>

<div class="pkg-footer"><div><div class="pkg-price">MYR 8,200</div></div><button class="pkg-btn btn-primary" onclick="event.stopPropagation();showPage('detail')">View</button></div>

</div>

</div>

<div class="pkg-card" onclick="showPage('detail')">

<div class="pkg-img" style="background:linear-gradient(135deg,#C8D4E8,#B8C8D8);"><div class="pkg-img-placeholder">الروضة</div><div class="pkg-img-overlay"></div><div class="pkg-fav saved" onclick="event.stopPropagation(); toggleFav(this)">♥</div></div>

<div class="pkg-body">

<div class="pkg-agency">Nusantara Tours</div>

<div class="pkg-name">Ramadan 21N Retreat</div>

<div class="pkg-footer"><div><div class="pkg-price">MYR 14,500</div></div><button class="pkg-btn btn-primary" onclick="event.stopPropagation();showPage('detail')">View</button></div>

</div>

</div>

</div>

</div>

<div class="dash-section" id="dash-messages">

<div class="dash-greeting">Message <span>Center</span></div>

<div class="dash-sub">Communicate directly with your agency.</div>

<div class="messages-layout" style="margin-top:16px;">

<div class="msg-sidebar">

<div class="msg-sidebar-header">

<input class="neu-input" placeholder="Search conversations..." style="font-size:0.8rem;padding:10px 14px;">

</div>

<div class="msg-thread active">

<div class="msg-thread-avatar">AB</div>

<div style="flex:1;overflow:hidden;">

<div style="display:flex;justify-content:space-between;align-items:center;">

<div class="msg-thread-name">Al-Barakah Travel</div>

<div class="msg-thread-time">2h ago</div>

</div>

<div class="msg-thread-preview">Your visa application has been...</div>

</div>

</div>

<div class="msg-thread">

<div class="msg-thread-avatar" style="background:linear-gradient(135deg,#B8C8D8,#A0B0C8);">ZP</div>

<div style="flex:1;overflow:hidden;">

<div style="display:flex;justify-content:space-between;align-items:center;">

<div class="msg-thread-name">Zahra Pilgrimage</div>

<div class="msg-thread-time">3d ago</div>

</div>

<div class="msg-thread-preview">Thank you for your inquiry...</div>

</div>

</div>

</div>

<div class="msg-chat">

<div class="msg-chat-header">

<div class="msg-thread-avatar">AB</div>

<div>

<div style="font-weight:500;font-size:0.9rem;">Al-Barakah Travel</div>

<div style="font-size:0.75rem;color:var(--text-muted);">Booking IH-2025-8821</div>

</div>

<div style="margin-left:auto;">

<span class="tag tag-green">● Online</span>

</div>

</div>

<div class="msg-chat-body">

<div class="msg-bubble received">

<div class="msg-bubble-text">Assalamu alaikum Ahmad! Welcome to Al-Barakah Travel. We have received your booking request for the Premium Umrah 14 Night package.</div>

<div class="msg-bubble-time">10:24 AM</div>

</div>

<div class="msg-bubble sent">

<div class="msg-bubble-text">Wa alaikum assalam! Thank you. Could you please confirm what documents I need to submit for the visa application?</div>

<div class="msg-bubble-time">10:31 AM</div>

</div>

<div class="msg-bubble received">

<div class="msg-bubble-text">Of course! You will need: Original passport (min 6 months validity), 4 passport-size photos (white background), and a valid meningitis vaccination certificate. Your visa application has been submitted and should be ready within 5-7 business days insha'Allah.</div>

<div class="msg-bubble-time">10:45 AM</div>

</div>

<div class="msg-bubble sent">

<div class="msg-bubble-text">JazakAllah khair! I will submit the documents tomorrow.</div>

<div class="msg-bubble-time">10:48 AM</div>

</div>

</div>

<div class="msg-input-bar">

<input class="msg-input" placeholder="Type a message..." id="msg-input-field">

<button class="msg-send-btn" onclick="sendMsg()">➤</button>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="page" id="page-booking">

<div class="booking-wizard">

<div class="wizard-header">

<button class="btn-ghost" onclick="showPage('detail')" style="margin-bottom:12px;">← Back to Package</button>

<div class="gold-badge" style="margin-bottom:12px;">Booking Request</div>

<h2 style="font-family:var(--font-display);font-size:1.8rem;font-weight:400;">Book Premium Umrah — 14 Nights</h2>

<p style="color:var(--text-secondary);font-size:0.9rem;margin-top:6px;">Al-Barakah Travel · Jun 15–29, 2025</p>

</div>

<div class="wizard-steps">

<div class="wizard-step active" id="ws-1"><div class="ws-circle">1</div><div class="ws-label">Pilgrims</div></div>

<div class="wizard-step" id="ws-2"><div class="ws-circle">2</div><div class="ws-label">Room Type</div></div>

<div class="wizard-step" id="ws-3"><div class="ws-circle">3</div><div class="ws-label">Confirm</div></div>

<div class="wizard-step" id="ws-4"><div class="ws-circle">4</div><div class="ws-label">Submit</div></div>

</div>

<div class="wizard-panel active" id="wp-1">

<div class="neu-card" style="margin-bottom:24px;">

<div style="font-family:var(--font-display);font-size:1.1rem;font-weight:500;margin-bottom:20px;">Pilgrim 1 Details</div>

<div class="form-row form-row-2">

<div class="form-group"><label>First Name</label><input class="neu-input" placeholder="Ahmad" value="Ahmad"></div>

<div class="form-group"><label>Last Name</label><input class="neu-input" placeholder="Hassan" value="Hassan"></div>

</div>

<div class="form-row form-row-3">

<div class="form-group"><label>Passport No.</label><input class="neu-input" placeholder="A12345678"></div>

<div class="form-group"><label>Date of Birth</label><input class="neu-input" type="date" value="1985-06-15"></div>

<div class="form-group"><label>Nationality</label><select class="neu-select"><option>Malaysian</option><option>Indonesian</option><option>Singaporean</option></select></div>

</div>

<div class="form-row">

<div class="form-group"><label>Mahram / Relationship</label><select class="neu-select"><option>Self (Pilgrim 1)</option><option>Spouse</option><option>Parent</option><option>Child</option></select></div>

</div>

</div>

<div class="neu-card" style="margin-bottom:24px;">

<div style="font-family:var(--font-display);font-size:1.1rem;font-weight:500;margin-bottom:20px;">Pilgrim 2 Details</div>

<div class="form-row form-row-2">

<div class="form-group"><label>First Name</label><input class="neu-input" placeholder="Siti"></div>

<div class="form-group"><label>Last Name</label><input class="neu-input" placeholder="Hassan"></div>

</div>

<div class="form-row form-row-3">

<div class="form-group"><label>Passport No.</label><input class="neu-input" placeholder="B98765432"></div>

<div class="form-group"><label>Date of Birth</label><input class="neu-input" type="date" value="1987-09-22"></div>

<div class="form-group"><label>Nationality</label><select class="neu-select"><option>Malaysian</option></select></div>

</div>

</div>

<div class="wizard-nav">

<div></div>

<button class="btn-primary" onclick="nextWizardStep(2)">Continue to Room Selection →</button>

</div>

</div>

<div class="wizard-panel" id="wp-2">

<div class="detail-section-title">Select Your Room Type</div>

<div class="room-option selected" onclick="selectRoom(this)">

<input type="radio" name="room" checked>

<div class="room-option-info"><div class="room-option-name">Double Room — Kaaba View</div><div class="room-option-desc">King bed · 2 adults · Hilton Makkah</div></div>

<div class="room-option-price">+MYR 1,200</div>

</div>

<div class="room-option" onclick="selectRoom(this)">

<input type="radio" name="room">

<div class="room-option-info"><div class="room-option-name">Double Room — City View</div><div class="room-option-desc">King bed · 2 adults · Hilton Makkah</div></div>

<div class="room-option-price">Included</div>

</div>

<div class="room-option" onclick="selectRoom(this)">

<input type="radio" name="room">

<div class="room-option-info"><div class="room-option-name">Quad Room — Shared</div><div class="room-option-desc">2 beds · 4 adults · Hilton Makkah</div></div>

<div class="room-option-price">-MYR 800</div>

</div>

<div class="room-option" onclick="selectRoom(this)">

<input type="radio" name="room">

<div class="room-option-info"><div class="room-option-name">Suite — Haram View</div><div class="room-option-desc">Living room + bedroom · Hilton Makkah</div></div>

<div class="room-option-price">+MYR 3,600</div>

</div>

<div class="wizard-nav">

<button class="btn-secondary" onclick="nextWizardStep(1)">← Back</button>

<button class="btn-primary" onclick="nextWizardStep(3)">Continue to Confirmation →</button>

</div>

</div>

<div class="wizard-panel" id="wp-3">

<div class="order-summary">

<div class="order-summary-title">Booking Summary</div>

<div class="summary-pkg-row">

<div class="summary-pkg-img">الكعبة</div>

<div>

<div style="font-family:var(--font-display);font-size:1.1rem;font-weight:500;">Premium Umrah — 14 Nights</div>

<div style="font-size:0.85rem;color:var(--text-secondary);">Al-Barakah Travel · Jun 15–29, 2025</div>

<div style="font-size:0.8rem;color:var(--text-muted);margin-top:4px;">2 Adults · Double Room Kaaba View</div>

</div>

</div>

<div class="divider-gold"></div>

<div class="price-row"><span>Base package × 2</span><span>MYR 16,400</span></div>

<div class="price-row"><span>Kaaba View upgrade × 2</span><span>MYR 2,400</span></div>

<div class="price-row"><span>Ihram kit × 2</span><span>MYR 200</span></div>

<div class="price-row"><span style="color:#48A870">Early bird discount</span><span style="color:#48A870">-MYR 500</span></div>

<div class="divider-gold"></div>

<div class="price-row total"><span>Total</span><span style="color:var(--gold-dark);font-family:var(--font-display);font-size:1.3rem;">MYR 18,500</span></div>

<div style="background:rgba(200,169,107,0.08);border-radius:var(--radius-xs);padding:14px;margin-top:16px;font-size:0.82rem;color:var(--text-secondary);line-height:1.65;">

ℹ️ This is a <strong>booking request</strong>. After confirmation from the agency, you will receive payment instructions. Use IhramHub's <strong>"Confirm My Booking"</strong> after payment to activate full protection.

</div>

</div>

<div class="wizard-nav" style="margin-top:20px;">

<button class="btn-secondary" onclick="nextWizardStep(2)">← Back</button>

<button class="btn-primary" onclick="nextWizardStep(4)">Send Booking Request →</button>

</div>

</div>

<div class="wizard-panel" id="wp-4">

<div class="neu-card" style="text-align:center;padding:48px 32px;">

<div style="width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#48A870,#2D7A52);display:flex;align-items:center;justify-content:center;font-size:2rem;color:white;margin:0 auto 20px;box-shadow:4px 4px 16px rgba(45,122,82,0.3);">✓</div>

<div style="font-family:var(--font-arabic);font-size:1.8rem;color:var(--gold);margin-bottom:8px;">ماشاء الله</div>

<div style="font-family:var(--font-display);font-size:1.6rem;font-weight:500;margin-bottom:8px;">Booking Request Sent!</div>

<div style="font-size:0.9rem;color:var(--text-secondary);max-width:400px;margin:0 auto 24px;line-height:1.7;">Your booking request has been sent to Al-Barakah Travel. You will receive a confirmation within 24 hours insha'Allah.</div>

<div style="background:var(--base);border-radius:var(--radius-sm);box-shadow:var(--neu-inset);padding:16px;margin-bottom:28px;display:inline-block;">

<div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-muted);">Your Reference</div>

<div style="font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:var(--gold-dark);">IH-2025-8821</div>

</div>

<div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">

<button class="btn-primary" onclick="logIn(); showPage('dashboard'); showDashSection(null,'dash-confirm')">✅ Confirm My Booking</button>

<button class="btn-secondary" onclick="showPage('status')">Track Booking →</button>

</div>

</div>

</div>

</div>

</div>

<div class="page" id="page-status">

<div class="status-page">

<button class="btn-ghost" onclick="showPage('dashboard')" style="margin-bottom:16px;">← My Dashboard</button>

<div class="status-hero-card">

<div class="booking-ref">Booking Reference</div>

<div class="booking-ref-val">IH-2025-8821</div>

<div class="status-badge-big">⏳ Awaiting Payment Confirmation</div>

<div style="font-family:var(--font-display);font-size:1.2rem;font-weight:500;margin-bottom:4px;">Premium Umrah — 14 Nights</div>

<div style="color:rgba(255,255,255,0.6);font-size:0.875rem;">Al-Barakah Travel · June 15–29, 2025</div>

<div class="status-meta-row">

<div class="status-meta-item"><div class="status-meta-lbl">Pilgrims</div><div class="status-meta-val">2 Adults</div></div>

<div class="status-meta-item"><div class="status-meta-lbl">Total</div><div class="status-meta-val">MYR 18,500</div></div>

<div class="status-meta-item"><div class="status-meta-lbl">Departure</div><div class="status-meta-val">Jun 15, 2025</div></div>

</div>

</div>

<div class="neu-card" style="margin-bottom:24px;padding:28px;">

<div style="font-family:var(--font-display);font-size:1.2rem;font-weight:500;margin-bottom:24px;">Booking Journey</div>

<div class="status-timeline">

<div class="st-item">

<div class="st-line-wrap"><div class="st-dot done">✓</div><div class="st-connector"></div></div>

<div class="st-content"><div class="st-title">Booking Request Submitted</div><div class="st-sub">Request sent to Al-Barakah Travel</div><div class="st-time">Apr 5, 2025 · 10:24 AM</div></div>

</div>

<div class="st-item">

<div class="st-line-wrap"><div class="st-dot done">✓</div><div class="st-connector"></div></div>

<div class="st-content"><div class="st-title">Agency Confirmed Booking Slot</div><div class="st-sub">Your slot is secured. Proceed with payment.</div><div class="st-time">Apr 6, 2025 · 2:15 PM</div></div>

</div>

<div class="st-item">

<div class="st-line-wrap"><div class="st-dot active">⟳</div><div class="st-connector"></div></div>

<div class="st-content">

<div class="st-title">Awaiting Payment + Confirmation</div>

<div class="st-sub">Pay agency and click "Confirm My Booking" on IhramHub</div>

<div class="st-time">Action required</div>

<button class="btn-confirm-booking" style="margin-top:12px;padding:12px 22px;font-size:0.85rem;" onclick="openConfirmModal()"><span class="btn-icon">✅</span>Confirm My Booking</button>

</div>

</div>

<div class="st-item">

<div class="st-line-wrap"><div class="st-dot waiting">4</div><div class="st-connector"></div></div>

<div class="st-content"><div class="st-title" style="color:var(--text-muted);">Visa Processing</div><div class="st-sub" style="color:var(--text-muted);">Estimated 5-7 business days</div></div>

</div>

<div class="st-item">

<div class="st-line-wrap"><div class="st-dot waiting">5</div><div class="st-connector"></div></div>

<div class="st-content"><div class="st-title" style="color:var(--text-muted);">Flight Tickets Issued</div><div class="st-sub" style="color:var(--text-muted);">E-tickets sent to your email</div></div>

</div>

<div class="st-item">

<div class="st-line-wrap"><div class="st-dot waiting">6</div></div>

<div class="st-content"><div class="st-title" style="color:var(--text-muted);">Departure Ready ✈️</div><div class="st-sub" style="color:var(--text-muted);">Jun 15, 2025 · KUL → JED</div></div>

</div>

</div>

</div>

<div class="neu-card-sm" style="margin-bottom:20px;">

<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;">

<div>

<div style="font-weight:500;margin-bottom:4px;">Need help with your booking?</div>

<div style="font-size:0.8rem;color:var(--text-secondary);">Message Al-Barakah Travel directly</div>

</div>

<button class="btn-secondary" style="padding:10px 20px;font-size:0.85rem;" onclick="logIn();showPage('dashboard');showDashSection(null,'dash-messages')">Open Chat →</button>

</div>

</div>

</div>

</div>

<div class="page" id="page-prep">

<div class="prep-body">

<button class="btn-ghost" onclick="showPage('dashboard')" style="margin-bottom:16px;">← Dashboard</button>

<div class="prep-header-card">

<div class="prep-header-info">

<h2>Pilgrimage Preparation</h2>

<p>Your comprehensive pre-departure guide · Jun 15, 2025</p>

</div>

<div class="countdown-widget" style="width:280px;">

<div class="countdown-label">✈ Days to Departure</div>

<div class="countdown-grid">

<div class="countdown-unit"><div class="countdown-val">47</div><div class="countdown-unit-lbl">Days</div></div>

<div class="countdown-unit"><div class="countdown-val">14</div><div class="countdown-unit-lbl">Hours</div></div>

<div class="countdown-unit"><div class="countdown-val">32</div><div class="countdown-unit-lbl">Mins</div></div>

<div class="countdown-unit"><div class="countdown-val">08</div><div class="countdown-unit-lbl">Secs</div></div>

</div>

</div>

</div>

<div class="prep-grid">

<div class="neu-card">

<div class="prep-section-title">Overall Readiness</div>

<div class="progress-ring-wrap">

<div class="progress-ring-chart">

<svg viewBox="0 0 80 80" width="80" height="80">

<defs><linearGradient id="goldGrad" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:var(--gold)"/><stop offset="100%" style="stop-color:var(--gold-dark)"/></linearGradient></defs>

<circle class="prc-bg" cx="40" cy="40" r="34" stroke-dasharray="213.6" stroke-dashoffset="0"/>

<circle class="prc-fill" cx="40" cy="40" r="34" stroke-dasharray="213.6" stroke-dashoffset="68"/>

</svg>

<div class="prc-label">68%</div>

</div>

<div>

<div style="font-weight:500;font-size:1.1rem;">68% Ready</div>

<div style="font-size:0.8rem;color:var(--text-secondary);margin-top:2px;">13 of 19 tasks done</div>

<div style="font-size:0.78rem;color:var(--text-muted);margin-top:4px;">6 tasks remaining</div>

</div>

</div>

<div class="divider"></div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">

<div style="text-align:center;padding:12px;background:var(--base);border-radius:var(--radius-xs);box-shadow:var(--neu-shadow-sm);">

<div style="font-size:1.3rem;font-weight:600;color:#48A870;font-family:var(--font-display);">6/6</div>

<div style="font-size:0.72rem;color:var(--text-muted);">Documents</div>

</div>

<div style="text-align:center;padding:12px;background:var(--base);border-radius:var(--radius-xs);box-shadow:var(--neu-shadow-sm);">

<div style="font-size:1.3rem;font-weight:600;color:var(--gold-dark);font-family:var(--font-display);">3/5</div>

<div style="font-size:0.72rem;color:var(--text-muted);">Health</div>

</div>

<div style="text-align:center;padding:12px;background:var(--base);border-radius:var(--radius-xs);box-shadow:var(--neu-shadow-sm);">

<div style="font-size:1.3rem;font-weight:600;color:var(--gold-dark);font-family:var(--font-display);">2/4</div>

<div style="font-size:0.72rem;color:var(--text-muted);">Packing</div>

</div>

<div style="text-align:center;padding:12px;background:var(--base);border-radius:var(--radius-xs);box-shadow:var(--neu-shadow-sm);">

<div style="font-size:1.3rem;font-weight:600;color:#E07020;font-family:var(--font-display);">2/4</div>

<div style="font-size:0.72rem;color:var(--text-muted);">Spiritual</div>

</div>

</div>

</div>

<div class="neu-card">

<div class="prep-section-title">Preparation Checklist</div>

<div class="checklist-category-title">📄 Documents</div>

<div class="checklist">

<div class="check-item done" onclick="toggleCheck(this)"><div class="check-box"></div><span class="check-text">Valid passport (6+ months)</span></div>

<div class="check-item done" onclick="toggleCheck(this)"><div class="check-box"></div><span class="check-text">Visa application submitted</span></div>

<div class="check-item done" onclick="toggleCheck(this)"><div class="check-box"></div><span class="check-text">IC / MyKad copy</span></div>

</div>

<div class="checklist-category-title">💉 Health</div>

<div class="checklist">

<div class="check-item done" onclick="toggleCheck(this)"><div class="check-box"></div><span class="check-text">Meningitis vaccination (ACWY)</span></div>

<div class="check-item" onclick="toggleCheck(this)"><div class="check-box"></div><span class="check-text">COVID-19 documentation</span></div>

<div class="check-item" onclick="toggleCheck(this)"><div class="check-box"></div><span class="check-text">Prescription medication supply</span></div>

</div>

<div class="checklist-category-title">🧳 Packing</div>

<div class="checklist">

<div class="check-item done" onclick="toggleCheck(this)"><div class="check-box"></div><span class="check-text">Ihram garments (2 sets)</span></div>

<div class="check-item" onclick="toggleCheck(this)"><div class="check-box"></div><span class="check-text">Prayer mat & Quran</span></div>

</div>

</div>

<div class="neu-card prep-full">

<div class="prep-section-title">Daily Dua & Spiritual Prep</div>

<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;">

<div class="neu-card-sm dua-card">

<div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--gold-dark);margin-bottom:10px;font-weight:500;">Dua for Travel</div>

<div class="dua-arabic">اللَّهُمَّ إِنِّي أَسْأَلُكَ فِي سَفَرِي هَذَا الْبِرَّ وَالتَّقْوَى</div>

<div class="dua-transliteration">Allahumma inni as'aluka fi safari hadha al-birra wat-taqwa...</div>

<div class="dua-meaning">O Allah, I ask you in this journey for righteousness and piety.</div>

</div>

<div class="neu-card-sm dua-card">

<div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--gold-dark);margin-bottom:10px;font-weight:500;">Talbiyah</div>

<div class="dua-arabic">لَبَّيْكَ اللَّهُمَّ لَبَّيْكَ، لَبَّيْكَ لَا شَرِيكَ لَكَ لَبَّيْكَ</div>

<div class="dua-transliteration">Labbayk Allahumma labbayk, Labbayk la shareeka laka labbayk...</div>

<div class="dua-meaning">Here I am O Allah, here I am. Here I am, You have no partner, here I am.</div>

</div>

<div class="neu-card-sm dua-card">

<div style="font-size:0.72rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--gold-dark);margin-bottom:10px;font-weight:500;">Dua upon seeing Kaaba</div>

<div class="dua-arabic">اللَّهُمَّ أَنْتَ السَّلَامُ وَمِنْكَ السَّلَامُ</div>

<div class="dua-transliteration">Allahumma anta as-salamu wa minka as-salam...</div>

<div class="dua-meaning">O Allah, You are Peace and from You comes peace.</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="page" id="page-review">

<div class="review-body">

<button class="btn-ghost" onclick="showPage('dashboard')" style="margin-bottom:16px;">← Dashboard</button>

<div class="gold-badge" style="margin-bottom:16px;">✦ Share Your Experience</div>

<h2 style="font-family:var(--font-display);font-size:1.8rem;font-weight:400;margin-bottom:6px;">Write a Review</h2>

<p style="color:var(--text-secondary);font-size:0.9rem;margin-bottom:32px;">Help future pilgrims make the right choice with your honest experience.</p>

<div class="neu-card-sm" style="display:flex;gap:14px;margin-bottom:28px;align-items:center;">

<div style="width:50px;height:50px;border-radius:var(--radius-xs);background:linear-gradient(135deg,var(--base-deeper),var(--base-dark));display:flex;align-items:center;justify-content:center;font-family:var(--font-arabic);font-size:1.5rem;color:rgba(200,169,107,0.4);">الكعبة</div>

<div>

<div style="font-family:var(--font-display);font-size:1.1rem;font-weight:500;">Premium Umrah — 14 Nights</div>

<div style="font-size:0.8rem;color:var(--text-secondary);">Al-Barakah Travel · June 2025</div>

</div>

</div>

<div class="neu-card" style="margin-bottom:20px;padding:28px;">

<div style="font-weight:500;margin-bottom:8px;">Overall Rating</div>

<div class="star-selector" id="overall-stars">

<span class="star-btn selected" onclick="setStars(1)">★</span>

<span class="star-btn selected" onclick="setStars(2)">★</span>

<span class="star-btn selected" onclick="setStars(3)">★</span>

<span class="star-btn selected" onclick="setStars(4)">★</span>

<span class="star-btn selected" onclick="setStars(5)">★</span>

</div>

<div class="divider"></div>

<div class="review-category">

<div class="review-cat-title">Hotel Quality</div>

<div class="rating-slider-wrap">

<input type="range" class="range-input" min="1" max="5" value="5" oninput="this.nextElementSibling.textContent=this.value" style="flex:1;">

<span class="rating-val">5</span>

</div>

</div>

<div class="review-category">

<div class="review-cat-title">Transport</div>

<div class="rating-slider-wrap">

<input type="range" class="range-input" min="1" max="5" value="4" oninput="this.nextElementSibling.textContent=this.value" style="flex:1;">

<span class="rating-val">4</span>

</div>

</div>

<div class="review-category">

<div class="review-cat-title">Mutawwif / Guide Quality</div>

<div class="rating-slider-wrap">

<input type="range" class="range-input" min="1" max="5" value="5" oninput="this.nextElementSibling.textContent=this.value" style="flex:1;">

<span class="rating-val">5</span>

</div>

</div>

<div class="review-category">

<div class="review-cat-title">Value for Money</div>

<div class="rating-slider-wrap">

<input type="range" class="range-input" min="1" max="5" value="4" oninput="this.nextElementSibling.textContent=this.value" style="flex:1;">

<span class="rating-val">4</span>

</div>

</div>

</div>

<div class="neu-card" style="margin-bottom:20px;padding:28px;">

<div class="form-group" style="margin-bottom:16px;">

<label>Your Review Title</label>

<input class="neu-input" placeholder="Sum up your experience in one line..." value="Alhamdulillah — a journey that changed my heart">

</div>

<div class="form-group">

<label>Your Full Review</label>

<textarea class="neu-input" style="height:120px;resize:vertical;line-height:1.6;" placeholder="Share details about the hotel, guides, transport, spiritual atmosphere...">This was truly a blessed and well-organized journey. The hotel was exactly as described — beautifully close to the Haram. Our Mutawwif, Ustaz Rahman, was incredibly knowledgeable and patient. The meals were excellent and halal. I would absolutely recommend Al-Barakah Travel to any pilgrim.</textarea>

</div>

</div>

<div style="display:flex;gap:12px;flex-wrap:wrap;">

<button class="btn-primary" onclick="submitReview()">Submit Review ✦</button>

<button class="btn-secondary" onclick="showPage('dashboard')">Cancel</button>

</div>

</div>

</div>

<div class="modal-overlay" id="login-modal">

<div class="modal-box">

<div class="modal-close" onclick="closeModal('login-modal')">×</div>

<div style="text-align:center;margin-bottom:24px;">

<div class="nav-logo" style="justify-content:center;margin-bottom:12px;"><div class="nav-logo-mark">إح</div><div class="nav-logo-text">IHRAM<span>HUB</span></div></div>

<p style="font-size:0.875rem;color:var(--text-secondary);">Welcome to your sacred journey platform</p>

</div>

<div class="auth-tabs">

<div class="auth-tab active" onclick="setAuthTab(this,'login')">Log In</div>

<div class="auth-tab" onclick="setAuthTab(this,'signup')">Sign Up</div>

</div>

<div class="auth-form active" id="auth-login">

<div class="auth-input-group"><label>Email Address</label><input class="neu-input" type="email" placeholder="ahmad@email.com"></div>

<div class="auth-input-group"><label>Password</label><input class="neu-input" type="password" placeholder="••••••••"></div>

<div style="text-align:right;margin-bottom:20px;"><span style="font-size:0.8rem;color:var(--gold-dark);cursor:pointer;">Forgot password?</span></div>

<button class="btn-primary" style="width:100%;justify-content:center;" onclick="logIn(); closeModal('login-modal'); showToast('🕋 Welcome back, Ahmad!')">Log In to IhramHub</button>

<div class="social-divider"><span>or continue with</span></div>

<div class="social-btns">

<button class="social-btn" onclick="logIn(); closeModal('login-modal'); showToast('🕋 Welcome back!')">🔵 Google</button>

<button class="social-btn" onclick="logIn(); closeModal('login-modal'); showToast('🕋 Welcome back!')">⬛ Apple</button>

</div>

</div>

<div class="auth-form" id="auth-signup">

<div class="form-row form-row-2" style="margin-bottom:0;">

<div class="auth-input-group"><label>First Name</label><input class="neu-input" placeholder="Ahmad"></div>

<div class="auth-input-group"><label>Last Name</label><input class="neu-input" placeholder="Hassan"></div>

</div>

<div class="auth-input-group"><label>Email Address</label><input class="neu-input" type="email" placeholder="ahmad@email.com"></div>

<div class="auth-input-group"><label>Password</label><input class="neu-input" type="password" placeholder="Minimum 8 characters"></div>

<button class="btn-primary" style="width:100%;justify-content:center;margin-top:4px;" onclick="logIn(); closeModal('login-modal'); showToast('🕋 Account created! Welcome to IhramHub.')">Create My Account</button>

<p style="font-size:0.75rem;color:var(--text-muted);text-align:center;margin-top:12px;line-height:1.5;">By signing up, you agree to our Terms of Service and Privacy Policy. Barakallah feekum.</p>

</div>

</div>

</div>

<div class="modal-overlay" id="confirm-modal">

<div class="modal-box confirm-modal-box">

<div class="modal-close" onclick="closeModal('confirm-modal')">×</div>

<div class="confirm-success-icon">✅</div>

<div style="font-family:var(--font-arabic);font-size:1.5rem;color:var(--gold);margin-bottom:6px;">بارك الله فيك</div>

<h3 style="font-family:var(--font-display);font-size:1.5rem;font-weight:500;margin-bottom:8px;">Booking Confirmed!</h3>

<p style="font-size:0.875rem;color:var(--text-secondary);line-height:1.7;margin-bottom:24px;">Your booking for <strong>Premium Umrah 14 Nights</strong> with Al-Barakah Travel has been confirmed on IhramHub. Your pilgrimage protection and tracking are now active.</p>

<div style="background:rgba(72,168,112,0.1);border:1px solid rgba(72,168,112,0.2);border-radius:var(--radius-sm);padding:16px;margin-bottom:24px;text-align:left;">

<div style="display:flex;flex-direction:column;gap:8px;">

<div style="display:flex;justify-content:space-between;font-size:0.85rem;"><span style="color:var(--text-muted);">Reference</span><span style="font-weight:500;">IH-2025-8821</span></div>

<div style="display:flex;justify-content:space-between;font-size:0.85rem;"><span style="color:var(--text-muted);">Status</span><span style="color:#48A870;font-weight:500;">✓ Confirmed</span></div>

<div style="display:flex;justify-content:space-between;font-size:0.85rem;"><span style="color:var(--text-muted);">Departure</span><span style="font-weight:500;">Jun 15, 2025</span></div>

</div>

</div>

<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;">

<button class="btn-primary" onclick="closeModal('confirm-modal'); showPage('prep')">Open Prep Dashboard →</button>

<button class="btn-secondary" onclick="closeModal('confirm-modal')">Done</button>

</div>

</div>

</div>

<div class="toast" id="toast">

<span class="toast-icon">✓</span>

<span id="toast-msg">Action completed</span>

</div>

<script>

// State

let isLoggedIn = false;

let compareList = [];

let currentWizardStep = 1;

// === LOADER ===

window.addEventListener('load', () => {

setTimeout(() => {

document.getElementById('loader').classList.add('hide');

setTimeout(() => document.getElementById('loader').remove(), 500);

}, 1800);

});

// === PAGE NAVIGATION ===

function showPage(pageId) {

document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));

const target = document.getElementById('page-' + pageId);

if (target) { target.classList.add('active'); window.scrollTo({top:0,behavior:'smooth'}); }

}

// === TOAST ===

function showToast(msg, duration=3200) {

const t = document.getElementById('toast');

document.getElementById('toast-msg').textContent = msg;

t.classList.add('show');

setTimeout(() => t.classList.remove('show'), duration);

}

// === MODAL ===

function openModal(id) { document.getElementById(id).classList.add('open'); }

function closeModal(id) { document.getElementById(id).classList.remove('open'); }

document.querySelectorAll('.modal-overlay').forEach(m => {

m.addEventListener('click', e => { if(e.target === m) m.classList.remove('open'); });

});

// === CONFIRM BOOKING MODAL ===

function openConfirmModal() {

openModal('confirm-modal');

showToast('✅ Booking confirmed with IhramHub!', 4000);

}

// === AUTH ===

function logIn() {

isLoggedIn = true;

document.getElementById('nav-login-btn').style.display = 'none';

document.getElementById('nav-signup-btn').style.display = 'none';

document.getElementById('nav-avatar').style.display = 'flex';

}

function logOut() {

isLoggedIn = false;

document.getElementById('nav-login-btn').style.display = '';

document.getElementById('nav-signup-btn').style.display = '';

document.getElementById('nav-avatar').style.display = 'none';

showPage('home');

showToast('👋 Signed out successfully');

}

// === AUTH TABS ===

function setAuthTab(el, tab) {

document.querySelectorAll('.auth-tab').forEach(t => t.classList.remove('active'));

document.querySelectorAll('.auth-form').forEach(f => f.classList.remove('active'));

el.classList.add('active');

document.getElementById('auth-' + tab).classList.add('active');

}

// === SEARCH TABS ===

function setTab(el, type) {

document.querySelectorAll('.search-tab').forEach(t => t.classList.remove('active'));

el.classList.add('active');

}

// === FAVOURITE ===

function toggleFav(el) {

if (el.classList.contains('saved')) {

el.classList.remove('saved');

el.textContent = '♡';

showToast('Removed from saved packages');

} else {

el.classList.add('saved');

el.textContent = '♥';

showToast('💛 Package saved to My IhramHub');

}

}

// === COMPARE ===

function addCompare(el, name) {

const bar = document.getElementById('compare-bar');

if (compareList.includes(name)) {

compareList = compareList.filter(n => n !== name);

showToast('Removed from comparison');

} else if (compareList.length < 3) {

compareList.push(name);

showToast('✦ Added to comparison · ' + compareList.length + '/3');

} else {

showToast('Maximum 3 packages in comparison');

return;

}

document.getElementById('compare-count').textContent = compareList.length;

compareList.forEach((n,i) => { const s = document.getElementById('cslot-'+i); if(s) s.textContent = n; });

for(let i = compareList.length; i < 3; i++) { const s = document.getElementById('cslot-'+i); if(s) s.textContent = 'Empty slot'; }

if (compareList.length > 0) bar.classList.add('visible'); else bar.classList.remove('visible');

}

function clearCompare() {

compareList = [];

document.getElementById('compare-count').textContent = 0;

for(let i=0;i<3;i++){const s=document.getElementById('cslot-'+i);if(s)s.textContent='Empty slot';}

document.getElementById('compare-bar').classList.remove('visible');

}

// === DETAIL TABS ===

function showDetailTab(el, tabId) {

document.querySelectorAll('.detail-tab').forEach(t => t.classList.remove('active'));

document.querySelectorAll('.detail-panel').forEach(p => p.classList.remove('active'));

el.classList.add('active');

const panel = document.getElementById(tabId);

if(panel) panel.classList.add('active');

}

// === DASHBOARD NAV ===

function showDashSection(el, sectionId) {

document.querySelectorAll('.dash-nav-item').forEach(i => i.classList.remove('active'));

document.querySelectorAll('.dash-section').forEach(s => s.classList.remove('active'));

if(el) el.classList.add('active');

const section = document.getElementById(sectionId);

if(section) section.classList.add('active');

}

// === WIZARD ===

function nextWizardStep(step) {

for(let i=1;i<=4;i++){

const panel = document.getElementById('wp-'+i);

const ws = document.getElementById('ws-'+i);

if(panel) panel.classList.remove('active');

if(ws){ ws.classList.remove('active','done');

if(i<step) ws.classList.add('done');

}

}

const activePanel = document.getElementById('wp-'+step);

const activeWs = document.getElementById('ws-'+step);

if(activePanel) activePanel.classList.add('active');

if(activeWs) activeWs.classList.add('active');

currentWizardStep = step;

window.scrollTo({top:0,behavior:'smooth'});

if(step===4) { logIn(); showToast('🕋 Booking request sent! Reference: IH-2025-8821'); }

}

// === ROOM SELECTION ===

function selectRoom(el) {

document.querySelectorAll('.room-option').forEach(r => r.classList.remove('selected'));

el.classList.add('selected');

}

// === CHECKLIST ===

function toggleCheck(el) {

el.classList.toggle('done');

if(el.classList.contains('done')) showToast('✓ Task completed!');

}

// === STARS ===

function setStars(n) {

document.querySelectorAll('#overall-stars .star-btn').forEach((s,i) => {

s.classList.toggle('selected', i < n);

});

}

// === REVIEW SUBMIT ===

function submitReview() {

showToast('⭐ Review submitted! JazakAllah khair for sharing your experience.');

setTimeout(() => showPage('dashboard'), 1200);

}

// === MESSAGE SEND ===

function sendMsg() {

const input = document.getElementById('msg-input-field');

const text = input.value.trim();

if(!text) return;

const chat = document.querySelector('.msg-chat-body');

const bubble = document.createElement('div');

bubble.className = 'msg-bubble sent';

bubble.innerHTML = `<div class="msg-bubble-text">${text}</div><div class="msg-bubble-time">Just now</div>`;

chat.appendChild(bubble);

input.value = '';

chat.scrollTop = chat.scrollHeight;

}

// === MOBILE MENU ===

function toggleMobile() {

const links = document.querySelector('.nav-links');

links.style.display = links.style.display === 'flex' ? 'none' : 'flex';

links.style.flexDirection = 'column';

links.style.position = 'absolute';

links.style.top = '70px';

links.style.left = '0';

links.style.right = '0';

links.style.background = 'rgba(240,237,232,0.97)';

links.style.padding = '20px';

links.style.boxShadow = '0 10px 30px rgba(180,168,148,0.3)';

links.style.backdropFilter = 'blur(20px)';

}

// === COUNTDOWN ===

function updateCountdown() {

const dep = new Date('2025-06-15T08:00:00');

const now = new Date();

const diff = dep - now;

if(diff > 0) {

const d = Math.floor(diff/86400000);

const h = Math.floor((diff%86400000)/3600000);

const m = Math.floor((diff%3600000)/60000);

const s = Math.floor((diff%60000)/1000);

['cd-days','cd-hours','cd-mins','cd-secs'].forEach((id, i) => {

const el = document.getElementById(id);

if(el) el.textContent = [d,h,m,s][i].toString().padStart(2,'0');

});

}

}

setInterval(updateCountdown, 1000);

updateCountdown();

// Quick filter chips

document.querySelectorAll('.qf-chip').forEach(chip => {

chip.addEventListener('click', function() {

this.classList.toggle('active');

});

});

// Quick start for demo — show home

showPage('home');

</script>

</body>

</html>