/* display:none on the closed backdrop is load-bearing: a live cross-origin form
   iframe keeps intercepting clicks/scroll behind it unless it's out of layout. */
#fg-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); z-index: 2100; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; overflow: hidden; }
#fg-backdrop.is-open { display: flex; pointer-events: auto; }
#fg-backdrop.is-open.is-visible { opacity: 1; }
#fg-modal { position: relative; width: 100%; max-width: 560px; max-height: 90vh; background: #1b1a18; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); transform: translateY(16px); opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease; box-sizing: border-box; overflow: hidden; }
#fg-backdrop.is-open.is-visible #fg-modal { transform: translateY(0); opacity: 1; }
#fg-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; z-index: 2; }
#fg-close:hover { background: rgba(255,255,255,0.18); }
/* The theme pads every button 8px 22px, which stretches this 36px circle into an oval. */
#fg-close { padding: 0 !important; min-width: 36px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
#fg-track { display: flex; width: 200%; transition: transform 0.35s ease; }
#fg-track.is-step-2 { transform: translateX(-50%); }
.fg-panel { width: 50%; box-sizing: border-box; padding: clamp(28px, 4vw, 40px); max-height: 90vh; overflow-y: auto; scrollbar-width: none; }
.fg-panel::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
.fg-eyebrow { font-family: Poppins, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: #ff3b41; text-transform: uppercase; }
.fg-heading { margin: 12px 0 0; font-family: Poppins, Helvetica, Arial, sans-serif; font-size: clamp(22px, 2.8vw, 28px); line-height: 1.25; font-weight: 700; color: #fff; }
.fg-sub { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.68); }
.fg-thumb { display: block; margin: 22px auto 0; max-height: 260px; width: auto; max-width: 100%; border-radius: 6px; box-shadow: 0 14px 30px rgba(0,0,0,0.4); }
.fg-cta { display: block; width: 100%; margin-top: 26px; padding: 15px 20px; border: 0; border-radius: 999px; background: #be0e0e; color: #fff; font-family: Poppins, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; cursor: pointer; }
.fg-cta:hover { background: #222; }
.fg-skip { display: block; width: 100%; margin-top: 14px; padding: 8px; border: 0; background: none; color: rgba(255,255,255,0.55); font-size: 14px; cursor: pointer; }
.fg-skip:hover { color: #fff; }
.fg-back { display: inline-block; margin-bottom: 14px; padding: 0; border: 0; background: none; color: rgba(255,255,255,0.6); font-size: 14px; cursor: pointer; }
.fg-back:hover { color: #fff; }
#fg-form-slot { margin-top: 22px; min-height: 300px; display: flex; align-items: center; justify-content: center; }
#fg-form-slot iframe { max-width: 100% !important; width: 100% !important; }
#fg-loading { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); border-top-color: #ff3b41; animation: fg-spin 0.8s linear infinite; }
@keyframes fg-spin { to { transform: rotate(360deg); } }
@media (max-width: 480px) {
  .fg-thumb { max-height: 200px; }
}