/* ===========================================================
   Delight Trail — project-specific CSS only.
   All Tailwind utilities are loaded from the Play CDN in
   base.html, which guarantees pixel-accurate Tailwind output.
   This file holds only what Tailwind doesn't already give us:
   custom utilities, navbar states, alerts, status pills, etc.
   =========================================================== */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video, canvas, svg { max-width: 100%; }

/* ---------- Custom utilities Lovable's bundle uses ---------- */

.container-px { padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 640px)  { .container-px { padding-left: 2rem;   padding-right: 2rem; } }
@media (min-width: 1024px) { .container-px { padding-left: 3rem;   padding-right: 3rem; } }

.glass-dark {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
}

.hero-overlay {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--ink) 70%, transparent),
    color-mix(in oklab, var(--ink) 35%, transparent),
    color-mix(in oklab, var(--ink) 10%, transparent));
}

.shadow-soft  { box-shadow: 0 10px 40px -12px color-mix(in oklab, var(--ink) 18%, transparent); }
.shadow-float { box-shadow: 0 30px 80px -30px color-mix(in oklab, var(--ink) 35%, transparent); }

.fade-up { animation: fadeUp .7s ease-out both; }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: none; } }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- Navbar transparent / solid states ---------- */

header[data-navbar] .brand-mark {
  background: rgba(255,255,255,.15);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.3);
}
header[data-navbar] .brand-name { color: #ffffff; }
header[data-navbar] .nav-link { color: rgba(255,255,255,.85); transition: color .15s; }
header[data-navbar] .nav-link:hover, header[data-navbar] .nav-link.is-active { color: #ffffff; }
header[data-navbar] .nav-link .nav-underline { background: #ffffff; bottom: -2px; height: 2px; }
header[data-navbar] .nav-toggle-btn { color: #ffffff; }

header[data-navbar].navbar-solid {
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 0 rgba(18,45,50,.06);
}
header[data-navbar].navbar-solid .brand-mark { background: var(--ink); color: #ffffff; border: 0; }
header[data-navbar].navbar-solid .brand-name { color: var(--ink); }
header[data-navbar].navbar-solid .nav-link { color: color-mix(in oklab, var(--ink) 65%, transparent); }
header[data-navbar].navbar-solid .nav-link:hover,
header[data-navbar].navbar-solid .nav-link.is-active { color: var(--ink); }
header[data-navbar].navbar-solid .nav-link .nav-underline { background: var(--ink); bottom: -2px; height: 2px; }
header[data-navbar].navbar-solid .nav-toggle-btn { color: var(--ink); }
header[data-navbar].navbar-solid .user-avatar {
  background: color-mix(in oklab, var(--ink) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 15%, transparent);
}
.nav-link.is-active { font-weight: 600; }
header[data-navbar] a, header[data-navbar] button { cursor: pointer; }

/* ---------- Form controls (native widgets in Lovable's design language) ---------- */

input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="date"],
input[type="search"], select, textarea {
  width: 100%;
  background: color-mix(in oklab, var(--muted) 50%, transparent);
  border-radius: .75rem;
  padding: .625rem 1rem;
  color: var(--ink);
  border: 0;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ink) 30%, transparent);
}
.search-bar input:focus, .search-bar select:focus, .search-bar textarea:focus {
  box-shadow: none;
}

/* OTP input style helper */
input.otp-input {
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: .5em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Status / booking pills ---------- */
.pill {
  display: inline-block;
  padding: .125rem .625rem;
  border-radius: 9999px;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.pill-pending   { background: #fef3c7; color: #92400e; }
.pill-confirmed { background: #dcfce7; color: #166534; }
.pill-cancelled { background: #fee2e2; color: #991b1b; }
.pill-completed { background: #e0e7ff; color: #3730a3; }

/* ---------- Django messages / alerts ---------- */
.alert {
  padding: .75rem 1rem;
  border-radius: .5rem;
  font-size: .9rem;
  border: 1px solid transparent;
}
.alert + .alert { margin-top: .5rem; }
.alert-success { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.alert-error,
.alert-danger  { background: #fef2f2; color: var(--destructive); border-color: #fecaca; }
.alert-info    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.alert-warning { background: #fefce8; color: #a16207; border-color: #fef08a; }
.field-error   { font-size: .75rem; color: var(--destructive); margin-top: .25rem; }

/* ---------- Step dot used by hotel booking + plan-trip wizards ---------- */
.step-dot {
  width: 1.75rem; height: 1.75rem;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 600;
  border: 1px solid var(--border);
  background: #fff; color: var(--muted-foreground);
  flex-shrink: 0;
}
.step-dot.is-current { background: var(--cta); color: var(--cta-foreground); border-color: var(--cta); }
.step-dot.is-done    { background: var(--ink); color: #fff;                 border-color: var(--ink); }

/* ---------- Plan-a-trip page-specific bits (matches Lovable patterns) ---------- */
.pt-step-shell { display: none; }
.pt-step-shell.is-active { display: block; }

.pt-pill {
  padding: .625rem 1.25rem;
  border-radius: 9999px;
  font-size: .875rem;
  font-weight: 500;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  transition: all .15s;
}
.pt-pill:hover { border-color: var(--ink); }
.pt-pill.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.pt-stepper {
  display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in oklab, var(--muted) 40%, transparent);
  border-radius: .75rem;
  padding: .5rem .75rem;
}
.pt-stepper button {
  width: 2rem; height: 2rem;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.pt-stepper button:hover    { border-color: var(--ink); }
.pt-stepper button:disabled { opacity: .4; cursor: not-allowed; }

.pt-interest {
  display: flex; align-items: center; gap: .625rem;
  padding: .875rem 1rem;
  border: 1px solid var(--border);
  border-radius: .875rem;
  background: #fff;
  text-align: left;
  transition: all .15s;
  cursor: pointer;
}
.pt-interest:hover { border-color: var(--ink); }
.pt-interest.is-selected {
  border-color: var(--ink);
  background: color-mix(in oklab, var(--cta) 25%, #fff);
}
.pt-interest .pt-interest-check {
  width: 1.125rem; height: 1.125rem;
  border-radius: 9999px;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: #fff;
}
.pt-interest.is-selected .pt-interest-check {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.pt-interest.is-selected .pt-interest-check svg { display: block; }
.pt-interest .pt-interest-check svg { display: none; width: .75rem; height: .75rem; }

.pt-daytabs { display: flex; gap: .5rem; flex-wrap: wrap; }
.pt-daytab {
  padding: .5rem .9rem;
  border-radius: 9999px;
  font-size: .8rem; font-weight: 600;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted-foreground);
  transition: all .15s;
}
.pt-daytab:hover     { color: var(--ink); border-color: var(--ink); }
.pt-daytab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pt-daytab.is-done   {
  background: color-mix(in oklab, var(--cta) 25%, #fff);
  color: var(--ink); border-color: var(--cta);
}

.pt-slot { border: 1px solid var(--border); border-radius: 1rem; background: #fff; overflow: hidden; }
.pt-slot-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .875rem 1.125rem;
  background: color-mix(in oklab, var(--muted) 40%, transparent);
}
.pt-slot-body { padding: 1rem 1.125rem; }
.pt-slot-empty {
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  border: 1.5px dashed var(--border);
  border-radius: .75rem;
  font-size: .875rem;
  color: var(--muted-foreground);
}

.pt-place-row {
  display: flex; gap: .75rem; align-items: center;
  padding: .625rem; border-radius: .75rem;
  background: color-mix(in oklab, var(--muted) 40%, transparent);
}
.pt-place-row + .pt-place-row { margin-top: .5rem; }
.pt-place-row img {
  width: 3.5rem; height: 3.5rem;
  border-radius: .5rem; object-fit: cover; flex-shrink: 0;
}
.pt-place-row .pt-place-name { font-weight: 600; color: var(--ink); font-size: .92rem; line-height: 1.3; }
.pt-place-row .pt-place-meta { font-size: .75rem; color: var(--muted-foreground); margin-top: .125rem; }
.pt-place-row button { padding: .375rem; border-radius: .5rem; color: var(--muted-foreground); }
.pt-place-row button:hover { color: var(--destructive); background: #fff; }

.pt-place-card {
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: all .15s;
}
.pt-place-card:hover {
  border-color: var(--ink);
  box-shadow: 0 10px 40px -12px color-mix(in oklab, var(--ink) 18%, transparent);
}
.pt-place-card .pt-place-img { aspect-ratio: 4/3; overflow: hidden; }
.pt-place-card .pt-place-img img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .5s;
}
.pt-place-card:hover .pt-place-img img { transform: scale(1.05); }

.pt-drawer { position: fixed; inset: 0; background: rgba(20,32,36,.55); z-index: 60; display: none; }
.pt-drawer.is-open { display: block; }
.pt-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 540px;
  background: #fff;
  display: flex; flex-direction: column;
}
.pt-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.pt-drawer-body { padding: 1.25rem; overflow-y: auto; flex: 1; }

.pt-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff;
  padding: .75rem 1.25rem; border-radius: 9999px;
  font-size: .875rem; font-weight: 500;
  z-index: 80;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.4);
  display: none;
}
.pt-toast.is-open { display: block; animation: fadeUp .3s ease; }

/* ---------- Tab buttons (used by My Bookings) ---------- */
.tab-btn { border-color: transparent; color: var(--muted-foreground); }
.tab-btn:hover { color: var(--ink); }
.tab-btn.is-active { border-color: var(--ink); color: var(--ink); }

/* ---------- Star rating widget (add review) ---------- */
.star-rating { display: flex; gap: 6px; font-size: 2rem; color: #d4d4d4; }
.star-rating .star {
  cursor: pointer;
  transition: color .15s, transform .15s;
  user-select: none;
}
.star-rating .star.filled { color: var(--cta); }
.star-rating .star:hover  { transform: scale(1.1); }

/* ---------- Footer link helper ---------- */
.footer-col-link {
  color: rgba(255,255,255,.7);
  font-size: .875rem;
  display: block;
  padding: .125rem 0;
  transition: color .15s;
}
.footer-col-link:hover { color: #ffffff; }

input.no-spin::-webkit-inner-spin-button,
input.no-spin::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input.no-spin { -moz-appearance: textfield; appearance: textfield; }