/* ==========================================================================
   MindMonks Booking — form fallback styles.

   The MindMonks theme already styles every class used here. These rules are
   wrapped in :where() so they carry zero specificity: the theme always wins,
   and the forms still look right if the plugin is used with another theme.
   ========================================================================== */

:where(.mm-form) {
  --mm-b-primary: #013628;
  --mm-b-border: #d5d3c7;
  --mm-b-surface: #fff;
  --mm-b-muted: #eff5f2;
  --mm-b-text: #1b2420;
  --mm-b-soft: #545a55;
  --mm-b-error: #9d2f2f;

  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  min-width: 0;
  color: var(--mm-b-text);
}

:where(.mm-form) * {
  box-sizing: border-box;
}

:where(.mm-fieldset) {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

:where(.mm-fieldset__legend) {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #636d00;
  padding: 0;
}

:where(.mm-field) {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

:where(.mm-field-row) {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

:where(.mm-field-row) > * {
  flex: 1 1 min(100%, 15rem);
  min-width: 0;
}

:where(.mm-field__label) {
  font-size: 0.9rem;
  font-weight: 600;
}

:where(.mm-field__hint) {
  font-size: 0.8rem;
  color: var(--mm-b-soft);
  order: 1;
}

:where(.mm-input, .mm-select, .mm-textarea) {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  /* 16px stops iOS Safari zooming the page when a field is focused */
  font-size: max(16px, 0.95rem);
  font-family: inherit;
  border: 1px solid var(--mm-b-border);
  border-radius: 10px;
  background: var(--mm-b-surface);
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

:where(.mm-textarea) {
  min-height: 8rem;
  resize: vertical;
}

:where(.mm-field.has-error) :where(.mm-input, .mm-select, .mm-textarea) {
  border-color: var(--mm-b-error);
}

:where(.mm-field__error) {
  display: none;
  order: 2;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--mm-b-error);
}

:where(.mm-field.has-error) :where(.mm-field__error) {
  display: block;
}

:where(.mm-options) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

:where(.mm-option) {
  position: relative;
  flex: 1 1 min(100%, 11rem);
  min-width: 0;
}

:where(.mm-option) input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

:where(.mm-option__body) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  height: 100%;
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--mm-b-border);
  border-radius: 14px;
  background: var(--mm-b-surface);
  cursor: pointer;
}

:where(.mm-option) input:checked + .mm-option__body {
  border-color: var(--mm-b-primary);
  background: var(--mm-b-muted);
  box-shadow: inset 0 0 0 1px var(--mm-b-primary);
}

:where(.mm-option) input:focus-visible + .mm-option__body {
  outline: 2px solid var(--mm-b-primary);
  outline-offset: 2px;
}

:where(.mm-option__title) {
  font-size: 0.9rem;
  font-weight: 600;
}

:where(.mm-option__meta) {
  font-size: 0.8rem;
  color: var(--mm-b-soft);
}

:where(.mm-check) {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-height: 44px;
  padding-block: 0.35rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--mm-b-soft);
  cursor: pointer;
}

:where(.mm-check) input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.12rem 0 0;
  border: 1.5px solid var(--mm-b-border);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

:where(.mm-check) input[type="radio"] { border-radius: 50%; }

:where(.mm-check) input[type="checkbox"]:checked {
  border-color: #0d5946;
  background: #0d5946
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m3.5 8.4 3 3 6-6.6'/%3E%3C/svg%3E")
    center / 0.8rem no-repeat;
}

:where(.mm-check) input[type="radio"]:checked {
  border-color: #0d5946;
  border-width: 0.42rem;
}

:where(.mm-summary) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 14px;
  background: var(--mm-b-muted);
  font-size: 0.9rem;
}

:where(.mm-summary__row) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
}

:where(.mm-summary__row--total) {
  padding-top: 0.5rem;
  border-top: 1px solid #b9d5c9;
  font-weight: 600;
  font-size: 1.05rem;
}

:where(.mm-form__notice) {
  padding: 1rem;
  border-radius: 14px;
  font-size: 0.9rem;
  border: 1px solid transparent;
}

:where(.mm-form__notice--error) {
  background: #fbeaea;
  border-color: #e5c3c3;
  color: var(--mm-b-error);
}

:where(.mm-form__notice--success) {
  background: #e4f1eb;
  border-color: #bcdccd;
  color: #2c7a5b;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

:where(.mm-form__notice-text) {
  margin: 0;
}

:where(.mm-form__notice)[hidden] {
  display: none;
}

:where(.mm-consent) {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--mm-b-soft);
  margin: 0;
}

:where(.mm-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--mm-b-primary);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

:where(.mm-btn--block) {
  display: flex;
  width: 100%;
}

.mm-btn.is-loading,
.mm-btn[disabled] {
  opacity: 0.62;
  pointer-events: none;
}

/* Wide service rows -------------------------------------------------------- */

:where(.mm-options--stack) {
  flex-direction: column;
  flex-wrap: nowrap;
}

:where(.mm-option--wide) {
  flex: 1 1 100%;
}

:where(.mm-option--wide) :where(.mm-option__body) {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

:where(.mm-option__main) {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 12rem;
  min-width: 0;
}

:where(.mm-option__price) {
  flex: 0 0 auto;
  text-align: right;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}

:where(.mm-option__price) small {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--mm-b-soft);
  white-space: normal;
}

/* A value that cannot be changed here ------------------------------------- */

:where(.mm-fixed-value) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  margin: 0;
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  border: 1px dashed var(--mm-b-border);
  border-radius: 10px;
  background: var(--mm-b-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

:where(.mm-fixed-value) span {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--mm-b-soft);
}

/* Country + WhatsApp number ------------------------------------------------ */

:where(.mm-phone__number) {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--mm-b-border);
  border-radius: 10px;
  background: var(--mm-b-surface);
  overflow: hidden;
}

:where(.mm-phone__dial) {
  display: flex;
  align-items: center;
  padding-inline: 0.9rem;
  border-right: 1px solid var(--mm-b-border);
  background: var(--mm-b-muted);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}

:where(.mm-phone__number) :where(.mm-input) {
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* Revealed optional block -------------------------------------------------- */

:where(.mm-reveal-block) {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
}

:where(.mm-reveal-block) > * {
  overflow: hidden;
  min-height: 0;
}

:where(.mm-reveal-block.is-open) {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
}

/* Elements the enhancement hides outright */
.mm-form [hidden] {
  display: none !important;
}

/* Honeypot — visually and audibly gone, but still fillable by a bot */
.mm-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

:where(.mm-visually-hidden) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:where(.mm-form__actions) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

:where(.mm-form__actions-note) {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--mm-b-soft);
}