/* ============================================================================
   NRRW — Freemius Checkout theme
   ----------------------------------------------------------------------------
   Built on Blocksy's checkout stylesheet (startersites.io/checkout-modal-v2.css).
   Their sizing, spacing and structural rules are kept as-is — that is the part
   that looks good and is not worth re-deriving. What changed: colours, the
   panel order, and a few behaviours listed at the bottom.

   Colours are set at the TOKEN level wherever Freemius owns them, so one line
   moves everything downstream. Their defaults, read out of the live stylesheet:
       --fs-ds-neutral-900  #1f2933   primary text
       --fs-ds-neutral-800  #323f4b
       --fs-ds-neutral-600  #52606d   muted text
       --fs-ds-red-600      #cf1124   errors
       --fs-ds-white-10     #ffffff   form panel + control surfaces
   The rest (accent, panel shade, icons) Blocksy sets literally, so they are
   overridden in place further down.

   IMPORTANT, unrelated to styling: the checkout only works on the FIRST overlay
   opened per page load — a Freemius SDK bug. checkout.js handles that by
   reloading on later attempts. Do not remove that guard. See its comment.
   ========================================================================== */

:root {
  /* ---- Colour tokens ---------------------------------------------------- */
  --fs-ds-neutral-900: #FEFEFE;   /* was #1f2933 — headings, primary text     */
  --fs-ds-neutral-800: #FEFEFE;   /* was #323f4b                              */
  --fs-ds-neutral-600: #919191;   /* was #52606d — muted / secondary text     */
  --fs-ds-red-600:     #EF5356;   /* was #cf1124 — validation + VAT notice    */

  /* Drives the form panel and, by default, every control surface. The controls
     are pulled back out to #3A3A3A below, so this only paints the panel. */
  --fs-ds-white-10:    #2B2D2F;   /* was #ffffff                              */
  --fs-ds-theme-background-shade: #222222;

  /* ---- Accent -----------------------------------------------------------
     This ONE token drives links, focus rings, selected borders AND the primary
     button. The comp wants those split: pale for anything that highlights,
     indigo only for the button. So the token carries the pale value and the
     button is overridden on its own selector further down. Setting the token to
     the button colour instead is what made every accent go indigo. */
  --fs-ds-theme-primary-accent-color:       #C7D9EA;
  --fs-ds-theme-primary-accent-color-hover: #D8E5F2;
  --fs-ds-theme-control-border-active-color: #C7D9EA;

  /* ---- Surfaces Freemius paints from its light ramp ---------------------- */
  /* The "?" beside VAT is .fs-tooltip__trigger-button, which takes this. */
  --fs-ds-theme-background-accented: #3A3A3A;
  /* Dividers default to background-accented; the comp wants them lighter than
     the surface they sit on, so they are set apart from it explicitly. */
  --fs-ds-theme-divider-color: #555555;
  /* Product box in the summary. Fully transparent lost the frame the padding was
     drawn for, so the row read as misaligned; a hair above the panel puts the
     pill back without making it a card. The border defaults to #cbd2d9 and would
     stay a bright hairline, so it goes. */
  --fs-ds-theme-cart-header-background-color: #262626;
  --fs-ds-theme-cart-header-border-color: transparent;
  --fs-ds-theme-cart-header-footer-background-color: transparent;

  /* ---- Controls --------------------------------------------------------- */
  --fs-ds-theme-control-background-color: #3A3A3A;
  --fs-ds-theme-control-text-color:       #C7D9EA;   /* what the user types  */
  --fs-ds-theme-control-placeholder-color:#919191;   /* ghost text           */
  /* Blocksy's #e2e4e5 border is a light hairline that reads as a bright
     outline on dark, so it matches the field instead — the fields in the comp
     are flat, with no visible edge. */
  --fs-ds-theme-control-border-color: #3A3A3A;
  --fs-ds-theme-control-border-hover-color: var(--fs-ds-theme-primary-accent-color);

  /* ---- Blocksy's shape, unchanged --------------------------------------- */
  --fs-ds-appearance-border-radius: 5px;
  --fs-ds-box-shadow-control: none;
}

/* ---- Blocksy's layout and spacing, verbatim -------------------------------
   Everything in this block is theirs and is deliberately untouched. */

@media screen and (min-width: 661px) {
  .dialog-mode #overlay #content_container.is-showing-slot-in-fulfillment #checkout_main {
    padding: var(--fs-ds-appearance-checkout-vertical-gutter) 0;
  }
}

.fs-input-container__label { font-size: 15px; }

/* Field headings ("Email address", "Country", "VAT number"…) default to the
   primary text colour, which is now white and made them compete with what the
   customer types. They take the same grey as the ghost text instead, so a field
   reads as one quiet unit until it has a value. Both the label and its inner
   text node are set: Freemius colours the child directly in places, so setting
   only the parent leaves some labels white. "Billing information" is a separate
   heading (.billing-details__title) and already sits at this grey. */
.fs-input-container__label,
.fs-input-container__label-text,
fs-input-control-label { color: #919191; }
.fs-input-container { padding-bottom: 25px; }

/* Signal bar — the strip along the top of the dialog. Blocksy drops the dummy
   dots and the size toggle so only a close control remains. */
fs-signal-bar { position: absolute; z-index: 1; width: 100%; }
.fs-signal-bar { height: 40px; padding: 0 14px; background-color: transparent; }
.fs-signal-bar__button--dummy,
.fs-signal-bar__button--toggle-size { display: none; }
.fs-signal-bar__button--close {
  width: initial;
  height: initial;
  background-color: transparent !important;
}
.fs-signal-bar__button--close .fs-svg { width: 14px; height: 14px; }

.fs-checkout-form__details { padding: 20px 10px 10px 10px; }
#order_summary .fs-line-items .fs-line-item { margin-inline: 0; }
fs-line-items:after {
  padding-inline: 20px;
  margin: var(--fs-ds-appearance-gutter-half) 20px 0 20px;
}

.fs-checkout-form__form { padding-top: 10px; }
.fs-checkout-form__form .row { grid-gap: 15px; }
#account_details { padding-top: 30px; padding-bottom: 30px; }
.billing-details__header { padding-top: 30px; }
#billing { padding-top: 30px; padding-bottom: 30px; }

@media screen and (min-width: 1141px) {
  .fs-checkout-form.fs-checkout-form--is-two-column .billing-details { min-height: 490px; }
}

.fs-billing-cycle-outer .fs-billing-cycle__list-item--selected {
  border-color: var(--fs-ds-theme-control-border-hover-color);
  box-shadow: var(--fs-ds-box-shadow-control-active);
}

.fs-payment-method-chooser__container {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 58px;
}
.fs-payment-method-chooser__container .fs-svg { width: 1.5em; height: 1.5em; }
.fs-payment-method-chooser__container .fs-payment-method-chooser__label { margin: 2px 0 0 0; }

.fs-upsell { margin-top: 10px; }
.fs-switch__background { width: 40px; }
.fs-switch__indicator {
  --fs-ds-appearance-control-height-xs: 20px;
  top: 4px;
  left: 4px;
  box-shadow: none;
}
.fs-switch__button--is-active .fs-switch__indicator {
  left: calc(100% - var(--fs-ds-appearance-control-height-xs));
}
.fs-checkout-cta-group { margin-top: 30px; }
.fs-checkout-cta-group .fs-cta--is-icon-right .fs-icon { display: none; }
.fs-checkout-form__form .fs-social-proofing { display: none; }

/* ---- Ours ---------------------------------------------------------------- */

/* Summary panel. Blocksy paints this #f9fafb; the comp wants it a step darker
   than the form side, so the two panels read as separate surfaces. */
@media screen and (min-width: 1141px) {
  .fs-checkout-form.fs-checkout-form--is-two-column .fs-checkout-form__details {
    background-color: #222222;
    /* Freemius rounds this panel bottom-right only (0 0 12px), which is right for
       a layout where it is not the top-right corner. Ours sits on the right, so
       its top corner was square against a rounded frame — most visible next to
       the close button. Both right corners now take the same -lg (12px) the
       frame uses, so it reads as one radius.

       Paint only: no size, position or overflow, so this is not the kind of
       override that fights their postMessage sizing. */
    border-radius: 0
                   var(--fs-ds-appearance-border-radius-lg)
                   var(--fs-ds-appearance-border-radius-lg)
                   0;
  }
}

/* PANEL ORDER: Blocksy passes form_position:"right" in their SDK options and
   then re-orders in CSS. We pass nothing, so Freemius' default already puts the
   form left and the summary right — which is what the comp shows. Their
   `order: initial` + mirrored border-radius rule is therefore NOT copied.
   Reintroducing it would fight a layout we already have for free. */

/* Card / input glyphs. Blocksy's #cad4d9 is tuned for a white field. */
.fs-card-icon,
.fs-input-container__custom-icon { color: #555555; }

/* Close control. Blocksy fades theirs DOWN on hover (#a8acb0 → #53606e), which
   on a dark bar would be a hover that disappears — so it brightens instead. */
.fs-signal-bar__button--close .fs-svg { color: #919191; }
.fs-signal-bar__button--close:hover .fs-svg { color: #FEFEFE; }

/* "No thanks" and "Have a promotional code?" need no rule of their own — both
   are .fs-button-link and read the accent token, which is now pale. A
   single-class override lost to Freemius' own two-class selector anyway. */

/* Product name in the summary, matched to the field headings — it labels the
   row rather than being its value, and the price beside it carries the weight. */
.fs-cart-header__title { color: #919191; }

/* "Billing information" is an <h2> and shipped a step larger than the field
   labels beside it (16px against their 15px) — same family and weight, so size
   was the only thing setting it apart. Matched, since it reads as a peer of the
   labels rather than a heading above them. */
.billing-details__title { font-size: 15px; }

/* Primary CTA. Freemius paints this from the accent token on this exact
   selector, so the override has to match its specificity — a shorter one loses,
   which is why !important is here rather than a tidier rule. */
button.fs-cta.fs-cta--appearance-primary:not(:disabled) {
  background-color: #4856CE !important;
}
button.fs-cta.fs-cta--appearance-primary:not(:disabled):hover {
  background-color: #3F48A3 !important;
}
button.fs-cta.fs-cta--appearance-primary:not(:disabled),
button.fs-cta.fs-cta--appearance-primary:not(:disabled) span {
  color: #FEFEFE !important;
}

/* Freemius repaints a field with the PANEL colour while it is focused — they
   use :focus-within, not :focus — so typing made the field lose its fill. Their
   rule repeats per input type (input[type="email"]:focus-within…) and so
   outranks a type-agnostic one, hence !important. */
input:focus-within:not(:disabled):not(.fs-fake-select),
input:active:not(:disabled):not(.fs-fake-select),
input.selected:not(:disabled):not(.fs-fake-select) {
  background-color: #3A3A3A !important;
}

/* Payment method tiles. Selection lifts the surface and turns the label and
   glyph pale, with a matching border — the label and icon inherit the
   container's colour, so one value moves both. */
.fs-payment-method-chooser__container {
  background-color: #3A3A3A;
  color: #919191;
  border-color: #3A3A3A;
}
.fs-payment-method-chooser__radio:checked + .fs-payment-method-chooser__container {
  background-color: #424445;
  color: #C7D9EA;
  border-color: var(--fs-ds-theme-primary-accent-color);
  box-shadow: var(--fs-ds-box-shadow-control-active);
}
.fs-payment-method-chooser__container .fs-svg,
.fs-payment-method-chooser__container .fs-payment-method-chooser__label { color: inherit; }

/* Blocksy hides the Freemius footer:
       .fs-fulfillment-badge { display: none !important; }
   Left OFF on purpose. That bar carries the "handled by Freemius, our trusted
   reseller and Merchant of Record" line, which is what stops "I don't recognise
   this charge" chargebacks when FREEMIUS appears on the statement instead of
   Ovotone — and it matches what the Terms say. It also holds the language and
   currency pickers, which the summary panel does not duplicate for us the way
   Blocksy's does. Uncomment only with that trade in mind. */

/* Blocksy sets this transparent, which is what made the dialog sit flat on the
   page. Dimming is done from BOTH sides: this paints inside the iframe, which
   covers the viewport, and styles.css blurs the page content behind it. The two
   compose — the blur is under the iframe, this tint is over it. */
:root { --fs-ds-theme-background-overlay: rgba(0, 0, 0, 0.5); }


/* ---- Footer bar -----------------------------------------------------------
   Blocksy hides this outright (.fs-fulfillment-badge { display: none }). We keep
   it: it carries the "handled by Freemius, our Merchant of Record" line that
   answers "what is this charge on my statement", it matches the Terms, and it
   holds the language and currency pickers our summary panel doesn't duplicate.

   Ported from the previous theme, re-pitched to this palette. The bar sits on
   the same ground as the form panel so the pickers read as pills laid on it
   rather than a separate darker strip; their border matches their own fill,
   which is what turns Freemius' outlined control into a solid pill. The
   disclaimer keeps the muted tone — only the pills step up. */
:root {
  --fs-ds-theme-footer-background-color: #222222;
  --fs-ds-theme-footer-text-color: #919191;
  --fs-ds-theme-footer-link-color: #C7D9EA;
  --fs-ds-theme-footer-control-border: #3A3A3A;
  --fs-ds-theme-footer-control-border-hover: #555555;
  --fs-ds-theme-footer-control-border-focus: #C7D9EA;
  --fs-ds-theme-badge-background-color: #3A3A3A;
  --fs-ds-theme-badge-color: #919191;
}

.fs-fulfillment-badge .fs-select__trigger.fs-fake-select {
  background-color: #3A3A3A !important;
}
.fs-fulfillment-badge .fs-select__trigger.fs-fake-select:hover,
.fs-fulfillment-badge .fs-select__trigger.fs-fake-select.fs-select__trigger--is-opened {
  background-color: #424445 !important;
}
.fs-fulfillment-badge .fs-select__label,
.fs-fulfillment-badge .fs-select__dd-icon,
.fs-fulfillment-badge .fs-select__badge { color: #919191; }

.fs-fulfillment-badge .fs-fake-select.fs-select__trigger .fs-select__badge {
  background-color: transparent;
}

/* The picker menus. */
.fs-select__dropdown { background-color: #2B2D2F; border-color: #555555; }
.fs-select__option { background-color: #2B2D2F; color: #919191; }
/* Their hover resolves to --…-background-accented, which is #3A3A3A here, so it
   needs stating or there is effectively no hover once the ramp is inverted. */
.fs-select__option:not(:disabled):hover { background-color: #3A3A3A; color: #FEFEFE; }
.fs-select__option.fs-select__option--is-selected {
  background-color: #3A3A3A !important;
  color: #C7D9EA !important;
  box-shadow: inset 0 0 0 1px #C7D9EA;
}

/* The currency symbol chip belongs to its row's text, so it takes that colour in
   both states rather than the dark chip Freemius draws. !important rather than a
   matching selector because they repaint it from several state variants — the
   one that kept reappearing is `…--is-selected:focus:not(:disabled)`, and the
   selected option TAKES FOCUS when the menu opens, so the dark chip returned the
   moment the picker was used rather than merely rendered. Border kept at
   transparent rather than removed so the chip doesn't change size. */
.fs-select__option .fs-select__option-badge {
  background-color: transparent !important;
  border-color: transparent !important;
  color: inherit !important;
}