/* ============================================================
   Dresium Try-On — Guest Flow Modal (4-step)

   Introdotto 2026-09-10. Design system dedicato per il flusso guest
   (utenti non loggati con guest_trial_enabled=true). Rispecchia le
   screenshot in /home/ricca/DEV/dresium/step/ (WhatsApp 16.29.01 →
   16.29.16). Usa i token globali --dresium-tryon-* del block cosi'
   il merchant puo' ricolorare/rifont-are anche questo dialog.

   Struttura visiva:
     - Header: logo Dresium (se non-whitelabel) + badge step numero +
       label passo corrente + track progress + X close
     - Body: 4 sezioni (data-guest-step="1..4"), solo una visibile
     - Colori: gradient primary per CTA, viola tenue per accenti,
       pastel background per il dialog
   ============================================================ */

/*
   Font di default coerenti col mockup:
     - Body/UI: system sans-serif nativo (rende omogeneo cross-OS)
     - Display/heading: serif elegante (Playfair-like)

   Override merchant:
     - Il merchant puo' impostare --dresium-tryon-font-body-guest e
       --dresium-tryon-font-display-guest per sovrascrivere. Se non
       settati (di default), usiamo i fallback del mockup.
     - I token generici --dresium-tryon-font-body/display (usati altrove
       nel plugin) sono ignorati qui: il flow guest ha branding proprio.
*/
.dresium-tryon-guest-modal {
  padding: 0;
  border: none;
  border-radius: 24px;
  max-width: 480px;
  width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  background: transparent;
  overflow: visible;
  color: #111;
  font-family: var(--dresium-tryon-font-body-guest, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
}

.dresium-tryon-guest-modal::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.dresium-tryon-guest-modal__inner {
  background: #ffffff;
  border-radius: 24px;
  padding: 20px 26px 22px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.15);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

/* ------------------------------------------------------------
   HEADER (logo + progress + close) — single row layout

   Mockup: badge, label, track e X close vivono TUTTI sulla stessa
   riga orizzontale. Quando il logo Dresium e' visibile (non-whitelabel),
   sta su una riga separata SOPRA. Quando whitelabel, single row only.
   ------------------------------------------------------------ */
.dresium-tryon-guest-modal__header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.dresium-tryon-guest-modal__brand {
  display: none; /* Default whitelabel-first: nascosto finche' JS non conferma non-whitelabel */
  align-items: center;
  margin-bottom: 10px;
}
.dresium-tryon-guest-modal__brand img {
  height: 24px;
  width: auto;
  object-fit: contain;
}
/* Mostrato solo quando merchant NON e' whitelabel_unlocked */
.dresium-tryon-guest-modal[data-guest-show-logo="1"] .dresium-tryon-guest-modal__brand {
  display: flex;
}

.dresium-tryon-guest-modal__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.dresium-tryon-guest-modal__close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: #0f172a;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.dresium-tryon-guest-modal__close:hover {
  background: #f1f5f9;
  color: #111;
}

.dresium-tryon-guest-modal__progress {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.dresium-tryon-guest-modal__step-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--dresium-tryon-primary-alpha-08, #eef1ff);
  color: var(--dresium-tryon-primary, #4362db);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.dresium-tryon-guest-modal__step-label {
  font-size: 16px;
  font-weight: 500;
  color: #64748b;
  flex-shrink: 0;
}

.dresium-tryon-guest-modal__step-track {
  flex: 1;
  height: 2px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
  min-width: 40px;
}
.dresium-tryon-guest-modal__step-fill {
  display: block;
  height: 100%;
  background: var(--dresium-tryon-gradient, linear-gradient(90deg, #4362db 0%, #7C3AED 100%));
  width: 25%;
  transition: width 0.35s ease;
}

/* ------------------------------------------------------------
   STEP SECTIONS (common)
   ------------------------------------------------------------ */
.dresium-tryon-guest-modal__step[hidden] { display: none; }

.dresium-tryon-guest-modal__title {
  /* Serif elegante guest-specific — mockup usa Playfair-like.
     Override merchant: --dresium-tryon-font-display-guest. */
  font-family: var(--dresium-tryon-font-display-guest, 'Playfair Display', 'Fraunces', 'Georgia', 'Times New Roman', serif);
  font-size: 28px;
  line-height: 1.05;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
  letter-spacing: -0.015em;
}
.dresium-tryon-guest-modal__sparkle {
  color: #f5c518;
  margin-left: 6px;
  font-size: 0.75em;
}

.dresium-tryon-guest-modal__subtitle {
  font-size: 15px;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 16px;
}

.dresium-tryon-guest-modal__cta {
  width: 100%;
  padding: 14px 20px;
  background: var(--dresium-tryon-gradient, linear-gradient(90deg, #4362db 0%, #7C3AED 100%));
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 6px 18px var(--dresium-tryon-primary-alpha-30, rgba(67, 98, 219, 0.3));
  transition: transform 0.12s, box-shadow 0.15s;
  margin-top: 12px;
}
.dresium-tryon-guest-modal__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px var(--dresium-tryon-primary-alpha-40, rgba(67, 98, 219, 0.36));
}
.dresium-tryon-guest-modal__cta:active { transform: translateY(0); }

.dresium-tryon-guest-modal__btn-secondary {
  padding: 12px 20px;
  background: #f1f5f9;
  color: #111;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.dresium-tryon-guest-modal__btn-secondary:hover { background: #e2e8f0; }
.dresium-tryon-guest-modal__btn-primary {
  padding: 12px 20px;
  background: var(--dresium-tryon-primary, #4362db);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

/* ------------------------------------------------------------
   STEP 1 — Tiles + ref gallery + notice
   ------------------------------------------------------------ */
.dresium-tryon-guest-modal__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
/* Mobile / tablet: stack in colonna singola. Desktop mantiene 2 col. */
@media (max-width: 640px) {
  .dresium-tryon-guest-modal__tiles {
    grid-template-columns: 1fr;
  }
}
/* Override esplicito dal JS quando serve (device detection) */
.dresium-tryon-guest-modal__tiles[data-guest-tiles-mode="one-col"] {
  grid-template-columns: 1fr;
}
.dresium-tryon-guest-modal__tiles[data-guest-tiles-mode="two-col"] {
  grid-template-columns: 1fr 1fr;
}

.dresium-tryon-guest-modal__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 14px 22px;
  border-radius: 18px;
  cursor: pointer;
  color: var(--dresium-tryon-primary, #4362db);
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
  text-align: center;
  min-height: 190px;
}
/* Upload: bordo dashed */
.dresium-tryon-guest-modal__tile--upload {
  background: var(--dresium-tryon-primary-alpha-08, #f5f7ff);
  border: 2px dashed #d0d7ff;
}
.dresium-tryon-guest-modal__tile--upload:hover {
  background: var(--dresium-tryon-primary-alpha-08, #eef1ff);
  border-color: var(--dresium-tryon-primary-light, #6b84e8);
  transform: translateY(-1px);
}
/* Camera: bordo dashed (uniforme a upload) */
.dresium-tryon-guest-modal__tile--camera {
  background: var(--dresium-tryon-primary-alpha-08, #eef1ff);
  border: 2px dashed #d0d7ff;
}
.dresium-tryon-guest-modal__tile--camera:hover {
  background: var(--dresium-tryon-primary-alpha-20, #e0e7ff);
  border-color: var(--dresium-tryon-primary-light, #6b84e8);
  transform: translateY(-1px);
}
.dresium-tryon-guest-modal__tile-icon {
  color: var(--dresium-tryon-primary, #4362db);
  flex-shrink: 0;
}
.dresium-tryon-guest-modal__tile-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  max-width: 180px;
}
.dresium-tryon-guest-modal__tile-sub {
  font-size: 12px;
  color: #64748b;
  line-height: 1.35;
  max-width: 200px;
}
.dresium-tryon-guest-modal__tile-icon { width: 52px !important; height: 52px !important; }

.dresium-tryon-guest-modal__webcam {
  margin: 4px 0 16px;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  position: relative;
}
.dresium-tryon-guest-modal__webcam video {
  width: 100%;
  display: block;
  aspect-ratio: 3/4;
  object-fit: cover;
  transform: scaleX(-1);
}
.dresium-tryon-guest-modal__webcam-actions {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.dresium-tryon-guest-modal__webcam-actions button { flex: 1; }

.dresium-tryon-guest-modal__ref-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0 8px;
}
.dresium-tryon-guest-modal__ref-gallery img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.dresium-tryon-guest-modal__ref-caption {
  text-align: center;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
  margin: 0 0 12px;
}

.dresium-tryon-guest-modal__notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 12px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 0;
}
.dresium-tryon-guest-modal__notice-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
}
.dresium-tryon-guest-modal__notice svg {
  flex-shrink: 0;
}
.dresium-tryon-guest-modal__notice--tinted {
  background: var(--dresium-tryon-primary-alpha-08, #eef1ff);
  color: #4a5568;
}
.dresium-tryon-guest-modal__notice--tinted svg { color: var(--dresium-tryon-primary, #4362db); }
.dresium-tryon-guest-modal__notice--tinted strong {
  display: block;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}
.dresium-tryon-guest-modal__notice--tinted em {
  display: block;
  font-style: normal;
  font-size: 13px;
}

/* ------------------------------------------------------------
   STEP 2 — Preview foto
   ------------------------------------------------------------ */
.dresium-tryon-guest-modal__preview {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 16px;
}
.dresium-tryon-guest-modal__preview img {
  width: 100%;
  height: auto;
  display: block;
}
.dresium-tryon-guest-modal__preview-replace {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 10px 16px;
  background: #ffffff;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
}
.dresium-tryon-guest-modal__preview-replace:hover { background: #f8fafc; }

/* ------------------------------------------------------------
   STEP 3 — Occasion grid + customize box
   ------------------------------------------------------------ */
.dresium-tryon-guest-modal__occasions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.dresium-tryon-guest-modal__occasion {
  padding: 0;
  border: 3px solid transparent;
  border-radius: 18px;
  background: #f8fafc;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, transform 0.12s;
}
.dresium-tryon-guest-modal__occasion img {
  width: 100%;
  object-fit: cover;
  display: block;
}
.dresium-tryon-guest-modal__occasion-label {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  background: #ffffff;
}
.dresium-tryon-guest-modal__occasion-icon--star { color: var(--dresium-tryon-primary, #4362db); }
.dresium-tryon-guest-modal__occasion-icon--heart { color: #ef4444; }
.dresium-tryon-guest-modal__occasion-icon--briefcase { color: var(--dresium-tryon-primary, #4362db); }
.dresium-tryon-guest-modal__occasion-icon--award { color: var(--dresium-tryon-secondary, #7C3AED); }

.dresium-tryon-guest-modal__occasion:hover { transform: translateY(-1px); }
.dresium-tryon-guest-modal__occasion[data-guest-occasion-selected="1"] {
  border-color: var(--dresium-tryon-primary-light, #6b84e8);
  box-shadow: 0 0 0 3px var(--dresium-tryon-primary-alpha-20, rgba(107, 132, 232, 0.2));
}

.dresium-tryon-guest-modal__customize-toggle {
  width: 100%;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  margin-bottom: 16px;
}
.dresium-tryon-guest-modal__customize-toggle:hover { background: #f8fafc; }
.dresium-tryon-guest-modal__customize-toggle-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--dresium-tryon-primary-alpha-08, #eef1ff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dresium-tryon-primary, #4362db);
  flex-shrink: 0;
}
.dresium-tryon-guest-modal__customize-toggle-text { flex: 1; }
.dresium-tryon-guest-modal__customize-toggle-text strong {
  display: block;
  font-size: 15px;
  color: #0f172a;
  font-weight: 700;
}
.dresium-tryon-guest-modal__customize-toggle-text em {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: #64748b;
}
.dresium-tryon-guest-modal__customize-toggle-chevron {
  color: #94a3b8;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.dresium-tryon-guest-modal__customize-toggle[aria-expanded="true"] .dresium-tryon-guest-modal__customize-toggle-chevron {
  transform: rotate(90deg);
}

.dresium-tryon-guest-modal__customize {
  display: block;
  padding: 4px 0 16px;
}
.dresium-tryon-guest-modal__customize[hidden] { display: none; }
.dresium-tryon-guest-modal__customize-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dresium-tryon-guest-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dresium-tryon-guest-modal__field > span {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.dresium-tryon-guest-modal__field select {
  display: block;
  visibility: visible;
  opacity: 1;
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  color: #0f172a;
  background: #ffffff;
  cursor: pointer;
  font-family: inherit;
  appearance: auto;
  -webkit-appearance: menulist;
}
.dresium-tryon-guest-modal__field select:focus {
  outline: none;
  border-color: var(--dresium-tryon-primary, #4362db);
  box-shadow: 0 0 0 3px var(--dresium-tryon-primary-alpha-12, rgba(67, 98, 219, 0.12));
}

.dresium-tryon-guest-modal__skip {
  display: block;
  margin: 12px auto 0;
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 500;
}
.dresium-tryon-guest-modal__skip:hover { color: #0f172a; }

/* ------------------------------------------------------------
   Mobile responsive
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .dresium-tryon-guest-modal { border-radius: 20px; width: calc(100vw - 16px); }
  .dresium-tryon-guest-modal__inner { padding: 20px 18px 24px; border-radius: 20px; }
  .dresium-tryon-guest-modal__title { font-size: 26px; }
  .dresium-tryon-guest-modal__tile { min-height: 170px; padding: 24px 12px; }
  .dresium-tryon-guest-modal__ref-gallery img { border-radius: 10px; }
  .dresium-tryon-guest-modal__customize-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   RESULT MODAL — Variante guest (M60 Step 4 wizard-native)

   Quando la generazione parte dal GuestFlow, il ResultModal riceve
   la classe .dresium-tryon-result-modal--guest (aggiunta da
   ResultModal.open). Overriamo:
     - radius grande + backdrop soft
     - progress header wizard (::before pseudo con testo "4 Risultato"
       + track progress al 100%)
     - Nasconde il logo Dresium nativo del ResultModal quando presente
       la classe guest (per whitelabel-first, come per il dialog guest)
     - Colori CTA gradient wizard (i bottoni ereditano gli stili
       nativi del ResultModal ma applichiamo un accent viola/gradient
       sul primario "Nuova generazione")
   ============================================================ */
.dresium-result-modal.dresium-tryon-result-modal--guest {
  border-radius: 24px;
  font-family: var(--dresium-tryon-font-body-guest, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
}
.dresium-result-modal.dresium-tryon-result-modal--guest::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
/* Whitelabel-first per guest: nascondi il logo Dresium nativo del ResultModal */
.dresium-result-modal.dresium-tryon-result-modal--guest .dresium-result-modal__title-logo {
  display: none;
}
/* Progress header injected come DOM reale (injectGuestStepHeader in
   tryon.js). Riusa la classe .dresium-tryon-guest-modal__progress con
   il modifier --injected. La X close del ResultModal legacy e'
   position:absolute top:12 right:12 — la riposizioniamo per allinearla
   verticalmente al centro del badge del progress header (single row). */
.dresium-result-modal.dresium-tryon-result-modal--guest .dresium-result-modal__container {
  border-radius: 24px;
  position: relative;
  padding-top: 20px;
}
.dresium-tryon-guest-modal__progress--injected {
  padding: 0 60px 0 0; /* right=60 lascia spazio all'X close absolute */
  margin: 0 0 12px;
  border-bottom: none;
  min-height: 44px; /* uguale altezza del badge per garantire centro Y stabile */
}
/* Riposiziona l'X close per allinearla al centro del badge del progress
   header (single row layout come Step 1/2/3). Badge e' 44px alto, centro
   e' a 22px dal top del progress. Container padding-top 20px + progress
   inizia a 20px = centro X a 42px dal top container. */
.dresium-result-modal.dresium-tryon-result-modal--guest .dresium-result-modal__close {
  top: 22px;
  right: 22px;
}
/* Bottone "Nuova generazione" col gradient wizard */
.dresium-result-modal.dresium-tryon-result-modal--guest [data-dresium-result-new] {
  background: var(--dresium-tryon-gradient, linear-gradient(90deg, #4362db 0%, #7C3AED 100%));
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  padding: 14px 20px;
  box-shadow: 0 6px 18px var(--dresium-tryon-primary-alpha-30, rgba(67, 98, 219, 0.3));
}

/* ============================================================
   LOADING MODAL — Variante guest (M60 Step 4 wizard-native)

   Quando il LoadingModal viene aperto da GuestFlowModal, riceve
   la classe .dresium-loading-modal--guest. Overriamo:
     - radius 24px, backdrop soft (come dialog guest)
     - Nasconde il logo Dresium nativo (whitelabel-first)
     - Progress header wizard + title serif iniettati come DOM
       (injectGuestLoadingHeader in tryon.js)
     - Font body sans-serif, title serif (coerente col dialog guest)
   ============================================================ */
.dresium-loading-modal.dresium-loading-modal--guest {
  border-radius: 24px;
  /* M60 (2026-09-10): allinea la larghezza al GuestFlowModal (Step 1-3)
     per coerenza visiva del wizard. Il ResultModal (Step 5) invece
     mantiene 640px perche' contiene l'immagine finale full-width. */
  max-width: 480px;
  width: calc(100vw - 32px);
  font-family: var(--dresium-tryon-font-body-guest, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
}
/* Container del loading modal --guest: usa la stessa larghezza del dialog
   (l'`min(640px, ...)` legacy vince altrimenti — override esplicito). */
.dresium-loading-modal.dresium-loading-modal--guest .dresium-loading-modal__container {
  max-width: 480px;
  width: 100%;
}
.dresium-loading-modal.dresium-loading-modal--guest::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
/* Whitelabel-first: nasconde il logo Dresium del LoadingModal legacy */
.dresium-loading-modal.dresium-loading-modal--guest .dresium-loading-modal__brand-logo {
  display: none;
}
/* Container: adotta padding wizard e radius grande */
.dresium-loading-modal.dresium-loading-modal--guest .dresium-loading-modal__container {
  border-radius: 24px;
  padding: 20px 26px 22px;
}
/* Nasconde il title/subtitle nativi del LoadingModal (sostituiti
   dal blocco iniettato serif "Stiamo creando il tuo look...") */
.dresium-loading-modal.dresium-loading-modal--guest .dresium-loading-modal__title,
.dresium-loading-modal.dresium-loading-modal--guest .dresium-loading-modal__subtitle {
  display: none;
}
/* Il title-block iniettato (title serif + subtitle sans) ha margine
   verticale coerente col resto del wizard */
.dresium-tryon-guest-modal__loading-title-block {
  margin: 0 0 16px;
}
.dresium-tryon-guest-modal__loading-title-block .dresium-tryon-guest-modal__title {
  margin: 0 0 8px;
}
.dresium-tryon-guest-modal__loading-title-block .dresium-tryon-guest-modal__subtitle {
  margin: 0;
}