/**
 * EDD Free Downloads — re-tone the "Download Now" modal onto the Moust Boost
 * palette.
 *
 * The plugin renders a native <dialog id="edd-free-downloads-modal"> with a
 * hardcoded white background and light-theme chrome (assets/css/
 * edd-free-downloads.css in the edd-free-downloads plugin) — on this site's
 * dark surface that reads as a jarring white card. Nothing here changes
 * layout; it only re-tones colours/borders and restyles the field/button
 * recipe to match the rest of the site (same input/button treatment as the
 * store's "discount code" field and the mailing-list forms).
 *
 * Loaded with a dependency on the plugin's own 'edd-free-downloads' handle
 * (see moustboost_enqueue_free_download_assets() in inc/downloads.php) so it
 * always prints after it regardless of registration order — equal-specificity
 * rules win on source order, so no !important is needed here.
 *
 * Markup for the modal's contents (field order, labels) comes from this
 * theme's edd_templates/download-modal.php override of the plugin's
 * templates/download-modal.php — see that file for the structural half of
 * this change.
 */

#edd-free-downloads-modal {
  background: var(--mb-bg-tertiary, #1c2230);
  color: var(--mb-text-secondary, rgba(255, 255, 255, 0.68));
  border: 0.0625rem solid var(--mb-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--mb-radius-sm, 0.5rem);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.45);
}

/* The plugin swaps to a transparent background while its own loading spinner
   is showing (`:has(.edd-free-downloads-loading)`) — restated here so that
   brief state doesn't flash back to white against our dark backdrop. */
#edd-free-downloads-modal:has(.edd-free-downloads-loading) {
  background: rgba(0, 0, 0, 0);
}

#edd-free-downloads-modal::backdrop {
  background: rgba(10, 10, 10, 0.72);
}

/* The plugin's own CSS pads #edd_free_download_form at 20px, which reads as
   cramped once the fields/button get the site's larger input sizing below. */
#edd-free-downloads-modal #edd_free_download_form {
  padding: 1.75rem;
}

/* "Free download" eyebrow above the beat title — same small-caps recipe as
   .mb-page-heading__eyebrow (blocks.css): uppercase, letter-spaced, quieter
   than the title beneath it. Room for the close button isn't needed here
   the way the title needs it: the eyebrow's short fixed string never runs
   long enough to reach that corner. */
.mb-free-download-modal__eyebrow {
  margin: 0 0 0.375rem !important;
  color: var(--mb-text-tertiary, rgba(255, 255, 255, 0.48));
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--mb-letter-spacing-meta, 0.03em);
}

.edd-free-downloads-modal-title {
  /* Room for the close button, which is absolutely positioned in the same
     top-right corner — without this the title's own text can run under it. */
  padding-right: 2rem;
  margin: 0 0 0.5rem;
  color: var(--mb-text-primary, #fff);
  font-size: var(--mb-font-size-xl, 1.25rem);
  font-weight: 600;
}

/* Standard intro copy under the title (see edd_templates/download-modal.php,
   configurable via Text Snippets: key "free_download_description") — plain
   paragraph styling, quieter than the title but more present than the
   "logged in as" footnote further down.

   Scoped with the #edd-free-downloads-modal id (matching the generic
   `#edd_free_download_form > p` rule's specificity below) so its own margin
   wins the cascade instead of being silently overridden by that rule, which
   would otherwise apply to every direct-child <p> regardless of class. */
#edd-free-downloads-modal .mb-free-download__intro {
  margin: 0 0 1.25rem;
  color: var(--mb-text-secondary, rgba(255, 255, 255, 0.68));
  font-size: var(--mb-font-size-sm, 0.875rem);
  line-height: 1.5;
}

/* Each field is wrapped in a bare <p> by the plugin's template — this is the
   one place a field's spacing can be controlled without touching markup. */
#edd-free-downloads-modal #edd_free_download_form > p {
  margin: 0 0 1.125rem;
}

#edd-free-downloads-modal label {
  margin-bottom: 0.5rem;
  color: var(--mb-text-secondary, rgba(255, 255, 255, 0.68));
  font-size: var(--mb-font-size-sm, 0.875rem);
  font-weight: 600;
}

.edd-free-downloads-required {
  color: #f2a1a1;
}

/* Same bordered/subtle-fill recipe as the store's discount-code field and the
   mailing-list forms — every "type something" control on the site reads as
   one component. */
#edd-free-downloads-modal input[type='text'],
#edd-free-downloads-modal input[type='password'],
#edd-free-downloads-modal input[type='email'] {
  background: rgba(255, 255, 255, 0.04);
  border: 0.0625rem solid var(--mb-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--mb-radius-sm, 0.5rem);
  color: var(--mb-text-primary, #fff);
  font-family: inherit;
  /* The plugin's own rule sets padding: 8px — bumped up to match the site's
     other text inputs (store discount field, mailing-list forms) so this
     doesn't read as a smaller, cheaper control next to them. */
  padding: 0.75rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

#edd-free-downloads-modal input[type='text']:hover,
#edd-free-downloads-modal input[type='password']:hover,
#edd-free-downloads-modal input[type='email']:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--mb-border-strong, rgba(255, 255, 255, 0.2));
}

#edd-free-downloads-modal input[type='text']:focus,
#edd-free-downloads-modal input[type='password']:focus,
#edd-free-downloads-modal input[type='email']:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--mb-border-strong, rgba(255, 255, 255, 0.2));
}

#edd-free-downloads-modal input[type='text']::placeholder,
#edd-free-downloads-modal input[type='password']::placeholder,
#edd-free-downloads-modal input[type='email']::placeholder {
  color: var(--mb-text-tertiary, rgba(255, 255, 255, 0.48));
}

/**
 * Newsletter opt-in checkbox (see edd_free_downloads_show_newsletter() in
 * the edd-free-downloads plugin's includes/functions.php — its markup isn't
 * themeable, only stylable from here).
 *
 * The blanket `#edd-free-downloads-modal label` rule above bolds every field
 * label, which reads fine for "Email"/"Name" but is too heavy for this
 * incidental opt-in line — knocked back to a normal weight and sized to
 * match the site's other fine-print-adjacent text.
 */
#edd-free-downloads-modal .edd-free-downloads-checkbox-label {
  font-weight: 400;
  font-size: var(--mb-font-size-sm, 0.875rem);
  margin-bottom: 0;
  vertical-align: middle;
}

/**
 * Custom checkbox — same bordered/subtle-fill recipe as the text/email
 * inputs above (rgba(255,255,255,0.04) fill, var(--mb-border) hairline),
 * just square and small so it doesn't compete with the actual form fields.
 */
#edd-free-downloads-modal input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  margin: 0 0.5rem 0 0;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.04);
  border: 0.0625rem solid var(--mb-border, rgba(255, 255, 255, 0.12));
  border-radius: 0.25rem;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

#edd-free-downloads-modal input[type='checkbox']:hover {
  border-color: var(--mb-border-strong, rgba(255, 255, 255, 0.2));
}

#edd-free-downloads-modal input[type='checkbox']:checked {
  background: var(--mb-button-bg, #415675);
  border-color: var(--mb-button-bg, #415675);
}

#edd-free-downloads-modal input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.0625rem;
  width: 0.3125rem;
  height: 0.5625rem;
  border: solid var(--mb-button-text, #fff);
  border-width: 0 0.125rem 0.125rem 0;
  transform: rotate(45deg);
}

#edd-free-downloads-modal input[type='checkbox']:focus-visible {
  outline: none;
  border-color: var(--mb-border-strong, rgba(255, 255, 255, 0.2));
}

#edd-free-downloads-modal hr {
  border: none;
  border-top: 0.0625rem solid var(--mb-border, rgba(255, 255, 255, 0.12));
  margin: 1rem 0;
}

/* Submit button — same fill/hover recipe as the Purchase button
   (store.css: .mb-buy .edd-add-to-cart) and the newsletter submit, so every
   primary action on the site is the same component.

   Excludes .edd-free-downloads-modal-close: that's a <button> too, and
   without the :not() it picked up this same padded/filled treatment, which
   fought with the plugin's own absolute-positioned 24px-square close-button
   rule — the two together produced an oversized pill badge sitting on top
   of the title instead of a plain X. */
#edd-free-downloads-modal button:not(.edd-free-downloads-modal-close),
#edd-free-downloads-modal a.button {
  background: var(--mb-button-bg, #415675);
  border: 0.0625rem solid var(--mb-button-border, transparent);
  border-radius: var(--mb-radius-sm, 0.5rem);
  color: var(--mb-button-text, #fff);
  font-family: inherit;
  font-weight: 600;
  padding: 0.875rem 1.25rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#edd-free-downloads-modal button:not(.edd-free-downloads-modal-close):hover,
#edd-free-downloads-modal a.button:hover,
#edd-free-downloads-modal button:not(.edd-free-downloads-modal-close):focus-visible,
#edd-free-downloads-modal a.button:focus-visible {
  background: var(--mb-button-bg-hover, transparent);
  border-color: var(--mb-button-border-hover, #fff);
  color: var(--mb-button-text-hover, #fff);
}

/* Sits in the same top-right corner as the title (see the title's
   padding-right above) — the plugin positions and sizes this element
   (top/right/width/height) itself; only colour is re-toned here. */
.edd-free-downloads-modal-close {
  color: var(--mb-text-tertiary, rgba(255, 255, 255, 0.48));
  background: transparent;
}

.edd-free-downloads-modal-close:hover {
  color: var(--mb-text-primary, #fff);
}

.edd-free-downloads-verification-message-wrapper {
  background: var(--mb-surface-subtle, rgba(255, 255, 255, 0.05));
  border: 0.0625rem solid var(--mb-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--mb-radius-sm, 0.5rem);
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.edd-free-downloads-verification-message {
  color: var(--mb-text-secondary, rgba(255, 255, 255, 0.68));
  font-size: var(--mb-font-size-sm, 0.875rem);
}

/* Error list — kept as a distinct "something's wrong" surface, just re-toned
   from the plugin's light yellow onto the site's dark error palette (same
   red used by .mb-footer-newsletter__message--error). */
.edd-free-download-errors {
  background: rgba(242, 161, 161, 0.08);
  border: 0.0625rem solid rgba(242, 161, 161, 0.32);
  border-radius: var(--mb-radius-sm, 0.5rem);
}

.edd-free-download-errors p {
  color: #f2a1a1;
  font-size: var(--mb-font-size-sm, 0.875rem);
}

.edd-free-downloads-direct-download button.edd-free-downloads-direct-download-link {
  color: var(--mb-text-secondary, rgba(255, 255, 255, 0.68));
}

.edd-free-downloads-direct-download button.edd-free-downloads-direct-download-link:hover {
  color: var(--mb-text-primary, #fff);
}

/**
 * Licensing fine print, directly under the Download button (see
 * edd_templates/download-modal.php, configurable via Text Snippets: key
 * "free_download_fine_print").
 *
 * Sized a step up from the "logged in as" footnote below — that one is a
 * rarely-relevant aside, this is a licensing disclaimer that applies to every
 * download, so it reads as a normal small paragraph rather than fine-print
 * fine print.
 */
.mb-free-download__fine-print {
    margin: 0.75rem 0 !important;
    font-size: 12px;
    line-height: 1.5;
    color: var(--mb-text-tertiary, rgba(255, 255, 255, 0.48));
    text-align: center;
}

/**
 * No focus ring on the modal shell.
 *
 * The plugin's modal library focuses the dialog container itself on open (a
 * common a11y move so screen readers land inside), and Safari/iOS paints its
 * default focus outline around the whole panel — a bright rectangle hugging
 * the modal that reads as a rendering glitch, not a focus cue. The container
 * isn't an interactive control, so the ring communicates nothing; actual
 * focus feedback stays on the fields and buttons, which keep their own
 * styled focus states above. assets/js/free-download.js then moves focus on
 * to the email field, so keyboard/AT users land somewhere genuinely useful.
 */
#edd-free-downloads-modal:focus,
#edd-free-downloads-modal:focus-visible,
#edd-free-downloads-modal [role='dialog']:focus,
#edd-free-downloads-modal [role='dialog']:focus-visible {
  outline: none;
  box-shadow: none;
}

/**
 * iOS zoom guard.
 *
 * Mobile Safari auto-zooms the page whenever a focused input's font-size is
 * under 16px — the viewport lurches in and doesn't come back on blur. The
 * shared input recipe above inherits the modal's base size, which can
 * resolve below that threshold, so on touch-sized screens every text entry
 * in the modal is pinned to 16px flat. Desktop keeps the inherited size.
 */
@media (max-width: 60rem) {
  #edd-free-downloads-modal input[type='text'],
  #edd-free-downloads-modal input[type='password'],
  #edd-free-downloads-modal input[type='email'] {
    font-size: 16px;
  }
}