/* Page-specific styles for bookings; uses variables from global style.css */

.wrap h2 {
  text-align: center;
  color: var(--accent-color);
  margin-bottom: 1.25rem;
}

.lead {
  text-align: center;
  margin-bottom: 1rem;
  color: var(--primary-color);
  opacity: 0.95;
}

/* Packages */
.package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 900px) {
  .package-grid { grid-template-columns: 1fr; }
}

.pkg {
  background: rgba(30, 20, 15, 0.45);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
}
.pkg h3 {
  margin: 0 0 0.5rem;
  color: var(--primary-color);
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}
.pkg ul { padding-left: 1.1rem; }
.pkg li { margin: 0.25rem 0; }

/* CTAs */
.contact-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  border-radius: 999px;
  border: 2px solid var(--primary-color);
  color: #1a120d;   
  text-decoration: none;
  padding: 0.55rem 1rem;
  transition: background var(--transition), color var(--transition), transform var(--transition);
  user-select: none;
}
.btn:hover,
.btn:focus {
  background: var(--primary-color);
  color: #333;
}
.btn:active { transform: scale(0.98); }

.btn-outline {
  background: transparent;
  border-color: var(--primary-color);
  color: var(--primary-color);
}


/* Form */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 900px) {
  .form-grid { grid-template-columns: 1fr; }
}

.field { display: flex; flex-direction: column; }
.field label,
fieldset legend {
  font-size: .95rem;
  color: var(--primary-color);
  margin-bottom: .25rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
textarea {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.35);
  color: var(--primary-color);
  border-radius: 8px;
  padding: .6rem .7rem;
  outline-offset: 2px;
}
textarea { resize: vertical; }

.field-span { grid-column: 1 / -1; }

.chips {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.chips label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.35);
  color: var(--primary-color);
  padding: .4rem .65rem;
  border-radius: 999px;
  cursor: pointer;
}
.chips input { accent-color: var(--accent-color); }

.form-actions {
  display: flex;
  gap: .75rem;
  margin-top: .75rem;
  flex-wrap: wrap;
}

.faq {
  background: rgba(30, 20, 15, 0.45);
  border-radius: 10px;
  padding: .75rem 1rem;
  margin: .5rem 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  color: var(--primary-color);
  font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }

.legal, .tiny {
  font-size: .85rem;
  opacity: .9;
  margin-top: .5rem;
}

.error {
  margin-top: .35rem;
  font-size: .85rem;
  color: #ffb3b3;
}


/* === Contrast boost for Bookings (drop-in patch) =================== */

/* Darker, glassy panels behind content */
main .wrap {
  background: rgba(30, 20, 15, 0.68);      /* was ~0.45 */
  backdrop-filter: blur(2px) saturate(1.05);
  -webkit-backdrop-filter: blur(2px) saturate(1.05);
}

/* Cards at the top (“How we can help”) */
.pkg {
  background: rgba(30, 20, 15, 0.72);      /* was 0.45 */
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
}

/* Inputs / textareas / chip labels – darker fill + brighter borders */
#enquiry input[type="text"],
#enquiry input[type="email"],
#enquiry input[type="tel"],
#enquiry input[type="date"],
#enquiry input[type="time"],
#enquiry textarea {
  background: rgba(0, 0, 0, 0.58);         /* was ~0.35 */
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--primary-color);
}

#enquiry textarea { color: var(--primary-color); }

/* Placeholder text more visible */
#enquiry ::placeholder {
  color: rgba(255, 241, 225, 0.85);
}

/* “Chips” for event type: darker pill + clearer border */
#enquiry .chips label {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

/* Labels/legends get a subtle outline for readability */
#enquiry label,
#enquiry legend,
.wrap h2,
.lead {
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}

/* Buttons: a touch more contrast on the outline version */
.btn.btn-outline {
  border-color: rgba(255,255,255,.85);
}

/* Optional: add a soft inner edge to the enquiry panel only */
#enquiry.wrap {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}


/* Pill base (you likely already have this) */
.pill {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 1.25rem; border-radius:999px; font-weight:700;
  border:2px solid rgba(255,255,255,.7); backdrop-filter:saturate(120%);
  transition:transform .12s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

/* High-contrast primary button */
.pill.primary{
  background:#c78e40;                 /* Veneto accent */
  color:#1e140f;                      /* dark text for contrast */
  border-color:rgba(255,255,255,.85);
  box-shadow:0 6px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.15);
}
.pill.primary:hover{ background:#b67c2e; transform:translateY(-1px); }
.pill.primary:active{ transform:translateY(0); }

/* Disabled state */
.pill:disabled{
  opacity:.55; cursor:not-allowed;
  background:#59442e; color:#f2e4d3; border-color:rgba(255,255,255,.4);
}

/* Outline style for Reset */
.pill.outline{
  background:transparent; color:#f5e1cc;
}
.pill.outline:hover{ background:rgba(255,255,255,.08); }

/* Clear focus ring */
.pill:focus-visible{
  outline:3px solid #ffd9a3; outline-offset:2px;
}

/* Inputs—make text readable on the photo bg if needed */
form input, form select, form textarea {
  color:#fff;
  background:rgba(30,20,15,.35);
  border:1px solid rgba(255,255,255,.35);
}
form input::placeholder, form textarea::placeholder{ color:rgba(255,255,255,.65); }
form input:focus, form textarea:focus{
  outline:2px solid #c78e40; outline-offset:1px; border-color:#c78e40;
}