/* ===== RESET ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Poppins',sans-serif; background:#f8fafc; color:#1e293b; line-height:1.6; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }

/* ===== CONTAINER ===== */
.container { max-width:1280px; margin:0 auto; padding:0 1.5rem; }

/* ===== HEADER ===== */
.header { background:#0f172a; color:white; position:sticky; top:0; z-index:1000; box-shadow:0 2px 10px rgba(0,0,0,0.1); }
.header-top { background:#1e293b; padding:0.5rem 0; font-size:0.875rem; border-bottom:1px solid #334155; }
.header-top .container { display:flex; justify-content:space-between; align-items:center; }
.header-top a { color:#94a3b8; margin-right:1.5rem; font-size:0.8rem; }
.header-top a:hover { color:#f6ad55; }

.main-nav { padding:1rem 0; }
.main-nav .container { display:flex; justify-content:space-between; align-items:center; }

.logo { display:flex; align-items:center; gap:0.5rem; font-family:'Playfair Display',serif; font-size:1.75rem; font-weight:700; color:white; }
.logo i { color:#0ea5e9; font-size:1.5rem; }
.accent { color:#ed8936; }

.nav-menu { display:flex; list-style:none; gap:2rem; }
.nav-menu a { color:#94a3b8; font-weight:500; font-size:0.9rem; transition:color 0.3s; }
.nav-menu a:hover, .nav-menu a.active { color:white; }

.nav-actions { display:flex; gap:1rem; align-items:center; }
.btn-login { padding:0.5rem 1.25rem; border:2px solid white; color:white; border-radius:0.5rem; font-weight:600; font-size:0.875rem; }
.btn-app { padding:0.5rem 1.25rem; background:linear-gradient(135deg,#ed8936,#f6ad55); color:white; border-radius:0.5rem; font-weight:600; font-size:0.875rem; }

/* ===== MOBILE MENU ===== */
.mobile-toggle { display:none; font-size:1.5rem; color:white; background:none; border:none; cursor:pointer; }
.mobile-menu { display:none; position:fixed; top:0; right:-100%; width:80%; max-width:300px; height:100vh; background:#0f172a; z-index:1001; padding:2rem; transition:right 0.3s; }
.mobile-menu.active { right:0; display:block; }
.mobile-close { position:absolute; top:1rem; right:1rem; font-size:1.5rem; color:white; background:none; border:none; cursor:pointer; }
.mobile-menu ul { list-style:none; margin-top:3rem; }
.mobile-menu li { border-bottom:1px solid #334155; }
.mobile-menu a { display:block; padding:1rem 0; color:#94a3b8; font-weight:500; }
.mobile-menu a:hover { color:#f6ad55; }

/* ===== HERO ===== */
.hero { position:relative; height:500px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(26,54,93,0.9),rgba(14,165,233,0.8)); }
.hero-content { position:relative; z-index:1; text-align:center; color:white; max-width:800px; padding:0 1.5rem; }

.hero-badge { display:inline-flex; align-items:center; gap:0.5rem; background:rgba(255,255,255,0.15); padding:0.5rem 1.25rem; border-radius:2rem; font-size:0.875rem; margin-bottom:1.5rem; border:1px solid rgba(255,255,255,0.2); }
.hero-badge i { color:#f6ad55; }
.hero-title { font-family:'Playfair Display',serif; font-size:3.5rem; font-weight:700; margin-bottom:0.75rem; }
.hero-title .accent { color:#f6ad55; }
.hero-subtitle { font-size:1.25rem; opacity:0.9; margin-bottom:2rem; }
.hero-stats { display:flex; justify-content:center; gap:2rem; margin-top:2.5rem; }
.stat { background:rgba(255,255,255,0.1); padding:1.25rem 2rem; border-radius:0.75rem; text-align:center; min-width:160px; }
.stat-number { display:block; font-size:2rem; font-weight:700; color:#f6ad55; }
.stat-label { display:block; font-size:0.8rem; opacity:0.8; margin-top:0.5rem; }

/* ===== SEARCH ===== */
.search-section { padding:2rem 0; background:white; border-bottom:1px solid #e2e8f0; }
.search-bar { max-width:700px; margin:0 auto; display:flex; gap:0.75rem; background:#f8fafc; padding:0.75rem; border-radius:0.75rem; border:2px solid #e2e8f0; }
.search-bar i { color:#94a3b8; font-size:1.25rem; padding:0.5rem; }
.search-bar input { flex:1; border:none; outline:none; background:transparent; font-size:1rem; font-family:inherit; }
.btn-search { padding:0.75rem 2rem; background:linear-gradient(135deg,#1a365d,#0ea5e9); color:white; border-radius:0.5rem; font-weight:600; cursor:pointer; }

/* ===== MAIN CONTENT ===== */
.main-content { padding:3rem 0; }
.content-grid { display:grid; grid-template-columns:280px 1fr; gap:2.5rem; align-items:start; }

/* ===== SIDEBAR ===== */
.sidebar { position:sticky; top:100px; }
.filter-section { background:white; padding:1.5rem; border-radius:0.75rem; box-shadow:0 1px 3px rgba(0,0,0,0.1); border:1px solid #e2e8f0; }
.filter-section h3 { font-size:1.1rem; font-weight:600; color:#0f172a; margin-bottom:1.5rem; padding-bottom:0.75rem; border-bottom:2px solid #e2e8f0; display:flex; align-items:center; gap:0.5rem; }
.filter-section h3 i { color:#ed8936; }

.filter-group { margin-bottom:1.5rem; padding-bottom:1.5rem; border-bottom:1px solid #f1f5f9; }
.filter-group:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.filter-group label { display:block; font-weight:600; color:#334155; margin-bottom:0.75rem; font-size:0.9rem; }

.checkbox-label { display:flex; align-items:center; gap:0.75rem; cursor:pointer; padding:0.5rem; border-radius:0.375rem; margin-bottom:0.25rem; }
.checkbox-label:hover { background:#f8fafc; }
.checkbox-label input { width:18px; height:18px; accent-color:#1a365d; cursor:pointer; }
.checkbox-label span { font-size:0.9rem; color:#475569; }

.price-range input[type="range"] { width:100%; height:6px; -webkit-appearance:none; background:#e2e8f0; border-radius:3px; outline:none; margin:0.5rem 0; }
.price-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; background:linear-gradient(135deg,#1a365d,#0ea5e9); border-radius:50%; cursor:pointer; }
.price-min, .price-max { font-size:0.85rem; color:#64748b; font-weight:500; }

.star-filters { display:flex; flex-direction:column; gap:0.5rem; }
.star-label { display:flex; align-items:center; gap:0.75rem; cursor:pointer; padding:0.5rem; border-radius:0.375rem; }
.star-label:hover { background:#f8fafc; }
.star-label .stars { color:#fbbf24; font-size:0.85rem; }
.star-label span:last-child { font-size:0.85rem; color:#475569; margin-left:0.5rem; }

/* ===== RESULTS ===== */
.results-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:2px solid #e2e8f0; }
.results-header h2 { font-family:'Playfair Display',serif; font-size:1.75rem; color:#0f172a; }
.results-meta { display:flex; align-items:center; gap:1rem; }
.results-count { color:#64748b; font-size:0.9rem; }
.results-count span { color:#ed8936; font-weight:600; }
.view-toggle { display:flex; background:white; border-radius:0.375rem; overflow:hidden; border:1px solid #e2e8f0; }
.view-toggle button { padding:0.5rem 0.75rem; color:#94a3b8; cursor:pointer; }
.view-toggle button.active, .view-toggle button:hover { background:#1a365d; color:white; }
.sort-select { padding:0.5rem 1rem; border:1px solid #e2e8f0; border-radius:0.375rem; font-family:inherit; font-size:0.85rem; color:#475569; background:white; cursor:pointer; outline:none; }

/* ===== PACKAGES GRID ===== */
.packages-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.5rem; }

/* ===== PACKAGE CARD ===== */
.package-card { background:white; border-radius:0.75rem; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.1); transition:all 0.3s; border:1px solid #e2e8f0; }
.package-card:hover { transform:translateY(-6px); box-shadow:0 10px 25px rgba(0,0,0,0.15); }
.package-image { position:relative; height:220px; overflow:hidden; }
.package-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.package-card:hover .package-image img { transform:scale(1.1); }

.package-badges { position:absolute; top:1rem; left:1rem; display:flex; flex-direction:column; gap:0.5rem; z-index:2; }
.badge { display:inline-flex; align-items:center; gap:0.35rem; padding:0.4rem 0.875rem; border-radius:2rem; font-size:0.75rem; font-weight:600; text-transform:uppercase; }
.badge-bestseller { background:linear-gradient(135deg,#ed8936,#f6ad55); color:white; }
.badge-featured { background:linear-gradient(135deg,#1a365d,#0ea5e9); color:white; }
.badge-discount { background:#ef4444; color:white; }

.package-price-tag { position:absolute; top:1rem; right:1rem; background:rgba(255,255,255,0.95); padding:0.75rem 1rem; border-radius:0.5rem; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.1); z-index:2; }
.price-original { display:block; font-size:0.8rem; color:#94a3b8; text-decoration:line-through; margin-bottom:0.25rem; }
.price-current { display:block; font-size:1.25rem; font-weight:700; color:#1a365d; }
.price-currency { font-size:0.85rem; font-weight:500; }
.price-label { display:block; font-size:0.7rem; color:#64748b; margin-top:0.25rem; }

.package-content { padding:1.25rem; }
.package-rating { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem; }
.stars { color:#fbbf24; font-size:0.85rem; }
.rating-text { font-size:0.8rem; color:#64748b; }
.package-title { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:600; color:#0f172a; margin-bottom:0.75rem; line-height:1.4; }
.package-title:hover { color:#0ea5e9; }
.package-meta { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1rem; }
.meta-item { display:flex; align-items:center; gap:0.5rem; font-size:0.85rem; color:#475569; }
.meta-item i { color:#0ea5e9; width:16px; }
.package-includes { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem; }
.include-tag { display:inline-flex; align-items:center; gap:0.35rem; padding:0.35rem 0.75rem; background:#ecfdf5; color:#059669; border-radius:2rem; font-size:0.75rem; font-weight:500; }
.btn-view-details { display:flex; align-items:center; justify-content:center; gap:0.5rem; width:100%; padding:0.875rem; background:linear-gradient(135deg,#1a365d,#0ea5e9); color:white; border-radius:0.5rem; font-weight:600; font-size:0.9rem; cursor:pointer; border:none; }
.btn-view-details:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(26,54,93,0.3); }

/* ===== FOOTER ===== */
.footer { background:#0f172a; color:#94a3b8; padding:4rem 0 0; margin-top:4rem; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3rem; margin-bottom:3rem; }
.footer-brand { max-width:300px; }
.footer-logo { display:flex; align-items:center; gap:0.75rem; font-family:'Playfair Display',serif; font-size:1.75rem; font-weight:700; color:white; margin-bottom:1.25rem; }
.footer-logo i { color:#0ea5e9; font-size:1.5rem; }
.footer-logo .accent { color:#ed8936; }
.footer-brand p { font-size:0.9rem; line-height:1.7; margin-bottom:1.5rem; color:#64748b; }
.social-links { display:flex; gap:0.75rem; }
.social-links a { width:40px; height:40px; background:rgba(255,255,255,0.1); border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; }
.social-links a:hover { background:#ed8936; }
.footer-links h4 { color:white; font-size:1.1rem; font-weight:600; margin-bottom:1.25rem; }
.footer-links ul { list-style:none; }
.footer-links li { margin-bottom:0.75rem; }
.footer-links a { color:#64748b; font-size:0.9rem; }
.footer-links a:hover { color:#f6ad55; }
.footer-contact h4 { color:white; font-size:1.1rem; font-weight:600; margin-bottom:1.25rem; }
.footer-contact ul { list-style:none; }
.footer-contact li { display:flex; align-items:flex-start; gap:0.75rem; margin-bottom:1rem; font-size:0.9rem; color:#64748b; }
.footer-contact i { color:#ed8936; margin-top:0.25rem; }
.footer-bottom { border-top:1px solid #1e293b; padding:1.5rem 0; display:flex; justify-content:space-between; align-items:center; }
.footer-bottom p { font-size:0.85rem; color:#475569; }
.footer-legal { display:flex; gap:1.5rem; }
.footer-legal a { font-size:0.85rem; color:#475569; }
.footer-legal a:hover { color:#f6ad55; }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
    .content-grid { grid-template-columns:1fr; }
    .sidebar { position:static; margin-bottom:2rem; }
    .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
    .header-top { display:none; }
    .nav-menu, .nav-actions { display:none; }
    .mobile-toggle { display:block; }
    .hero { height:400px; }
    .hero-title { font-size:2.25rem; }
    .hero-stats { flex-direction:column; gap:1rem; align-items:center; }
    .packages-grid { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr; gap:2rem; }
    .footer-bottom { flex-direction:column; text-align:center; gap:1rem; }
    .results-header { flex-direction:column; align-items:flex-start; gap:1rem; }
}

@media (max-width:480px) {
    .hero-title { font-size:1.75rem; }
    .search-bar { flex-direction:column; }
    .btn-search { width:100%; }
}