/* ============================================================
   PARIJATHA CONVENTIONAL HALL — ENQUIRY POPUP STYLES
   Paste inside your existing <style> tag, or save as
   enquiry-popup.css and link it: <link rel="stylesheet" href="enquiry-popup.css">
   
   Requires the site's CSS variables already to be present:
   --maroon, --maroon-deep, --maroon-mid, --rose, --rose-pale,
   --rose-light, --gold, --gold-light, --gold-pale, --petal,
   --petal-mid, --cream, --charcoal, --body-text, --muted,
   --border, --font-head, --font-body, --radius, --shadow
   ============================================================ */

/* ---------- Overlay ---------- */
.enquiry-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(61, 14, 31, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: overlayFadeIn .25s ease;
}

.enquiry-overlay.open {
  display: flex;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Modal ---------- */
.enquiry-modal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(61, 14, 31, 0.32);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: modalSlideUp .28s cubic-bezier(.22,1,.36,1);
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ---------- Close button ---------- */
.enquiry-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: var(--rose-pale, #FAF0F3);
  border: 1px solid var(--border, #E5C5D2);
  color: var(--maroon, #6B1F3A);
  font-size: 22px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, color .18s;
  z-index: 2;
}
.enquiry-close:hover {
  background: var(--maroon, #6B1F3A);
  color: #fff;
}

/* ---------- Header ---------- */
.enquiry-header {
  background: linear-gradient(135deg, #3D0E1F 0%, #6B1F3A 60%, #8E2D50 100%);
  border-radius: 16px 16px 0 0;
  padding: 0px 28px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.enquiry-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23C9933A' fill-opacity='0.07'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.enquiry-header-ornament {
  color: var(--gold-light, #E8C47A);
  font-size: 22px;
  margin-bottom: 10px;
  opacity: .8;
}

.enquiry-label {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  font-family: var(--font-body, 'Lato', sans-serif);
  font-weight: 700;
  margin-bottom: 6px;
}

.enquiry-title {
  font-family: var(--font-head, 'Playfair Display', Georgia, serif);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.25;
}

.enquiry-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,.76);
  line-height: 1.6;
  font-family: var(--font-body, 'Lato', sans-serif);
}

/* ---------- Body ---------- */
.enquiry-body {
  padding: 28px 28px 24px;
}

/* ---------- Fields ---------- */
.enquiry-field {
  margin-bottom: 18px;
}

.enquiry-lbl {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted, #7A556A);
  margin-bottom: 7px;
  font-family: var(--font-body, 'Lato', sans-serif);
}

.req {
  color: var(--rose, #C4667A);
}

.enquiry-input {
  width: 100%;
  border: 1.5px solid var(--border, #E5C5D2);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 15px;
  font-family: var(--font-body, 'Lato', sans-serif);
  color: var(--body-text, #4A2E38);
  background: var(--rose-pale, #FAF0F3);
  transition: border-color .18s, box-shadow .18s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.enquiry-input:focus {
  border-color: var(--maroon, #6B1F3A);
  box-shadow: 0 0 0 3px rgba(107,31,58,.12);
  background: #fff;
}

.enquiry-input::placeholder {
  color: var(--muted, #7A556A);
  opacity: .55;
}

/* Phone field with +91 prefix */
.enquiry-phone-wrap {
  display: flex;
  align-items: stretch;
}

.enquiry-phone-prefix {
  background: var(--rose-light, #F5D9E2);
  border: 1.5px solid var(--border, #E5C5D2);
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 11px 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--maroon, #6B1F3A);
  font-family: var(--font-body, 'Lato', sans-serif);
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.enquiry-phone-input {
  border-radius: 0 8px 8px 0 !important;
  flex: 1;
}

/* ---------- Guest pills ---------- */
.enquiry-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pill {
  background: var(--rose-pale, #FAF0F3);
  border: 1.5px solid var(--border, #E5C5D2);
  color: var(--maroon, #6B1F3A);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-body, 'Lato', sans-serif);
  padding: 8px 16px;
  border-radius: 30px;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}

.pill:hover {
  border-color: var(--maroon, #6B1F3A);
  background: #fff;
}

.pill.selected {
  background: var(--maroon, #6B1F3A);
  border-color: var(--maroon, #6B1F3A);
  color: #fff;
}

/* ---------- Error ---------- */
.enquiry-error {
  font-size: 13px;
  color: #c0392b;
  background: #fdf0ef;
  border: 1px solid #f5c6c2;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: none;
  font-family: var(--font-body, 'Lato', sans-serif);
}

.enquiry-error.visible {
  display: block;
}

/* ---------- Submit button ---------- */
.enquiry-submit {
  width: 100%;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-body, 'Lato', sans-serif);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: background .18s, transform .12s;
  margin-bottom: 12px;
}

.enquiry-submit:hover {
  background: #1DAA53;
}

.enquiry-submit:active {
  transform: scale(.98);
}

/* ---------- Note ---------- */
.enquiry-note {
  text-align: center;
  font-size: 12px;
  color: var(--muted, #7A556A);
  line-height: 1.5;
  font-family: var(--font-body, 'Lato', sans-serif);
}

/* ---------- Trigger button (if using the standalone trigger) ---------- */
.enquiry-trigger {
  /* inherits .btn-wa from main site styles */
  cursor: pointer;
  border: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
  .enquiry-modal {
    border-radius: 14px;
    max-height: 95vh;
  }
  .enquiry-header {
    padding: 26px 20px 22px;
    border-radius: 14px 14px 0 0;
  }
  .enquiry-body {
    padding: 20px 18px 18px;
  }
  .enquiry-title {
    font-size: 19px;
  }
  .enquiry-pills {
    gap: 6px;
  }
  .pill {
    font-size: 12px;
    padding: 7px 13px;
  }
}

.enquiry-trust {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.enquiry-trust-row {
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: nowrap;  /* was: wrap */
}


.etrust-item {
  font-size: 10px;
  color: var(--muted, #7A556A);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  border-right: 1px solid var(--border, #E5C5D2);
}

.etrust-item:last-child {
  border-right: none;
}

.etrust-item:first-child {
  padding-left: 0;
}

.enquiry-trust-privacy {
  font-size: 11px;    /* reduced */
  color: var(--muted, #7A556A);
  background: var(--rose-pale, #FAF0F3);
  border: 1px solid var(--border, #E5C5D2);
  border-radius: 6px;
  padding: 8px 13px;
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;  /* single line */
}
