/*
 * Boosted look for the Freemius checkout window.
 *
 * The checkout is Freemius's own page, so it cannot be styled from the website.
 * Freemius loads one stylesheet of ours instead: in the Freemius Developer
 * Dashboard go to Plans > Customization and put this file's https address in
 * "Custom Checkout CSS file", for example
 *
 *   https://YOUR-DOMAIN/freemius-checkout.css
 *
 * Colours, shapes and fonts go through the variables Freemius publishes for
 * this purpose (--fs-ds-*), on :root as their guide requires, so a Freemius
 * update should not break them. The header at the end of the file also uses a
 * few of the window's own class names; if Freemius renames those, only the
 * header falls back to its default look.
 */

/* The website's text font. .htaccess lets the checkout load it from this site. */
@font-face {
  font-family: "Figtree Variable";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/figtree-latin-wght-normal.woff2") format("woff2");
}

:root {
  /* Boosted indigo for buttons, links, focus rings and the selected payment method. */
  --fs-ds-theme-primary-accent-color: #4F46E5;
  --fs-ds-theme-primary-accent-color-hover: #4338CA;

  /* The website's greys, from its off-white surface to its near-black ink. */
  --fs-ds-neutral-10: #F4F4F1;
  --fs-ds-neutral-100: #EAEAE5;
  --fs-ds-neutral-200: #DCDCD7;
  --fs-ds-neutral-300: #B9BBC6;
  --fs-ds-neutral-400: #8E909A;
  --fs-ds-neutral-500: #62646D;
  --fs-ds-neutral-600: #4C4E57;
  --fs-ds-neutral-700: #3A3C45;
  --fs-ds-neutral-800: #1C1D24;
  --fs-ds-neutral-900: #0E0F14;

  /* Green and yellow as used on the website. */
  --fs-ds-theme-primary-green-color: #0CCE6B;
  --fs-ds-theme-review-star-color: #FACC15;

  /* Navy footer bar, like the website's dark sections. */
  --fs-ds-theme-footer-background-color: #14123A;
  --fs-ds-theme-footer-text-color: #DCDCD7;
  --fs-ds-theme-footer-link-color: #FACC15;
  --fs-ds-theme-footer-control-border-focus: #FACC15;

  /* The product image sits on indigo while it loads, not on grey. */
  --fs-ds-theme-cart-header-product-image-background-color: #4F46E5;

  /* Flat, squarer shapes: small radius, no drop shadows on fields and buttons. */
  --fs-ds-appearance-border-radius: 4px;
  --fs-ds-appearance-border-radius-sm: 3px;
  --fs-ds-appearance-border-radius-lg: 6px;
  --fs-ds-box-shadow-sm: none;
  --fs-ds-box-shadow-regular: none;
  --fs-ds-box-shadow-control: none;
  --fs-ds-box-shadow-control-active: 0 0 0 1px #4F46E5;
  --fs-ds-box-shadow-switch-knob: none;

  /* Website font, with bolder labels and prices. The size stays at the checkout default so
     the card-number field keeps room for its card icons. */
  --fs-ds-typography-font-base: "Figtree Variable", Figtree, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-ds-typography-font-size-base: 14px;
  --fs-ds-typography-font-weight-bold: 700;
}

/* The card-number placeholder is a row of dots spaced for the checkout's own font;
   in ours it runs into the card icons, so that one placeholder keeps the original. */
#billing_cc::placeholder {
  font-family: "Source Sans 3", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/*
 * The window opens full screen (the website asks for that when it opens it), so
 * it gets a plain page header instead of the grey bar with three round buttons:
 * the Boosted logo on the left and one close button on the right.
 */
:root {
  --fs-ds-appearance-signal-bar-height: 64px;
  --fs-ds-appearance-signal-bar-button-size: 36px;
  --fs-ds-appearance-signal-bar-button-icon-size: 16px;
  --fs-ds-theme-signal-bar-background-color: #FFFFFF;
  --fs-ds-theme-signal-bar-button-background-color: transparent;
  --fs-ds-theme-signal-bar-close-button-background-color: #F4F4F1;

  /* The bar at the bottom is the window's footer: flat, no shadow over the form. */
  --fs-ds-box-shadow-footer: none;
}

.fs-signal-bar {
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #DCDCD7;
}

.fs-signal-bar::before {
  content: "";
  flex: none;
  width: 132px;
  height: 36px;
  background: url("brand/svg/boosted-logo-light.svg") left center / contain no-repeat;
}

/* Only the close button stays; the resize button and the spare dot are not needed. */
.fs-signal-bar__button--toggle-size,
.fs-signal-bar__button--dummy {
  display: none;
}

/* A plain X: no circle, no box. It only gets a light square behind it on hover. */
.fs-signal-bar__button--close {
  border: 0;
  border-radius: 4px;
  color: #0E0F14;
  cursor: pointer;
}

.fs-signal-bar__button--close .fs-icon,
.fs-signal-bar__button--close svg {
  opacity: 1;
  visibility: visible;
  color: #0E0F14;
  fill: currentColor;
}

/*
 * Discounts stand out in bolt yellow. On the light summary (narrow screens) that
 * is a yellow strip with dark text; on the dark column below it is yellow text.
 */
fs-line-item.discount {
  display: block;
  background: #FACC15;
  border-radius: 4px;
}

fs-line-item.discount .description,
fs-line-item.discount .fs-line-item__amount {
  color: #0E0F14;
  font-weight: 600;
}

/*
 * Wide screens, where the order summary is the right-hand column: that column is
 * dark slate, and the header has no bar of its own, so the logo sits on the white
 * half and a white X on the dark half.
 */
@media (min-width: 1141px) {
  .fs-checkout-form--is-two-column .fs-checkout-form__details {
    /* The same variables as above, flipped for a dark background, for this column only. */
    --fs-ds-theme-background-color: #0F172A;
    --fs-ds-theme-background-shade: #0F172A;
    --fs-ds-theme-background-accented: #263147;
    --fs-ds-theme-divider-color: #263147;
    --fs-ds-theme-text-color: #FFFFFF;
    --fs-ds-theme-heading-text-color: #FFFFFF;
    --fs-ds-theme-muted-text-color: #B6BCCB;
    --fs-ds-theme-cart-header-background-color: #162036;
    --fs-ds-theme-cart-header-border-color: #2C3852;
    --fs-ds-theme-cart-header-footer-background-color: #162036;
    --fs-ds-theme-control-background-color: #162036;
    --fs-ds-theme-control-border-color: #3A4763;
    --fs-ds-theme-control-border-hover-color: #5B6885;
    --fs-ds-theme-control-text-color: #FFFFFF;
    --fs-ds-theme-button-background-color: #263147;
    --fs-ds-theme-button-background-hover-color: #3A4763;
    --fs-ds-theme-button-text-color: #FFFFFF;
    --fs-ds-neutral-10: #162036;
    --fs-ds-neutral-100: #263147;
    --fs-ds-neutral-200: #2C3852;
    --fs-ds-neutral-300: #5B6885;
    --fs-ds-neutral-400: #8A94AB;
    --fs-ds-neutral-500: #B6BCCB;
    --fs-ds-neutral-600: #B6BCCB;
    --fs-ds-neutral-700: #DDE1EA;
    --fs-ds-neutral-800: #FFFFFF;
    --fs-ds-neutral-900: #FFFFFF;
    background-color: #0F172A;
    color: #FFFFFF;
  }

  /* The window paints its two halves itself; this is the same hard split, white and slate. */
  [dir="ltr"] #checkout_form.fs-checkout-form--is-two-column,
  [dir="ltr"] .is-two-column .fs-signal-bar {
    background: linear-gradient(to right, #FFFFFF 50%, #0F172A 50%);
  }

  [dir="rtl"] #checkout_form.fs-checkout-form--is-two-column,
  [dir="rtl"] .is-two-column .fs-signal-bar {
    background: linear-gradient(to left, #FFFFFF 50%, #0F172A 50%);
  }

  .is-two-column .fs-signal-bar {
    border-bottom: 0;
  }

  .is-two-column .fs-signal-bar__button--close,
  .is-two-column .fs-signal-bar__button--close .fs-icon,
  .is-two-column .fs-signal-bar__button--close svg {
    color: #FFFFFF;
  }

  .is-two-column .fs-signal-bar__button--close:hover,
  .is-two-column .fs-signal-bar__button--close:focus {
    background-color: #263147;
  }

  /* Indigo links are too dim on slate, so they use a lighter indigo here. */
  .fs-checkout-form--is-two-column .fs-checkout-form__details .fs-button-link:not(:has(u)) {
    color: #A5B4FC;
  }

  /* The site-count menu sits a shade lighter than the column so its edge shows. */
  .fs-checkout-form--is-two-column .fs-checkout-form__details .fs-select__option:not(.fs-select__option--is-selected) {
    background-color: #1E293B;
  }

  .fs-checkout-form--is-two-column .fs-checkout-form__details .fs-select__option:not(.fs-select__option--is-selected):hover {
    background-color: #2C3852;
  }

  .fs-checkout-form--is-two-column .fs-checkout-form__details fs-line-item.discount {
    background: none;
  }

  .fs-checkout-form--is-two-column .fs-checkout-form__details fs-line-item.discount .description,
  .fs-checkout-form--is-two-column .fs-checkout-form__details fs-line-item.discount .fs-line-item__amount {
    color: #FACC15;
  }
}