/* ===== Tuk Lisboa - Custom Theme ===== */
:root{
  --tuk-yellow: #ffb703;
  --tuk-navy: #023047;
  --tuk-orange: #fb8500;
  --tuk-teal: #219ebc;
  --tuk-cream: #fff8ec;
}

body{
  font-family: 'Poppins', sans-serif;
  color: #2b2b2b;
  background: #fffdf8;
}
h1,h2,h3,.font-display{
  font-family: 'Fraunces', serif;
}

/* ---- Topbar / Nav ---- */
.topbar{ background: var(--tuk-navy); color:#fff; }
.logo-badge{
  width:44px; height:44px; border-radius:50%;
  background: linear-gradient(135deg, var(--tuk-yellow), var(--tuk-orange));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.brand-text{ font-family:'Fraunces',serif; font-weight:700; font-size:1.4rem; color: var(--tuk-navy); }
.navbar .nav-link{ color: var(--tuk-navy); }
.navbar .nav-link.active, .navbar .nav-link:hover{ color: var(--tuk-orange); }
.btn-tuk-primary{
  background: var(--tuk-yellow); color: var(--tuk-navy); font-weight:600; border:none;
  transition: all .2s ease;
}
.btn-tuk-primary:hover{ background: var(--tuk-orange); color:#fff; transform: translateY(-2px); }
.btn-tuk-outline{
  border:2px solid #fff; color:#fff; font-weight:600; background:transparent;
}
.btn-tuk-outline:hover{ background:#fff; color: var(--tuk-navy); }

/* ---- WhatsApp float ---- */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:1050;
  width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.7rem;
  box-shadow:0 6px 18px rgba(0,0,0,.25); animation: pulse 2.2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); }
  70%{ box-shadow:0 0 0 14px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

/* ---- Hero Slider ---- */
.hero-slide{
  position:relative; height:88vh; min-height:520px; width:100%;
  background-size:cover; background-position:center;
}
.hero-slide::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(2,48,71,.55) 0%, rgba(2,48,71,.75) 100%);
}
.hero-slide .hero-content{ position:relative; z-index:2; color:#fff; height:100%; }
.hero-eyebrow{
  display:inline-block; background: var(--tuk-yellow); color: var(--tuk-navy);
  padding:.35rem 1rem; border-radius:50px; font-weight:600; font-size:.85rem; letter-spacing:.03em;
}
.hero-title{ font-size:3.2rem; font-weight:700; line-height:1.1; }
@media (max-width: 768px){ .hero-title{ font-size:2.1rem; } .hero-slide{ height:78vh; } }
.carousel-indicators [data-bs-target]{ background: var(--tuk-yellow); }

/* ---- Section titles ---- */
.section-eyebrow{
  color: var(--tuk-orange); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.85rem;
}
.section-title{ font-weight:700; color: var(--tuk-navy); }
.section-subtitle{ color:#6b6b6b; max-width:620px; }
.bg-cream{ background: var(--tuk-cream); }
.bg-navy{ background: var(--tuk-navy); color:#fff; }

/* ---- Destination cards ---- */
.dest-card{
  position:relative; border-radius:18px; overflow:hidden; height:280px; display:block;
  box-shadow: 0 10px 30px rgba(2,48,71,.12);
}
.dest-card img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.dest-card:hover img{ transform: scale(1.08); }
.dest-card .overlay{
  position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(2,48,71,.9) 100%);
  display:flex; align-items:flex-end; padding:1.25rem; color:#fff;
}

/* ---- Tour cards ---- */
.tour-card{
  border:none; border-radius:18px; overflow:hidden; box-shadow: 0 10px 30px rgba(2,48,71,.08);
  transition: transform .25s ease, box-shadow .25s ease; height:100%;
}
.tour-card:hover{ transform: translateY(-6px); box-shadow: 0 16px 36px rgba(2,48,71,.16); }
.tour-card .tour-img-wrap{ position:relative; height:220px; overflow:hidden; }
.tour-card .tour-img-wrap img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.tour-card:hover .tour-img-wrap img{ transform: scale(1.07); }
.tour-badge{
  position:absolute; top:14px; left:14px; background: var(--tuk-yellow); color: var(--tuk-navy);
  padding:.3rem .8rem; border-radius:50px; font-weight:700; font-size:.78rem;
}
.tour-price-badge{
  position:absolute; bottom:14px; right:14px; background: var(--tuk-navy); color:#fff;
  padding:.4rem .9rem; border-radius:50px; font-weight:700; font-size:.9rem;
}
.tour-rating{ color: var(--tuk-orange); font-weight:600; }
.category-pill{
  border:2px solid var(--tuk-navy); color: var(--tuk-navy); border-radius:50px; padding:.4rem 1.1rem;
  font-weight:600; background:#fff; transition: all .2s ease;
}
.category-pill.active, .category-pill:hover{ background: var(--tuk-navy); color:#fff; }

/* ---- Attractions grid ---- */
.attr-card{ border-radius:16px; overflow:hidden; position:relative; height:180px; box-shadow:0 8px 22px rgba(2,48,71,.1); }
.attr-card img{ width:100%; height:100%; object-fit:cover; }
.attr-card .attr-overlay{
  position:absolute; inset:0; background: linear-gradient(180deg, transparent 30%, rgba(2,48,71,.88) 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:.9rem; color:#fff;
}

/* ---- Why us ---- */
.why-icon{
  width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--tuk-yellow), var(--tuk-orange)); color:#fff; font-size:1.6rem;
}

/* ---- Reviews ---- */
.review-card{ background:#fff; border-radius:18px; padding:1.8rem; box-shadow:0 10px 26px rgba(2,48,71,.08); height:100%; }
.review-stars{ color: var(--tuk-orange); }

/* ---- Gallery ---- */
.gallery-item{ border-radius:14px; overflow:hidden; height:180px; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; cursor:pointer; }
.gallery-item:hover img{ transform: scale(1.1); }

/* ---- Blog cards ---- */
.blog-card{ border-radius:16px; overflow:hidden; box-shadow:0 10px 26px rgba(2,48,71,.08); height:100%; }
.blog-card img{ height:200px; width:100%; object-fit:cover; }

/* ---- Tour details page ---- */
.price-preview-box{ background: var(--tuk-cream); border:2px dashed var(--tuk-yellow); border-radius:14px; padding:1.1rem; }
.total-amount-box{
  background: var(--tuk-navy); color:#fff; border-radius:14px; padding:1.1rem 1.4rem;
  display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:1.15rem;
}
.package-option{
  border:2px solid #e2e2e2; border-radius:14px; padding:1rem; cursor:pointer; transition: all .2s ease; height:100%;
}
.package-option.active, .package-option:hover{ border-color: var(--tuk-yellow); background: var(--tuk-cream); }
.itinerary-step{ position:relative; padding-left:2.2rem; padding-bottom:1.6rem; border-left:2px dashed var(--tuk-yellow); margin-left:.6rem; }
.itinerary-step:last-child{ border-left-color:transparent; }
.itinerary-step::before{
  content:''; position:absolute; left:-9px; top:0; width:16px; height:16px; border-radius:50%;
  background: var(--tuk-yellow); border:3px solid var(--tuk-navy);
}

.mobile-book-btn{
  position:fixed; bottom:0; left:0; right:0; z-index:1040; background: var(--tuk-navy); color:#fff;
  padding:.8rem 1rem; display:flex; justify-content:space-between; align-items:center;
}

/* ---- Footer ---- */
.site-footer{ background: var(--tuk-navy); }
.footer-text{ color:#c9d6dc; font-size:.92rem; }
.footer-links li{ margin-bottom:.5rem; }
.footer-links a{ color:#c9d6dc; text-decoration:none; }
.footer-links a:hover{ color: var(--tuk-yellow); }

/* ---- Misc ---- */
.rounded-xl{ border-radius:20px; }
.shadow-soft{ box-shadow:0 10px 30px rgba(2,48,71,.1); }
.badge-star{ color: var(--tuk-orange); }

/* ---- Scroll reveal ---- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal-in{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---- Floating decorative blobs ---- */
.blob{
  position:absolute; border-radius:50%; filter:blur(2px); opacity:.5; z-index:0; pointer-events:none;
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-22px) rotate(8deg); }
}
.blob-yellow{ background: var(--tuk-yellow); }
.blob-orange{ background: var(--tuk-orange); }
.blob-teal{ background: var(--tuk-teal); }

/* ---- Animated icon bounce (used on section icons / CTA) ---- */
.icon-bounce{ animation: iconBounce 2.4s ease-in-out infinite; display:inline-block; }
@keyframes iconBounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

/* ---- Animated gradient text for hero highlight word ---- */
.gradient-text{
  background: linear-gradient(90deg, var(--tuk-yellow), var(--tuk-orange), var(--tuk-yellow));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradientShift 4s linear infinite;
}
@keyframes gradientShift{ to{ background-position: 200% center; } }

/* ---- Stats counter section ---- */
.stat-box{ text-align:center; padding:1.5rem 1rem; }
.stat-number{ font-family:'Fraunces',serif; font-size:2.6rem; font-weight:700; color: var(--tuk-navy); }
.stat-icon{ font-size:1.8rem; color: var(--tuk-orange); margin-bottom:.4rem; }

/* ---- Animated underline on section titles ---- */
.section-title.with-underline{ position:relative; display:inline-block; padding-bottom:.5rem; }
.section-title.with-underline::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:60px; height:4px; border-radius:4px; background: linear-gradient(90deg, var(--tuk-yellow), var(--tuk-orange));
}

/* ---- Enquiry popup modal ---- */
.popup-enquiry .modal-content{ border-radius:22px; overflow:hidden; border:none; }
.popup-enquiry .modal-header-visual{
  background: linear-gradient(135deg, var(--tuk-navy), var(--tuk-teal));
  color:#fff; padding:1.6rem; position:relative; overflow:hidden;
}
.popup-enquiry .modal-header-visual .bi{ font-size:2.2rem; color: var(--tuk-yellow); }
.popup-close-btn{ position:absolute; top:12px; right:14px; z-index:5; }

/* ---- Extra button micro-interactions ---- */
.btn-tuk-primary, .btn-tuk-outline, .category-pill{ position:relative; overflow:hidden; }
.btn-tuk-primary:active, .btn-tuk-outline:active{ transform: scale(.97); }

/* ---- Icon chips used across content lists ---- */
.icon-chip{
  width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background: var(--tuk-cream); color: var(--tuk-orange); flex-shrink:0;
}
.icon-chip.icon-chip-warning{ background:#fff3cd; color:#b8860b; }
.icon-chip.icon-chip-danger{ background:#f8d7da; color:#c0392b; }

/* ---- Rich content areas (tour highlights/inclusions/exclusions via TinyMCE) ---- */
.tour-rich-content ul, .tour-rich-content ol{ padding-left:1.2rem; margin-bottom:0; }
.tour-rich-content p{ margin-bottom:.5rem; }
.tour-rich-content p:last-child{ margin-bottom:0; }

