/* =========================
   CCI Sticky CTA
   Full-width fixed enrollment countdown bar. Structural + responsive layout
   only; colours, spacing, position, and typography are controlled via the
   widget controls.

   The bar itself is always 100% wide; only the inner content is constrained
   by the Content Max Width control and centred.

   Desktop  : single row — countdown left, button right.
   Tablet   : countdown + scarcity left, button right.
   Mobile   : stacked — countdown, button, scarcity.
========================= */

.cci-sticky-cta {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.cci-sticky-cta *,
.cci-sticky-cta *::before,
.cci-sticky-cta *::after {
  box-sizing: border-box;
}

.cci-sticky-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.cci-sticky-cta__content {
  display: flex;
  align-items: center;
  min-width: 0;
}

.cci-sticky-cta__countdown-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cci-sticky-cta__spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Built-in loading ring (default when no custom icon / image is chosen) */
.cci-sticky-cta__spinner--ring {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
}

/* Custom replacement icon */
.cci-sticky-cta__spinner--icon {
  font-size: 18px;
  line-height: 1;
}

.cci-sticky-cta__spinner--icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Custom replacement image */
.cci-sticky-cta__spinner--image img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.cci-sticky-cta__spinner--spin {
  animation: cci-sticky-cta-spin 0.9s linear infinite;
}

@keyframes cci-sticky-cta-spin {
  to {
    transform: rotate(360deg);
  }
}

.cci-sticky-cta__label {
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cci-sticky-cta__timer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cci-sticky-cta__unit {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  min-width: 56px;
  padding: 8px 12px;
  background-color: var(--cci-cta-box-bg, transparent);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  line-height: 1;
}

/* Gold gradient border — drawn as a masked ring so only the border is painted
   (the box interior stays whatever the background control sets), with the
   rounded corners preserved (border-image would square them). */
.cci-sticky-cta--countdown-gold .cci-sticky-cta__unit {
  border-color: transparent;
}

.cci-sticky-cta--countdown-gold .cci-sticky-cta__unit::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(
    --cci-gold-gradient,
    linear-gradient(90deg, #856220, #f4e683, #bf923d)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.cci-sticky-cta__value {
  font-variant-numeric: tabular-nums;
}

/* Gold gradient countdown text — clipped to the value + unit label only so the
   box background and border are unaffected. */
.cci-sticky-cta--countdown-text-gold .cci-sticky-cta__value,
.cci-sticky-cta--countdown-text-gold .cci-sticky-cta__unit-label {
  background: var(
    --cci-gold-gradient,
    linear-gradient(90deg, #856220, #f4e683, #bf923d)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Colon separators — only used on tablet / mobile inline layout */
.cci-sticky-cta__sep {
  display: none;
}

.cci-sticky-cta__button-wrap {
  flex-shrink: 0;
}

.cci-sticky-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.cci-sticky-cta__button:hover,
.cci-sticky-cta__button:focus {
  text-decoration: none;
}

/* Scarcity copy is desktop-hidden; shown on tablet / mobile */
.cci-sticky-cta__sub-description {
  display: none;
}

.cci-sticky-cta__sub-description p {
  margin-top: 0;
  margin-bottom: 0;
}

/* Inside the Elementor editor, render the bar in normal flow at its container
   width so it is fully visible and editable. A true full-bleed (100vw) only
   centres reliably when the container is centred in the viewport, which is not
   the case inside the editor canvas — it would crop the bar. The real
   full-width, fixed behaviour applies on the frontend. */
.elementor-editor-active .cci-sticky-cta {
  position: relative;
  inset: auto;
  left: auto;
  width: 100%;
  max-width: 100%;
  transform: none;
}

/* Keep the bar visible in the editor even when the reveal-on-scroll class is
   present (it is added server-side to avoid a flash on the frontend). */
.elementor-editor-active .cci-sticky-cta--scroll-reveal:not(.is-visible) {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* =========================
   Reveal after the fold
   JS adds the modifier class on the frontend, then toggles is-visible on
   scroll. Without JS (or in the editor) the bar stays fully visible.
========================= */
.cci-sticky-cta--scroll-reveal {
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease;
}

.cci-sticky-cta--scroll-reveal:not(.is-visible) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}

/* =========================
   Tablet
========================= */
@media (max-width: 1024px) {
  .cci-sticky-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "countdown button"
      "subdesc   button";
    align-items: center;
    column-gap: 20px;
    row-gap: 6px;
  }

  .cci-sticky-cta__content {
    grid-area: countdown;
    min-width: 0;
  }

  .cci-sticky-cta__sub-description {
    grid-area: subdesc;
    display: block;
  }

  .cci-sticky-cta__button-wrap {
    grid-area: button;
  }

  .cci-sticky-cta__spinner {
    display: none;
  }

  /* Keep the label + timer on a single line */
  .cci-sticky-cta__countdown-group {
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
  }

  .cci-sticky-cta__label {
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .cci-sticky-cta__timer {
    flex-wrap: nowrap;
    gap: 6px;
  }

  /* Inline countdown — drop the boxes, show colon separators */
  .cci-sticky-cta__unit {
    min-width: 0;
    gap: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    white-space: nowrap;
  }

  .cci-sticky-cta--countdown-gold .cci-sticky-cta__unit::before {
    display: none;
  }

  .cci-sticky-cta__sep {
    display: inline;
  }
}

/* =========================
   Mobile
========================= */
@media (max-width: 767px) {
  .cci-sticky-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .cci-sticky-cta__content {
    order: 1;
    width: 100%;
    justify-content: center;
  }

  .cci-sticky-cta__button-wrap {
    order: 2;
    width: 100%;
  }

  .cci-sticky-cta__sub-description {
    order: 3;
    width: 100%;
  }

  .cci-sticky-cta__countdown-group {
    flex-wrap: wrap;
    justify-content: center;
  }
}