/* ============================================================
   INQUIRY / RESERVE — inquiry.css
   Live-replica layer for luxuri.com/inquiry (reached from a
   property's Reserve button or a car's Request Information).

   Measured on the live page (Chrome, 1440x1000 and 390x844):
     page   : bg-zinc-950 pt-24 pb-12  -> 96px / 48px
     wrap   : max-w-6xl (1152) + px-4 / sm:px-6 / lg:px-8
     back   : inline-flex gap-2 zinc-400 mb-8, 20px chevron icon
     grid   : 1 / lg:2 cols, gap-8 / lg:gap-12  -> 520px each
     card   : bg-zinc-900 rounded-xl p-8
     h1     : Mulish 32/38.4 700 ls.8 zinc-100, mb-8
     fields : space-y-6; label 14/20 500 zinc-300 mb-2;
              control px-4 py-3, bg black/50, border zinc-700,
              radius 8, 16/24 zinc-100, placeholder zinc-500
     submit : w-full white/black 16/24 600, py-3 px-6, radius 8
     right  : sticky top-24; image h-64 radius 8 mb-6 with a
              white pill badge at top-4 left-4 (14/20 500);
              h2 Mulish 24/32 700 ls.6; address 16/24 300 zinc-400
   ============================================================ */

.inquiry-page {
  background: var(--black);
  padding: 96px 0 48px;         /* live pt-24 pb-12 */
  min-height: 100vh;
}
.inquiry-wrap {
  width: 100%;
  max-width: 1152px;            /* live max-w-6xl */
  margin: 0 auto;
  padding: 0 16px;              /* live px-4 */
}
@media (min-width: 640px)  { .inquiry-wrap { padding: 0 24px; } }   /* sm:px-6 */
@media (min-width: 1024px) { .inquiry-wrap { padding: 0 32px; } }   /* lg:px-8 */

/* ── BACK LINK ────────────────────────────────────────────── */
.inquiry-head { margin: 0; }
.inquiry-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;                     /* live gap-2 */
  margin-bottom: 32px;          /* live mb-8 */
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: var(--lx-zinc-400);    /* live text-zinc-400 */
  text-decoration: none;
  transition: color .2s;
}
.inquiry-back:hover { color: var(--lx-zinc-200); }
.inquiry-back svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* ── GRID ─────────────────────────────────────────────────── */
.inquiry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;                    /* live gap-8 */
}
@media (min-width: 1024px) {
  .inquiry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }   /* live lg:gap-12 */
}

.inquiry-card {
  background: #0b0a0a;          /* live bg-zinc-900 */
  border-radius: 12px;          /* live rounded-xl */
  padding: 32px;                /* live p-8 */
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: var(--lx-zinc-50);
}

/* ── FORM ─────────────────────────────────────────────────── */
.inquiry-form-title {
  font-family: var(--lx-font-accent);
  font-size: 32px;              /* live text-3xl */
  line-height: 38.4px;
  font-weight: 700;             /* live font-bold */
  letter-spacing: .025em;
  text-transform: uppercase;
  color: #e9e8e7;               /* live text-zinc-100 */
  margin: 0 0 32px;             /* live mb-8 */
}
.inquiry-form > label,
.inquiry-form > .inquiry-two { margin-bottom: 24px; }   /* live space-y-6 */
.inquiry-form > label {
  display: block;
  font-family: var(--lx-font-body);
  font-size: 14px;              /* live text-sm */
  line-height: 20px;
  font-weight: 500;             /* live font-medium */
  color: var(--lx-zinc-300);    /* live text-zinc-300 */
}
.inquiry-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 639px) { .inquiry-two { grid-template-columns: 1fr; } }
.inquiry-two label {
  display: block;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--lx-zinc-300);
}

.inquiry-form input[type="text"],
.inquiry-form input[type="email"],
.inquiry-form input[type="tel"],
.inquiry-form input:not([type]),
.inquiry-form select,
.inquiry-form textarea {
  display: block;
  width: 100%;
  margin-top: 8px;              /* live label mb-2 */
  padding: 12px 16px;           /* live px-4 py-3 */
  background: rgba(0, 0, 0, .5);   /* live bg-zinc-950/50 */
  border: 1px solid var(--lx-zinc-700);   /* live border-zinc-700 */
  border-radius: 8px;           /* live rounded-lg */
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: #e9e8e7;               /* live text-zinc-100 */
  transition: border-color .2s, box-shadow .2s;
}
.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder { color: var(--lx-zinc-500); }
.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
  outline: none;
  border-color: var(--lx-zinc-500);          /* live focus:border-zinc-500 */
  box-shadow: 0 0 0 1px var(--lx-zinc-500);  /* live focus:ring-1 */
}
.inquiry-form textarea { resize: none; min-height: 146px; }   /* live rows-5 resize-none */

/* live: appearance-none + its own chevron on the right (pr-10) */
.inquiry-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236f6c67'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  /* 16px inset, matching the 16px padding before the label */
  background-position: right 16px center;
  background-size: 20px 20px;
}

/* checkbox row — live: flex items-start gap-3, box 16px mt-1 */
.inquiry-form > label.inquiry-check,
.inquiry-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
  font-family: var(--lx-font-body);
  font-size: 14px;              /* live text-sm */
  line-height: 20px;
  font-weight: 300;
  color: var(--lx-zinc-400);    /* live text-zinc-400 */
}
.inquiry-check input[type="checkbox"] {
  width: 16px; height: 16px;
  margin-top: 4px;              /* live mt-1 */
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--lx-zinc-700);
  border-radius: 4px;
  accent-color: #ff5470;        /* live text-rose-500 */
  cursor: pointer;
}

.inquiry-submit {
  display: block;
  width: 100%;
  padding: 12px 24px;           /* live py-3 px-6 -> 48px */
  background: #fff;
  color: #000;
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;             /* live font-semibold */
  border: 0;
  border-radius: 8px;           /* live rounded-lg */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s;
}
.inquiry-submit:hover { background: #e9e8e7; }   /* live hover:bg-zinc-100 */
.inquiry-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ── RIGHT SUMMARY ────────────────────────────────────────── */
.inquiry-summary {
  background: none;             /* live: the right column is not a card */
  padding: 0;
  border-radius: 0;
}
@media (min-width: 1024px) {
  .inquiry-summary { position: sticky; top: 96px; align-self: start; }   /* live lg:sticky lg:top-24 */
}
.inquiry-image {
  position: relative;
  border-radius: 8px;           /* live rounded-lg */
  overflow: hidden;
  margin-bottom: 24px;          /* live mb-6 */
}
.inquiry-image img {
  width: 100%;
  height: 256px;                /* live h-64 */
  object-fit: cover;
  display: block;
}
/* live: white pill at top-4 left-4 */
.inquiry-city-pill {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #fff;
  color: #000;
  padding: 4px 12px;            /* live px-3 py-1 */
  border-radius: 999px;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;             /* live font-medium */
  z-index: 2;
}
.inquiry-summary-body h2 {
  font-family: var(--lx-font-accent);
  font-size: 24px;              /* live text-2xl */
  line-height: 32px;
  font-weight: 700;             /* live font-bold */
  letter-spacing: .025em;
  text-transform: uppercase;
  color: #e9e8e7;               /* live text-zinc-100 */
  margin: 0 0 4px;              /* live mb-1 */
}
.inquiry-address {
  display: block;
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: var(--lx-zinc-400);    /* live text-zinc-400 */
  margin: 0 0 24px;
}

/* ── OUR EXTRAS (trip summary, pricing, specs) ──────────────
   Live shows none of these; kept because they are our working
   functionality, restyled to sit quietly in its design. */
.inquiry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 24px;
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  color: var(--lx-zinc-200);
}
.inquiry-meta i { margin-right: 6px; }

.inquiry-trip,
.inquiry-price-breakdown,
.inquiry-asset-details,
.inquiry-rates {
  margin-bottom: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--lx-zinc-800);
}

/* charter rates — same treatment as the yacht detail widget:
   a heading, muted labels and large light values */
.inquiry-rates-title {
  font-family: var(--lx-font-accent);
  font-size: 20px;
  line-height: 31.1111px;
  font-weight: 500;
  letter-spacing: .025em;
  color: var(--lx-zinc-50);
  margin: 0 0 12px;
}
.inquiry-rate-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 8px;
}
.inquiry-rate-row:last-child { margin-bottom: 0; }
.inquiry-rate-row span {
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: var(--lx-zinc-400);
}
.inquiry-rate-row strong {
  font-family: var(--lx-font-body);
  font-size: 24px;
  line-height: 33.6px;
  font-weight: 300;
  color: var(--lx-zinc-50);
}
.inquiry-trip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.inquiry-trip > div { display: flex; flex-direction: column; gap: 2px; }
.inquiry-trip span,
.inquiry-price-row span,
.inquiry-asset-row span {
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  color: var(--lx-zinc-400);
}
.inquiry-trip strong,
.inquiry-price-row strong,
.inquiry-asset-row strong {
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;             /* live never goes heavier than medium here */
  color: #e9e8e7;
}
.inquiry-price-row,
.inquiry-asset-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.inquiry-price-row:last-child,
.inquiry-asset-row:last-child { margin-bottom: 0; }

.inquiry-total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--lx-zinc-800);
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  color: #e9e8e7;
}
.inquiry-total span { color: var(--lx-zinc-300); font-weight: 300; }
.inquiry-total strong { font-weight: 600; }
.inquiry-note {
  margin: 12px 0 0;
  font-family: var(--lx-font-body);
  font-size: 12px;
  line-height: 19.5px;
  font-weight: 300;
  color: var(--lx-zinc-400);
}

.inquiry-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.inquiry-spec-card {
  border: 1px solid rgba(248, 247, 247, .3);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  font-family: var(--lx-font-body);
  color: var(--lx-zinc-50);
}
.inquiry-spec-card > i {
  display: block;
  font-size: 24px;              /* live text-2xl, same as the car detail cards */
  line-height: 32px;
  font-weight: 300;
  margin-bottom: 4px;
}
/* 0-60 badge: tiny "60" centred in a circle glyph — identical to the car
   detail page (live: text-[.5rem] at the page's 300 weight, normal leading) */
.inquiry-zero60 { position: relative; display: inline-block; font-style: normal; }
.inquiry-zero60 span {
  position: absolute;
  bottom: 50%; right: 50%;
  transform: translate(50%, 50%);
  font-size: 8px;
  line-height: normal;
  font-weight: 300;
}
.inquiry-spec-card > span {   /* the label only — not the digits inside the badge */
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

/* ── MESSAGES / EMPTY STATE ───────────────────────────────── */
.inquiry-success {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(11, 10, 10, .9);
  border: 1px solid var(--lx-zinc-700);
  font-family: var(--lx-font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  color: var(--lx-zinc-200);
}
.inquiry-success strong { display: block; font-weight: 600; color: #e9e8e7; margin-bottom: 2px; }
.inquiry-error { border-color: #7f3b45; color: #f3c2c2; }
.inquiry-error i { color: #ff5470; font-size: 16px; margin-top: 2px; }

.inquiry-empty { text-align: center; padding: 64px 0; }
.inquiry-empty h1 {
  font-family: var(--lx-font-accent);
  font-size: 32px;
  line-height: 38.4px;
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: uppercase;
  color: #e9e8e7;
  margin: 0 0 8px;
}
.inquiry-empty p {
  font-family: var(--lx-font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: var(--lx-zinc-400);
  margin: 0 0 24px;
}
.inquiry-empty-link { display: inline-block; width: auto; padding: 12px 24px; }