/* MarinePals book purchase modal
 * High-specificity selectors + explicit values so theme styles
 * (Impreza / WPBakery / etc.) can't bleed through.
 */

.mp-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 20, 40, 0.55) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2147483600 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: #102a43 !important;
  text-align: left !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}
.mp-modal-backdrop.mp-open { display: flex !important; }

.mp-modal-backdrop *,
.mp-modal-backdrop *::before,
.mp-modal-backdrop *::after {
  box-sizing: border-box !important;
}

.mp-modal-backdrop .mp-modal {
  background: #fff !important;
  width: 100% !important;
  max-width: 600px !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
  padding: 24px !important;
  position: relative !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
  margin: 0 !important;
  border: none !important;
  color: #102a43 !important;
  font-size: 14px !important;
  text-align: left !important;
}

.mp-modal-backdrop .mp-modal h2 {
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #102a43 !important;
  line-height: 1.3 !important;
  border: none !important;
  background: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.mp-modal-backdrop .mp-modal .mp-subtitle {
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: #627d98 !important;
  font-weight: normal !important;
  line-height: 1.4 !important;
}

.mp-modal-backdrop .mp-modal .mp-close {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  border: none !important;
  background: transparent !important;
  font-size: 22px !important;
  line-height: 1 !important;
  color: #627d98 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-weight: normal !important;
}
.mp-modal-backdrop .mp-modal .mp-close:hover { color: #102a43 !important; }

.mp-modal-backdrop .mp-modal .mp-field { margin-bottom: 12px !important; }
.mp-modal-backdrop .mp-modal .mp-field label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #334e68 !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.mp-modal-backdrop .mp-modal .mp-field label .mp-req { color: #d64545 !important; }
.mp-modal-backdrop .mp-modal .mp-field input {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding: 9px 10px !important;
  margin: 0 !important;
  border: 1px solid #bcccdc !important;
  border-radius: 4px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: normal !important;
  line-height: 1.4 !important;
  color: #102a43 !important;
  background: #fff !important;
  background-image: none !important;
  outline: none !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
  text-transform: none !important;
}
.mp-modal-backdrop .mp-modal .mp-field input:focus {
  border-color: #2680c2 !important;
  box-shadow: 0 0 0 3px rgba(38, 128, 194, 0.15) !important;
}

.mp-modal-backdrop .mp-modal .mp-row { display: flex !important; gap: 10px !important; }
.mp-modal-backdrop .mp-modal .mp-row .mp-field { flex: 1 !important; }

/* ---- Product option radio list (borderless) ----
   Each row:  ( • )   <bold title> :-  <normal description that may wrap to
   multiple lines, all aligned under the title's left edge>. */
.mp-modal-backdrop .mp-modal .mp-options { margin-bottom: 16px !important; }
.mp-modal-backdrop .mp-modal .mp-options-label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #334e68 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.mp-modal-backdrop .mp-modal .mp-option {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 10px !important;
  /* borderless — no card */
  border: 0 !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  background: transparent !important;
  box-shadow: none !important;
}
.mp-modal-backdrop .mp-modal .mp-option:hover .mp-opt-title { color: #2680c2 !important; }
/* Highlight only the title when this option is selected — no background fill, no border. */
.mp-modal-backdrop .mp-modal .mp-option.mp-selected .mp-opt-title,
.mp-modal-backdrop .mp-modal .mp-option:has(input:checked) .mp-opt-title {
  color: #2680c2 !important;
}
.mp-modal-backdrop .mp-modal .mp-option input[type="radio"] {
  flex: 0 0 auto !important;
  width: 16px !important;
  height: 16px !important;
  /* nudge the radio down a touch so its centre lines up with the first text line */
  margin: 3px 0 0 0 !important;
  padding: 0 !important;
  accent-color: #2680c2 !important;
  box-shadow: none !important;
  vertical-align: top !important;
}
/* The text block sits to the RIGHT of the radio (flex row, top-aligned).
   Inside, the bold title, the " :- " separator and the description flow
   inline and wrap as one paragraph; wrapped lines stay in this column,
   never under the radio. */
.mp-modal-backdrop .mp-modal .mp-opt-text {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #334e68 !important;
}
.mp-modal-backdrop .mp-modal .mp-opt-title {
  font-weight: 700 !important;
  color: #102a43 !important;
}
.mp-modal-backdrop .mp-modal .mp-opt-sep {
  font-weight: 400 !important;
  color: #627d98 !important;
}
.mp-modal-backdrop .mp-modal .mp-opt-desc {
  font-weight: 400 !important;
  color: #334e68 !important;
}

.mp-modal-backdrop .mp-modal .mp-error {
  color: #b51717 !important;
  background: #fff0f0 !important;
  border: 1px solid #f5c2c2 !important;
  border-radius: 4px !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
  display: none;
}
.mp-modal-backdrop .mp-modal .mp-error.mp-show { display: block !important; }

.mp-modal-backdrop .mp-modal .mp-submit {
  display: block !important;
  width: 100% !important;
  padding: 11px 14px !important;
  margin: 0 !important;
  background: #2680c2 !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  height: auto !important;
  min-height: 0 !important;
}
.mp-modal-backdrop .mp-modal .mp-submit:hover:not(:disabled) { background: #186faf !important; }
.mp-modal-backdrop .mp-modal .mp-submit:disabled { background: #9fb3c8 !important; cursor: not-allowed !important; }

.mp-modal-backdrop .mp-modal .mp-footer-note {
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 11px !important;
  color: #829ab1 !important;
  line-height: 1.4 !important;
}