/* css/modal.css — native <dialog> modals */
dialog.modal {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  padding: var(--space-8);
  width: min(90vw, 640px);
  max-height: 85vh;
  overflow-y: auto;
}

dialog.modal::backdrop {
  background: rgba(4, 6, 10, 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  dialog.modal {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: opacity 220ms ease-out, transform 220ms ease-out, overlay 220ms ease-out allow-discrete,
      display 220ms ease-out allow-discrete;
  }
  dialog.modal[open] {
    opacity: 1;
    transform: none;
  }
  @starting-style {
    dialog.modal[open] {
      opacity: 0;
      transform: translateY(12px) scale(0.98);
    }
  }

  dialog.modal::backdrop {
    opacity: 0;
    transition: opacity 220ms ease-out, backdrop-filter 220ms ease-out, overlay 220ms ease-out allow-discrete,
      display 220ms ease-out allow-discrete;
  }
  dialog.modal[open]::backdrop {
    opacity: 1;
    backdrop-filter: blur(6px);
  }
  @starting-style {
    dialog.modal[open]::backdrop { opacity: 0; }
  }
}

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.modal__close {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.modal__tour-list {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
.modal__tour-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}
.modal__tour-index {
  font-family: var(--font-mono);
  color: var(--color-sapphire-400);
  flex-shrink: 0;
}

/* Contact modal — two-panel layout (brand/trust panel + form) */
dialog.modal.modal--wide {
  width: min(94vw, 880px);
  padding: 0;
  overflow: hidden;
}
.modal__close--floating {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1;
  background: rgba(10, 13, 20, 0.4);
  backdrop-filter: blur(4px);
  color: #fff;
}

.contact-modal__grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .contact-modal__grid { grid-template-columns: 0.85fr 1.15fr; }
}

.contact-modal__aside {
  position: relative;
  overflow: hidden;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-10);
  padding: var(--space-10) var(--space-8);
  color: #fff;
  background: linear-gradient(155deg, var(--color-sapphire-500) 0%, var(--color-obsidian-900) 72%);
}
@media (min-width: 720px) {
  .contact-modal__aside { display: flex; }
}
.contact-modal__aside::before {
  content: '';
  position: absolute;
  top: -90px;
  right: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: var(--color-emerald-400);
  opacity: 0.2;
  filter: blur(64px);
  pointer-events: none;
}
.contact-modal__brand { display: flex; align-items: center; gap: var(--space-3); }
.contact-modal__logo { height: 2rem; width: auto; }
.contact-modal__logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
}

.contact-modal__form-wrap {
  padding: var(--space-8);
  max-height: 85vh;
  overflow-y: auto;
}

/* Named grid areas (rather than paired .row wrappers) so mobile can stack fields in a different
   order than the desktop 2-column pairing without duplicating any markup. Desktop keeps its
   original pairing (name+interest, email+subservice, country+phone); mobile follows the order:
   name, email, interest, subservice, country, phone, company, message, prefs. */
.contact-modal__fields {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  grid-template-columns: 1fr;
  grid-template-areas:
    "name" "email" "interest" "subservice" "country" "phone" "company" "message" "prefs";
}
@media (min-width: 480px) {
  .contact-modal__fields {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name interest"
      "email subservice"
      "country phone"
      "company company"
      "prefs prefs"
      "message message";
  }
}
.contact-field--name { grid-area: name; }
.contact-field--email { grid-area: email; }
.contact-field--interest { grid-area: interest; }
.contact-field--subservice { grid-area: subservice; }
.contact-field--country { grid-area: country; }
.contact-field--phone { grid-area: phone; }
.contact-field--company { grid-area: company; }
.contact-field--prefs { grid-area: prefs; }
.contact-field--message { grid-area: message; }

/* Contact form fields reuse the site's existing .form-field pattern (label above, one
   consistent height per field, defined in css/sections.css) for every field type — inputs,
   selects, and the phone combo alike — so the grid rows line up instead of mixing a
   floating-label technique with static-label selects. Spacing between fields comes entirely
   from .contact-modal__fields' own gap now, so a field's own bottom margin is zeroed out to
   avoid doubling up. */
#contact-form .contact-modal__fields .form-field { margin-bottom: 0; }
#contact-form .form-field input:focus,
#contact-form .form-field select:focus,
#contact-form .form-field textarea:focus {
  outline: none;
  border-color: var(--color-sapphire-400);
}
#contact-form .form-field input:invalid:not(:placeholder-shown),
#contact-form .form-field textarea:invalid:not(:placeholder-shown) {
  border-color: #F87171;
}
#contact-form .form-field input:valid:not(:placeholder-shown),
#contact-form .form-field textarea:valid:not(:placeholder-shown) {
  border-color: var(--color-emerald-400);
}

.phone-input {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-surface);
}
.phone-input__dial {
  display: flex;
  align-items: center;
  padding: 0.85rem 0.75rem;
  background: var(--color-bg-surface-2);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  border-right: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}
.phone-input input {
  border: none !important;
  border-radius: 0 !important;
  flex: 1;
  min-width: 0;
}
.phone-input input:focus { outline: none; }

.contact-modal__contact-pref { margin-bottom: var(--space-5); }
/* Inside the contact form's named-area grid, spacing comes from the grid's own gap — this block
   is also reused as-is (unscoped) by the lead-capture form's Step 3, which isn't part of that
   grid and still needs its own margin. */
.contact-modal__fields .contact-modal__contact-pref { margin-bottom: 0; }
.contact-modal__contact-pref > p {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.contact-modal__checkbox-row { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.contact-modal__checkbox-row label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
  color: var(--color-text-primary);
  cursor: pointer;
}
.contact-modal__checkbox-row input { width: auto; }
/* Method icons are CSS background images on a <span>, not <img> tags, so there is nothing for a
   visitor to right-click and "open in new tab" or save. */
.contact-modal__checkbox-row label span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.contact-modal__checkbox-row label span::before {
  content: '';
  display: inline-block;
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.contact-modal__checkbox-row label[data-method="email"] span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='%233B82F6'/%3E%3Cpath d='M4 6l8 6 8-6' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.contact-modal__checkbox-row label[data-method="phone"] span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 2.5c-2 0-4 2-4 4 0 8 7 15 15 15 2 0 4-2 4-4 0-1-.5-1.8-1.2-2.2l-3-1.8c-.8-.5-1.8-.3-2.4.4l-1 1.2c-2-1-4-3-5-5l1.2-1c.7-.6.9-1.6.4-2.4l-1.8-3c-.4-.7-1.2-1.2-2.2-1.2Z' fill='%2334D399'/%3E%3C/svg%3E");
}
.contact-modal__checkbox-row label[data-method="whatsapp"] span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.5 2 2 6.3 2 11.6c0 1.9.6 3.7 1.6 5.2L2 22l5.4-1.5c1.4.8 3 1.2 4.6 1.2 5.5 0 10-4.3 10-9.6C22 6.3 17.5 2 12 2Z' fill='%2325D366'/%3E%3Cpath d='M9 8.5c.3-.6.6-.6.9-.6h.6c.2 0 .5 0 .7.5.2.5.7 1.7.7 1.9.1.1.1.3 0 .4-.1.2-.2.3-.3.5-.2.2-.3.3-.1.6.7 1.2 1.4 1.7 2.5 2.2.2.1.4.1.5-.1.2-.2.6-.7.8-.9.2-.2.3-.2.6-.1.2.1 1.5.7 1.8.9.2.1.4.2.4.3.1.2.1 1-.3 1.6-.4.6-1.6 1.1-2.5 1-2.5-.3-4.9-1.7-6.4-3.7-.5-.7-1-1.6-1-2.5 0-.9.4-1.3.6-1.5Z' fill='white'/%3E%3C/svg%3E");
}

/* Slide-to-verify captcha — replaces a plain math/NDA line with something the visitor actually
   interacts with. Draggable via pointer events; Enter/Space on the handle verifies instantly
   for keyboard users. */
.slide-captcha { margin-bottom: var(--space-5); }
.slide-captcha__track {
  position: relative;
  height: 3rem;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface-2);
  border: 1px solid var(--color-border-subtle);
  overflow: hidden;
  user-select: none;
}
.slide-captcha__fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, var(--color-sapphire-500), var(--color-emerald-400));
}
.slide-captcha__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  pointer-events: none;
}
.slide-captcha[data-verified="true"] .slide-captcha__label { color: #fff; }
.slide-captcha__handle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(3rem - 4px);
  height: calc(3rem - 4px);
  border-radius: 50%;
  background: var(--color-sapphire-400);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.slide-captcha__handle:active { cursor: grabbing; }
.slide-captcha[data-verified="true"] .slide-captcha__handle {
  background: var(--color-emerald-500);
  cursor: default;
}