/* ==========================================================================
   Finex Popup — overlay layout and variants
   BEM: .finex-popup__overlay / __backdrop / __dialog / __close / __body
   ========================================================================== */

/* ─── Base overlay (hidden by default) ─────────────────────────────────── */

.finex-popup__overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: center;
  justify-content: center;
}

.finex-popup__overlay--active {
  display: flex;
}

/* ─── Backdrop ──────────────────────────────────────────────────────────── */

.finex-popup__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

/* ─── Dialog ────────────────────────────────────────────────────────────── */

.finex-popup__dialog {
  position: relative;
  background: #fff;
  max-width: 640px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--sp);
  border-radius: 4px;
  z-index: 1;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

@media (min-width: 1024px) {
  .finex-popup__dialog {
    max-width: 960px;
  }
}

@media (min-width: 1280px) {
  .finex-popup__dialog {
    max-width: 1024px;
  }
}

.finex-popup__dialog:focus {
  outline: none;
}

/* ─── Close button ──────────────────────────────────────────────────────── */

.finex-popup__close {
  position: absolute;
  top: var(--sp0-75);
  right: var(--sp0-75);
  cursor: pointer;
  border: none;
  background: transparent;
  font-size: var(--sp);
  line-height: 1;
  padding: 0.25rem;
  color: currentColor;
  opacity: 0.6;
  transition: opacity 0.2s;
  z-index: 999;
}

.finex-popup__close:hover,
.finex-popup__close:focus {
  opacity: 1;
}

/* ─── Inner content areas ───────────────────────────────────────────────── */

.finex-popup__title {
  margin: 0 0 var(--sp0-5);
  font-size: 1.5em;
}

.finex-popup__content {
  margin-bottom: var(--sp);
  line-height: 1.25em;
}

.finex-popup__media {
  height: 100%;
  div, img, article, picture {
    height: 100%;
  }
}

.finex-popup__media-desktop,
.finex-popup__media-mobile {
  display: none;
}

/* Show desktop media on larger screens. */
@media (min-width: 768px) {
  .finex-popup__media-desktop {
    display: block;
  }
}

/* Show mobile media on smaller screens. */
@media (max-width: 767px) {
  .finex-popup__media-mobile {
    display: block;
    margin-bottom: var(--sp0-5)
  }
}

.finex-popup__media img,
.finex-popup__media video {
  display: block;
  max-width: 100%;
  height: auto;
}

.finex-popup__cta {
  margin-top: var(--sp);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp0-75);
}

.finex-popup__cta-item {
  margin-bottom: var(--sp0-5);
}
.finex-popup__cta-item:last-child{
  margin-bottom: 0;
}

/* ─── Layout variants ───────────────────────────────────────────────────── */

/* Center (default) — dialog centred in viewport */
.finex-popup--center {
  align-items: center;
  justify-content: center;
}

/* Top bar — full-width strip at the top */
.finex-popup--top-bar {
  align-items: flex-start;
  justify-content: stretch;
}

.finex-popup--top-bar .finex-popup__dialog {
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  padding: var(--sp);
}

/* Bottom bar — full-width strip at the bottom */
.finex-popup--bottom-bar {
  align-items: flex-end;
  justify-content: stretch;
}

.finex-popup--bottom-bar .finex-popup__dialog {
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  padding: var(--sp);
}

/* Corner variants */
.finex-popup--top-left {
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--sp);
}

.finex-popup--top-right {
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--sp);
}

.finex-popup--bottom-left {
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--sp);
}

.finex-popup--bottom-right {
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--sp);
}

.finex-popup--top-left .finex-popup__dialog,
.finex-popup--top-right .finex-popup__dialog,
.finex-popup--bottom-left .finex-popup__dialog,
.finex-popup--bottom-right .finex-popup__dialog {
  width: 360px;
  max-width: 90vw;
}

/* Fullscreen */
.finex-popup--fullscreen .finex-popup__dialog {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
  overflow-y: auto;
}

/* ─── Media position variants ───────────────────────────────────────────── */

/* top (default) — block flow, media above text, no grid needed */

/* Desktop: left / right */
@media (min-width: 768px) {
  .finex-popup--media-desktop-left {
    display: grid;
    grid-template-columns: 40% 1fr;
    grid-template-areas: "media inner";
    gap: var(--sp);
    align-items: start;
  }

  .finex-popup--media-desktop-right {
    display: grid;
    grid-template-columns: 1fr 40%;
    grid-template-areas: "inner media";
    gap: var(--sp);
    align-items: start;
  }

  .finex-popup--media-desktop-left .finex-popup__media,
  .finex-popup--media-desktop-right .finex-popup__media {
    grid-area: media;
    margin-bottom: 0;
  }

  .finex-popup--media-desktop-left .finex-popup__inner,
  .finex-popup--media-desktop-right .finex-popup__inner {
    grid-area: inner;
    min-width: 0;
  }
}

/* Mobile: left / right */
@media (max-width: 767px) {
  .finex-popup--media-mobile-left {
    display: grid;
    grid-template-columns: 35% 1fr;
    grid-template-areas: "media inner";
    gap: var(--sp0-75);
    align-items: start;
  }

  .finex-popup--media-mobile-right {
    display: grid;
    grid-template-columns: 1fr 35%;
    grid-template-areas: "inner media";
    gap: var(--sp0-75);
    align-items: start;
  }

  .finex-popup--media-mobile-left .finex-popup__media,
  .finex-popup--media-mobile-right .finex-popup__media {
    grid-area: media;
    margin-bottom: 0;
  }

  .finex-popup--media-mobile-left .finex-popup__inner,
  .finex-popup--media-mobile-right .finex-popup__inner {
    grid-area: inner;
    min-width: 0;
  }
}

/* Ensure media images fill the column in side-by-side layouts */
.finex-popup--media-desktop-left .finex-popup__media img,
.finex-popup--media-desktop-right .finex-popup__media img,
.finex-popup--media-mobile-left .finex-popup__media img,
.finex-popup--media-mobile-right .finex-popup__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Accessibility: reduced motion ────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .finex-popup__overlay {
    transition: opacity 0.25s;
    opacity: 0;
  }

  .finex-popup__overlay--active {
    opacity: 1;
  }

  .finex-popup__dialog {
    transform: translateY(12px);
    transition: transform 0.25s;
  }

  .finex-popup__overlay--active .finex-popup__dialog {
    transform: translateY(0);
  }
}




/* ─── Webform compatto dentro il popup ──────────────────────────────────── */

.finex-popup__webform {
  input[type="date"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="tel"],
  input[type="text"],
  input[type="url"],
  select,
  textarea {
    padding: var(--sp0-25) var(--sp0-5);
    font-size: 0.85em;
  }

  textarea{
    height: 5em;
  }

  .form-item{
    margin-bottom: var(--sp0-25);
  }

  .webform-submission-form {
    .webform-flexbox {
    gap: var(--sp0-25);
    margin: 0 0 var(--sp0-25) 0;
  }
  .webform-actions{
    margin-top: var(--sp0-5);
    margin-bottom: 0;
  }
  }


}