/* ====================================================================
 * CCX App CTA - the floating way into the app on the three app pages.
 *
 * Namespace ccct-. Lower left corner, wide screens only, from six hundred
 * pixels of scroll depth. The lower right belongs to the availability card
 * of assets/ccx-avail.css, and the two are held apart twice: this one is
 * pinned to the left, and its width is capped at half the window minus both
 * gaps, so they cannot meet even in a narrow desktop window.
 *
 * The pill repeats the opening button of /price-app/, which is a painted
 * picture there and drawn here: a quiet rim, a warm glow gathering towards
 * the right, white label, and an orange gradient disc with an arrow at the
 * end. Colours are the ones of the site: card blue #181f32, rule
 * rgb(44,51,76), the vertical orange #FF8E2B over #CE5904, silver #d7dce8.
 *
 * The pill is present in the document from the first frame and parked twelve
 * pixels below its place, so the browser has laid it out long before it is
 * asked to move; the entrance is a transform on an element that already has
 * its size, never a first paint.
 * ==================================================================== */

.ccct {
  --ccct-gap: 22px;
  /* Room for a consent revisit button when one is there. The script writes
   * the measured height into it and leaves it at zero otherwise. */
  --ccct-lift: 0px;

  position: fixed;
  left: var(--ccct-gap);
  bottom: calc(var(--ccct-gap) + var(--ccct-lift));
  z-index: 900;

  box-sizing: border-box;
  display: none;
  /* Never wider than its half of the window: the availability card on the
   * other side is 272px plus its own gap, and this cap keeps a clear lane
   * between the two at every desktop width. */
  max-width: min(300px, calc(50vw - var(--ccct-gap) * 2));

  font-family: "Plus Jakarta Sans", sans-serif;

  transform: translateY(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1),
              opacity .28s ease-out,
              bottom .28s ease-out,
              visibility 0s linear .28s;
}

/* The gate, held here a second time so a narrow screen can never show the
 * pill. The script uses the same number, and below it the sticky bar of the
 * phone layout has the lower edge to itself. */
@media (min-width: 1025px) {
  .ccct { display: block; }
}

.ccct.is-on {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1),
              opacity .28s ease-out,
              bottom .28s ease-out,
              visibility 0s linear 0s;
}

/* --------------------------------------------------------------------
 * The pill
 *
 * Both rules below name the wrapper and the link class together, because
 * the theme kit carries .elementor-kit-6 a{color:#FF8E2B}. A single class on
 * its own loses that tie and would leave the label orange on a warm ground.
 * -------------------------------------------------------------------- */

.ccct a.ccct-cta,
.ccct a.ccct-cta:visited {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  /* Room on the right for the disc, which is drawn over the padding. */
  padding: 8px 58px 8px 22px;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 999px;

  color: rgba(255, 255, 255, .97);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;

  /* Two grounds: the warm light that gathers towards the disc, and the card
   * blue underneath it that keeps the label readable over any section. */
  background:
    radial-gradient(88px 44px at calc(100% - 30px) 50%, rgba(255, 142, 43, .30), rgba(255, 142, 43, 0) 72%),
    linear-gradient(180deg, #1d2438 0%, #161d2f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 16px 34px rgba(5, 9, 20, .55),
    0 2px 8px rgba(5, 9, 20, .35);

  transition: border-color .2s ease-out, box-shadow .2s ease-out;
}

.ccct a.ccct-cta:hover,
.ccct a.ccct-cta:focus-visible {
  color: #fff;
  border-color: rgba(255, 183, 101, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 18px 38px rgba(5, 9, 20, .6),
    0 0 26px -6px rgba(255, 142, 43, .38);
}

/* --------------------------------------------------------------------
 * The disc at the end
 *
 * A real element rather than a pseudo element: ::before and ::after of the
 * pill belong to the glint of the engine, exactly as they do on every other
 * button of the site (see the note in assets/ccx-star.js).
 * -------------------------------------------------------------------- */

.ccct .ccct-arrow {
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;

  background: linear-gradient(180deg, #FF8E2B 0%, #CE5904 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 205, 155, .65),
    0 4px 12px rgba(206, 89, 4, .35);
  /* Above the edge ring the glint paints at z-index 1. */
  z-index: 2;
  pointer-events: none;
}

.ccct .ccct-arrow svg {
  display: block;
  width: 15px;
  height: 15px;
  transition: transform .2s cubic-bezier(.22, .61, .36, 1);
}

.ccct a.ccct-cta:hover .ccct-arrow svg,
.ccct a.ccct-cta:focus-visible .ccct-arrow svg {
  transform: translateX(2px);
}

/* --------------------------------------------------------------------
 * Close button
 *
 * Sits on the upper right corner of the pill and overlaps it a little, so
 * the pill keeps its shape and the cross still has the twenty four pixels
 * of target the guidelines ask for. It carries the page navy as its own
 * ground, which is what separates it from the pill underneath.
 * -------------------------------------------------------------------- */

.ccct button.ccct-close {
  position: absolute;
  top: -7px;
  right: -7px;

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;

  color: rgba(215, 220, 232, .72);
  background: #0f1526;
  border: 1px solid rgb(44, 51, 76);
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color .18s ease-out, background-color .18s ease-out, border-color .18s ease-out;
  z-index: 3;
}

.ccct button.ccct-close:hover {
  color: #d7dce8;
  background: #182038;
  border-color: rgba(120, 160, 235, .5);
}

.ccct a.ccct-cta:focus-visible,
.ccct button.ccct-close:focus-visible {
  outline: 2px solid #ffb765;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------
 * The travelling light of the rim. Slower and quieter than on a button in
 * the page: this one is in view the whole time a reader scrolls, and a
 * lively rim in the corner of the eye is a distraction rather than a hint.
 * -------------------------------------------------------------------- */

.ccct a.ccct-cta {
  --ccx-star-speed: 7.5s;
  --ccx-star-opacity: .7;
}

/* --------------------------------------------------------------------
 * A reader who asked the system for less movement gets the pill without
 * the travel and the arrow without the step: both are simply there.
 * -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ccct,
  .ccct.is-on {
    transition: none;
    transform: none;
  }
  .ccct { opacity: 0; }
  .ccct.is-on { opacity: 1; }
  .ccct a.ccct-cta,
  .ccct .ccct-arrow svg,
  .ccct button.ccct-close { transition: none; }
  .ccct a.ccct-cta:hover .ccct-arrow svg,
  .ccct a.ccct-cta:focus-visible .ccct-arrow svg { transform: none; }
}