/* =========================
   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: 0;
  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;
    justify-content: center;
  }

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

  .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;
  }

  /* Gold countdown text is desktop-only; render white on tablet / mobile */
  .cci-sticky-cta--countdown-text-gold .cci-sticky-cta__value,
  .cci-sticky-cta--countdown-text-gold .cci-sticky-cta__unit-label,
  .cci-sticky-cta--countdown-text-gold .cci-sticky-cta__sep {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
  }

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

/* =========================
   Tablet range only (768–1024)
   Cap the bar itself to a fixed width and centre it so the card stays a
   consistent size across iPad Mini / Air / Pro (instead of a full-width bar
   with the content floating in the middle). The inner fills the capped bar.
   !important on the side margins overrides the Margin control so the card
   stays centred regardless of its left/right margin values.
========================= */
@media (min-width: 768px) and (max-width: 1024px) {
  .cci-sticky-cta {
    max-width: 720px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =========================
   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%;
    min-width: 0;
    justify-content: center;
  }

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

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

  /* One line where it fits; wrap (timer below label) when the viewport is too
     narrow. min-width:0 lets the flex items shrink so wrapping actually
     engages instead of overflowing the card (e.g. iPhone 12 / 390px). */
  .cci-sticky-cta__countdown-group {
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
  }
}