/* ====================================================================
 * CCX Mobile CTA - sticky call to action bar for phone screens
 *
 * Palette taken straight from the page: navy #0b1227 for the ground,
 * rgb(44,51,76) for the frame line, the vertical orange #FF8E2B over
 * #CE5904 the app bullet tiles use, silver #d7dce8 for quiet type.
 *
 * The bar is one flex row. It is present in the document from the first
 * frame and parked below the lower edge, 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.
 * ==================================================================== */

.ccx-mobcta {
  /* One number for the height of the row, read again further down by the
   * rule that lifts the consent revisit button clear of it. */
  --ccx-mobcta-h: 64px;
  --ccx-mobcta-pad: 10px;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;

  box-sizing: border-box;
  display: none;
  align-items: center;
  gap: 10px;

  /* The row keeps its 64px whatever the device reserves below it, and the
   * reserved strip is added underneath as extra padding. On a phone with a
   * home indicator the bar therefore grows downwards into an area that has
   * no content in it, instead of squeezing the buttons. */
  min-height: var(--ccx-mobcta-h);
  padding: var(--ccx-mobcta-pad) 16px;
  padding-bottom: calc(var(--ccx-mobcta-pad) + env(safe-area-inset-bottom, 0px));

  background: rgba(11, 18, 39, .9);
  border-top: 1px solid rgb(44, 51, 76);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);

  /* Resting state: below the edge, invisible, and out of the tab order.
   * visibility does the last part on its own, so no attribute has to be
   * kept in step with the animation. */
  transform: translateY(calc(100% + 8px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .2s ease-out, opacity .2s ease-out, visibility 0s linear .2s;
}

/* The gate, held here a second time so a wide screen can never show the
 * bar. The script uses the same number. */
@media (max-width: 767px) {
  .ccx-mobcta { display: flex; }
}

.ccx-mobcta.is-on {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .2s ease-out, opacity .2s ease-out, visibility 0s linear 0s;
}

/* A reader who asked the system for less movement gets the bar without the
 * travel: it is simply there or not there. */
@media (prefers-reduced-motion: reduce) {
  .ccx-mobcta,
  .ccx-mobcta.is-on {
    transition: none;
    transform: none;
  }
  .ccx-mobcta { opacity: 0; }
  .ccx-mobcta.is-on { opacity: 1; }
}

/* --------------------------------------------------------------------
 * The two links
 *
 * Both stand 44px tall, the smallest target that is comfortable under a
 * thumb, and both are pills at 999px like every other button on the site.
 * The filled one takes whatever width is left after the outline one has
 * asked for the width of its own label, so a longer label later pushes
 * against the pill instead of wrapping.
 * -------------------------------------------------------------------- */

/* Every rule below names the bar and the link class together. The theme
 * kit carries .elementor-kit-6 a{color:#FF8E2B}, and a single class on its
 * own loses that tie, which would leave the label of the filled pill in the
 * same orange as its background. Two class names settle it once and for
 * all, and the pattern is kept up for the whole block so no later rule of
 * this file falls back through the same hole. */
.ccx-mobcta a.ccx-mobcta-main,
.ccx-mobcta a.ccx-mobcta-ghost {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 999px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: filter .18s ease-out, background-color .18s ease-out;
}

.ccx-mobcta a.ccx-mobcta-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 18px;
  font-size: 15px;
  color: rgba(255, 255, 255, .97);
  /* The bullet tiles of the app sections carry exactly this pair of
   * oranges, and the pale rim above them is what keeps the pill from
   * reading as a flat block against the blurred navy. */
  background: linear-gradient(180deg, #FF8E2B 0%, #CE5904 100%);
  box-shadow: inset 0 1px 0 rgba(255, 183, 101, .55), 0 6px 18px rgba(206, 89, 4, .28);
}

.ccx-mobcta a.ccx-mobcta-ghost {
  flex: 0 0 auto;
  padding: 0 16px;
  font-size: 14px;
  color: #d7dce8;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgb(44, 51, 76);
}

/* Pressed state. Written for touch rather than hover, because on the only
 * screens that ever show this bar there is no pointer resting anywhere. */
.ccx-mobcta a.ccx-mobcta-main:active { filter: brightness(1.08); }
.ccx-mobcta a.ccx-mobcta-ghost:active { background: rgba(255, 255, 255, .09); }

@media (hover: hover) and (pointer: fine) {
  .ccx-mobcta a.ccx-mobcta-main:hover { filter: brightness(1.06); }
  .ccx-mobcta a.ccx-mobcta-ghost:hover { background: rgba(255, 255, 255, .08); }
}

.ccx-mobcta a.ccx-mobcta-main:focus-visible,
.ccx-mobcta a.ccx-mobcta-ghost:focus-visible {
  outline: 2px solid #ffb765;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------
 * Consent revisit button
 *
 * The consent tool parks a round 45px button 15px above the lower left
 * corner, which is inside the bar. It is the control a visitor uses to
 * change a consent decision, so it is the one thing that must not end up
 * underneath anything. While the bar is up the button moves above it, and
 * it drops back the moment the bar leaves.
 * -------------------------------------------------------------------- */
@media (max-width: 767px) {
  body.ccx-mobcta-on .cky-btn-revisit-wrapper {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px);
    transition: bottom .2s ease-out;
  }
}