/* Rosh Hashana Dinner — Event Registration Page Styles */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");

/* ── Page font ── */
#RegisterSinglePage,
#RegisterSinglePage *,
.cco_templatelates_content {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ── Remove default form container shading ── */
#RegisterSinglePage.container.shaded {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── Page title ── */
.article-header__title {
  font-family: "DM Sans", sans-serif !important;
  font-weight: 500 !important;
  color: #1a2332 !important;
  font-size: 38px !important;
  text-align: center !important;
  margin-bottom: 10px !important;
}

/* ── Header info box ── */
#RegisterHeader {
  background: #f8f6f3 !important;
  border-radius: 18px !important;
  padding: 28px 32px !important;
  margin-bottom: 30px !important;
  border: none !important;
}

#RegisterHeader .event_name {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: #1a2332 !important;
}

#RegisterHeader .event_description {
  font-size: 0 !important;
  line-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

#RegisterHeader .heading {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: #b8860b !important;
}

#RegisterHeader .label {
  font-weight: 600 !important;
  color: #b8860b !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}

#RegisterHeader .map_link a,
#RegisterHeader .ical_link a {
  color: #1a2332 !important;
  text-decoration: none !important;
}

#RegisterHeader .map_link a:hover {
  color: #b8860b !important;
}

/* ── Section headings ── */
#RegisterBody .title .bold,
#Summary .title .bold,
#ReserversInformation .title .bold,
#Payment .title .bold {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #1a2332 !important;
  letter-spacing: -0.3px !important;
}

/* ── Reservations section ── */
#Performances .title .bold {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #1a2332 !important;
}

/* ── Reservation rows ── */
.reservation {
  background: #f8f9fa !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin-bottom: 8px !important;
}

/* ── Category / Price display ── */
.price-display {
  color: #b8860b !important;
  font-weight: 600 !important;
}

/* ── Remove reservation button (×) ── */
button.remove_reservation {
  background: transparent !important;
  border: 1px solid #ddd !important;
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 16px !important;
  color: #999 !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 26px !important;
  text-align: center !important;
  margin: 0 !important;
}

button.remove_reservation:hover {
  border-color: #c0392b !important;
  color: #c0392b !important;
  background: #fdf0ef !important;
}

/* ── Text inputs ── */
.reservation_input_text,
.co_form_input.active.reservation_input_text,
#RegisterSinglePage input[type="text"],
#RegisterSinglePage input[type="email"],
#RegisterSinglePage input[type="tel"],
#RegisterSinglePage input[type="number"],
#RegisterSinglePage textarea {
  font-family: "DM Sans", sans-serif !important;
  font-size: 15px !important;
  padding: 10px 14px !important;
  border: 1.5px solid #d7d7d7 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #1a2332 !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  box-sizing: border-box !important;
}

#RegisterSinglePage input[type="text"]:focus,
#RegisterSinglePage input[type="email"]:focus,
#RegisterSinglePage input[type="tel"]:focus,
#RegisterSinglePage input[type="number"]:focus,
#RegisterSinglePage textarea:focus {
  border-color: #b8860b !important;
}

/* ── Selects ── */
.reservation_input_select,
.co_form_input.active.reservation_input_select,
#RegisterSinglePage select {
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  border: 1.5px solid #d7d7d7 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #1a2332 !important;
  cursor: pointer !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  appearance: auto !important;
}

#RegisterSinglePage select:focus {
  border-color: #b8860b !important;
}

/* ── Field labels ── */
#ReserversInformation .label,
#Payment .label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #555 !important;
}

/* ── Add additional reservations toggle ── */
.additionals_toggle .toggle_message {
  color: #b8860b !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  transition: background-color 0.2s !important;
}

.additionals_toggle .toggle_message:hover {
  background: #fdf8ef !important;
}

.additionals_toggle .toggle_message .fa-plus {
  color: #b8860b !important;
}

/* ── Add / Continue button ── */
button.add_attendee,
button.add_attendee span,
.co_global_button button.button {
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 24px !important;
  background: #b8860b !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: background-color 0.2s !important;
}

button.add_attendee:hover,
.co_global_button button.button:hover {
  background: #d4a843 !important;
}

/* ── Cancel button (in add-more section) ── */
.toggle_options button.cancel {
  background: transparent !important;
  border: 1px solid #ddd !important;
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 16px !important;
  color: #999 !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 26px !important;
  text-align: center !important;
  margin: 0 !important;
}

.toggle_options button.cancel:hover {
  border-color: #c0392b !important;
  color: #c0392b !important;
  background: #fdf0ef !important;
}

/* ── Price info text ── */
#performance_31694_priceInfo {
  font-weight: 500 !important;
  color: #b8860b !important;
}

/* ── Subtotal / Total ── */
.subtotal {
  font-size: 16px !important;
  color: #1a2332 !important;
}

#Summary .bold {
  color: #1a2332 !important;
}

#Totals .float_right {
  color: #b8860b !important;
  font-weight: 600 !important;
}

/* ── Separator lines ── */
#Summary .separator {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ── Your Information section ── */
#ReserversInformation {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ── Payment section ── */
#Payment {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ── CC icons ── */
#CreditCardIcon,
#PaypalIcon {
  opacity: 0.6 !important;
}

/* ── Opt-in checkbox ── */
.optin_message_text label {
  font-size: 13px !important;
  color: #666 !important;
  font-weight: 400 !important;
}

/* ── Validation notice ── */
#ValidationNotice {
  font-size: 14px !important;
  border-radius: 10px !important;
  margin-bottom: 16px !important;
}

/* ── Make Reservation button ── */
#SubmitButton_wrapper {
  margin-top: 10px !important;
}

#SubmitButton,
#SubmitButton span {
  font-family: "DM Sans", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 14px 40px !important;
  background: #1a2332 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: background-color 0.2s !important;
}

#SubmitButton:hover {
  background: #2c3e50 !important;
}

#SubmitButton_wrapper.disabled #SubmitButton {
  background: #999 !important;
  cursor: not-allowed !important;
}

/* ── Per-reservation embedded form ── */
.embedded_form .form-all {
  padding: 10px 0 !important;
  background: transparent !important;
  border: none !important;
}

.embedded_form .form-line {
  padding: 6px 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.embedded_form .form-label-left label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #555 !important;
}

.embedded_form .form-textbox {
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  border: 1.5px solid #d7d7d7 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #1a2332 !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}

.embedded_form .form-textbox:focus {
  border-color: #b8860b !important;
}

.embedded_form .form-sub-label {
  font-size: 11px !important;
  color: #888 !important;
}

/* Hide the "Total $0.00" from embedded forms — CMS handles totals */
.embedded_form [id^="id_res"][id$="-6"] {
  display: none !important;
}

/* ── Security notice ── */
.embedded_form .center.small {
  display: none !important;
}

/* ── reCAPTCHA spacing ── */
.js-recaptcha-wrapper {
  margin-top: 8px !important;
}

/* ── Back link ── */
.cco_templateless_template a {
  font-family: "DM Sans", sans-serif !important;
  color: #b8860b !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.cco_templateless_template a:hover {
  color: #1a2332 !important;
}

/* ── Footer ── */
.g960.footer {
  font-family: "DM Sans", sans-serif !important;
}

/* ── Donation suggested amounts (CSS-only) ── */
#TotalDonation {
  font-family: "DM Sans", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

#Summary .large_top_margin.medium_bottom_margin::after {
  content: "Suggested amounts: $180  ·  $360  ·  $540  ·  $1,000";
  display: block !important;
  margin-top: 8px !important;
  margin-left: 150px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #b8860b !important;
  letter-spacing: 0.3px !important;
}

/* ── Donation preset buttons ── */
.rh-donation-presets {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 10px 0 6px 140px !important;
  padding-left: 10px !important;
}

.rh-donation-btn {
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 8px 18px !important;
  background: #ffffff !important;
  color: #1a2332 !important;
  border: 1.5px solid rgba(184, 134, 11, 0.3) !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.rh-donation-btn:hover {
  border-color: #b8860b !important;
  background: #fdf8ef !important;
}

.rh-donation-btn.active {
  background: #b8860b !important;
  color: #ffffff !important;
  border-color: #b8860b !important;
}

/* ── Hide couvert selector if it was injected ── */
.hh-form-selector {
  display: none !important;
}

/* ── Responsive ── */
@media (max-width: 650px) {
  .article-header__title {
    font-size: 28px !important;
  }

  #RegisterHeader {
    padding: 20px !important;
  }

  #RegisterHeader .column1,
  #RegisterHeader .column2 {
    float: none !important;
    width: 100% !important;
  }

  #RegisterHeader .column2 {
    margin-top: 16px !important;
  }

  .reservation {
    padding: 10px 12px !important;
  }

  #ReserversInformation .g140.ml140,
  #Payment .g140.ml140 {
    float: none !important;
    width: 100% !important;
    margin-bottom: 4px !important;
  }

  #ReserversInformation .float_left.left_margin,
  #Payment .float_left.left_margin {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .reservation_input_text,
  #RegisterSinglePage input[type="text"],
  #RegisterSinglePage input[type="email"],
  #RegisterSinglePage input[type="tel"] {
    width: 100% !important;
  }
}