/* =========================================================
   Klaro Design Tokens (single source of truth)
   ========================================================= */

:root {
  /* Color Palette - Klaro Design System */
  --klaro-bg: #F8F9FB;
  /* Soft Off-White */
  --klaro-card: #FFFFFF;
  /* White cards */
  --klaro-ink: #2F343B;
  /* Slate Gray (Primary Text) */
  --klaro-muted: #64748b;
  /* Muted Text */

  --klaro-primary: #3B6EA8;
  /* Muted Blue (Brand Primary) */
  --klaro-primary-weak: rgba(59, 110, 168, 0.08);
  /* Light blue bg */

  --klaro-success: #8FAEA1;
  /* Sage Green */
  --klaro-warm: #E2DFD6;
  /* Warm Sand */

  --klaro-border: #E2E8F0;
  /* Light Slate Border (kept neutral for crispness) */
  --klaro-border-warm: #E2DFD6;
  /* Warm Sand Border */

  /* Mapped functionality */
  --klaro-link: var(--klaro-primary);
  --klaro-accent: var(--klaro-success);

  /* Type */
  --klaro-font: "Inter", system-ui, -apple-system, sans-serif;

  /* Shape + shadow */
  --klaro-radius: 16px;
  --klaro-radius-sm: 10px;
  --klaro-shadow: 0 2px 8px rgba(47, 52, 59, 0.04);
  /* Softer, warmer shadow */
  --klaro-shadow-lg: 0 12px 32px rgba(47, 52, 59, 0.08);

  /* Spacing */
  --klaro-s1: 6px;
  --klaro-s2: 10px;
  --klaro-s3: 14px;
  --klaro-s4: 18px;
  --klaro-s5: 24px;
  --klaro-s6: 32px;
}

html,
body {
  height: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ===== Base / Analytics styles ===== */

body {
  font-family: var(--klaro-font);
  margin: 0;
  background: var(--klaro-bg);
  color: var(--klaro-ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page padding wrapper: keeps the UI spacious without compressing */
.page-pad {
  padding: var(--klaro-s6) var(--klaro-s5);
}

@media (max-width: 720px) {
  .page-pad {
    padding: var(--klaro-s5) var(--klaro-s4);
  }
}

/* ===== Shared header/nav (global) ===== */
.site-header {
  margin: 0 0 var(--klaro-s4) 0;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--klaro-s3);
  padding: 12px 14px;
  border: 1px solid var(--klaro-border);
  border-radius: var(--klaro-radius);
  background: var(--klaro-card);
  box-shadow: var(--klaro-shadow);
}

.site-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.site-brand__link {
  font-weight: 900;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--klaro-ink);
  white-space: nowrap;
}

.site-brand__badge {
  font-size: 12px;
  color: var(--klaro-muted);
  font-weight: 600;
}

.site-nav {
  display: flex;
  gap: 10px;
}

.site-nav__link {
  text-decoration: none;
  font-weight: 800;
  color: var(--klaro-ink);
  padding: 8px 12px;
  border-radius: var(--klaro-radius-sm);
  border: 1px solid var(--klaro-border);
  background: #fff;
}

.site-nav__link:hover {
  box-shadow: var(--klaro-shadow);
  border-color: var(--klaro-border-strong);
}

.site-main.page-pad {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--klaro-s6) var(--klaro-s5);
}

.card {
  background: var(--klaro-card);
  border: 1px solid var(--klaro-border);
  border-radius: var(--klaro-radius);
  padding: var(--klaro-s5);
  margin: var(--klaro-s4) 0;
  box-shadow: var(--klaro-shadow);
}

table {
  width: 100%;
  border-collapse: collapse;
}

td,
th {
  padding: 8px;
  border-bottom: 1px solid #eee;
  text-align: left;
  font-size: 14px;
}

.muted {
  color: var(--klaro-muted);
}

a {
  color: var(--klaro-link);
}

a:hover {
  text-decoration: underline;
}

.slot {
  margin-top: 14px;
}

.slot h3 {
  margin: 0 0 8px 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.itin-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.itin-list li {
  padding: 10px 0;
  border-top: 1px solid #eee;
}

.itin-list li:first-child {
  border-top: none;
}

.act-name {
  font-weight: 600;
}

.act-meta {
  margin-top: 6px;
}

/* ===== App-like polish (Tailwind companion) ===== */

/* Custom scrollbar to make it feel like an app */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c7c7c7;
  border-radius: 4px;
}

/* Subtle input/button normalization when Tailwind is not applied */
button,
input,
select {
  font: inherit;
}

/* Optional: timeline helpers (used by itinerary cards if we add them later) */
.ww-timeline {
  position: relative;
  padding-left: 1.25rem;
  border-left: 2px solid rgba(31, 78, 168, 0.12);
  /* klaro link @ ~12% */
}

.ww-dot {
  position: absolute;
  left: -10px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 4px solid rgba(47, 133, 90, 0.95);
  /* klaro accent */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.ww-dot--filler {
  width: 14px;
  height: 14px;
  left: -8px;
  border: 4px solid rgba(31, 78, 168, 0.55);
  /* klaro link */
}

.right-panel {
  width: 380px;
  background: rgba(255, 255, 255, 0.6);
  border-left: 1px solid var(--klaro-border);
}

@media (max-width: 1200px) {
  .right-panel {
    display: none;
  }
}

/* ===== Klaro takeover: if any Tailwind classes remain in markup, prefer our tokens ===== */
html body {
  background: var(--klaro-bg) !important;
  color: var(--klaro-ink) !important;
  font-family: var(--klaro-font) !important;
}

/* Make cards/forms feel spacious even without Tailwind */
form,
.card {
  max-width: 1100px;
}

label {
  display: inline-block;
  font-weight: 700;
  margin: 0 10px 6px 0;
}

select,
input[type="text"],
input[type="number"] {
  padding: 8px 10px;
  border: 1px solid var(--klaro-border);
  border-radius: var(--klaro-radius-sm);
  background: #fff;
}

button {
  padding: 9px 12px;
  border-radius: var(--klaro-radius-sm);
  border: 1px solid var(--klaro-border);
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}

button:hover {
  border-color: var(--klaro-border-strong);
  box-shadow: var(--klaro-shadow);
}

/* =========================================================
   Tailwind shim (temporary)
   Purpose: templates still contain Tailwind utility class names.
   Since we removed the Tailwind CDN, we map the subset we use
   to real CSS so the UI is no longer broken.
   Delete this later once we refactor templates.
   ========================================================= */

/* Layout + typography */
.bg-gray-100 {
  background: var(--klaro-bg);
}

.text-gray-800 {
  color: #1f2937;
}

.text-gray-900 {
  color: #111827;
}

.text-gray-600 {
  color: #4b5563;
}

.text-gray-500 {
  color: #6b7280;
}

.text-gray-400 {
  color: #9ca3af;
}

.font-sans {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

.font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

.h-10 {
  height: 2.5rem;
}

.min-h-screen {
  min-height: 100vh;
}

.h-screen {
  height: 100vh;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-1 {
  flex: 1 1 0%;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-auto {
  overflow-x: auto;
}

/* Sizing */
.w-64 {
  width: 16rem;
}

.w-96 {
  width: 24rem;
}

.w-full {
  width: 100%;
}

.max-w-7xl {
  max-width: 80rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Spacing */
.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.space-y-2>*+* {
  margin-top: 0.5rem;
}

.space-y-4>*+* {
  margin-top: 1rem;
}

.space-y-8>*+* {
  margin-top: 2rem;
}

/* Borders + backgrounds */
.bg-white {
  background: #ffffff;
}

.bg-gray-50 {
  background: #f9fafb;
}

.border {
  border: 1px solid #e5e7eb;
}

.border-r {
  border-right: 1px solid #e5e7eb;
}

.border-l {
  border-left: 1px solid #e5e7eb;
}

.border-b {
  border-bottom: 1px solid #e5e7eb;
}

.border-gray-100 {
  border-color: #f3f4f6;
}

.border-gray-200 {
  border-color: #e5e7eb;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.shadow-md {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* Text */
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.font-medium {
  font-weight: 500;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.leading-snug {
  line-height: 1.375;
}

.uppercase {
  text-transform: uppercase;
}

.tracking-tight {
  letter-spacing: -0.015em;
}

.tracking-wider {
  letter-spacing: 0.08em;
}

/* Links/buttons */
.cursor-pointer {
  cursor: pointer;
}

.transition {
  transition: all 160ms ease;
}

/* Utility display */
.hidden {
  display: none;
}

/* Responsive helpers used in templates */
@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }
}

@media (min-width: 1280px) {
  .xl\:flex {
    display: flex;
  }
}

/* Klaro accents used in nav (shim for old Tailwind classnames) */
.text-indigo-600 {
  color: var(--klaro-primary) !important;
}

.text-indigo-700 {
  color: var(--klaro-primary) !important;
}

.bg-indigo-50 {
  background: var(--klaro-primary-weak) !important;
}

.bg-indigo-600 {
  background: var(--klaro-primary) !important;
  color: white !important;
}

/* Success / Green mappings */
.bg-green-50 {
  background: rgba(143, 174, 161, 0.15) !important;
}

.text-green-700 {
  color: #5f7a70 !important;
}

/* Klaro brand helpers */
.brand-logo {
  width: 40px;
  height: 40px;
  display: block;
}

.brand-word {
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--klaro-link);
}

.brand-tagline {
  color: var(--klaro-muted);
  font-weight: 600;
}

/* ===== Itinerary Polish (Phase 2) ===== */

.itin-timeline {
  position: relative;
  padding-left: 24px;
  border-left: 2px solid var(--klaro-border);
  margin-left: 8px;
  padding-bottom: 8px;
}

.itin-timeline-item {
  position: relative;
  margin-bottom: 24px;
}

.itin-timeline-item:last-child {
  margin-bottom: 0;
}

.itin-timeline-dot {
  position: absolute;
  left: -31px;
  /* Adjust based on border width and padding */
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--klaro-primary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--klaro-border);
  z-index: 1;
}

.itin-card {
  background: white;
  border: 1px solid var(--klaro-border);
  border-radius: var(--klaro-radius);
  box-shadow: var(--klaro-shadow);
  overflow: hidden;
  margin-top: 1.5rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.itin-card[open] {
  box-shadow: var(--klaro-shadow-lg);
}

.itin-summary {
  cursor: pointer;
  padding: 1.5rem;
  user-select: none;
  background: white;
  transition: background 0.2s;
}

.itin-summary:hover {
  background: #fcfcfc;
}

.btn-primary {
  background-color: var(--klaro-primary);
  color: white;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  text-decoration: none !important;
}

.btn-primary:hover {
  background-color: #2c5282;
  /* Darker blue */
  opacity: 1;
  color: white;
}

.btn-outline {
  background-color: white;
  color: var(--klaro-ink);
  border: 1px solid var(--klaro-border);
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  text-decoration: none !important;
}

.btn-outline:hover {
  border-color: var(--klaro-border-strong);
  background-color: var(--klaro-bg);
  color: var(--klaro-ink);
}

.Badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  background: var(--klaro-bg);
  color: var(--klaro-muted);
  border: 1px solid var(--klaro-border);
}
/* Missing Layout Utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-10 { z-index: 10; }
.justify-center { justify-content: center; }

/* Background Utilities */
.bg-cover { background-size: cover; }
.bg-center { background-position: center; }
.bg-no-repeat { background-repeat: no-repeat; }

/* Additional positioning utilities */
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-8 { bottom: 2rem; }
.text-center { text-align: center; }

/* Additional bottom positioning */
.bottom-3 { bottom: 0.75rem; }
.bottom-4 { bottom: 1rem; }

.bottom-1 { bottom: 0.25rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }

/* Additional positioning utilities */
.top-6 { top: 1.5rem; }
.right-6 { right: 1.5rem; }
.z-20 { z-index: 20; }
.pb-2 { padding-bottom: 0.5rem; }

/* Essential layout utilities for landing page */
.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }
.max-w-lg { max-width: 32rem; }
.max-w-xs { max-width: 20rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-3 { margin-top: 0.75rem; }
.gap-3 { gap: 0.75rem; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w-auto { width: auto; }
.h-5 { height: 1.25rem; }
.w-5 { width: 1.25rem; }
.p-2 { padding: 0.5rem; }
.opacity-90 { opacity: 0.9; }

/* Itinerary page utilities */
.max-w-4xl { max-width: 56rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-6 { margin-bottom: 1.5rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.font-serif { font-family: 'Playfair Display', serif; }
.font-medium { font-weight: 500; }
.text-gray-900 { color: #111827; }
.text-gray-600 { color: #4b5563; }
.left-6 { left: 1.5rem; }

/* Collapsible details styling */
details summary {
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none;
}
.cursor-pointer { cursor: pointer; }
.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.transition-colors { transition-property: color, background-color, border-color; transition-duration: 150ms; }
.text-gray-700 { color: #374151; }
.bg-gray-50 { background-color: #f9fafb; }
.rounded-2xl { border-radius: 1rem; }
.border-gray-200 { border-color: #e5e7eb; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* Additional utilities for itinerary page */
.justify-end { justify-content: flex-end; }
.shrink-0 { flex-shrink: 0; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.gap-2 { gap: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.flex-wrap { flex-wrap: wrap; }
.select-none { user-select: none; }

/* Prose styling for trip intro */
.prose { max-width: 65ch; }
.prose-lg { font-size: 1.125rem; line-height: 1.75rem; }
.max-w-none { max-width: none; }
.leading-relaxed { line-height: 1.625; }
.mb-10 { margin-bottom: 2.5rem; }

/* Browse & Book section utilities */
.mt-16 { margin-top: 4rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.font-semibold { font-weight: 600; }
.text-gray-600 { color: #4b5563; }
.bg-gray-50 { background-color: #f9fafb; }
.space-y-8 > * + * { margin-top: 2rem; }
.inline-block { display: inline-block; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.bg-indigo-600 { background-color: #4f46e5; }
.text-white { color: #ffffff; }
.hover\:bg-indigo-700:hover { background-color: #4338ca; }

/* View banner utilities */
.bg-indigo-50 { background-color: #eef2ff; }
.border-indigo-200 { border-color: #c7d2fe; }
.text-indigo-900 { color: #312e81; }
.text-indigo-700 { color: #4338ca; }
.p-4 { padding: 1rem; }

/* Hotel selection step utilities */
.max-w-md { max-width: 28rem; }
.text-slate-600 { color: #475569; }
.mt-8 { margin-top: 2rem; }
.mt-6 { margin-top: 1.5rem; }

/* Additional hotel step utilities */
.mb-3 { margin-bottom: 0.75rem; }

/* Pulse animation for CTA button */
@keyframes pulse-slow {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
  50% { transform: scale(1.02); box-shadow: 0 20px 25px -5px rgba(79, 70, 229, 0.3); }
}
.animate-pulse-slow {
  animation: pulse-slow 2s infinite;
}

/* Delay utility for staggered animations */
.delay-300 { transition-delay: 300ms; }
.duration-700 { transition-duration: 700ms; }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.translate-y-full { transform: translateY(100%); }
.translate-y-10 { transform: translateY(2.5rem); }
/* Ensure wizard container has transition property for fade out */
.wizard-container { transition: opacity 0.5s ease; }

/* Custom Scrollbar for Hotel Options */
#hotelOptions::-webkit-scrollbar {
  width: 6px;
}
#hotelOptions::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05); 
  border-radius: 4px;
}
#hotelOptions::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2); 
  border-radius: 4px;
}
#hotelOptions::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3); 
}
/* Prevent body scroll when interim screen is active */
body.modal-open {
  overflow: hidden;
}

/* Utility to lock body scroll */
body.overflow-hidden {
  overflow: hidden !important;
  height: 100vh; 
}