:root{
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --accent:#f97316;
  --accent2:#ec4899;
  --teal:#0d9488;
  --text-dark:#1f2937;
  --text-light:#6b7280;
  --border:#e5e7eb;
  --bg-soft:#f8fafc;
  --success:#16a34a;
  --danger:#dc2626;
  --radius:10px;
  --shadow:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 10px 40px rgba(0,0,0,.15);
  --gradient-brand:linear-gradient(90deg,#2563eb,#7c3aed,#ec4899);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{overflow-x:hidden;width:100%;}
body{
  font-family:'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--text-dark);
  background:#fff;
  line-height:1.5;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
  -webkit-text-size-adjust:100%;
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;height:auto;}
.container{max-width:1220px;margin:0 auto;padding:0 16px;width:100%;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 12px;border-radius:8px;border:none;cursor:pointer;font-weight:600;font-size:15px;transition:.2s;}
.btn-primary{background:var(--gradient-brand);background-size:160% 100%;color:#fff;transition:.35s;}
.btn-primary:hover{background-position:100% 0;box-shadow:0 6px 18px rgba(124,58,237,.35);}
.btn-outline{background:#fff;border:1.5px solid var(--primary);color:var(--primary);}
.btn-block{width:100%;}
.section{padding:40px 0;}
.section-title{font-size:24px;font-weight:700;margin-bottom:6px;}
.section-sub{color:var(--text-light);margin-bottom:24px;font-size:14px;}

/* ===== TOPBAR / NAVBAR ===== */
.topbar{background:linear-gradient(90deg,#0f172a,#1e1b4b);color:#cbd5e1;font-size:12px;padding:6px 0;}
.topbar .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px;}
.navbar{background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.06);position:sticky;top:0;z-index:100;width:100%;}
.navbar .container{display:flex;align-items:center;justify-content:space-between;height:60px;gap:10px;}
.logo{font-size:22px;font-weight:800;color:var(--primary);display:flex;align-items:center;gap:6px;flex-shrink:0;white-space:nowrap;}
.logo span{color:var(--accent);}
.nav-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.nav-actions a{font-weight:600;font-size:13px;padding:7px 12px;border-radius:6px;white-space:nowrap;}
.nav-actions .signup{background:var(--primary);color:#fff;}
.nav-actions .profile-chip{display:flex;align-items:center;gap:6px;background:var(--bg-soft);padding:5px 10px;border-radius:30px;font-size:13px;max-width:140px;overflow:hidden;text-overflow:ellipsis;}

/* ===== HERO + SEARCH WIDGET ===== */
.hero{position:relative;padding:30px 0 80px;overflow:hidden;min-height:480px;display:flex;align-items:center;width:100%;}
.hero-slider{position:absolute;inset:0;z-index:0;}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease-in-out;}
.hero-slide.active{opacity:1;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.55),rgba(37,20,70,.55) 50%,rgba(15,23,42,.75));}
.hero-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3;}
.hero-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:.2s;}
.hero-dot.active{background:#fff;width:22px;border-radius:5px;}
.search-widget{max-width:1180px;margin:0 auto;background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;width:100%;}
.service-tabs{display:flex;flex-wrap:nowrap;padding:14px 12px 0;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.service-tabs::-webkit-scrollbar{display:none;}
.service-tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;border-radius:8px;cursor:pointer;color:var(--text-light);font-size:12px;font-weight:600;text-align:center;position:relative;min-width:70px;flex-shrink:0;}
.service-tab i,.service-tab svg{font-size:20px;width:20px;height:20px;}
.service-tab.active{color:var(--primary);}
.service-tab.active::after{content:'';position:absolute;bottom:-14px;left:10%;width:80%;height:3px;background:var(--gradient-brand);border-radius:2px;}
.service-tab .badge-new{position:absolute;top:-6px;right:2px;background:var(--accent);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:10px;}
.tab-divider{border-bottom:1px solid var(--border);margin-top:12px;}
.search-form{padding:18px 16px 22px;}
.trip-type{display:flex;gap:18px;margin-bottom:14px;font-size:13px;font-weight:600;color:var(--text-light);flex-wrap:wrap;}
.trip-type label{display:flex;align-items:center;gap:6px;cursor:pointer;}
.search-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--border);border-radius:10px;overflow:visible;}
.field{padding:12px 14px;border-right:1px solid var(--border);position:relative;min-width:0;}
.field:last-child{border-right:none;}
.field label{display:block;font-size:11px;color:var(--text-light);margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;}
.field .value{font-size:15px;font-weight:700;color:var(--text-dark);}
.field .sub{font-size:12px;color:var(--text-light);}
.field input,.field select{border:none;width:100%;font-size:14px;font-weight:600;outline:none;background:transparent;max-width:100%;}
.swap-btn{position:absolute;right:-17px;top:50%;transform:translateY(-50%);background:#fff;border:1px solid var(--border);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;box-shadow:0 2px 6px rgba(0,0,0,.1);font-size:12px;}
.fare-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.fare-chip{border:1.5px solid var(--border);border-radius:8px;padding:8px 12px;font-size:12px;cursor:pointer;min-width:0;flex:1 1 120px;}
.fare-chip.active{border-color:var(--primary);background:#eff6ff;}
.fare-chip strong{display:block;font-size:13px;margin-bottom:2px;}
.fare-chip .tag{background:#fee2e2;color:var(--danger);font-size:10px;padding:1px 6px;border-radius:8px;margin-left:4px;}
.search-submit{text-align:center;margin-top:20px;}
.search-submit .btn{padding:14px 40px;font-size:16px;border-radius:30px;width:100%;max-width:320px;}

/* ===== CARDS / GRIDS ===== */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.dest-card{position:relative;border-radius:var(--radius);overflow:hidden;height:200px;cursor:pointer;box-shadow:var(--shadow);}
.dest-card img{width:100%;height:100%;object-fit:cover;transition:.3s;}
.dest-card:hover img{transform:scale(1.08);}
.dest-card .overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.75));padding:14px;color:#fff;}
.dest-card .overlay h4{font-size:16px;font-weight:700;}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.2s;}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.card-img{height:170px;overflow:hidden;position:relative;}
.card-img img{width:100%;height:100%;object-fit:cover;}
.wishlist-btn{position:absolute;top:10px;right:10px;background:#fff;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.15);}
.card-body{padding:14px;}
.card-body h4{font-size:15px;font-weight:700;margin-bottom:4px;}
.card-loc{font-size:12px;color:var(--text-light);display:flex;align-items:center;gap:5px;margin-bottom:8px;}
.rating-pill{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(90deg,var(--primary),#7c3aed);color:#fff;font-size:12px;font-weight:700;padding:3px 8px;border-radius:5px;}
.price-row{display:flex;align-items:baseline;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);flex-wrap:wrap;gap:6px;}
.price-old{text-decoration:line-through;color:var(--text-light);font-size:13px;margin-right:6px;}
.price-new{font-size:18px;font-weight:800;color:var(--text-dark);}
.price-tax{font-size:11px;color:var(--text-light);display:block;}
.discount-badge{background:linear-gradient(90deg,#dcfce7,#bbf7d0);color:#15803d;font-size:12px;font-weight:700;padding:2px 8px;border-radius:6px;}

/* ===== WHY CHOOSE US ===== */
.why-item{text-align:center;padding:16px;}
.why-item .icon-circle{width:56px;height:56px;border-radius:50%;background:#eff6ff;color:var(--primary);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:22px;}
.why-item:nth-child(2) .icon-circle{background:#fdf2f8;color:var(--accent2);}
.why-item:nth-child(3) .icon-circle{background:#fff7ed;color:var(--accent);}
.why-item:nth-child(4) .icon-circle{background:#f0fdfa;color:var(--teal);}
.why-item h4{font-size:15px;margin-bottom:4px;}
.why-item p{font-size:13px;}

/* ===== GALLERY ===== */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:20px;}
.gallery-item{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--border);height:120px;}
.gallery-item img{width:100%;height:100%;object-fit:cover;}
.gallery-item .del-btn{position:absolute;top:6px;right:6px;background:rgba(220,38,38,.9);color:#fff;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;}

/* ===== FOOTER ===== */
footer{background:#0f172a;color:#cbd5e1;padding-top:40px;width:100%;}
footer h5{color:#fff;margin-bottom:14px;font-size:14px;}
footer li{margin-bottom:8px;font-size:13px;}
footer a:hover{color:#fff;}
.footer-bottom{border-top:1px solid #1e293b;margin-top:24px;padding:16px 0;text-align:center;font-size:12px;color:#94a3b8;}
.social-icons{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.social-icons a{width:34px;height:34px;background:#1e293b;border-radius:50%;display:flex;align-items:center;justify-content:center;}

/* ===== FILTERS / RESULTS ===== */
.results-layout{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start;}
.filter-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:14px;}
.filter-box h5{font-size:13px;margin-bottom:10px;}
.filter-box label{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px;color:var(--text-light);}
.result-card{display:grid;grid-template-columns:240px 1fr 180px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:16px;box-shadow:var(--shadow);}
.result-card .r-img{height:100%;min-height:160px;position:relative;}
.result-card .r-img img{width:100%;height:100%;object-fit:cover;}
.result-card .r-body{padding:16px;border-right:1px solid var(--border);min-width:0;}
.result-card .r-side{padding:16px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:8px;text-align:right;}
.amenity-tag{display:inline-block;background:var(--bg-soft);font-size:11px;padding:3px 8px;border-radius:5px;margin:3px 4px 0 0;color:var(--text-light);}
.sort-bar{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:16px;flex-wrap:wrap;gap:10px;}

/* ===== FORMS / AUTH ===== */
.auth-wrap{max-width:420px;margin:40px auto;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px 20px;box-shadow:var(--shadow);width:calc(100% - 32px);}
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;}
.form-control{width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;outline:none;transition:.2s;}
.form-control:focus{border-color:var(--primary);}

/* ===== TOASTS / MODALS ===== */
.toast-container{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:calc(100vw - 32px);}
.toast{background:#fff;border-left:4px solid var(--success);box-shadow:var(--shadow-lg);border-radius:8px;padding:12px 16px;min-width:200px;font-size:13px;animation:slideIn .25s ease;}
.toast.error{border-left-color:var(--danger);}
@keyframes slideIn{from{transform:translateX(30px);opacity:0;}to{transform:translateX(0);opacity:1;}}
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.6);display:none;align-items:center;justify-content:center;z-index:1000;padding:16px;}
.modal-overlay.active{display:flex;}
.modal-box{background:#fff;border-radius:12px;max-width:400px;width:100%;padding:24px;text-align:center;}
.modal-box .icon-lg{font-size:40px;margin-bottom:10px;}

/* ===== ADMIN ===== */
.admin-body{background:#f1f5f9;}
.admin-wrap{display:flex;min-height:100vh;}
.admin-sidebar{width:240px;background:#0f172a;color:#cbd5e1;flex-shrink:0;}
.admin-sidebar .brand{padding:18px;font-size:18px;font-weight:800;color:#fff;border-bottom:1px solid #1e293b;}
.admin-sidebar ul{padding:12px 0;}
.admin-sidebar a{display:flex;align-items:center;gap:10px;padding:11px 18px;font-size:13px;}
.admin-sidebar a:hover,.admin-sidebar a.active{background:#1e293b;color:#fff;border-left:3px solid var(--primary);}
.admin-main{flex:1;min-width:0;overflow-x:hidden;}
.admin-topbar{background:#fff;height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;box-shadow:0 1px 6px rgba(0,0,0,.05);}
.admin-content{padding:16px;}
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.stat-card{background:#fff;border-radius:12px;padding:16px;box-shadow:var(--shadow);}
.stat-card .num{font-size:22px;font-weight:800;}
.stat-card .label{font-size:12px;color:var(--text-light);}
.admin-table-wrap{background:#fff;border-radius:12px;box-shadow:var(--shadow);overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.admin-table{width:100%;border-collapse:collapse;font-size:13px;min-width:500px;}
table.admin-table th{background:var(--bg-soft);text-align:left;padding:10px 12px;font-weight:700;}
table.admin-table td{padding:10px 12px;border-top:1px solid var(--border);}
.status-pill{padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;}
.status-pill.active{background:#dcfce7;color:var(--success);}
.status-pill.inactive{background:#fee2e2;color:var(--danger);}
.action-icons a{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:6px;background:var(--bg-soft);margin-right:4px;}

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
@media(max-width:992px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .search-fields{grid-template-columns:repeat(2,1fr);}
  .field{border-right:none;border-bottom:1px solid var(--border);}
  .field:nth-child(odd){border-right:1px solid var(--border);}
  .field:nth-last-child(-n+2){border-bottom:none;}
  .swap-btn{display:none;}
  .result-card{grid-template-columns:1fr;}
  .result-card .r-body{border-right:none;border-bottom:1px solid var(--border);}
  .result-card .r-side{align-items:stretch;text-align:left;}
  .results-layout{grid-template-columns:1fr;}
  .stat-cards{grid-template-columns:repeat(2,1fr);}
  .hero{min-height:auto;padding:24px 0 60px;}
  .hero h1{font-size:26px !important;}
  .section{padding:32px 0;}
}

/* ============================================================
   RESPONSIVE — MOBILE (app-like)
   ============================================================ */
@media(max-width:640px){
  html,body{overflow-x:hidden;max-width:100vw;}
  .container{padding:0 12px;}

  /* Navbar — compact app style */
  .topbar{font-size:11px;padding:5px 0;}
  .topbar .container{justify-content:center;text-align:center;}
  .navbar .container{height:54px;}
  .logo{font-size:18px;}
  .nav-actions{gap:4px;}
  .nav-actions a{font-size:12px;padding:6px 8px;}
  .nav-actions .profile-chip{padding:4px 8px;font-size:11px;max-width:100px;}
  .nav-actions .signup{padding:6px 10px;}

  /* Hero */
  .hero{padding:20px 0 50px;min-height:auto;}
  .hero h1{font-size:22px !important;line-height:1.3;}
  .hero p{font-size:13px !important;}

  /* Search widget — full width, stacked fields */
  .search-widget{border-radius:12px;margin:0;}
  .service-tabs{padding:10px 8px 0;gap:2px;}
  .service-tab{min-width:60px;padding:6px 8px;font-size:11px;}
  .service-tab i{font-size:18px;}
  .service-tab.active::after{bottom:-10px;}
  .tab-divider{margin-top:10px;}
  .search-form{padding:14px 12px 18px;}
  .search-fields{
    grid-template-columns:1fr;
    border-radius:10px;
  }
  .field{
    border-right:none !important;
    border-bottom:1px solid var(--border);
    padding:12px 14px;
  }
  .field:last-child{border-bottom:none;}
  .field label{font-size:10px;}
  .field input,.field select{font-size:15px;}
  .swap-btn{display:none !important;}
  .fare-options{gap:6px;}
  .fare-chip{flex:1 1 calc(50% - 6px);min-width:0;padding:8px 10px;font-size:11px;}
  .search-submit .btn{padding:13px 20px;font-size:15px;max-width:100%;border-radius:12px;}

  /* Grids — single column app style */
  .grid-4,.grid-3{grid-template-columns:1fr;gap:14px;}
  .dest-card{height:180px;border-radius:12px;}
  .card{border-radius:12px;}
  .card-img{height:160px;}
  .price-new{font-size:17px;}
  .section-title{font-size:20px;}
  .section-sub{font-size:13px;margin-bottom:18px;}
  .section{padding:28px 0;}

  /* Why choose us — 2 col */
  .why-item{padding:12px 8px;}
  .why-item .icon-circle{width:48px;height:48px;font-size:20px;}

  /* Results */
  .result-card{grid-template-columns:1fr;border-radius:12px;}
  .result-card .r-img{min-height:180px;max-height:200px;}
  .result-card .r-body{padding:14px;}
  .result-card .r-side{padding:14px;align-items:stretch;}
  .sort-bar{flex-direction:column;align-items:stretch;gap:8px;padding:12px;}

  /* Auth */
  .auth-wrap{margin:24px auto;padding:24px 16px;border-radius:12px;}

  /* Footer */
  footer{padding-top:32px;}
  footer .container > div{grid-template-columns:1fr 1fr !important;gap:20px;}

  /* Admin mobile */
  .admin-sidebar{position:fixed;left:-260px;top:0;bottom:0;z-index:200;transition:.25s;width:240px;}
  .admin-sidebar.open{left:0;}
  .stat-cards{grid-template-columns:1fr 1fr;gap:10px;}
  .stat-card .num{font-size:18px;}
  .admin-content{padding:12px;}
  .admin-table-wrap{border-radius:8px;}

  /* Newsletter form */
  .section form{flex-direction:column !important;}
  .section form .btn{width:100%;}
}

/* Extra small phones */
@media(max-width:380px){
  .logo{font-size:16px;}
  .nav-actions a{padding:5px 6px;font-size:11px;}
  .service-tab{min-width:54px;font-size:10px;padding:5px 6px;}
  .hero h1{font-size:20px !important;}
  .fare-chip{flex:1 1 100%;}
}