/*
 * Copper Lantern embedded FluentForms pages.
 * v1.0.21 iframe-width friendly FluentForms custom-class layout + dark time controls.
 * Targets only the real FluentForms markup confirmed from rendered outerHTML.
 */

html,
body.lsc-embed-form-page--copper-lantern {
  background: #0b0b0b !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: auto !important;
  overflow-x: hidden !important;
  color-scheme: dark !important;
}

body.lsc-embed-form-page--copper-lantern,
body.lsc-embed-form-page--copper-lantern * {
  box-sizing: border-box !important;
}

body.lsc-embed-form-page--copper-lantern #wpadminbar,
body.lsc-embed-form-page--copper-lantern header,
body.lsc-embed-form-page--copper-lantern footer,
body.lsc-embed-form-page--copper-lantern nav,
body.lsc-embed-form-page--copper-lantern .site-header,
body.lsc-embed-form-page--copper-lantern .site-footer,
body.lsc-embed-form-page--copper-lantern #masthead,
body.lsc-embed-form-page--copper-lantern #colophon,
body.lsc-embed-form-page--copper-lantern .entry-header,
body.lsc-embed-form-page--copper-lantern .page-header,
body.lsc-embed-form-page--copper-lantern .wp-block-template-part,
body.lsc-embed-form-page--copper-lantern .breadcrumb,
body.lsc-embed-form-page--copper-lantern .breadcrumbs,
body.lsc-embed-form-page--copper-lantern h1,
body.lsc-embed-form-page--copper-lantern .entry-title,
body.lsc-embed-form-page--copper-lantern .page-title {
  display: none !important;
}

body.lsc-embed-form-page--copper-lantern .site,
body.lsc-embed-form-page--copper-lantern .site-content,
body.lsc-embed-form-page--copper-lantern .content-area,
body.lsc-embed-form-page--copper-lantern main,
body.lsc-embed-form-page--copper-lantern article,
body.lsc-embed-form-page--copper-lantern .entry-content,
body.lsc-embed-form-page--copper-lantern .wp-site-blocks,
body.lsc-embed-form-page--copper-lantern .wp-block-group,
body.lsc-embed-form-page--copper-lantern .container,
body.lsc-embed-form-page--copper-lantern .wrap,
body.lsc-embed-form-page--copper-lantern .wp-block-post-content {
  background: #0b0b0b !important;
  color: #ffffff !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body.lsc-embed-form-page--copper-lantern .fluentform,
body.lsc-embed-form-page--copper-lantern .fluentform_wrapper,
body.lsc-embed-form-page--copper-lantern form.frm-fluent-form {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  background: #101010 !important;
  color: #ffffff !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 24px 28px 22px !important;
}

/* Decorative top divider removed for cleaner TCL embedded forms. */

body.lsc-embed-form-page--copper-lantern .fluentform fieldset,
body.lsc-embed-form-page--copper-lantern .fluentform .ff-t-container,
body.lsc-embed-form-page--copper-lantern .fluentform .ff-t-cell,
body.lsc-embed-form-page--copper-lantern .fluentform .ff-el-group,
body.lsc-embed-form-page--copper-lantern .fluentform .ff-el-input--content {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.lsc-embed-form-page--copper-lantern .fluentform .ff-el-group {
  margin-bottom: 17px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/*
 * Exact two-column support:
 * 1) Regular two-column containers: <div class="ff-t-container ff-column-container ... tcl-two-col">
 * 2) FluentForms name field wrapper: <div class="ff-name-field-wrapper tcl-two-col"><div class="ff-t-container">...</div></div>
 */
@media (min-width: 460px) {
  body.lsc-embed-form-page--copper-lantern .fluentform .ff-column-container.tcl-two-col,
  body.lsc-embed-form-page--copper-lantern .fluentform .ff-name-field-wrapper.tcl-two-col > .ff-t-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 17px !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
  }

  body.lsc-embed-form-page--copper-lantern .fluentform .ff-column-container.tcl-two-col > .ff-t-cell,
  body.lsc-embed-form-page--copper-lantern .fluentform .ff-name-field-wrapper.tcl-two-col > .ff-t-container > .ff-t-cell {
    display: block !important;
    flex: 1 1 0 !important;
    flex-basis: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
  }

  body.lsc-embed-form-page--copper-lantern .fluentform .ff-column-container.tcl-two-col > .ff-t-cell > .ff-el-group:last-child,
  body.lsc-embed-form-page--copper-lantern .fluentform .ff-name-field-wrapper.tcl-two-col > .ff-t-container > .ff-t-cell > .ff-el-group:last-child {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 459px) {
  body.lsc-embed-form-page--copper-lantern .fluentform .ff-column-container.tcl-two-col,
  body.lsc-embed-form-page--copper-lantern .fluentform .ff-name-field-wrapper.tcl-two-col > .ff-t-container {
    display: block !important;
  }

  body.lsc-embed-form-page--copper-lantern .fluentform .ff-column-container.tcl-two-col > .ff-t-cell,
  body.lsc-embed-form-page--copper-lantern .fluentform .ff-name-field-wrapper.tcl-two-col > .ff-t-container > .ff-t-cell {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }
}

body.lsc-embed-form-page--copper-lantern .fluentform label,
body.lsc-embed-form-page--copper-lantern .fluentform .ff-el-input--label label,
body.lsc-embed-form-page--copper-lantern .fluentform .ff-el-input--label {
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

body.lsc-embed-form-page--copper-lantern .fluentform input,
body.lsc-embed-form-page--copper-lantern .fluentform select,
body.lsc-embed-form-page--copper-lantern .fluentform textarea,
body.lsc-embed-form-page--copper-lantern .fluentform .ff-el-form-control {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  background: #151515 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  min-height: 43px !important;
}

body.lsc-embed-form-page--copper-lantern .fluentform textarea,
body.lsc-embed-form-page--copper-lantern .fluentform textarea.ff-el-form-control {
  min-height: 96px !important;
}

body.lsc-embed-form-page--copper-lantern .fluentform input:focus,
body.lsc-embed-form-page--copper-lantern .fluentform select:focus,
body.lsc-embed-form-page--copper-lantern .fluentform textarea:focus,
body.lsc-embed-form-page--copper-lantern .fluentform .ff-el-form-control:focus {
  border-color: rgba(255,255,255,0.58) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.10) !important;
}

body.lsc-embed-form-page--copper-lantern .fluentform input::placeholder,
body.lsc-embed-form-page--copper-lantern .fluentform textarea::placeholder {
  color: rgba(255,255,255,0.58) !important;
}

/* Native dropdown option styling: supported by most desktop browsers, with graceful fallback where the OS controls it. */
body.lsc-embed-form-page--copper-lantern .fluentform select,
body.lsc-embed-form-page--copper-lantern .fluentform select.ff-el-form-control {
  color-scheme: dark !important;
  accent-color: #b58048 !important;
}

body.lsc-embed-form-page--copper-lantern .fluentform select option,
body.lsc-embed-form-page--copper-lantern .fluentform select optgroup {
  background-color: #151515 !important;
  color: #ffffff !important;
}

body.lsc-embed-form-page--copper-lantern .fluentform select option:checked,
body.lsc-embed-form-page--copper-lantern .fluentform select option:hover,
body.lsc-embed-form-page--copper-lantern .fluentform select option:focus {
  background-color: #b58048 !important;
  color: #0b0b0b !important;
}

/* Keep native date/time controls as dark as Chrome/Safari/Edge allow inside TCL embed pages. */
body.lsc-embed-form-page--copper-lantern,
body.lsc-embed-form-page--copper-lantern .fluentform,
body.lsc-embed-form-page--copper-lantern .fluentform form,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=date],
body.lsc-embed-form-page--copper-lantern .fluentform input[type=time],
body.lsc-embed-form-page--copper-lantern .fluentform input[type=datetime-local],
body.lsc-embed-form-page--copper-lantern .fluentform input[type=month] {
  color-scheme: dark !important;
  accent-color: #b58048 !important;
}

body.lsc-embed-form-page--copper-lantern .fluentform input[type=date]::-webkit-datetime-edit,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=time]::-webkit-datetime-edit,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=datetime-local]::-webkit-datetime-edit,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=month]::-webkit-datetime-edit,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=date]::-webkit-datetime-edit-fields-wrapper,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=time]::-webkit-datetime-edit-fields-wrapper,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=datetime-local]::-webkit-datetime-edit-fields-wrapper,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=month]::-webkit-datetime-edit-fields-wrapper {
  background: #151515 !important;
  color: #ffffff !important;
}

body.lsc-embed-form-page--copper-lantern .fluentform input[type=date]::-webkit-datetime-edit-hour-field,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=time]::-webkit-datetime-edit-hour-field,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=datetime-local]::-webkit-datetime-edit-hour-field,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=date]::-webkit-datetime-edit-minute-field,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=time]::-webkit-datetime-edit-minute-field,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=datetime-local]::-webkit-datetime-edit-minute-field,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=time]::-webkit-datetime-edit-ampm-field,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=datetime-local]::-webkit-datetime-edit-ampm-field,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=date]::-webkit-datetime-edit-day-field,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=date]::-webkit-datetime-edit-month-field,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=date]::-webkit-datetime-edit-year-field {
  background: #151515 !important;
  color: #ffffff !important;
}

body.lsc-embed-form-page--copper-lantern .fluentform input[type=date]::-webkit-calendar-picker-indicator,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=time]::-webkit-calendar-picker-indicator,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=datetime-local]::-webkit-calendar-picker-indicator,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=month]::-webkit-calendar-picker-indicator {
  cursor: pointer !important;
  opacity: 0.85 !important;
  filter: invert(1) brightness(1.35) contrast(0.9) !important;
}

body.lsc-embed-form-page--copper-lantern .fluentform input[type=date]::-webkit-calendar-picker-indicator:hover,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=time]::-webkit-calendar-picker-indicator:hover,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=datetime-local]::-webkit-calendar-picker-indicator:hover,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=month]::-webkit-calendar-picker-indicator:hover {
  opacity: 1 !important;
}

/* Hide browser number spinners so guest count fields do not show mismatched light controls on the dark theme. */
body.lsc-embed-form-page--copper-lantern .fluentform input[type=number] {
  color-scheme: dark !important;
  accent-color: #b58048 !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

body.lsc-embed-form-page--copper-lantern .fluentform input[type=number]::-webkit-inner-spin-button,
body.lsc-embed-form-page--copper-lantern .fluentform input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
}

body.lsc-embed-form-page--copper-lantern .fluentform .ff-el-tc label,
body.lsc-embed-form-page--copper-lantern .fluentform .ff-el-form-check-label,
body.lsc-embed-form-page--copper-lantern .fluentform .ff-el-help-message,
body.lsc-embed-form-page--copper-lantern .fluentform p {
  color: rgba(255,255,255,0.84) !important;
}

body.lsc-embed-form-page--copper-lantern .fluentform .ff_submit_btn_wrapper,
body.lsc-embed-form-page--copper-lantern .fluentform .ff-el-group:has(button[type="submit"]) {
  text-align: center !important;
}

body.lsc-embed-form-page--copper-lantern .fluentform .ff-btn-submit,
body.lsc-embed-form-page--copper-lantern .fluentform button[type="submit"] {
  display: inline-block !important;
  width: auto !important;
  min-width: 170px !important;
  background: #51307f !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 7px !important;
  padding: 12px 32px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

body.lsc-embed-form-page--copper-lantern .fluentform .ff-btn-submit:hover,
body.lsc-embed-form-page--copper-lantern .fluentform button[type="submit"]:hover {
  background: #68409b !important;
}

body.lsc-embed-form-page--copper-lantern .fluentform .ff-el-is-error input,
body.lsc-embed-form-page--copper-lantern .fluentform .ff-el-is-error select,
body.lsc-embed-form-page--copper-lantern .fluentform .ff-el-is-error textarea {
  border-color: rgba(255,91,91,0.95) !important;
}

body.lsc-embed-form-page--copper-lantern .fluentform .error,
body.lsc-embed-form-page--copper-lantern .fluentform .ff-el-is-error .text-danger {
  color: #ffb3b3 !important;
}

@media (max-width: 700px) {
  body.lsc-embed-form-page--copper-lantern .fluentform,
  body.lsc-embed-form-page--copper-lantern .fluentform_wrapper,
  body.lsc-embed-form-page--copper-lantern form.frm-fluent-form {
    padding: 20px 16px 18px !important;
  }
}
