/* ==========================================================================
   CirclesCo Popups — Frontend Styles
   ========================================================================== */

/* ------------------------------------------------------------------
   Overlay
   ------------------------------------------------------------------ */
.ccp-popup {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ccp-popup.is-open {
  opacity: 1;
  visibility: visible;
}

/* ------------------------------------------------------------------
   Inner container
   ------------------------------------------------------------------ */
.ccp-popup__inner {
  position: relative;
  display: flex;
  max-width: 700px;
  width: 92%;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.ccp-popup.is-open .ccp-popup__inner {
  transform: scale(1);
  opacity: 1;
}

/* ------------------------------------------------------------------
   Image area
   ------------------------------------------------------------------ */
.ccp-popup__image {
  flex: 0 0 45%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100%;
  border-radius: 14px 0 0 14px;
}

/* ------------------------------------------------------------------
   Content area
   ------------------------------------------------------------------ */
.ccp-popup__content {
  flex: 0 0 55%;
  padding: 36px;
  box-sizing: border-box;
}

/* ------------------------------------------------------------------
   Layout variants
   ------------------------------------------------------------------ */
.ccp-layout-image-right .ccp-popup__inner {
  flex-direction: row-reverse;
}
.ccp-layout-image-right .ccp-popup__image {
  border-radius: 0 14px 14px 0;
}

.ccp-layout-image-top .ccp-popup__inner {
  flex-direction: column;
}
.ccp-layout-image-top .ccp-popup__image {
  flex: 0 0 200px;
  height: 200px;
  min-height: 200px;
  width: 100%;
  border-radius: 14px 14px 0 0;
}
.ccp-layout-image-top .ccp-popup__content {
  flex: 1 1 auto;
  width: 100%;
}

.ccp-layout-no-image .ccp-popup__content,
.ccp-popup.ccp-noimg .ccp-popup__content {
  flex: 1 1 auto;
  width: 100%;
}

.ccp-popup__title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
  line-height: 1.3;
  font-family: var(--ccp-font-title, inherit);
}

.ccp-popup__body {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin: 0 0 20px;
  font-family: var(--ccp-font-body, inherit);
}

.ccp-popup__form input[type="text"],
.ccp-popup__form input[type="email"],
.ccp-popup__form input[type="url"],
.ccp-popup__form select,
.ccp-popup__source,
.ccp-popup__submit {
  font-family: var(--ccp-font-input, inherit);
}

/* ------------------------------------------------------------------
   Form
   ------------------------------------------------------------------ */
.ccp-popup__form input[type="text"],
.ccp-popup__form input[type="email"],
.ccp-popup__form input[type="url"] {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 10px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease;
}

.ccp-popup__form input[type="text"]:focus,
.ccp-popup__form input[type="email"]:focus,
.ccp-popup__form input[type="url"]:focus {
  border-color: var(--ccp-btn-bg, #1264ff);
}

.ccp-popup__form select,
.ccp-popup__source {
  display: block;
  width: 100% !important;
  max-width: 100%;
  padding: 12px 36px 12px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  background-color: #fff;
  margin-bottom: 10px;
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239b9b97' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.2s ease;
}

.ccp-popup__form select:focus,
.ccp-popup__source:focus {
  border-color: var(--ccp-btn-bg, #1264ff);
}

.ccp-popup__submit {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  background: var(--ccp-btn-bg, #1264ff);
  transition: background 0.2s ease;
}

.ccp-popup__submit:hover {
  background: var(--ccp-btn-hover, #0d4fcc);
}

.ccp-popup__submit.is-success {
  background: #16a34a !important;
  cursor: default;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  animation: ccpBtnSuccess 0.35s ease;
}

.ccp-popup__submit.is-success svg {
  flex-shrink: 0;
  color: #fff;
}

@keyframes ccpBtnSuccess {
  0%   { transform: scale(0.96); }
  55%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.ccp-popup__submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------
   CTA button (Content popups — links out instead of submitting)
   ------------------------------------------------------------------ */
.ccp-popup__cta {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: #fff !important;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  box-sizing: border-box;
  background: var(--ccp-btn-bg, #1264ff);
  font-family: var(--ccp-font-input, inherit);
  transition: background 0.2s ease;
}

.ccp-popup__cta:hover,
.ccp-popup__cta:focus {
  background: var(--ccp-btn-hover, #0d4fcc);
  color: #fff !important;
  text-decoration: none !important;
}

/* ------------------------------------------------------------------
   Image-only popups — the image IS the popup, no card around it
   ------------------------------------------------------------------ */
.ccp-type-image .ccp-popup__inner {
  display: block;
  width: auto;
  max-width: min(var(--ccp-img-w, 600px), 92vw);
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.ccp-popup__image-link {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.ccp-popup__image-full {
  display: block;
  width: 100%;
  height: auto;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.ccp-type-image .ccp-popup__close {
  top: -14px;
  right: -14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.ccp-type-image .ccp-popup__close:hover {
  background: #f1f1ef;
}

/* ------------------------------------------------------------------
   Slider popups — an announcement deck, one slide at a time
   ------------------------------------------------------------------ */
.ccp-type-slider .ccp-popup__inner,
.ccp-type-slider-content .ccp-popup__inner {
  display: block;
  width: auto;
  /* The arrows sit outside the artwork, so the deck cannot use the full width
     of the screen — it leaves a lane for them on each side. */
  max-width: min(var(--ccp-img-w, 600px), calc(100vw - 150px));
  overflow: visible;
}

/* Images-only decks are the image and nothing else, like an image popup. */
.ccp-type-slider .ccp-popup__inner {
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.ccp-slider {
  position: relative;
}

.ccp-slider__viewport {
  overflow: hidden;
  border-radius: 14px;
}

.ccp-type-slider .ccp-slider__viewport {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.ccp-slider__track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.ccp-slider__slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
}

/* Clones exist only to give the track somewhere to travel on a wrap. They are
   never focusable, never selectable, and never counted. */
.ccp-slider__slide--clone {
  pointer-events: none;
  user-select: none;
}

/* Fade stacks every slide in one grid cell, so the deck is as tall as its
   tallest slide and nothing jumps when the slide changes. */
.ccp-slider--fade .ccp-slider__track {
  display: grid;
  transform: none !important;
}

.ccp-slider--fade .ccp-slider__slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.ccp-slider--fade .ccp-slider__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* A visitor who asked for reduced motion gets the change, not the travel. */
.ccp-slider--no-motion .ccp-slider__track,
.ccp-slider--no-motion .ccp-slider__slide {
  transition: none;
}

/* --- Media: every slide wears slide one's aspect ratio --- */
.ccp-slider__media {
  display: block;
  width: 100%;
  aspect-ratio: var(--ccp-slide-ar, auto);
  background: #f0f0ee;
  line-height: 0;
  text-decoration: none;
}

.ccp-slider__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* crop and zoom to fill, never letterbox */
  object-position: center;
}

/* --- Text under the image (Slider + Content only) --- */
.ccp-slider__body {
  padding: 22px 26px 26px;
  background: #fff;
  box-sizing: border-box;
}

.ccp-slider__title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
  line-height: 1.3;
  font-family: var(--ccp-font-title, inherit);
}

.ccp-slider__text {
  font-size: 14px;
  color: #666;
  line-height: 1.55;
  margin: 0;
  font-family: var(--ccp-font-body, inherit);
}

.ccp-slider__body .ccp-popup__cta {
  margin-top: 16px;
  width: auto;
  display: inline-block;
  padding: 12px 22px;
}

/* --- Arrows, over the media --- */
.ccp-slider__arrow {
  position: absolute;
  /* Bounded by the top of the deck and the top of the dots row, with auto
     margins doing the centring — so the arrows line up on the middle of the
     IMAGE rather than the middle of the image-plus-dots, which is what a
     plain 50% would give and always sits slightly low. */
  top: 0;
  bottom: var(--ccp-dots-space, 25px);
  margin-top: auto;
  margin-bottom: auto;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  color: #1a1a18;
  transition: background 0.15s ease, transform 0.15s ease;
  z-index: 3;
}

.ccp-slider__arrow:hover {
  background: #fff;
  transform: scale(1.06);
}

/* Outside the artwork, 20px clear of it — nothing covers the image. */
.ccp-slider__arrow--prev { right: 100%; left: auto; margin-right: 20px; }
.ccp-slider__arrow--next { left: 100%; right: auto; margin-left: 20px; }

.ccp-slider__arrow svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

/* The close button shares the top-right corner with the next arrow. */
.ccp-type-slider .ccp-popup__close,
.ccp-type-slider-content .ccp-popup__close {
  top: -14px;
  right: -14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  z-index: 4;
}

/* --- Dots, below the deck --- */
.ccp-slider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--ccp-dots-space, 25px);
  padding: 14px 0 0;
  box-sizing: content-box;
}

.ccp-slider__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

/* On a content deck the dots sit on the page background, not on the image. */
.ccp-type-slider-content .ccp-slider__dot {
  background: #d4d4d1;
}

.ccp-slider__dot:hover { transform: scale(1.25); }

.ccp-slider__dot.is-active {
  background: #fff;
  transform: scale(1.25);
}

.ccp-type-slider-content .ccp-slider__dot.is-active {
  background: #1a1a18;
}

@media (max-width: 600px) {
  .ccp-type-slider .ccp-popup__inner,
  .ccp-type-slider-content .ccp-popup__inner {
    max-width: 92vw;      /* arrows are back inside, so take the full width */
  }

  .ccp-type-slider .ccp-popup__close,
  .ccp-type-slider-content .ccp-popup__close {
    top: 8px;
    right: 8px;
  }

  /* On a phone there is no lane beside the artwork, and an arrow ON the image
     covers the thing you came to look at. The controls become one bar under
     the deck instead: back on the left, dots in the middle, forward on the
     right — all of it thumb-reachable and none of it over the picture.
     Placed by grid area, so the DOM order stays as it is for a screen reader. */
  .ccp-slider {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "media media media"
      "prev  dots  next";
    align-items: center;      /* arrows and dots share one centre line */
    row-gap: 12px;
  }

  .ccp-slider__viewport { grid-area: media; }

  .ccp-slider__arrow {
    grid-area: prev;
    position: static;
    top: auto;
    bottom: auto;
    transform: none;
    width: 38px;
    height: 38px;
    margin: 0;                /* the row-gap does the spacing, so nothing drifts */
    justify-self: start;
  }

  .ccp-slider__arrow--next {
    grid-area: next;
    justify-self: end;
  }

  .ccp-slider__arrow:hover,
  .ccp-slider__arrow:active {
    transform: none;
  }

  .ccp-slider__dots {
    grid-area: dots;
    height: auto;
    padding: 0 8px;
  }
  .ccp-slider__body { padding: 18px 20px 22px; }
}

/* ------------------------------------------------------------------
   Close button
   ------------------------------------------------------------------ */
.ccp-popup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
  z-index: 2;
}

.ccp-popup__close:hover {
  background: rgba(0, 0, 0, 0.18);
}

.ccp-popup__close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #333;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ------------------------------------------------------------------
   Message area
   ------------------------------------------------------------------ */
.ccp-popup__message {
  font-size: 13px;
  margin-top: 8px;
}

.ccp-popup__message.is-success {
  color: #1a8d1a;
}

.ccp-popup__message.is-error {
  color: #d32f2f;
}

/* ------------------------------------------------------------------
   Mobile (stack vertically)
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .ccp-popup__inner {
    flex-direction: column;
    max-width: 95%;
  }

  .ccp-popup__image {
    flex: none;
    width: 100%;
    max-height: 200px;
    min-height: 160px;
    border-radius: 14px 14px 0 0;
  }

  .ccp-popup__content {
    flex: none;
    width: 100%;
    padding: 24px;
  }

  .ccp-type-image .ccp-popup__inner {
    max-width: 92vw;
  }

  .ccp-type-image .ccp-popup__close {
    top: 8px;
    right: 8px;
  }
}