/* ==========================================================================
   Booking Page Override — Altagamma Icons of Italy
   Overrides for the Events Manager booking form within the custom
   3-column layout (info | calendar+slots | form).
   The layout grid, calendar, and slot styles live in booking.scss.
   This file only deals with EM-specific elements.
   ========================================================================== */

/* ---------- 0. page-booking class on body ---------- */
body.single-event {
  --bk-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --bk-red: #E30B1C;
  --bk-dark: #1a1a2e;
  --bk-grey: #888;
  --bk-light-grey: #999;
  --bk-border: rgba(0, 0, 0, 0.1);
  --bk-white: #fff;
  background-color: #fff;
}

/* ==========================================================================
   1. HIDE EM ELEMENTS WE DON'T NEED
   ========================================================================== */

/* EM's ticket table — replaced by our custom slot buttons in middle column */
.em-booking-form-section-tickets {
  display: none !important;
}

/* EM's booking summary ($0.00 line) */
.em-booking-form-section-summary {
  display: none !important;
}

/* EM's "Bookings" H2 heading */
.em-event-bookings > h2 {
  display: none !important;
}

/* Login / sign-in section */
.em-login,
.em-login-trigger {
  display: none !important;
}

/* Comment/notes field */
.em-booking-form p:has(label[for='booking_comment']),
.em-booking-form p:has(textarea[name='booking_comment']) {
  display: none !important;
}
.em-booking-form textarea[name='booking_comment'],
.em-booking-form label[for='booking_comment'] {
  display: none !important;
}

/* ==========================================================================
   2. OVERRIDE em-hide-dynamic (form hidden until JS selects a ticket)
   Our custom JS handles this — we don't want EM's default behaviour
   ========================================================================== */

/* When our wrapper is visible, make sure EM sections inside are too */
#em-form-wrapper:not(.is-hidden) .em-event-booking-form.em-hide-dynamic .em-booking-form section {
  display: block !important;
  visibility: visible !important;
}

#em-form-wrapper:not(.is-hidden) .em-event-booking-form.em-hide-dynamic .em-booking-form .em-form-submit,
#em-form-wrapper:not(.is-hidden) .em-event-booking-form.em-hide-dynamic .em-booking-form .em-booking-submit {
  display: block !important;
  visibility: visible !important;
}

/* ==========================================================================
   3. EM FORM CONTAINER — blend into our design
   ========================================================================== */

.em-event-booking-form {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.em-booking-form {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

/* ==========================================================================
   4. FORM FIELDS — match static design
   ========================================================================== */

/* Section title ("Your Details") */
.em-booking-form-details-title {
  font-family: var(--bk-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--bk-light-grey) !important;
  margin-bottom: 16px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--bk-border) !important;
  /* Reset EM defaults */
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  width: auto !important;
}

/* Labels */
.em-booking-form-details label,
.em-booking-form .em-booking-section label {
  font-family: var(--bk-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--bk-grey) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Inputs */
.em-booking-form-details input[type="text"],
.em-booking-form-details input[type="tel"],
.em-booking-form-details input[type="email"],
.em-booking-form-details input[type="number"],
.em-booking-form-details select,
.em-booking-form-details textarea,
.em-booking-form .em-booking-section input[type="text"],
.em-booking-form .em-booking-section input[type="email"],
.em-booking-form .em-booking-section select {
  font-family: var(--bk-font) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--bk-dark) !important;
  border: 1px solid var(--bk-border) !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--bk-white) !important;
  transition: border-color 0.2s ease !important;
  box-shadow: none !important;
}

.em-booking-form-details input:focus,
.em-booking-form-details select:focus,
.em-booking-form-details textarea:focus,
.em-booking-form .em-booking-section input:focus,
.em-booking-form .em-booking-section select:focus {
  outline: none !important;
  border-color: var(--bk-red) !important;
}

/* Field spacing */
.em-booking-form-details p,
.em-booking-form .em-booking-section p {
  margin-bottom: 16px !important;
}

/* Consent / GDPR checkbox */
.em-consent-checkbox {
  font-family: var(--bk-font) !important;
  font-size: 13px !important;
  color: var(--bk-grey) !important;
  margin-top: 8px !important;
}

.em-consent-checkbox label {
  text-transform: none !important;
  font-size: 13px !important;
  letter-spacing: normal !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.em-consent-checkbox input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  accent-color: var(--bk-red) !important;
}

/* ==========================================================================
   5. SUBMIT BUTTON — brand red, full width
   ========================================================================== */

.em-booking-submit,
.em-booking-form .em-form-submit {
  font-family: var(--bk-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--bk-white) !important;
  background: var(--bk-red) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 14px 32px !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
  width: 100% !important;
  margin-top: 8px !important;
}

.em-booking-submit:hover,
.em-booking-form .em-form-submit:hover {
  opacity: 0.85 !important;
}

/* ==========================================================================
   6. SUCCESS / ERROR MESSAGES
   ========================================================================== */

.em-booking-message {
  font-family: var(--bk-font) !important;
  font-size: 14px !important;
  padding: 20px 24px !important;
  border-radius: 6px !important;
  margin-bottom: 16px !important;
}

.em-booking-message-success {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
}

.em-booking-message-error {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
}

/* ==========================================================================
   7. PIXELBONES RESET — flatten EM's default theme
   ========================================================================== */

.em.pixelbones .input,
.em.pixelbones input.input,
.em.pixelbones select.input {
  background: var(--bk-white) !important;
  border: 1px solid var(--bk-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-family: var(--bk-font) !important;
}

.em.pixelbones .button,
.em.pixelbones .em-button,
.em.pixelbones .button-primary {
  font-family: var(--bk-font) !important;
  border-radius: 4px !important;
}

.em.pixelbones h1,
.em.pixelbones h2,
.em.pixelbones h3 {
  font-family: var(--bk-font) !important;
}

.em-item-header[style] {
  border: none !important;
}

/* ==========================================================================
   8. HIDDEN EM FORM WRAPPER — offscreen so EM JS initializes properly
   ========================================================================== */

#em-form-wrapper.em-form-wrapper--offscreen {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   9. INLINE FORM ERROR ALERT
   ========================================================================== */

.booking-form__alert {
  font-family: var(--bk-font) !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
  border-radius: 4px !important;
  margin-bottom: 12px !important;
  line-height: 1.4 !important;
  white-space: pre-line !important;
}

.booking-form__alert--error {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca !important;
}

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .em-booking-submit,
  .em-booking-form .em-form-submit {
    padding: 12px 24px !important;
  }
}