/* ====================================================================
 * CCX Availability - floating availability card for wide screens
 *
 * Palette taken straight from the page: card blue #181f32 for the ground,
 * rgb(44,51,76) for the frame line, the vertical orange #FF8E2B over
 * #CE5904 the filled pills use, silver #d7dce8 for quiet type and the
 * green #34D399 of the status dots in the reference blocks.
 *
 * The card is present in the document from the first frame and parked 14px
 * 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.
 * ==================================================================== */

.ccx-avail {
  --ccx-avail-gap: 22px;

  position: fixed;
  right: var(--ccx-avail-gap);
  bottom: var(--ccx-avail-gap);
  z-index: 900;

  box-sizing: border-box;
  display: none;
  width: 272px;
  max-width: calc(100vw - var(--ccx-avail-gap) * 2);
  padding: 15px 16px 14px;

  background: #181f32;
  border: 1px solid rgb(44, 51, 76);
  border-radius: 18px;
  /* Two shadows rather than one: the wide soft one lifts the card off the
   * page, the short tight one draws the edge that a single large blur
   * leaves washed out against a dark ground. */
  box-shadow: 0 18px 40px rgba(5, 9, 20, .55), 0 2px 8px rgba(5, 9, 20, .35);

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

  /* Resting state: below its place, 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(14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1),
              opacity .28s ease-out,
              visibility 0s linear .28s;
}

/* The gate, held here a second time so a narrow screen can never show the
 * card. 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) {
  .ccx-avail { display: block; }
}

.ccx-avail.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,
              visibility 0s linear 0s;
}

/* --------------------------------------------------------------------
 * Status line
 *
 * The dot repeats the one the reference blocks carry, down to the timing:
 * seven pixels of green with a glow that breathes over 2.4 seconds. Values
 * are written out here rather than borrowed, so this file stands on its own
 * and a later change to the reference blocks cannot move the card.
 * -------------------------------------------------------------------- */

.ccx-avail .ccx-avail-status {
  display: flex;
  align-items: center;
  margin: 0 0 11px;
  padding-right: 30px;          /* room for the close button */
  color: #d7dce8;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.3;
}

.ccx-avail .ccx-avail-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 8px rgba(52, 211, 153, .75);
  animation: ccx-avail-pulse 2.4s ease-in-out infinite;
}

@keyframes ccx-avail-pulse {
  0%, 100% { opacity: .55; box-shadow: 0 0 4px rgba(52, 211, 153, .45); }
  50%      { opacity: 1;   box-shadow: 0 0 9px rgba(52, 211, 153, .85); }
}

/* --------------------------------------------------------------------
 * The pill
 *
 * Both rules below name the card 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, which would leave the label in the same orange as
 * its background. The pattern is kept up for the whole block so no later
 * rule of this file falls back through the same hole.
 * -------------------------------------------------------------------- */

.ccx-avail a.ccx-avail-cta {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;

  color: rgba(255, 255, 255, .97);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  /* The filled pills of the site carry exactly this pair of oranges, and
   * the pale rim above them is what keeps the shape from reading as a flat
   * block against the card blue. */
  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);
  transition: filter .18s ease-out, box-shadow .18s ease-out;
}

.ccx-avail a.ccx-avail-cta:hover {
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 183, 101, .7), 0 8px 22px rgba(206, 89, 4, .36);
}

.ccx-avail a.ccx-avail-cta:active { filter: brightness(1.02); }

/* --------------------------------------------------------------------
 * The quiet line
 * -------------------------------------------------------------------- */

.ccx-avail .ccx-avail-note {
  margin: 10px 0 0;
  color: rgba(215, 220, 232, .62);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

/* --------------------------------------------------------------------
 * Close button
 *
 * 28px across, which clears the smallest target the guidelines ask for,
 * and quiet enough that it does not compete with the pill underneath it.
 * -------------------------------------------------------------------- */

.ccx-avail button.ccx-avail-close {
  position: absolute;
  top: 9px;
  right: 9px;

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

  color: rgba(215, 220, 232, .7);
  background: rgba(255, 255, 255, .04);
  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;
}

.ccx-avail button.ccx-avail-close:hover {
  color: #d7dce8;
  background: rgba(255, 255, 255, .09);
}

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

/* --------------------------------------------------------------------
 * A reader who asked the system for less movement gets the card without
 * the travel and the dot without the breath: both are simply there.
 * -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ccx-avail,
  .ccx-avail.is-on {
    transition: none;
    transform: none;
  }
  .ccx-avail { opacity: 0; }
  .ccx-avail.is-on { opacity: 1; }
  .ccx-avail .ccx-avail-dot { animation: none; opacity: 1; }
  .ccx-avail a.ccx-avail-cta,
  .ccx-avail button.ccx-avail-close { transition: none; }
}