/**
 * Dresium Try-On — CSS paywall modal (v3.6.7 — allineamento design system)
 *
 * 2026-10-18: redesign allineato ai token canonici Dresium:
 * - modal-radius 25px (coerente con Setting/Size/Special)
 * - button-radius 12px (dresium-tryon-radius-md)
 * - font-display League Spartan (NON Poppins)
 * - gradient diag 135deg brand (identico a .dresium-tryon-btn-primary)
 * - hover pattern = shadow-lg + gradient-shift (identico a tryon.css)
 *
 * Elementi mantenuti dall'opzione B:
 * - Hero gradient pastel + icon (ora shopping-bag, contesto e-commerce)
 * - Chip "N crediti per prova"
 * - Pack cards con badge "Miglior valore"
 * - Prezzo + unit economics per prova
 * - Footer badges + disclaimer
 *
 * Scoping: montata figlia di .dresium-tryon-block (eredita --dresium-tryon-*).
 * Fallback: document.body + safety-net var re-declaration.
 */

/* ============================================================
   SAFETY-NET VAR RE-DECLARATION
   ============================================================ */
.dresium-paywall-modal {
  --dresium-paywall-primary: var(--dresium-tryon-primary, #4362db);
  --dresium-paywall-primary-dark: var(--dresium-tryon-primary-dark, #2d4aa5);
  --dresium-paywall-secondary: var(--dresium-tryon-secondary, #7C3AED);
  --dresium-paywall-gradient: var(--dresium-tryon-gradient, linear-gradient(90deg, rgb(76, 110, 245) 0%, rgb(155, 81, 224) 100%));
  --dresium-paywall-gradient-hover: var(--dresium-tryon-gradient-hover, linear-gradient(90deg, #4C6EF5 0%, #4C6EF5 100%));
  --dresium-paywall-gradient-diag: var(--dresium-tryon-gradient-diag, linear-gradient(135deg, #4362db 0%, #7C3AED 100%));
  --dresium-paywall-primary-alpha-08: var(--dresium-tryon-primary-alpha-08, rgba(76, 110, 245, 0.08));
  --dresium-paywall-primary-alpha-20: var(--dresium-tryon-primary-alpha-20, rgba(67, 98, 219, 0.2));
  --dresium-paywall-primary-alpha-32: var(--dresium-tryon-primary-alpha-32, rgba(76, 110, 245, 0.32));
  --dresium-paywall-white: var(--dresium-tryon-white, #ffffff);
  --dresium-paywall-gray-50: var(--dresium-tryon-gray-50, #f9fafb);
  --dresium-paywall-gray-100: var(--dresium-tryon-gray-100, #f3f4f6);
  --dresium-paywall-gray-200: var(--dresium-tryon-gray-200, #e5e7eb);
  --dresium-paywall-gray-300: var(--dresium-tryon-gray-300, #d1d5db);
  --dresium-paywall-gray-400: var(--dresium-tryon-gray-400, #9ca3af);
  --dresium-paywall-gray-500: var(--dresium-tryon-gray-500, #6b7280);
  --dresium-paywall-gray-600: var(--dresium-tryon-gray-600, #4b5563);
  --dresium-paywall-gray-700: var(--dresium-tryon-gray-700, #374151);
  --dresium-paywall-gray-900: var(--dresium-tryon-gray-900, #111827);
  --dresium-paywall-pastel: #F5F0FF;
  --dresium-paywall-pastel-2: #EEF2FF;
  /* Token canonici modali Dresium (coerenza visiva assoluta) */
  --dresium-paywall-modal-radius: var(--dresium-tryon-modal-radius, 25px);
  --dresium-paywall-modal-radius-sm: var(--dresium-tryon-modal-radius-sm, 10px);
  --dresium-paywall-radius-md: var(--dresium-tryon-radius-md, 12px);
  --dresium-paywall-radius-lg: var(--dresium-tryon-radius-lg, 16px);
  --dresium-paywall-shadow-md: var(--dresium-tryon-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
  --dresium-paywall-shadow-lg: var(--dresium-tryon-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
  --dresium-paywall-shadow-overlay: 0 20px 60px rgba(17, 24, 39, 0.28);
  --dresium-paywall-font-body: var(--dresium-tryon-font-body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --dresium-paywall-font-display: var(--dresium-tryon-font-display, "League Spartan", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --dresium-paywall-transition: var(--dresium-tryon-transition, 200ms ease);
}

/* ============================================================
   OVERLAY + BOX
   ============================================================ */
.dresium-paywall-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: none;
  font-family: var(--dresium-paywall-font-body);
  color: var(--dresium-paywall-gray-900);
  box-sizing: border-box;
}
.dresium-paywall-modal *,
.dresium-paywall-modal *::before,
.dresium-paywall-modal *::after {
  box-sizing: border-box;
}

.dresium-paywall-modal.dresium-paywall-modal--open {
  display: block;
}

.dresium-paywall-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: dresium-paywall-fade-in 220ms ease;
}

.dresium-paywall-modal__box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  background: var(--dresium-paywall-white);
  /* Modal radius canonico Dresium 25px (coerente con Setting/Size/Special) */
  border-radius: var(--dresium-paywall-modal-radius);
  box-shadow: var(--dresium-paywall-shadow-overlay);
  display: flex;
  flex-direction: column;
  animation: dresium-paywall-pop-in 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   HERO — stile paywall webapp Dresium

   Pattern (identico a front/webapp/.../PaywallModal.tsx):
   - Height 170px (compatto per modale WC, su webapp e' 230px)
   - BG image fullbleed con opacity 0.55 + scale 1.1 (smorzata, non blur
     aggressivo che la rendeva invisibile — vedi commento del webapp)
   - Overlay gradient: nero→trasparente→pastel (contrast + fade smooth
     verso il body bianco)
   - Card prodotto 96x124 ruotata -6deg al centro con shopping-bag badge
   - Close X in rgba(0,0,0,0.5) + backdrop-blur per contrasto su qualunque
     background (foto chiara/scura)

   Fallback (no productImage): header gradient pastel pulito + card con
   icon shopping-bag al posto della foto (classe --no-image).
   ============================================================ */
.dresium-paywall-modal__hero {
  position: relative;
  height: 170px;
  flex-shrink: 0;
  overflow: hidden;
  /* Fallback bg quando no productImage — stesso tono pastel del webapp */
  background: linear-gradient(180deg, var(--dresium-paywall-pastel) 0%, var(--dresium-paywall-pastel-2) 100%);
}

.dresium-paywall-modal__hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  transform: scale(1.1);
  pointer-events: none;
  user-select: none;
  display: block;
}
.dresium-paywall-modal__hero-bg[hidden],
.dresium-paywall-modal__hero-bg:not([src]) {
  display: none;
}

/* Overlay dark-top -> transparent-middle -> pastel-bottom.
   Garantisce: 1) leggibilita' del close X su qualunque immagine,
   2) fade smooth verso body senza taglio netto. Identico al webapp. */
.dresium-paywall-modal__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.42) 0%,
    transparent 45%,
    var(--dresium-paywall-pastel) 100%
  );
  pointer-events: none;
}

.dresium-paywall-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
  border-radius: 50%;
  color: var(--dresium-paywall-white);
  cursor: pointer;
  transition: all var(--dresium-paywall-transition);
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dresium-paywall-modal__close:hover,
.dresium-paywall-modal__close:focus-visible {
  background: rgba(0, 0, 0, 0.7);
  outline: none;
}

.dresium-paywall-modal__close svg {
  display: block;
}

/* Card prodotto al centro, ruotata -6deg (identica al webapp).
   Contiene l'immagine prodotto in modo nitido (NON sfocata — la bg lo e').
   96x124 px, radius 12px, bordo bianco semitrasparente, shadow 2xl. */
.dresium-paywall-modal__hero-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  width: 96px;
  height: 124px;
  background: var(--dresium-paywall-white);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--dresium-paywall-radius-md);
  padding: 4px;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

.dresium-paywall-modal__hero-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.dresium-paywall-modal__hero-card-img[hidden],
.dresium-paywall-modal__hero-card-img:not([src]) {
  display: none;
}

/* Fallback: nessuna immagine prodotto, mostra icon shopping-bag su
   gradient pastel invece di card bianca vuota. */
.dresium-paywall-modal__hero-card-fallback {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--dresium-paywall-pastel) 0%, var(--dresium-paywall-pastel-2) 100%);
  color: var(--dresium-paywall-primary);
  border-radius: 8px;
}
.dresium-paywall-modal__hero-card--no-image .dresium-paywall-modal__hero-card-fallback {
  display: flex;
}

/* Sparkles badge bottom-right della card — identico pattern webapp. */
.dresium-paywall-modal__hero-card-badge {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dresium-paywall-gradient-diag);
  color: var(--dresium-paywall-white);
  border: 3px solid var(--dresium-paywall-white);
  border-radius: 50%;
  box-shadow: 0 6px 18px var(--dresium-paywall-primary-alpha-32);
}

/* ============================================================
   BODY
   ============================================================ */
.dresium-paywall-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.dresium-paywall-modal__title {
  margin: 0;
  font-family: var(--dresium-paywall-font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--dresium-paywall-gray-900);
}

.dresium-paywall-modal__msg {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--dresium-paywall-gray-600);
  max-width: 340px;
}

/* ============================================================
   CHIP "N crediti per prova"
   ============================================================ */
.dresium-paywall-modal__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--dresium-paywall-white);
  border: 1px solid var(--dresium-paywall-gray-200);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--dresium-paywall-gray-700);
  white-space: nowrap;
}
.dresium-paywall-modal__chip-icon {
  color: var(--dresium-paywall-primary);
}

/* ============================================================
   PACKS
   Pattern: pulsante primary Dresium = gradient + radius 12px + hover shadow-lg
   Qui per il pack-card usiamo radius 12 ma mantiene l'identita' "card
   selezionabile" (border 2px, hover border primary).
   ============================================================ */
.dresium-paywall-modal__packs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

/* ---- PACK CARD color system (v3.6.10) ----
   Ogni pack ha un proprio set di var scoped (--pack-accent, --pack-bg,
   --pack-hover-bg, --pack-price). I valori di default (gradazione
   neutra automatica) vengono calcolati in JS in base alla posizione
   del pack nella scala credits (small -> gray-400, big -> gray-900).
   Il merchant puo' sovrascrivere via JSON `pack.color: "#RRGGBB"`:
   JS valida l'hex e setta --pack-accent/-price col colore scelto.
   Fallback hardcoded nel CSS per edge case (var non impostate). */
.dresium-paywall-modal__pack {
  --pack-accent: var(--dresium-paywall-gray-700);
  --pack-accent-soft: rgba(55, 65, 81, 0.08); /* fallback matcha gray-700 */
  --pack-price: var(--dresium-paywall-gray-900);
  position: relative;
  display: block;
  width: 100%;
  padding: 16px 18px;
  border: 2px solid var(--dresium-paywall-gray-200);
  background: var(--dresium-paywall-white);
  color: var(--dresium-paywall-gray-900);
  /* Radius canonico pulsanti Dresium = 12px */
  border-radius: var(--dresium-paywall-radius-md);
  cursor: pointer;
  text-align: left;
  font-family: var(--dresium-paywall-font-body);
  transition: all var(--dresium-paywall-transition);
  box-shadow: none;
  outline: none;
  margin: 0;
}

.dresium-paywall-modal__pack:hover:not(:disabled),
.dresium-paywall-modal__pack:focus-visible {
  /* Usa l'accent del pack (neutro di default, override merchant possibile) */
  border-color: var(--pack-accent);
  background: var(--pack-accent-soft);
  transform: translateY(-1px);
  box-shadow: var(--dresium-paywall-shadow-lg);
}

.dresium-paywall-modal__pack:active:not(:disabled) {
  transform: translateY(0) scale(0.99);
}

.dresium-paywall-modal__pack:disabled,
.dresium-paywall-modal__pack--loading {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Best-value: border + bg usano l'accent del pack (neutro o merchant-override).
   Il badge invece resta col gradient brand Dresium perche' e' un elemento
   "editoriale di sistema" (non un dato merchant, ma una classifica calcolata
   dal client). Puo' essere discusso in futuro se neutralizzarlo. */
.dresium-paywall-modal__pack--best {
  border-color: var(--pack-accent);
  background: var(--pack-accent-soft);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.dresium-paywall-modal__pack-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  background: var(--dresium-paywall-gradient-diag);
  color: var(--dresium-paywall-white);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  border: 2px solid var(--dresium-paywall-white);
  box-shadow: 0 2px 8px var(--dresium-paywall-primary-alpha-32);
  white-space: nowrap;
  font-family: var(--dresium-paywall-font-body);
}

.dresium-paywall-modal__pack-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.dresium-paywall-modal__pack-left {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  /* 2026-10-18 v3.6.10 fix: "N try-ons" andava a capo splittando
     "try" / "ons". Il contenitore impedisce il wrap interno. */
  white-space: nowrap;
}
.dresium-paywall-modal__pack-count {
  font-family: var(--dresium-paywall-font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--dresium-paywall-gray-900);
  letter-spacing: -0.02em;
}
.dresium-paywall-modal__pack-unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--dresium-paywall-gray-500);
  text-transform: lowercase;
  white-space: nowrap;
}

.dresium-paywall-modal__pack-right {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.dresium-paywall-modal__pack-price {
  font-family: var(--dresium-paywall-font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  /* 2026-10-18 v3.6.10: solid color invece di gradient brand.
     Il valore e' il --pack-price del pack (neutro di default,
     override merchant via pack.color hex). */
  color: var(--pack-price);
  white-space: nowrap;
}
.dresium-paywall-modal__pack-pereach {
  font-size: 10px;
  font-weight: 500;
  color: var(--dresium-paywall-gray-400);
  white-space: nowrap;
}

/* ============================================================
   FOOTER BADGES
   ============================================================ */
.dresium-paywall-modal__footer-badges {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  color: var(--dresium-paywall-gray-500);
}
.dresium-paywall-modal__footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.dresium-paywall-modal__footer-badge svg {
  display: block;
  color: var(--dresium-paywall-primary);
}
.dresium-paywall-modal__footer-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--dresium-paywall-gray-300);
  flex-shrink: 0;
}

.dresium-paywall-modal__disclaimer {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--dresium-paywall-gray-400);
  max-width: 320px;
}

/* ============================================================
   CANCEL — stile secondary Dresium: bianco con border, hover grigio
   ============================================================ */
.dresium-paywall-modal__cancel {
  width: 100%;
  padding: 10px 16px;
  margin: 4px 0 0;
  border: 1px solid var(--dresium-paywall-gray-200);
  background: var(--dresium-paywall-white);
  color: var(--dresium-paywall-gray-600);
  /* Stesso radius dei pulsanti canonici */
  border-radius: var(--dresium-paywall-radius-md);
  cursor: pointer;
  font-family: var(--dresium-paywall-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  transition: all var(--dresium-paywall-transition);
  box-shadow: none;
  outline: none;
}

.dresium-paywall-modal__cancel:hover,
.dresium-paywall-modal__cancel:focus-visible {
  background: var(--dresium-paywall-gray-100);
  color: var(--dresium-paywall-gray-900);
  border-color: var(--dresium-paywall-gray-400);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes dresium-paywall-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dresium-paywall-pop-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dresium-paywall-modal__backdrop,
  .dresium-paywall-modal__box {
    animation: none;
  }
  .dresium-paywall-modal__pack:hover:not(:disabled) {
    transform: none;
  }
}

/* ============================================================
   SMALL SCREENS
   ============================================================ */
@media (max-width: 480px) {
  .dresium-paywall-modal__hero {
    height: 150px;
  }
  .dresium-paywall-modal__hero-card {
    width: 84px;
    height: 108px;
  }
  .dresium-paywall-modal__hero-card-badge {
    width: 28px;
    height: 28px;
    bottom: -8px;
    right: -8px;
    border-width: 2.5px;
  }
  .dresium-paywall-modal__body {
    padding: 18px 18px 20px;
    gap: 12px;
  }
  .dresium-paywall-modal__title {
    font-size: 21px;
  }
  .dresium-paywall-modal__pack {
    padding: 14px 14px;
  }
  .dresium-paywall-modal__pack-count {
    font-size: 24px;
  }
  .dresium-paywall-modal__pack-price {
    font-size: 18px;
  }
  .dresium-paywall-modal__pack-row {
    gap: 12px;
  }
}