/* ==========================================================================
   THUI — Components  (production BEM classes; server-renderable, no JS required
   except the booking engine's adaptive fields, enhanced by thui.js)
   ========================================================================== */

/* ---------- Layout: container / section / grid ---------- */
.thui-container { max-inline-size: var(--thui-container); margin-inline: auto; padding-inline: var(--thui-gutter); }
.thui-container--wide { max-inline-size: var(--thui-container-wide); }

.thui-section { padding-block: var(--thui-space-8); }
.thui-section--tight { padding-block: var(--thui-space-6); }
.thui-section__head { margin-block-end: var(--thui-space-6); }
.thui-section__eyebrow {
  font-weight: var(--thui-fw-extrabold); letter-spacing: .14em; text-transform: uppercase;
  font-size: var(--thui-fs-xs); color: var(--thui-color-primary); display: inline-flex; align-items: center; gap: .5rem;
}
.thui-section__eyebrow::before { content: ""; inline-size: 24px; block-size: 2px; background: var(--thui-color-accent); border-radius: 2px; }
.thui-section__title { font-size: var(--thui-fs-3xl); margin-block-start: .5rem; }
.thui-section__sub { color: var(--thui-color-text-muted); margin-block-start: .5rem; max-inline-size: 46ch; }

.thui-grid { display: grid; gap: var(--thui-space-5); }
.thui-grid--2 { grid-template-columns: repeat(2, 1fr); }
.thui-grid--3 { grid-template-columns: repeat(3, 1fr); }
.thui-grid--4 { grid-template-columns: repeat(4, 1fr); }
.thui-grid--auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-width: 900px) { .thui-grid--4, .thui-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .thui-grid--2, .thui-grid--3, .thui-grid--4 { grid-template-columns: 1fr; } }

/* ---------- Button ---------- */
.thui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--thui-font-sans); font-weight: var(--thui-fw-bold); font-size: var(--thui-fs-base);
  line-height: 1; text-align: center; cursor: pointer; user-select: none;
  padding: .85em 1.4em; border-radius: var(--thui-radius-md); border: 1.5px solid transparent;
  transition: transform var(--thui-dur-fast) var(--thui-ease), box-shadow var(--thui-dur) var(--thui-ease), background var(--thui-dur-fast) var(--thui-ease);
  min-block-size: 44px; /* mobile tap target */
}
.thui-btn:hover { transform: translateY(-1px); }
.thui-btn:active { transform: translateY(0); }
.thui-btn[disabled], .thui-btn--loading { opacity: .6; pointer-events: none; }
.thui-btn__spinner { inline-size: 1em; block-size: 1em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: thui-spin .7s linear infinite; display: none; }
.thui-btn--loading .thui-btn__spinner { display: inline-block; }
@keyframes thui-spin { to { transform: rotate(360deg); } }

.thui-btn--primary { background: var(--thui-color-accent); color: var(--thui-color-accent-ink); box-shadow: 0 12px 26px -12px rgba(244,163,29,.7); }
.thui-btn--primary:hover { background: #dc8e0c; }
.thui-btn--secondary { background: var(--thui-color-primary); color: #fff; }
.thui-btn--secondary:hover { background: var(--thui-color-primary-ink); }
.thui-btn--ghost { background: var(--thui-color-surface); color: var(--thui-color-ink); border-color: var(--thui-color-border); }
.thui-btn--ghost:hover { border-color: var(--thui-color-primary); }
.thui-btn--whatsapp { background: var(--thui-color-whatsapp); color: #fff; }
.thui-btn--block { display: flex; inline-size: 100%; }
.thui-btn--sm { padding: .55em 1em; min-block-size: 38px; font-size: var(--thui-fs-sm); }
.thui-btn--lg { padding: 1em 1.7em; font-size: var(--thui-fs-md); }

/* ---------- Badge ---------- */
.thui-badge {
  display: inline-flex; align-items: center; gap: .35rem; font-size: var(--thui-fs-xs); font-weight: var(--thui-fw-bold);
  padding: .3em .7em; border-radius: var(--thui-radius-full); background: var(--thui-n-100); color: var(--thui-color-text);
  line-height: 1;
}
.thui-badge--accent { background: var(--thui-color-accent); color: var(--thui-color-accent-ink); }
.thui-badge--primary { background: color-mix(in srgb, var(--thui-color-primary) 15%, #fff); color: var(--thui-color-primary-ink); }
.thui-badge--success { background: color-mix(in srgb, var(--thui-color-success) 16%, #fff); color: #0b6b34; }
.thui-badge--outline { background: transparent; border: 1px solid var(--thui-color-border); color: var(--thui-color-text-muted); }

/* ---------- Card (base) ---------- */
.thui-card {
  background: var(--thui-color-surface); border: 1px solid var(--thui-color-border); border-radius: var(--thui-radius-lg);
  box-shadow: var(--thui-shadow-sm); overflow: clip; transition: transform var(--thui-dur) var(--thui-ease), box-shadow var(--thui-dur) var(--thui-ease);
  display: flex; flex-direction: column;
}
.thui-card--interactive:hover { transform: translateY(-4px); box-shadow: var(--thui-shadow-md); }
.thui-card__media { position: relative; aspect-ratio: 16/10; background: var(--thui-n-100); overflow: clip; }
.thui-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--thui-dur-slow) var(--thui-ease); }
.thui-card--interactive:hover .thui-card__media img { transform: scale(1.05); }
.thui-card__body { padding: var(--thui-space-4); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.thui-card__title { font-family: var(--thui-font-display); font-size: var(--thui-fs-lg); color: var(--thui-color-ink); }
.thui-card__meta { font-size: var(--thui-fs-sm); color: var(--thui-color-text-muted); display: flex; align-items: center; gap: .4rem; }
.thui-card__foot { margin-block-start: auto; display: flex; align-items: flex-end; justify-content: space-between; padding-block-start: .5rem; }
.thui-card__price b { font-family: var(--thui-font-display); font-size: var(--thui-fs-xl); color: var(--thui-color-ink); }
.thui-card__price small { display: block; font-size: var(--thui-fs-xs); color: var(--thui-color-text-muted); }
/* skeleton / empty states */
.thui-card--loading .thui-card__media, .thui-card--loading .thui-card__title { background: linear-gradient(90deg,var(--thui-n-100),var(--thui-n-200),var(--thui-n-100)); background-size: 200% 100%; animation: thui-shimmer 1.2s infinite; color: transparent; border-radius: var(--thui-radius-sm); min-block-size: 1em; }
@keyframes thui-shimmer { to { background-position: -200% 0; } }

/* ---------- Hero ---------- */
.thui-hero { position: relative; border-radius: var(--thui-radius-xl); overflow: clip; color: #fff; isolation: isolate; }
.thui-hero__bg { position: absolute; inset: 0; z-index: -2; background: linear-gradient(135deg, var(--thui-color-primary), var(--thui-navy) 70%); }
.thui-hero__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.thui-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,38,58,.15), rgba(12,23,15,.7)); }
.thui-hero__body { padding: clamp(1.5rem, 4vw, 3rem); max-inline-size: 42rem; }
.thui-hero__eyebrow { font-weight: var(--thui-fw-extrabold); letter-spacing: .14em; text-transform: uppercase; font-size: var(--thui-fs-xs); color: var(--thui-yellow); }
.thui-hero__title { color: #fff; font-size: var(--thui-fs-hero); margin-block: .5rem .75rem; }
.thui-hero__lede { color: rgba(255,255,255,.9); font-size: var(--thui-fs-md); max-inline-size: 34ch; }
.thui-hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }
.thui-hero__price { display: flex; align-items: baseline; gap: .5rem; margin-block: 1rem; }
.thui-hero__price b { font-family: var(--thui-font-display); font-size: var(--thui-fs-3xl); color: #fff; }
.thui-hero__price span { color: rgba(255,255,255,.8); font-size: var(--thui-fs-sm); }
.thui-hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ---------- Booking Engine (shell) — consumes Core BookingContext/FieldRules ---------- */
.thui-booking { background: var(--thui-color-surface); border: 1px solid var(--thui-color-border); border-radius: var(--thui-radius-lg); box-shadow: var(--thui-shadow-md); overflow: clip; }
.thui-booking__head { background: linear-gradient(135deg, var(--thui-color-primary-ink), var(--thui-color-primary)); color: #fff; padding: var(--thui-space-4) var(--thui-space-5); }
.thui-booking__head .lbl { font-size: var(--thui-fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--thui-yellow); }
.thui-booking__head .price { display: flex; align-items: baseline; gap: .5rem; }
.thui-booking__head .price b { font-family: var(--thui-font-display); font-size: var(--thui-fs-2xl); }
.thui-booking__body { padding: var(--thui-space-5); }
.thui-booking__journey { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; background: var(--thui-n-100); border-radius: var(--thui-radius-md); padding: .3rem; margin-block-end: var(--thui-space-4); }
.thui-booking__journey button { border: 0; background: none; font: inherit; font-weight: var(--thui-fw-bold); font-size: var(--thui-fs-sm); color: var(--thui-color-text-muted); padding: .6rem; border-radius: var(--thui-radius-sm); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.thui-booking__journey button[aria-pressed="true"] { background: var(--thui-color-accent); color: var(--thui-color-accent-ink); }
.thui-booking__field { margin-block-end: var(--thui-space-3); }
.thui-booking__field label { display: block; font-size: var(--thui-fs-xs); font-weight: var(--thui-fw-bold); color: var(--thui-color-ink); margin-block-end: .3rem; }
.thui-booking__field label .req { color: var(--thui-color-accent); }
.thui-booking__field input, .thui-booking__field select {
  inline-size: 100%; padding: .7rem .8rem; border: 1.5px solid var(--thui-color-border); border-radius: var(--thui-radius-sm);
  font: inherit; font-size: var(--thui-fs-base); color: var(--thui-color-ink); background: var(--thui-color-surface);
}
.thui-booking__field input:focus, .thui-booking__field select:focus { border-color: var(--thui-color-primary); outline: none; }
.thui-booking__field[hidden] { display: none; }         /* adaptive fields toggled by thui.js */
.thui-booking__note { font-size: var(--thui-fs-xs); color: var(--thui-color-primary-ink); background: color-mix(in srgb, var(--thui-color-primary) 8%, #fff); border-radius: var(--thui-radius-sm); padding: .55rem .7rem; margin-block-end: var(--thui-space-3); }
.thui-booking__total { display: flex; align-items: center; justify-content: space-between; padding-block: var(--thui-space-3); border-block: 1px solid var(--thui-color-border); margin-block: .5rem var(--thui-space-3); }
.thui-booking__total b { font-family: var(--thui-font-display); font-size: var(--thui-fs-xl); color: var(--thui-color-ink); }
@media (max-width: 980px) { .thui-booking { border-radius: var(--thui-radius-lg) var(--thui-radius-lg) 0 0; } }

/* ---------- Vehicle card ---------- */
.thui-vehicle { position: relative; border: 1.5px solid var(--thui-color-border); border-radius: var(--thui-radius-md); padding: var(--thui-space-4); background: var(--thui-color-surface); cursor: pointer; transition: border-color var(--thui-dur-fast) var(--thui-ease), box-shadow var(--thui-dur) var(--thui-ease); display: flex; flex-direction: column; gap: .5rem; }
.thui-vehicle:hover { border-color: color-mix(in srgb, var(--thui-color-accent) 55%, #fff); }
.thui-vehicle[aria-selected="true"] { border-color: var(--thui-color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--thui-color-accent) 22%, transparent); }
.thui-vehicle__tag { position: absolute; inset-block-start: -11px; inset-inline-start: 16px; background: var(--thui-color-accent); color: var(--thui-color-accent-ink); font-size: var(--thui-fs-xs); font-weight: var(--thui-fw-extrabold); padding: .25em .7em; border-radius: var(--thui-radius-full); text-transform: uppercase; }
.thui-vehicle__name { font-weight: var(--thui-fw-bold); color: var(--thui-color-ink); }
.thui-vehicle__cap { display: flex; gap: 1rem; font-size: var(--thui-fs-sm); color: var(--thui-color-text-muted); }
.thui-vehicle__foot { display: flex; align-items: flex-end; justify-content: space-between; margin-block-start: auto; }
.thui-vehicle__price { font-family: var(--thui-font-display); font-weight: var(--thui-fw-bold); font-size: var(--thui-fs-lg); color: var(--thui-color-ink); }
.thui-vehicle__price small { font-family: var(--thui-font-sans); font-size: var(--thui-fs-xs); font-weight: var(--thui-fw-normal); color: var(--thui-color-text-muted); }

/* ---------- Hotel card & Tour card (variants of thui-card) ---------- */
.thui-hotel .thui-card__stars { color: var(--thui-color-accent); letter-spacing: 2px; font-size: var(--thui-fs-sm); }
.thui-hotel .thui-card__loc, .thui-tour .thui-card__loc { font-size: var(--thui-fs-sm); color: var(--thui-color-text-muted); display: flex; align-items: center; gap: .3rem; }
.thui-tour .thui-card__rate { display: flex; align-items: center; gap: .4rem; font-size: var(--thui-fs-sm); color: var(--thui-color-text-muted); }
.thui-tour .thui-card__rate .stars { color: var(--thui-color-accent); letter-spacing: 1px; }
.thui-card__fav { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; inline-size: 32px; block-size: 32px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; color: var(--thui-magenta); border: 0; cursor: pointer; }
.thui-card__ribbon { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; background: var(--thui-color-accent); color: var(--thui-color-accent-ink); font-size: var(--thui-fs-xs); font-weight: var(--thui-fw-extrabold); padding: .25em .7em; border-radius: var(--thui-radius-full); }
.thui-card__dur { position: absolute; inset-block-end: 10px; inset-inline-start: 10px; background: rgba(18,38,58,.55); color: #fff; font-size: var(--thui-fs-xs); font-weight: var(--thui-fw-semibold); padding: .2em .6em; border-radius: var(--thui-radius-full); }


/* Detail layout - shared two-column (content + sticky booking), composed by every vertical. */
.thui-detail-grid { display: grid; grid-template-columns: 1fr 380px; gap: var(--thui-space-7); align-items: start; }
.thui-booking-column { position: sticky; top: 92px; }
@media (max-width: 980px) {
  .thui-detail-grid { grid-template-columns: 1fr; }
  .thui-booking-column { position: static; }
}