/* ============================================================
   DUBAI GUIDE TOURS - Responsive Add-ons
   ============================================================ */

@keyframes fadeInCard {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Better scrollbar in dropdowns */
select option { padding: 8px; }

/* Ensure cards filter nicely */
.pack-card[style*="display: none"] { animation: none !important; }

/* Print friendly */
@media print {
  .topbar, .site-header, .float-wa, .to-top, .mobile-menu, .overlay { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   MOBILE HEADER FIX - Dubai Guide Tours
   ============================================================ */

/* Tablet / Small Desktop */
@media (max-width: 1100px) {
  .nav { padding: 12px 0; gap: 12px; }
  .logo { gap: 10px; }
  .logo-mark { width: 42px; height: 42px; border-radius: 11px; font-size: 1.05rem; }
  .logo-text strong { font-size: 1.05rem; letter-spacing: .2px; }
  .logo-text small { font-size: .52rem; letter-spacing: .22em; }
  .nav-actions { gap: 12px; }
  .nav-actions .btn-gold { padding: 11px 20px; font-size: .72rem; }
  .burger { width: 42px; height: 42px; font-size: 1rem; }
}

/* Mobile */
@media (max-width: 560px) {
  .nav { padding: 10px 0; gap: 8px; }
  .logo { gap: 9px; }
  .logo-mark { width: 38px; height: 38px; font-size: .95rem; border-radius: 10px; }
  .logo-text strong { font-size: .88rem; letter-spacing: .1px; }
  .logo-text small { font-size: .44rem; letter-spacing: .16em; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn-gold { padding: 9px 16px; font-size: .64rem; letter-spacing: .04em; }
  .burger { width: 38px; height: 38px; font-size: .9rem; }

  /* Booking form submit button */
  .booking-form .btn-block { padding: 14px 20px; font-size: .78rem; letter-spacing: .05em; }
  .booking-form .btn-block i { font-size: 1rem; }
}

/* Very small phones */
@media (max-width: 400px) {
  .logo-text small { display: none; }
  .logo-text strong { font-size: .82rem; }
  .nav-actions .btn-gold { padding: 8px 12px; font-size: .6rem; }
  .nav-actions .btn-gold i { display: none; }
  .burger { width: 36px; height: 36px; font-size: .85rem; }
}

/* Extra tiny - just icon logo + burger */
@media (max-width: 340px) {
  .logo-text { display: none; }
  .nav-actions .btn-gold { padding: 8px 10px; font-size: .58rem; }
}

/* ============================================================
   FINAL POLISH - Dubai Guide Tours
   ============================================================ */

/* Logo text kabhi break na ho */
.logo-text strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* Gold text selection */
::selection { background: rgba(200,164,92,.35); color: #fff; }
::-moz-selection { background: rgba(200,164,92,.35); color: #fff; }

/* Accessibility focus ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Prevent images from jumping before load */
img { background: linear-gradient(135deg, var(--dark-3), var(--dark-2)); }

/* Better button active state */
.btn:active { transform: scale(.97); }

/* Smooth image lazy-load fade */
img[loading="lazy"] { opacity: 0; transition: opacity .6s ease; }
img[loading="lazy"].loaded,
img[loading="lazy"][complete] { opacity: 1; }

/* Prevent horizontal overflow from long words */
h1, h2, h3, h4, p { overflow-wrap: break-word; word-wrap: break-word; }

/* Better scroll padding for anchor links */
html { scroll-padding-top: 110px; }

/* Topbar text slight tightening */
.topbar-left a, .topbar-right { font-weight: 400; }

/* Prevent sticky header jump on scroll */
.site-header { will-change: background, box-shadow; }

/* Nicer number tabular alignment in stats */
.hero-stat strong { font-variant-numeric: tabular-nums; }

/* Mobile tweaks - keep hero readable */
@media (max-width: 560px) {
  .hero p.lead { font-size: .95rem; }
  .hero-badge { font-size: .66rem; padding: 8px 16px 8px 8px; }
  .section-title { letter-spacing: -.2px; }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}