/* TripWise – Public Styles */
:root {
  --tw-primary:    #1a6b4a;
  --tw-primary-dk: #134d36;
  --tw-accent:     #f59e0b;
  --tw-text:       #1f2937;
  --tw-muted:      #6b7280;
  --tw-border:     #e5e7eb;
  --tw-bg:         #f9fafb;
  --tw-white:      #ffffff;
  --tw-red:        #dc2626;
  --tw-green:      #16a34a;
  --tw-radius:     8px;
  --tw-shadow:     0 2px 12px rgba(0,0,0,.10);
  --tw-shadow-lg:  0 8px 32px rgba(0,0,0,.14);
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
.tw-wrap *, .tw-wrap *::before, .tw-wrap *::after { box-sizing: border-box; }
.tw-wrap { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--tw-text); }

/* ── Hero ───────────────────────────────────────────────────────────────────── */
.tw-hero {
  position: relative;
  min-height: 420px;
  background: linear-gradient(135deg, var(--tw-primary-dk), #2d6a4f);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}
.tw-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 60%, transparent 100%);
  display: flex; align-items: flex-end;
  width: 100%;
}
.tw-hero__inner {
  padding: 40px 32px;
  max-width: 860px;
  width: 100%;
}
.tw-breadcrumb { color: rgba(255,255,255,.75); font-size: 13px; margin-bottom: 10px; }
.tw-breadcrumb a { color: rgba(255,255,255,.85); text-decoration: none; }
.tw-breadcrumb a:hover { color: #fff; }
.tw-hero__title { color: #fff; font-size: clamp(26px, 4vw, 44px); font-weight: 700; margin: 0 0 12px; line-height: 1.2; }
.tw-hero__meta { display: flex; flex-wrap: wrap; gap: 12px; }
.tw-hero__meta span {
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
  color: #fff;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 13px;
}

/* ── Layout ─────────────────────────────────────────────────────────────────── */
.tw-content-wrap {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 20px 60px;
  align-items: start;
}
@media (max-width: 900px) {
  .tw-content-wrap { grid-template-columns: 1fr; }
  .tw-sidebar { order: -1; }
}

/* ── Tabs ───────────────────────────────────────────────────────────────────── */
.tw-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--tw-border);
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.tw-tab {
  background: none;
  border: none;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tw-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .2s, border-color .2s;
}
.tw-tab:hover { color: var(--tw-primary); }
.tw-tab.active { color: var(--tw-primary); border-bottom-color: var(--tw-primary); }
.tw-tab-panel { display: none; }
.tw-tab-panel.active { display: block; }

/* ── Quick Facts ────────────────────────────────────────────────────────────── */
.tw-quick-facts {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 24px;
  padding: 18px;
  background: var(--tw-bg);
  border-radius: var(--tw-radius);
  border: 1px solid var(--tw-border);
}
.tw-fact { display: flex; flex-direction: column; min-width: 100px; }
.tw-fact__label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tw-muted); }
.tw-fact__value { font-weight: 600; font-size: 15px; margin-top: 2px; }

.tw-description { line-height: 1.75; font-size: 15px; }
.tw-description p { margin-bottom: 16px; }

/* ── Itinerary ──────────────────────────────────────────────────────────────── */
.tw-itinerary { position: relative; }
.tw-itinerary::before {
  content: '';
  position: absolute; left: 19px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--tw-primary), transparent);
}
.tw-itinerary__day {
  display: flex; gap: 20px; margin-bottom: 28px; position: relative;
}
.tw-itinerary__dot {
  flex-shrink: 0;
  width: 40px; height: 40px;
  background: var(--tw-primary);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--tw-primary);
  z-index: 1;
}
.tw-itinerary__content {
  flex: 1;
  background: #fff;
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
  padding: 18px 20px;
  box-shadow: var(--tw-shadow);
}
.tw-itinerary__content h3 { margin: 0 0 8px; font-size: 16px; color: var(--tw-primary-dk); }
.tw-itinerary__loc { color: var(--tw-muted); font-size: 13px; margin: 0 0 8px; }
.tw-itinerary__extras { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.tw-itinerary__extras span { font-size: 13px; color: var(--tw-muted); background: var(--tw-bg); padding: 3px 10px; border-radius: 20px; }

/* ── Inclusions ─────────────────────────────────────────────────────────────── */
.tw-inclusions { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 600px) { .tw-inclusions { grid-template-columns: 1fr; } }
.tw-included, .tw-excluded { padding: 20px; border-radius: var(--tw-radius); }
.tw-included { background: #f0fdf4; border: 1px solid #bbf7d0; }
.tw-excluded { background: #fef2f2; border: 1px solid #fecaca; }
.tw-included h3 { color: var(--tw-green); margin: 0 0 12px; font-size: 15px; }
.tw-excluded h3 { color: var(--tw-red); margin: 0 0 12px; font-size: 15px; }
.tw-included ul, .tw-excluded ul { margin: 0; padding: 0 0 0 18px; }
.tw-included li, .tw-excluded li { font-size: 14px; margin-bottom: 6px; }

/* ── Gallery ────────────────────────────────────────────────────────────────── */
.tw-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.tw-gallery__item { display: block; border-radius: var(--tw-radius); overflow: hidden; aspect-ratio: 4/3; }
.tw-gallery__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.tw-gallery__item:hover .tw-gallery__img { transform: scale(1.05); }

/* ── Map ────────────────────────────────────────────────────────────────────── */
#tw-map { border-radius: var(--tw-radius); overflow: hidden; border: 1px solid var(--tw-border); }

/* ── Booking Card ───────────────────────────────────────────────────────────── */
.tw-sidebar { position: sticky; top: 80px; }
.tw-booking-card {
  background: #fff;
  border: 1px solid var(--tw-border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--tw-shadow-lg);
}
.tw-price-display { margin-bottom: 16px; }
.tw-price { font-size: 26px; font-weight: 800; color: var(--tw-primary-dk); }
.tw-price--sale { color: var(--tw-red); }
.tw-price--strike { text-decoration: line-through; color: var(--tw-muted); font-size: 16px; font-weight: 400; margin-left: 8px; }
.tw-price small { font-size: 13px; font-weight: 400; color: var(--tw-muted); }

/* ── Availability Calendar ──────────────────────────────────────────────────── */
.tw-avail-calendar { margin-bottom: 20px; }
.tw-avail-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.tw-avail-prev, .tw-avail-next {
  background: var(--tw-bg); border: 1px solid var(--tw-border);
  border-radius: 6px; width: 30px; height: 30px; cursor: pointer;
  font-size: 16px; line-height: 1;
}
.tw-avail-month-label { font-weight: 600; font-size: 14px; }
.tw-avail-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
  font-size: 12px; text-align: center;
}
.tw-avail-grid .tw-cal-header { font-weight: 600; color: var(--tw-muted); padding: 4px 0; }
.tw-cal-day {
  padding: 5px 2px; border-radius: 5px; cursor: pointer;
  border: 1px solid transparent; transition: all .15s;
}
.tw-cal-day.open { background: #f0fdf4; color: var(--tw-green); }
.tw-cal-day.open:hover { border-color: var(--tw-green); }
.tw-cal-day.soldout { background: #fef2f2; color: var(--tw-red); cursor: not-allowed; }
.tw-cal-day.closed { background: var(--tw-bg); color: var(--tw-muted); text-decoration: line-through; cursor: not-allowed; }
.tw-cal-day.past { opacity: .35; cursor: not-allowed; }
.tw-cal-day.selected { background: var(--tw-primary); color: #fff; border-color: var(--tw-primary-dk); }
.tw-cal-day.empty { background: transparent; border: none; cursor: default; }

/* ── Booking Form ───────────────────────────────────────────────────────────── */
.tw-booking-form .tw-form-row { margin-bottom: 14px; }
.tw-booking-form label {
  display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--tw-text);
}
.tw-required { color: var(--tw-red); }
.tw-booking-form input[type="text"],
.tw-booking-form input[type="email"],
.tw-booking-form input[type="tel"],
.tw-booking-form input[type="date"],
.tw-booking-form input[type="number"],
.tw-booking-form select,
.tw-booking-form textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--tw-border); border-radius: var(--tw-radius);
  font-size: 14px; outline: none; transition: border-color .2s;
  background: #fff;
}
.tw-booking-form input:focus,
.tw-booking-form select:focus,
.tw-booking-form textarea:focus { border-color: var(--tw-primary); box-shadow: 0 0 0 3px rgba(26,107,74,.1); }

/* Price summary */
.tw-price-summary {
  background: var(--tw-bg); border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius); padding: 12px 14px; margin-bottom: 14px;
}
.tw-price-summary__row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 4px; }
.tw-price-summary__total { border-top: 1px solid var(--tw-border); padding-top: 8px; margin-top: 6px; font-size: 15px; }

/* Payment methods */
.tw-payment-methods { display: flex; flex-direction: column; gap: 8px; }
.tw-payment-option { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tw-payment-option input { width: auto; }
.tw-payment-label { font-size: 14px; font-weight: 400; }

/* Buttons */
.tw-btn {
  display: inline-block; padding: 12px 24px; border: none; border-radius: var(--tw-radius);
  font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: background .2s, transform .1s; text-align: center;
}
.tw-btn--book {
  width: 100%; background: var(--tw-primary); color: #fff;
  margin-top: 4px; font-size: 16px; padding: 14px;
}
.tw-btn--book:hover { background: var(--tw-primary-dk); transform: translateY(-1px); }
.tw-form-disclaimer { font-size: 11px; color: var(--tw-muted); text-align: center; margin-top: 8px; }

/* ── Notices ────────────────────────────────────────────────────────────────── */
.tw-notice {
  padding: 12px 16px; border-radius: var(--tw-radius); margin-bottom: 16px;
  font-size: 14px; font-weight: 500;
}
.tw-notice--error   { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.tw-notice--warning { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.tw-notice--success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }

/* ── Search Page ────────────────────────────────────────────────────────────── */
.tw-search-wrap { max-width: 1180px; margin: 0 auto; padding: 36px 20px; }
.tw-search-bar {
  background: #fff; border: 1px solid var(--tw-border);
  border-radius: 12px; padding: 20px 24px; margin-bottom: 28px;
  box-shadow: var(--tw-shadow);
}
.tw-search-bar h2 { margin: 0 0 16px; font-size: 18px; }
.tw-filter-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; align-items: end;
}
.tw-filter-grid .tw-filter-group label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--tw-muted); text-transform: uppercase; letter-spacing: .05em; }
.tw-filter-grid input,
.tw-filter-grid select { width: 100%; padding: 9px 12px; border: 1px solid var(--tw-border); border-radius: var(--tw-radius); font-size: 14px; }
.tw-search-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.tw-btn--search { background: var(--tw-primary); color: #fff; }
.tw-btn--search:hover { background: var(--tw-primary-dk); }
.tw-btn--reset { background: var(--tw-bg); color: var(--tw-text); border: 1px solid var(--tw-border); }
.tw-btn--reset:hover { background: var(--tw-border); }

.tw-results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.tw-results-count { font-size: 14px; color: var(--tw-muted); }
.tw-sort-select { padding: 7px 10px; border: 1px solid var(--tw-border); border-radius: var(--tw-radius); font-size: 14px; }

.tw-trip-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px;
}
.tw-trip-card {
  background: #fff; border: 1px solid var(--tw-border); border-radius: 12px;
  overflow: hidden; box-shadow: var(--tw-shadow); transition: transform .2s, box-shadow .2s;
  display: flex; flex-direction: column;
}
.tw-trip-card:hover { transform: translateY(-4px); box-shadow: var(--tw-shadow-lg); }
.tw-card-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--tw-bg); }
.tw-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tw-card-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--tw-border); }
.tw-card-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--tw-accent); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 20px;
}
.tw-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.tw-card-title { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.tw-card-title a { text-decoration: none; color: var(--tw-text); }
.tw-card-title a:hover { color: var(--tw-primary); }
.tw-card-dest { font-size: 13px; color: var(--tw-muted); margin-bottom: 10px; }
.tw-card-excerpt { font-size: 14px; color: var(--tw-muted); line-height: 1.6; flex: 1; }
.tw-card-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--tw-border);
}
.tw-card-price { font-size: 18px; font-weight: 800; color: var(--tw-primary-dk); }
.tw-card-price small { font-size: 12px; font-weight: 400; color: var(--tw-muted); }
.tw-card-duration { font-size: 12px; color: var(--tw-muted); background: var(--tw-bg); padding: 4px 10px; border-radius: 20px; }
.tw-card-cta { display: inline-block; background: var(--tw-primary); color: #fff; padding: 8px 16px; border-radius: var(--tw-radius); font-size: 13px; font-weight: 600; text-decoration: none; }
.tw-card-cta:hover { background: var(--tw-primary-dk); color: #fff; }

.tw-no-results { text-align: center; padding: 60px 20px; color: var(--tw-muted); }
.tw-no-results .tw-no-results-icon { font-size: 48px; margin-bottom: 16px; }
.tw-loading { text-align: center; padding: 40px; color: var(--tw-muted); }
.tw-spinner { display: inline-block; width: 36px; height: 36px; border: 3px solid var(--tw-border); border-top-color: var(--tw-primary); border-radius: 50%; animation: tw-spin .7s linear infinite; }
@keyframes tw-spin { to { transform: rotate(360deg); } }

.tw-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 36px; flex-wrap: wrap; }
.tw-page-btn {
  padding: 8px 14px; border: 1px solid var(--tw-border); border-radius: var(--tw-radius);
  background: #fff; font-size: 14px; cursor: pointer;
}
.tw-page-btn.active { background: var(--tw-primary); color: #fff; border-color: var(--tw-primary); }
.tw-page-btn:hover:not(.active) { background: var(--tw-bg); }

/* ── Confirmation Page ──────────────────────────────────────────────────────── */
.tw-confirmation {
  max-width: 640px; margin: 48px auto; padding: 0 20px;
}
.tw-confirmation__header {
  text-align: center; margin-bottom: 32px;
}
.tw-confirmation__icon { font-size: 60px; display: block; margin-bottom: 16px; }
.tw-confirmation__header h1 { font-size: 28px; color: var(--tw-primary-dk); margin: 0 0 8px; }
.tw-confirmation__ref { font-size: 13px; color: var(--tw-muted); }
.tw-confirmation__ref strong { color: var(--tw-text); font-size: 15px; }
.tw-confirmation__card {
  background: #fff; border: 1px solid var(--tw-border);
  border-radius: 12px; padding: 24px; box-shadow: var(--tw-shadow);
}
.tw-confirmation__row {
  display: flex; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--tw-border); font-size: 14px;
}
.tw-confirmation__row:last-child { border-bottom: none; }
.tw-confirmation__row dt { color: var(--tw-muted); }
.tw-confirmation__row dd { font-weight: 600; margin: 0; }
.tw-confirmation__actions { text-align: center; margin-top: 24px; }
.tw-status-badge {
  display: inline-block; padding: 3px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.tw-status-confirmed { background: #f0fdf4; color: var(--tw-green); }
.tw-status-pending   { background: #fffbeb; color: #b45309; }
.tw-status-cancelled { background: #fef2f2; color: var(--tw-red); }
.tw-status-completed { background: #eff6ff; color: #1d4ed8; }

/* ── My Bookings ────────────────────────────────────────────────────────────── */
.tw-my-bookings { max-width: 860px; margin: 0 auto; padding: 36px 20px; }
.tw-my-bookings h2 { margin-bottom: 24px; }
.tw-bookings-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tw-bookings-table th { text-align: left; padding: 10px 12px; background: var(--tw-bg); border-bottom: 2px solid var(--tw-border); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--tw-muted); }
.tw-bookings-table td { padding: 12px; border-bottom: 1px solid var(--tw-border); vertical-align: middle; }
.tw-bookings-table tr:hover td { background: var(--tw-bg); }

/* ── Archive ────────────────────────────────────────────────────────────────── */
.tw-archive-wrap { max-width: 1180px; margin: 0 auto; padding: 48px 20px; }
.tw-archive-wrap h1 { font-size: 32px; margin-bottom: 32px; }

/* ── Promo Code Field ───────────────────────────────────────────────────────── */
.tw-promo-input-wrap { display: flex; gap: 8px; }
.tw-promo-input-wrap input { flex: 1; }
.tw-btn--apply { background: var(--tw-bg); border: 1px solid var(--tw-border); color: var(--tw-text); padding: 9px 14px; white-space: nowrap; }
.tw-btn--apply:hover { background: var(--tw-border); }
#tw-promo-feedback.success { color: var(--tw-green); font-weight: 600; }
#tw-promo-feedback.error   { color: var(--tw-red); }
.tw-discount-row { color: var(--tw-green); font-weight: 600; }
.tw-hero__meta-pdf {
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
  color: #fff; padding: 5px 12px; border-radius: 20px; font-size: 13px;
  text-decoration: none;
}
.tw-hero__meta-pdf:hover { background: rgba(255,255,255,.32); color: #fff; }

/* ── Vendor Dashboard ───────────────────────────────────────────────────────── */
.tw-vdash { max-width: 1100px; margin: 0 auto; padding: 32px 20px 60px; }
.tw-vdash__topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.tw-vdash__welcome { display: flex; align-items: center; gap: 14px; }
.tw-vdash__avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--tw-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; flex-shrink: 0;
}
.tw-vdash__name { font-size: 18px; font-weight: 700; }
.tw-vdash__role { font-size: 13px; color: var(--tw-muted); display: flex; align-items: center; gap: 6px; margin-top: 2px; }

.tw-vdash__nav {
  display: flex; gap: 4px; border-bottom: 2px solid var(--tw-border);
  margin-bottom: 28px; flex-wrap: wrap;
}
.tw-vdash__nav-item {
  padding: 10px 18px; font-size: 14px; font-weight: 600;
  color: var(--tw-muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .2s, border-color .2s;
  display: flex; align-items: center; gap: 6px;
}
.tw-vdash__nav-item:hover { color: var(--tw-primary); }
.tw-vdash__nav-item--active { color: var(--tw-primary); border-bottom-color: var(--tw-primary); }
.tw-vdash__badge {
  background: var(--tw-accent); color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 9px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 4px;
}
.tw-vdash__body { min-height: 300px; }