/**
 * ComeToHurghada Theme — style.css
 * A deep-navy themed dark-by-default travel agency CSS system
 * ---------------------------------------------------------------
 * COLOR PALETTE:
 *   Primary:  #0B3D5B (deep navy)
 *   Accent:   #1BC5D4 (bright cyan)
 *   Dark BG:  #0a0f1e / #0f172a
 *   Light BG: #ffffff / #E5F0F7
 *   Font:     Poppins
 * ---------------------------------------------------------------
 */
@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');

/* ======================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ====================================================== */
:root {
  /* Slider Variables */
  --dot-size: 23px;
  --line-color: #ffffff;
  --dot-color: #ffffff;
  --dot-color-active: #1BC5D4;
  --min-height: 100vh;
  --bg-speed: 1s;
  --text-speed: 0.6s;
  --slide-height: 175px;
  --slide-active-height: 200px;

  /* CTH Brand Colors */
  --cth-primary:      #0B3D5B;
  --cth-primary-rgb:  11, 61, 91;
  --cth-accent:       #1BC5D4;
  --cth-accent-dark:  #14A3B0;

  /* Bootstrap Override */
  --bs-primary:       #0B3D5B;
  --bs-primary-rgb:   11, 61, 91;
  --bs-link-color:    #0B3D5B;
  --bs-link-hover-color: #1BC5D4;

  /* Dark Theme Surfaces (default) */
  --bg-primary:    #0a0f1e;
  --bg-secondary:  #0f172a;
  --bg-tertiary:   #1a2540;
  --text-primary:  #e8edf8;
  --text-secondary: rgba(232, 237, 248, 0.65);
  --nav-bg:        rgba(10, 15, 30, 0.95);
  --card-bg:       rgba(255, 255, 255, 0.04);
  --card-border:   rgba(255, 255, 255, 0.08);
  --social-bg:     rgba(255, 255, 255, 0.1);
  --social-color:  #fff;
  --input-bg:      rgba(255, 255, 255, 0.06);
  --text-muted:    rgba(255, 255, 255, 0.4);

  /* Gradients - Dark */
  --bg-grad-1:      linear-gradient(180deg, #0a0f1e 0%, #0f172a 100%);
  --bg-grad-2:      linear-gradient(135deg, #0f172a 0%, #1a2540 100%);
  --bg-grad-accent: linear-gradient(135deg, rgba(11,61,91,0.08) 0%, rgba(27,197,212,0.08) 100%);
}

/* ---- Light Mode Overrides ---- */
body.light-mode {
  --bg-primary:    #ffffff;
  --bg-secondary:  #E5F0F7;
  --bg-tertiary:   #D0E3EF;
  --text-primary:  #0B3D5B;
  --text-secondary: #3A5F72;
  --nav-bg:        rgba(255, 255, 255, 0.98);
  --card-bg:       #ffffff;
  --card-border:   #B8D8E8;
  --dot-color:     #0B3D5B;
  --line-color:    #7AB8D0;
  --social-bg:     rgba(11, 61, 91, 0.07);
  --social-color:  var(--cth-primary);
  --input-bg:      #EDF4F9;
  --text-muted:    #5A7A8A;

  --bg-grad-1:      linear-gradient(180deg, #ffffff 0%, #E5F0F7 100%);
  --bg-grad-2:      linear-gradient(135deg, #E5F0F7 0%, #D0E3EF 100%);
  --bg-grad-accent: linear-gradient(135deg, rgba(11,61,91,0.04) 0%, rgba(27,197,212,0.04) 100%);
}

/* ======================================================
   2. RESET & BASE
   ====================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Cairo", 'Poppins', system-ui, Arial, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  transition: background 0.5s ease, color 0.5s ease;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
[class^="display-"] {
  color: var(--text-primary);
  transition: color 0.5s ease;
}

a { color: var(--cth-primary); }
a:hover { color: var(--cth-accent-dark); }

.text-secondary { color: var(--text-secondary) !important; }
.text-accent { color: var(--cth-accent) !important; }
.text-white-50  { color: var(--text-muted) !important; }

/* Background helpers */
.bg-alt     { background-color: var(--bg-secondary) !important; }
.bg-surface { background-color: var(--card-bg) !important; border: 1px solid var(--card-border); }
.bg-section { background-color: var(--bg-primary) !important; }
.bg-input   { background-color: var(--input-bg) !important; color: var(--text-primary) !important; border: 1px solid var(--card-border) !important; }
.bg-input:focus { background-color: var(--input-bg) !important; color: var(--text-primary) !important; border-color: var(--cth-primary) !important; }
.text-theme { color: var(--text-primary) !important; }

.form-label { color: var(--text-primary) !important; }

/* Bootstrap primary override */
.btn-primary {
  background-color: var(--cth-primary);
  border-color: var(--cth-primary);
  color: #fff;
}
.btn-primary:hover {
  background-color: #0A2E45;
  border-color: #0A2E45;
  color: #fff;
}
.btn-outline-primary {
  color: var(--cth-primary);
  border-color: var(--cth-primary);
}
.btn-outline-primary:hover {
  background-color: var(--cth-primary);
  color: #fff;
}
.text-primary { color: var(--cth-primary) !important; }
.border-primary { border-color: var(--cth-primary) !important; }

/* Custom Buttons from design */
.btn-orange {
  background-color: var(--cth-accent) !important;
  border-color: var(--cth-accent) !important;
  color: #fff !important;
}
.btn-orange:hover {
  background-color: var(--cth-accent-dark) !important;
  border-color: var(--cth-accent-dark) !important;
}

/* ======================================================
   3. SOCIAL SIDEBAR (Fixed Right)
   ====================================================== */
.cth-social-sidebar {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1100;
}

@media (max-width: 991px) { .cth-social-sidebar { display: none; } }

.social-icon {
  width: 42px;
  height: 42px;
  background: var(--social-bg);
  backdrop-filter: blur(5px);
  border: 1px solid var(--card-border);
  color: var(--social-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-size: 0.9rem;
}
.floating-social {
    position: fixed;
    bottom: -4px;
    left: 80px;
    z-index: 10;
}
.social-icon:hover {
  background: var(--cth-primary);
  color: #fff;
  transform: scale(1.15) translateX(-5px);
  box-shadow: 0 0 20px rgba(11, 61, 91, 0.4);
  border-color: transparent;
}
.social-icon.sm { width: 36px; height: 36px; font-size: 0.8rem; }

@media (max-width: 576px) {
  .cth-social-sidebar { right: 10px; }
  .social-icon { width: 34px; height: 34px; font-size: 0.75rem; }
}

/* ======================================================
   4. NAVIGATION
   ====================================================== */
.navbar {
  transition: all 0.4s ease-in-out;
  padding: 18px 6vw;
  z-index: 1050;
  background: transparent;
}

.navbar.navbar-scrolled {
  background: var(--nav-bg) !important;
  backdrop-filter: blur(12px);
  padding: 10px 6vw;
  border-bottom: 1px solid var(--card-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

body.light-mode .navbar.navbar-scrolled .nav-link { color: #1a0505 !important; }

/* Navbar Brand */
.navbar-brand { font-weight: 800; letter-spacing: 1px; }
.navbar-brand::after {
  content: '';
  position: absolute;
  width: 120%; height: 120%;
  background: rgba(255,255,255,0.8);
  top: -10%; left: -10%;
  z-index: 0;
  border-radius: 50px;
}
.navbar-brand img { width: auto; height: 48px; transition: all 0.4s ease; position: relative; z-index: 1; }
.navbar-scrolled .navbar-brand img { height: 38px; }
.navbar-brand:hover img { transform: scale(1.05); }

/* Nav Actions */
.nav-actions { display: flex; align-items: center; gap: 12px; }
@media (min-width: 992px) {
  .nav-actions { margin-left: 15px; padding-left: 18px; border-left: 1px solid var(--card-border); }
}

/* Language Dropdown */
.language-dropdown .btn { color: #fff; font-weight: 600; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; }
body.light-mode .navbar:not(.navbar-scrolled) .language-dropdown .btn { color: #1a0505; }
body.light-mode .navbar.navbar-scrolled  .language-dropdown .btn { color: var(--text-primary); }
.language-dropdown .dropdown-menu { min-width: 150px; z-index: 1100 !important; }
.language-dropdown .dropdown-item { color: rgba(255,255,255,.7) !important; display: flex !important; align-items: center; gap: 12px; font-size: 0.9rem; padding: 8px 20px; transition: all 0.3s ease; }
body.light-mode .language-dropdown .dropdown-item { color: #4a3030 !important; }
.language-dropdown .dropdown-item:hover { background: transparent !important; color: var(--cth-primary) !important; transform: translateX(5px); }

/* Dropdown Menu */
.dropdown-menu { display: none; border-radius: 10px; padding: 15px; margin-top: 0 !important; }
.dropdown-menu::before { content: ''; position: absolute; top: -20px; left: 0; right: 0; height: 20px; }
.dropdown-item { font-size: 0.9rem; padding: 8px 20px; transition: all 0.3s ease; color: var(--text-secondary) !important; }
.dropdown-item:hover { background: transparent; color: var(--cth-primary) !important; transform: translateX(5px); }

@media (min-width: 992px) {
  .dropdown-menu {
    display: block;
    background: var(--nav-bg) !important;
    backdrop-filter: blur(10px);
    border: 1px solid var(--card-border) !important;
    opacity: 0; visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    position: absolute;
  }
  .nav-item.dropdown:hover > .dropdown-menu,
  .dropdown.language-dropdown:hover > .dropdown-menu {
    opacity: 1; visibility: visible; transform: translateY(0); margin-top: 10px !important;
  }
}
.dropdown-menu.show { display: block; }

.nav-link { color: var(--text-primary) !important; font-weight: 600; font-size: 0.95rem; }
.nav-link:hover { color: var(--cth-accent) !important; }
.navbar-nav > .nav-item > .nav-link { display: flex !important; white-space: nowrap; margin: 0 5px; }
.dropdown-toggle::after { border-top: 0.3em solid var(--cth-accent); margin-left: 8px; vertical-align: middle; margin-top: 6px; }

.navbar-brand img { height: 60px; object-fit: contain; }
.btn-book-now { white-space: nowrap; font-size: 0.9rem; padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

/* Offcanvas */
.offcanvas { background-color: var(--nav-bg) !important; backdrop-filter: blur(10px); z-index: 1060; }
.offcanvas-body { display: flex; flex-direction: column; z-index: 3; }
.offcanvas .nav-link { color: var(--text-primary) !important; }
.offcanvas-title { color: var(--text-primary); font-size: 1.25rem; letter-spacing: 0.5px; }
.btn-close { filter: var(--close-filter); }
:root  { --close-filter: invert(1); }
body.light-mode { --close-filter: invert(0); }
.offcanvas .dropdown-menu { position: static !important; float: none !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 0 0 1.5rem !important; margin: 0 !important; transform: none !important; width: 100% !important; }
.offcanvas-nav .dropdown-item { padding: 10px 0 !important; font-size: 1rem; }
.offcanvas-social { display: flex; gap: 12px; padding: 20px 0; margin-top: auto; }

/* Theme Toggle Button */
.theme-toggle { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--card-border); background: var(--social-bg); color: var(--cth-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; overflow: hidden; position: relative; }
.theme-toggle:hover { background: var(--cth-primary); color: #fff; }
.theme-toggle i { transition: transform 0.5s ease; }
.light-mode .theme-toggle .fa-sun { transform: translateY(40px); }
.light-mode .theme-toggle .fa-moon { transform: translateY(0); }
.theme-toggle .fa-moon { transform: translateY(-40px); position: absolute; }

/* ======================================================
   5. HERO SECTION
   ====================================================== */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 100px;
}
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg, 
    rgba(11, 61, 91, 0.75) 0%,    /* Deep navy from logo */
    rgba(23, 116, 128, 0.55) 100%  /* Teal from logo waves */
  );
  z-index: 1;
  opacity: 0.6;
}
.hero-section .hero-title {
  font-size: 3.5rem;
  letter-spacing: -1px;
  line-height: 1.1;
  color: #fff !important;
}
.hero-section .hero-subtitle {
  font-size: 1.3rem;
  /*color: #c7c7c7 !important;*/
}

@media (max-width: 992px) {
  .hero-section .hero-title { font-size: 2.8rem; }
}

/* ======================================================
   6. ABOUT SECTION
   ====================================================== */
.about-section { background: var(--bg-primary); transition: background 0.5s; }

.image-stack { position: relative; }
.stack-img-top { width: 80%; border-radius: 16px; position: relative; z-index: 2; }
.stack-img-bottom { position: absolute; bottom: -30px; right: -20px; width: 60%; z-index: 1; border-radius: 12px; opacity: 0.85; }

/* ======================================================
   7. ADVENTURE CATEGORIES
   ====================================================== */
.adventure-categories { background: var(--bg-secondary); }
.interest-card { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 1; cursor: pointer; }
.interest-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.interest-card:hover img { transform: scale(1.1); }
.interest-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,20,0.85) 0%, rgba(13,13,20,0.1) 60%); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 20px; transition: background 0.3s; }
.interest-card:hover .interest-overlay { background: linear-gradient(to top, rgba(11,61,91,0.8) 0%, rgba(11,61,91,0.2) 60%); }
.interest-icon { width: 50px; height: 50px; background: var(--cth-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; font-size: 1.2rem; color: #fff; transition: transform 0.3s ease; }
.interest-card:hover .interest-icon { transform: scale(1.2); background: var(--cth-accent); }

/* ======================================================
   8. TRIPS SECTION & TRIP CARDS
   ====================================================== */
.trips-section { background: var(--bg-primary); }

.trip-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}
.trip-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(11,61,91,0.15); }
.trip-card-img { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.trip-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.trip-card:hover .trip-card-img img { transform: scale(1.08); }
.trip-card-badge { position: absolute; top: 12px; left: 12px; background: var(--cth-primary); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
.trip-card-body { padding: 18px; }
.trip-card-title { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
.trip-card-meta { display: flex; gap: 16px; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 12px; }
.trip-card-price { font-size: 1.2rem; font-weight: 800; color: var(--cth-primary); }
.trip-card-price small { font-size: 0.75rem; color: var(--text-secondary); font-weight: 400; }

/* Featured Trips (Swiper) */
.trip-slider-section { background: var(--bg-secondary); }
.tripSwiper .swiper-slide { border-radius: 16px; overflow: hidden; }

/* ======================================================
   9. PROMO SECTIONS (Flights / Accommodations)
   ====================================================== */
.promo-section { background: var(--bg-secondary); }
.promo-img-wrap img { width: 100%; max-width: 500px; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4)); transition: transform 0.4s ease; }
.promo-img-wrap:hover img { transform: translateY(-10px); }

/* Mobile hero image as CSS background */
.mobile-hero-section { background-size: cover; background-repeat: no-repeat; background-position: center bottom; }
@media (max-width: 992px) {
  .mobile-hero-section { background-image: var(--mobile-bg); padding-bottom: 60%; position: relative; }
  .mobile-hero-section:before { position: absolute; content: ''; z-index: 0; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(
    135deg, 
    rgba(11, 61, 91, 0.85) 0%,    /* Deep navy from logo */
    rgba(23, 116, 128, 0.8) 100%   /* Teal from logo waves */
  ); }
  .mobile-hero-section h6, .mobile-hero-section p {color: #c1e3e2 !important; position: relative; z-index: 10}
  .mobile-hero-section h2 {color: #fff !important; position: relative; z-index: 10}
  .mobile-hero-section .promo-img-wrap { display: none; }
}

/* ======================================================
   10. TRUST PROMISE CARDS
   ====================================================== */
.trust-promise { background: var(--bg-primary); }
.promise-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 28px 24px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.promise-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(11,61,91,0.12); border-color: var(--cth-primary); }
.promise-icon-wrapper { width: 60px; height: 60px; background: linear-gradient(135deg, var(--cth-primary), var(--cth-accent)); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: transform 0.3s ease; }
.promise-card:hover .promise-icon-wrapper { transform: scale(1.1) rotate(5deg); }

/* ======================================================
   11. VIDEO CTA SECTION
   ====================================================== */
.video-cta { position: relative; min-height: 70vh; display: flex; align-items: center; overflow: hidden; }
.video-cta-bg { position: absolute; inset: 0; z-index: 0; }
.video-cta-bg video, .video-cta-bg img { width: 100%; height: 100%; object-fit: cover; }
.video-cta-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,30,90,0.75) 0%, rgba(10,15,30,0.5) 100%); z-index: 1; }
.video-cta-content { position: relative; z-index: 2; text-align: center; padding: 60px 20px; }
.video-cta-content h6 { color: var(--cth-accent) !important; letter-spacing: 3px; }
.video-cta-content h2 { color: #fff; font-size: 3rem; font-weight: 800; margin-bottom: 1.5rem; }
.video-cta-content p  { color: rgba(255,255,255,.85); font-size: 1.15rem; }

/* ======================================================
   12. TESTIMONIALS
   ====================================================== */
.testimonial-section { background: var(--bg-secondary); }
.testimonial-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 32px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(11,61,91,0.10); }
.testimonial-stars { color: var(--cth-accent); font-size: 1rem; margin-bottom: 16px; display: flex; gap: 4px; }
.testimonial-quote { font-size: 0.95rem; line-height: 1.7; color: var(--text-secondary); font-style: italic; margin-bottom: 20px; }
.testimonial-author { display: flex; align-items: center; gap: 14px; }
.testimonial-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cth-primary); }
.testimonial-author h5 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }

/* ======================================================
   13. GALLERY GRID
   ====================================================== */
.main-gallery { background: var(--bg-primary); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 280px); gap: 12px; }
.gallery-item-large { grid-column: 1; grid-row: 1 / 3; }
.gallery-item, .gallery-item-large { position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; }
.gallery-item img, .gallery-item-large img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gallery-item:hover img, .gallery-item-large:hover img { transform: scale(1.08); }
.gallery-item::after, .gallery-item-large::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,61,91,0.5) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s ease; }
.gallery-item:hover::after, .gallery-item-large:hover::after { opacity: 1; }
.gallery-btn-maximize { position: absolute; top: 12px; right: 12px; background: rgba(11,61,91,0.8); color: #fff; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; opacity: 0; transition: opacity 0.3s ease; z-index: 2; }
.gallery-item:hover .gallery-btn-maximize,
.gallery-item-large:hover .gallery-btn-maximize { opacity: 1; }
.play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; }
.play-overlay i { width: 60px; height: 60px; background: rgba(11,61,91,0.85); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; transition: transform 0.3s ease; }
.video-item:hover .play-overlay i { transform: scale(1.15); }
@media (max-width: 768px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 200px); } .gallery-item-large { grid-column: 1/3; grid-row: 1; } }
@media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; grid-template-rows: auto; } .gallery-item, .gallery-item-large { height: 220px; } }

/* Gallery Lightbox */
.as-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 9999; display: none; flex-direction: column; align-items: center; justify-content: center; }
.as-lightbox.active { display: flex; }
.lightbox-content { max-width: 90vw; max-height: 70vh; display: flex; align-items: center; justify-content: center; }
.lightbox-content img, .lightbox-content video { max-width: 100%; max-height: 70vh; border-radius: 12px; }
.lightbox-close { position: absolute; top: 20px; right: 24px; color: #fff; font-size: 1.5rem; cursor: pointer; z-index: 3; transition: color 0.3s; }
.lightbox-close:hover { color: var(--cth-primary); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 1.5rem; cursor: pointer; z-index: 3; padding: 12px; background: rgba(11,61,91,0.3); border-radius: 50%; transition: background 0.3s; }
.lightbox-nav:hover { background: var(--cth-primary); }
.lightbox-prev { left: 20px; } .lightbox-next { right: 20px; }
.lightbox-thumbnails { display: flex; gap: 10px; margin-top: 20px; overflow-x: auto; padding: 10px; max-width: 90vw; }
.thumb-item { flex: 0 0 72px; height: 52px; border-radius: 8px; overflow: hidden; cursor: pointer; opacity: 0.6; transition: opacity 0.3s, border 0.3s; border: 2px solid transparent; }
.thumb-item.active, .thumb-item:hover { opacity: 1; border-color: var(--cth-primary); }
.thumb-item img { width: 100%; height: 100%; object-fit: cover; }

/* ======================================================
   14. BLOG CAROUSEL
   ====================================================== */
.home-blog-section { background: var(--bg-secondary); }
.blog-card-h { background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; border-radius: 18px !important; transition: box-shadow 0.3s ease; }
.blog-card-h:hover { box-shadow: 0 12px 40px rgba(11,61,91,0.10); }
.blog-img-wrap { border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; }
.blog-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.blog-card-h:hover .blog-img-wrap img { transform: scale(1.06); }

/* ======================================================
   15. CONTACT SECTION
   ====================================================== */
.contact-section { background: var(--bg-primary); }
.contact-info-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 24px 20px; transition: transform 0.3s ease, border-color 0.3s ease; }
.contact-info-card:hover { transform: translateY(-4px); border-color: var(--cth-primary); }
.contact-icon { width: 52px; height: 52px; background: linear-gradient(135deg, var(--cth-primary), var(--cth-accent)); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; margin-bottom: 14px; }
body.light-mode .contact-info-card { background: #fff; border: 1px solid #c8deff; }
.contact-form-container { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 40px 36px; }

.form-control, .form-select {
  background: var(--input-bg) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 10px;
  transition: border-color 0.3s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--cth-primary) !important;
  box-shadow: 0 0 0 3px rgba(11,61,91,0.15) !important;
}
.form-control::placeholder { color: var(--text-muted); }

/* Select2 dark theme override */
.select2-container--default .select2-selection--single {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 10px !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  color: var(--text-primary) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-primary) !important; line-height: 46px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px !important; }
.select2-dropdown { background: var(--nav-bg) !important; border: 1px solid var(--card-border) !important; }
.select2-results__option { color: var(--text-primary) !important; }
.select2-results__option--highlighted { background: var(--cth-primary) !important; color: #fff !important; }

/* Blob shapes (contact section decoration) */
.shape-blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: 0.06; }
.blob-1 { width: 400px; height: 400px; background: var(--cth-primary); top: -100px; right: -100px; }
.blob-2 { width: 300px; height: 300px; background: var(--cth-accent); bottom: -80px; left: -80px; }

/* ======================================================
   16. FOOTER
   ====================================================== */
.cth-footer { background: var(--bg-secondary); padding: 80px 0 0; margin-top: 0; }
.footer-widget h5 { font-size: 1rem; font-weight: 700; margin-bottom: 24px; color: var(--text-primary); position: relative; padding-bottom: 12px; }
.footer-widget h5::after { content: ''; position: absolute; bottom: 0; left: 0; width: 36px; height: 3px; background: var(--cth-primary); border-radius: 3px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; }
.footer-links a:hover { color: var(--cth-primary); transform: translateX(5px); }
.footer-links a i { color: var(--cth-primary); font-size: 0.85rem; }
.newsletter-box { display: flex; gap: 10px; }
.newsletter-box input { flex: 1; background: var(--input-bg); color: var(--text-primary); border: 1px solid var(--card-border); border-radius: 50px; padding: 10px 18px; font-size: 0.9rem; }
.newsletter-box input::placeholder { color: var(--text-muted); }
.newsletter-box input:focus { outline: none; border-color: var(--cth-primary); }
.footer-bottom { border-top: 1px solid var(--card-border); padding: 24px 0; margin-top: 60px; }

/* ======================================================
   17. TRIP HERO (Single Trip)
   ====================================================== */
.trip-hero {
  background-size: cover;
  background-position: center;
  min-height: 55vh;
  display: flex;
  align-items: flex-end;
  padding: 120px 0 50px;
  position: relative;
}
.trip-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,13,20,0.9) 0%, rgba(13,13,20,0.4) 50%, rgba(11,61,91,0.2) 100%);
}
.trip-hero .container { position: relative; z-index: 2; }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.4); }

/* Booking Sidebar */
.booking-sidebar { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; overflow: hidden; }
.booking-card .bg-primary { background: var(--cth-primary) !important; }

/* Mobile Sticky Booking Bar */
.mobile-sticky-booking { position: fixed; bottom: 0; left: 0; right: 0; background: var(--nav-bg); backdrop-filter: blur(12px); border-top: 1px solid var(--card-border); padding: 12px 0; z-index: 1040; }

/* Itinerary */
.itinerary-list { border-color: var(--cth-primary) !important; }

/* ======================================================
   18. ARCHIVE TRIPS (Trips Listing)
   ====================================================== */
.archive-hero { background: var(--bg-secondary); padding: 130px 0 60px; }
.trips-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.filter-btn { background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-secondary); padding: 8px 20px; border-radius: 50px; font-size: 0.85rem; cursor: pointer; transition: all 0.3s ease; }
.filter-btn:hover, .filter-btn.active { background: var(--cth-primary); border-color: var(--cth-primary); color: #fff; }

/* ======================================================
   19. CONTACT PAGE
   ====================================================== */
.contact-hero { background: var(--bg-secondary); padding: 130px 0 70px; }

/* ======================================================
   20. SINGLE PAGE (Static Content Page)
   ====================================================== */
.page-hero { background: var(--bg-secondary); padding: 130px 0 60px; }
.page-content img { max-width: 100%; border-radius: 12px; }
.page-content h2, .page-content h3 { color: var(--text-primary); margin-top: 2rem; }
.page-content p { color: var(--text-secondary); line-height: 1.8; }

/* ======================================================
   21. CHAT WIDGET
   ====================================================== */
.whatsapp-float-btn {
  position: fixed;
  bottom: 28px;
  left: 28px;
  width: 58px;
  height: 58px;
  background: linear-gradient(135deg, var(--cth-primary), var(--cth-accent));
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9990;
  box-shadow: 0 6px 24px rgba(11,61,91,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: #fff;
  font-size: 1.4rem;
}

.floating-social a {
  width: 50px !important;
  height: 50px !important;
  background: linear-gradient(135deg, var(--cth-primary), var(--cth-accent));
  border: none !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  z-index: 9990 !important;
  box-shadow: 0 6px 24px rgba(11,61,91,0.4) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  color: #fff !important;
  font-size: 1.4rem !important;
}

.whatsapp-float-btn:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(11,61,91,0.6); }
.whatsapp-float-btn .icon-close { display: none; position: absolute; }
.whatsapp-float-btn.active .icon-open { display: none; }
.whatsapp-float-btn.active .icon-close { display: block; }
.whatsapp-badge { position: absolute; top: -4px; right: -4px; background: var(--cth-accent); color: #fff; width: 20px; height: 20px; border-radius: 50%; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-primary); }

.chat-wrapper {
  position: fixed;
  bottom: 100px;
  left: 28px;
  width: 320px;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  overflow: hidden;
  z-index: 9989;
  box-shadow: 0 16px 50px rgba(0,0,0,0.4);
  transform: scale(0.8) translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.chat-wrapper.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; }
.chat-header { background: linear-gradient(135deg, var(--cth-primary), #0A2E45); padding: 16px 20px; }
.chat-header.facebook-bg { background: linear-gradient(135deg, #1877f2, #0d5bbf); }
.header-profile { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.img-wrapper { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #fff; border: 2px solid rgba(255,255,255,.3); }
.img-wrapper img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.header-content h5 { color: #fff; margin: 0; font-size: 0.95rem; font-weight: 700; }
.header-content span { color: rgba(255,255,255,.75); font-size: 0.8rem; }
.chat-tabs { display: flex; gap: 8px; }
.chat-tab { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.75); padding: 5px 14px; border-radius: 20px; cursor: pointer; font-size: 0.8rem; transition: all 0.3s; }
.chat-tab.active, .chat-tab:hover { background: rgba(255,255,255,.3); color: #fff; }
.chat-body { display: none; }
.chat-body.active { display: block; }
.chat-center { padding: 20px; }
.chat-message { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 16px; }
.chat-message .title { font-weight: 700; font-size: 0.85rem; margin-bottom: 8px; color: var(--text-primary); }
.chat-message .message-content { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; }
.chat-message .time { font-size: 0.75rem; color: var(--text-muted); margin-top: 8px; display: block; }
.chat-footer { padding: 0 20px 20px; }
.chat-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--cth-primary); color: #fff; padding: 12px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 0.9rem; transition: background 0.3s ease; }
.chat-btn:hover { background: #0A2E45; color: #fff; }
.facebook-btn { background: #1877f2; }
.facebook-btn:hover { background: #0d5bbf; }

/* ======================================================
   22. FORM STYLES (Datepicker / Booking Form)
   ====================================================== */
.datepicker.dropdown-menu { background: var(--nav-bg) !important; border: 1px solid var(--card-border) !important; }
.datepicker table tr td, .datepicker table tr th { color: var(--text-primary); }
.datepicker table tr td.active { background: var(--cth-primary) !important; color: #fff !important; }
.datepicker table tr td:hover { background: rgba(11,61,91,0.15) !important; }

/* ======================================================
   23. UTILITY & TRACKING WIDTHS
   ====================================================== */
.tracking-widest { letter-spacing: 0.2em; }
.rounded-4 { border-radius: 1rem !important; }
.shadow-glow { box-shadow: 0 0 40px rgba(11,61,91,0.2); }
.hover-primary:hover { color: var(--cth-primary) !important; }

/* Swiper pagination override */
.swiper-pagination-bullet-active { background: var(--cth-primary) !important; }
.swiper-button-next, .swiper-button-prev { color: var(--cth-primary) !important; }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 1.2rem !important; }

/* ======================================================
   24. RESPONSIVE HELPERS
   ====================================================== */
@media (max-width: 991px) {
  .video-cta-content h2 { font-size: 2.2rem; }
  .contact-form-container { padding: 24px 20px; }
  .chat-wrapper { width: 290px; }
}

@media (max-width: 768px) {
  .text-slide h2 { font-size: 2rem; }
  .gallery-grid { grid-template-rows: repeat(3, 180px); }
  .cth-footer { padding: 60px 0 0; }
}

@media (max-width: 576px) {
  .whatsapp-float-btn { bottom: 20px; left: 20px; width: 50px; height: 50px; font-size: 1.2rem; }
  .chat-wrapper { left: 16px; right: 16px; width: auto; }
  .as-slider { padding: 100px 20px 20px; }
}

/* ======================================================
   25. UPDATED COMPONENTS (BOOKING & GALLERY)
   ====================================================== */

/* Booking Card Modern Style */
.booking-card {
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.booking-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 45px rgba(0,0,0,0.15) !important;
}

.qty-selector-btn {
  width: 100%;
  text-align: left;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
}
.qty-selector-btn:hover, .qty-selector-btn:focus {
  border-color: var(--cth-primary);
  background: rgba(var(--cth-primary-rgb), 0.05);
}

.qty-dropdown-card {
  background: var(--nav-bg);
  backdrop-filter: blur(15px);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 20px;
  margin-top: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.qty-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.qty-item:last-child { margin-bottom: 0; }
.qty-item label { font-weight: 600; font-size: 0.9rem; }
.qty-control {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--input-bg);
  padding: 5px;
  border-radius: 50px;
  border: 1px solid var(--card-border);
}
.qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--cth-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: all 0.2s;
}
.qty-btn:hover { background: var(--cth-accent); transform: scale(1.1); }
.qty-input {
  width: 30px;
  border: none;
  background: transparent;
  text-align: center;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.9rem;
}
.qty-input:focus { outline: none; }

/* Premium Gallery Slider */
.gallery-container {
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-secondary);
}

.gallery-main {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 20px;
  margin-bottom: 12px;
}
.gallery-main .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

.gallery-thumbs {
  height: 80px;
  box-sizing: border-box;
  padding: 5px 0;
}
.gallery-thumbs .swiper-slide {
  width: 100%;
  height: 100%;
  opacity: 0.4;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 10px;
  overflow: hidden;
}
.gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border: 2px solid var(--cth-primary);
}
.gallery-thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .gallery-main { aspect-ratio: 4/3; }
  .gallery-thumbs { height: 60px; }
}

/* WhatsApp Box Below Booking */
.whatsapp-booking-box {
  background: #25D366;
  color: #fff;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s;
}
.whatsapp-booking-box:hover {
  transform: scale(1.02);
  background: #128C7E;
}
.whatsapp-booking-box h4 { color: #fff !important; font-weight: 800; margin-bottom: 5px; }
.whatsapp-booking-box p { color: rgba(255,255,255,0.9); font-size: 0.85rem; margin-bottom: 15px; }


.datepicker {
    opacity: 1;
    display: block;
    visibility: visible;
}


#actions {
  margin: 0 0 2em;
}

#previews.empty {
  height: 250px;
  background: #f0f2f4 url('../../../../admin-template/assets/img/drop-background.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: relative;
  cursor: pointer;
}

table {
  width: 100%;
}
#table-1 tr td:first-child {
  width: 40px;
}

/* Mimic table appearance */
div.table {
  display: table;
}
div.table .file-row {
  display: table-row;
}
div.table .file-row > div {
  display: table-cell;
  vertical-align: top;
  border-top: 1px solid #ddd;
  padding: 8px;
}
div.table .file-row:nth-child(odd) {
  background: #f9f9f9;
}

/* The total progress gets shown by event listeners */
#total-progress {
  opacity: 0;
  transition: opacity 0.3s linear;
}

/* Hide the progress bar when finished */
#previews .file-row.dz-success .progress {
  opacity: 0;
  transition: opacity 0.3s linear;
}

/* Hide the delete button initially */
#previews .file-row .delete {
  display: none;
}

/* Hide the start and cancel buttons and show the delete button */

#previews .file-row.dz-success .start,
#previews .file-row.dz-success .cancel {
  display: none;
}
#previews .file-row.dz-success .delete {
  display: block;
}

.fontstar {
    margin: 15px 0 30px;
    padding: 0;
    display: block;
    overflow: hidden;
}