/* ─── Page Header (Inner Pages) ──────────────────────────────── */
.page-header { background:var(--gradient-hero); padding:160px 0 80px; text-align:center; position:relative; overflow:hidden; }
.page-header::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:80px; background:var(--bg-body); clip-path:ellipse(55% 100% at 50% 100%); }
.page-header h1 { font-size:48px; font-weight:800; color:var(--text-inverse); margin-bottom:12px; }
.page-header .breadcrumb { display:flex; align-items:center; justify-content:center; gap:12px; font-size:15px; color:rgba(255,255,255,0.7); }
.page-header .breadcrumb a { color:rgba(255,255,255,0.8); }
.page-header .breadcrumb a:hover { color:#fff; }

/* ─── Tour Detail ────────────────────────────────────────────── */
.tour-detail-hero { position:relative; height:500px; overflow:hidden; }
.tour-detail-hero img { width:100%; height:100%; object-fit:cover; }
.tour-detail-hero .overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,transparent 60%); }
.tour-detail-content { padding:60px 0; }
.tour-detail-grid { display:grid; grid-template-columns:1fr 380px; gap:40px; }
.tour-main h2 { font-size:28px; margin-bottom:16px; }
.tour-main p { color:var(--text-secondary); line-height:1.8; margin-bottom:20px; }
.tour-highlights { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:30px 0; }
.tour-highlight-item { display:flex; align-items:center; gap:12px; padding:16px; background:var(--bg-surface-2); border-radius:var(--radius-md); }
.tour-highlight-item i { font-size:20px; color:var(--primary-500); }
.tour-booking-card { background:var(--bg-surface); border-radius:var(--radius-xl); padding:32px; box-shadow:var(--shadow-lg); border:1px solid var(--border-color); position:sticky; top:100px; }
.tour-booking-card .price-display { text-align:center; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid var(--border-color); }
.tour-booking-card .price-display .amount { font-family:'Poppins',sans-serif; font-size:36px; font-weight:800; color:var(--primary-600); }
.tour-booking-card .price-display .per-person { font-size:14px; color:var(--text-tertiary); }

/* ─── Forms ──────────────────────────────────────────────────── */
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:14px; font-weight:600; color:var(--text-primary); margin-bottom:8px; }
.form-control { width:100%; padding:14px 18px; background:var(--bg-surface); border:2px solid var(--border-color); border-radius:var(--radius-md); font-size:15px; color:var(--text-primary); transition:all var(--transition-fast); outline:none; }
.form-control:focus { border-color:var(--primary-400); box-shadow:0 0 0 4px rgba(14,165,233,0.1); }
.form-control::placeholder { color:var(--text-tertiary); }
textarea.form-control { resize:vertical; min-height:120px; }
select.form-control { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }

/* ─── Contact Page ───────────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.contact-info-cards { display:grid; gap:20px; margin-bottom:32px; }
.contact-info-card { display:flex; align-items:center; gap:16px; padding:20px; background:var(--bg-surface); border-radius:var(--radius-md); border:1px solid var(--border-color); transition:all var(--transition-normal); }
.contact-info-card:hover { transform:translateX(8px); box-shadow:var(--shadow-md); }
.contact-info-card .icon { width:52px; height:52px; display:flex; align-items:center; justify-content:center; background:var(--primary-50); border-radius:var(--radius-md); font-size:20px; color:var(--primary-500); flex-shrink:0; }
.contact-info-card h4 { font-size:15px; margin-bottom:4px; }
.contact-info-card p { font-size:14px; color:var(--text-secondary); }
.contact-form-card { background:var(--bg-surface); border-radius:var(--radius-xl); padding:40px; box-shadow:var(--shadow-md); border:1px solid var(--border-color); }
.contact-form-card h3 { font-size:24px; margin-bottom:24px; }

/* ─── About Page ─────────────────────────────────────────────── */
.about-content-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-image { position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-xl); }
.about-image img { width:100%; height:450px; object-fit:cover; }
.about-image .experience-badge { position:absolute; bottom:24px; right:24px; background:var(--gradient-primary); color:var(--text-inverse); padding:20px 28px; border-radius:var(--radius-lg); text-align:center; }
.about-image .experience-badge .number { font-family:'Poppins',sans-serif; font-size:36px; font-weight:800; line-height:1; }
.about-image .experience-badge .label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.about-text h2 { font-size:36px; margin-bottom:20px; }
.about-text p { color:var(--text-secondary); line-height:1.8; margin-bottom:16px; }
.timeline { position:relative; padding-left:40px; margin-top:40px; }
.timeline::before { content:''; position:absolute; top:0; left:15px; bottom:0; width:2px; background:var(--border-color); }
.timeline-item { position:relative; margin-bottom:32px; }
.timeline-item::before { content:''; position:absolute; left:-33px; top:6px; width:14px; height:14px; background:var(--gradient-primary); border-radius:50%; border:3px solid var(--bg-body); }
.timeline-item h4 { font-size:16px; margin-bottom:6px; }
.timeline-item .year { font-size:12px; color:var(--primary-500); font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.timeline-item p { font-size:14px; color:var(--text-secondary); line-height:1.6; }

/* ─── Booking Page ───────────────────────────────────────────── */
.booking-container { max-width:700px; margin:0 auto; }
.booking-form-card { background:var(--bg-surface); border-radius:var(--radius-xl); padding:48px; box-shadow:var(--shadow-lg); border:1px solid var(--border-color); }
.booking-form-card h2 { font-size:28px; margin-bottom:8px; }
.booking-form-card .subtitle { color:var(--text-secondary); margin-bottom:32px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* ─── Alerts ─────────────────────────────────────────────────── */
.alert { padding:16px 20px; border-radius:var(--radius-md); font-size:14px; font-weight:500; margin-bottom:20px; display:flex; align-items:center; gap:12px; }
.alert-success { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.alert-error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.alert-info { background:var(--primary-50); color:var(--primary-700); border:1px solid var(--primary-200); }

/* ─── Pagination ─────────────────────────────────────────────── */
.pagination { display:flex; justify-content:center; gap:8px; margin-top:48px; }
.pagination a, .pagination span { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:var(--radius-sm); font-size:14px; font-weight:500; border:1px solid var(--border-color); color:var(--text-secondary); transition:all var(--transition-fast); }
.pagination a:hover { background:var(--primary-50); border-color:var(--primary-300); color:var(--primary-600); }
.pagination span.active { background:var(--gradient-primary); color:var(--text-inverse); border-color:transparent; }

/* ─── Lightbox ───────────────────────────────────────────────── */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:10000; display:none; align-items:center; justify-content:center; }
.lightbox.active { display:flex; }
.lightbox img { max-width:90%; max-height:90vh; border-radius:var(--radius-md); }
.lightbox-close { position:absolute; top:24px; right:24px; width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.1); color:#fff; border-radius:50%; font-size:24px; cursor:pointer; transition:all var(--transition-fast); }
.lightbox-close:hover { background:rgba(255,255,255,0.2); }

/* ─── Map ────────────────────────────────────────────────────── */
.map-section { padding:0; }
.map-section iframe { width:100%; height:400px; border:none; filter:grayscale(20%); }

/* ─── Loader ─────────────────────────────────────────────────── */
.loader { display:inline-block; width:20px; height:20px; border:2px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.6s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ─── Responsive ─────────────────────────────────────────────── */
@media(max-width:1024px){
    .section-title{font-size:34px} .hero-title{font-size:48px}
    .tours-grid{grid-template-columns:repeat(2,1fr)} .features-grid{grid-template-columns:repeat(2,1fr)}
    .gallery-grid{grid-template-columns:repeat(3,1fr)} .footer-grid{grid-template-columns:repeat(2,1fr)}
    .tour-detail-grid{grid-template-columns:1fr} .about-content-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
    :root{--section-padding:60px 0;--header-height:64px}
    .nav{position:fixed;top:0;right:-100%;width:80%;max-width:320px;height:100vh;background:var(--bg-surface);flex-direction:column;padding:100px 32px 32px;gap:4px;box-shadow:-10px 0 30px rgba(0,0,0,0.1);transition:right var(--transition-normal);z-index:1000;align-items:stretch}
    .nav.open{right:0} .nav a{padding:14px 20px;font-size:16px;border-radius:var(--radius-md)}
    .menu-toggle{display:flex}
    .section-title{font-size:28px} .section-subtitle{font-size:16px}
    .hero-title{font-size:36px} .hero-description{font-size:16px}
    .hero-stats{gap:24px} .hero-stat .stat-number{font-size:28px}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .tours-grid{grid-template-columns:1fr} .features-grid{grid-template-columns:1fr}
    .gallery-grid{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr}
    .contact-grid{grid-template-columns:1fr} .form-row{grid-template-columns:1fr}
    .booking-form-card{padding:28px} .page-header h1{font-size:32px}
    .tour-detail-hero{height:300px} .tour-highlights{grid-template-columns:1fr}
}