/* ================================================================
   FLAVOR CONVERSIONS — Frontend
   Zero jQuery. Minimal footprint. All 6 display types.
   ================================================================ */

*,:before,:after{box-sizing:border-box}

/* ── BASE ── */
.flv-box{position:fixed;z-index:999990;display:none;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.6}
.flv-box[aria-hidden="false"]{display:flex}

.flv-embed{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.6;margin:24px auto}
.flv-embed .flv-content{border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.08)}
.flv-embed-small_embed{max-width:360px}

/* ── OVERLAY ── */
.flv-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1;opacity:0;transition:opacity .3s ease}
.flv-box[aria-hidden="false"] .flv-overlay{opacity:1}

/* ── CONTENT WRAP ── */
.flv-wrap{position:relative;z-index:2;background:#fff;border-radius:14px;overflow:hidden;width:92%;margin:0 auto;box-shadow:0 24px 80px rgba(0,0,0,.18)}
.flv-content{padding:32px}

/* ── CLOSE BTN ── */
.flv-close{position:absolute;top:8px;right:10px;background:none;border:none;font-size:28px;line-height:1;cursor:pointer;color:#888;padding:4px 8px;z-index:10;transition:color .2s,transform .15s}
.flv-close:hover{color:#333;transform:scale(1.15)}

/* ================================================================
   TYPE: CENTER MODAL
   ================================================================ */
.flv-type-center_modal{inset:0;align-items:center;justify-content:center}

/* ================================================================
   TYPE: CALLOUT MODAL (slide-in chat style)
   ================================================================ */
.flv-type-callout_modal{bottom:20px;right:20px;width:auto;max-width:400px}
.flv-type-callout_modal .flv-wrap{width:100%;border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,.14)}
.flv-type-callout_modal .flv-content{padding:24px}
.flv-corner-bottom-left{left:20px;right:auto}
.flv-corner-top-right{top:20px;bottom:auto}
.flv-corner-top-left{top:20px;bottom:auto;left:20px;right:auto}

/* ================================================================
   TYPE: STICKY BAR
   ================================================================ */
.flv-type-sticky_bar{left:0;right:0;width:100%}
.flv-type-sticky_bar .flv-wrap{border-radius:0;box-shadow:0 2px 16px rgba(0,0,0,.1);max-width:100%;width:100%}
.flv-type-sticky_bar .flv-content{padding:12px 24px;display:flex;align-items:center;justify-content:center;gap:16px;text-align:center;flex-wrap:wrap}
.flv-type-sticky_bar .flv-heading{font-size:15px;margin:0}
.flv-type-sticky_bar .flv-text{font-size:14px;margin:0}
.flv-type-sticky_bar .flv-buttons{flex-direction:row;gap:10px}
.flv-type-sticky_bar .flv-btn{padding:8px 20px;font-size:14px}
.flv-type-sticky_bar .flv-form{flex-direction:row;gap:8px;max-width:none}
.flv-type-sticky_bar .flv-input{padding:8px 12px;font-size:14px;width:auto;min-width:200px}
.flv-type-sticky_bar .flv-btn-submit{padding:8px 20px;font-size:14px}
.flv-bar-top{top:0}
.flv-bar-bottom{bottom:0}

/* ================================================================
   TYPE: FULL PAGE TAKEOVER
   ================================================================ */
.flv-type-full_page{inset:0;align-items:center;justify-content:center}
.flv-type-full_page .flv-overlay{background:rgba(0,0,0,.75)}
.flv-type-full_page .flv-wrap{max-width:640px;border-radius:16px}
.flv-type-full_page .flv-content{padding:48px 40px}

/* ================================================================
   ANIMATIONS
   ================================================================ */
.flv-wrap{opacity:0;transition:opacity .35s ease,transform .35s ease}
.flv-box[aria-hidden="false"] .flv-wrap{opacity:1;transform:none}

.flv-anim-fade-up .flv-wrap{transform:translateY(24px)}
.flv-anim-fade .flv-wrap{transform:none}
.flv-anim-slide-right .flv-wrap{transform:translateX(100%)}
.flv-anim-slide-left .flv-wrap{transform:translateX(-100%)}
.flv-anim-scale .flv-wrap{transform:scale(.88)}
.flv-anim-none .flv-wrap{transition:none;opacity:1;transform:none}

/* Callout slide-in overrides */
.flv-type-callout_modal.flv-anim-fade-up .flv-wrap{transform:translateY(40px)}
.flv-corner-bottom-left.flv-anim-slide-left .flv-wrap,
.flv-corner-top-left.flv-anim-slide-left .flv-wrap{transform:translateX(-100%)}

/* ================================================================
   STEP CONTENT
   ================================================================ */
.flv-step{text-align:center}
.flv-step[style*="--flv-step-bg"]{background:var(--flv-step-bg)}

.flv-step-img{margin-bottom:20px}
.flv-step-img img{max-width:100%;height:auto;border-radius:10px;display:block;margin:0 auto}

.flv-heading{font-size:22px;font-weight:700;margin:0 0 10px;color:#1a1a1a;line-height:1.3}
.flv-text{font-size:16px;color:#555;margin:0 0 24px}

/* ── YES/NO BUTTONS ── */
.flv-buttons{display:flex;flex-direction:column;gap:12px;align-items:center}
.flv-btn{display:inline-block;padding:14px 36px;font-size:17px;font-weight:700;border-radius:8px;border:none;cursor:pointer;transition:background .2s,transform .12s;text-align:center}
.flv-btn-yes{background:var(--flv-btn,#22c55e);color:#fff;width:100%;max-width:340px}
.flv-btn-yes:hover{filter:brightness(.92);transform:translateY(-1px)}
.flv-btn-no{background:none;border:none;color:#999;font-size:13px;cursor:pointer;padding:8px;text-decoration:underline}
.flv-btn-no:hover{color:#666}

/* ── FORM ── */
.flv-form{display:flex;flex-direction:column;gap:12px;max-width:380px;margin:0 auto}
.flv-input{width:100%;padding:13px 16px;border:2px solid #e2e8f0;border-radius:8px;font-size:16px;outline:none;transition:border-color .2s}
.flv-input:focus{border-color:#3b82f6}
.flv-input.flv-error{border-color:#ef4444}
.flv-btn-submit{background:var(--flv-btn,#3b82f6);color:#fff;padding:14px 24px;font-size:16px;font-weight:700;border-radius:8px;border:none;cursor:pointer;transition:background .2s}
.flv-btn-submit:hover{filter:brightness(.9)}
.flv-btn-submit:disabled{opacity:.6;cursor:not-allowed}
.flv-privacy{font-size:12px;color:#aaa;margin-top:4px;text-align:center}

/* ── SUCCESS ── */
.flv-success-icon{width:56px;height:56px;background:#22c55e;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 14px;animation:flvPop .4s ease}
.flv-success-msg{font-size:18px;font-weight:600;color:#1a1a1a;text-align:center}
.flv-redirect-notice{font-size:13px;color:#aaa;text-align:center;margin-top:8px}
.flv-inline-success{text-align:center;padding:20px 0}

@keyframes flvPop{0%{transform:scale(0)}70%{transform:scale(1.1)}100%{transform:scale(1)}}

/* ── STEP TRANSITIONS ── */
.flv-step-leaving{opacity:0;transition:opacity .25s ease}

/* ── LOADING SPINNER ── */
.flv-spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:flvSpin .5s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes flvSpin{to{transform:rotate(360deg)}}

/* ── TRIGGER BUTTON ── */
.flv-trigger-btn{transition:transform .12s,box-shadow .15s}
.flv-trigger-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.13)}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:600px){
    .flv-wrap{width:96%;border-radius:10px}
    .flv-content{padding:22px 18px}
    .flv-heading{font-size:19px}

    .flv-type-callout_modal{bottom:0;left:0;right:0;max-width:100%;width:100%}
    .flv-type-callout_modal .flv-wrap{border-radius:14px 14px 0 0}

    .flv-type-sticky_bar .flv-content{flex-direction:column;padding:10px 14px}
    .flv-type-sticky_bar .flv-form{flex-direction:column;width:100%}
    .flv-type-sticky_bar .flv-input{min-width:0;width:100%}

    .flv-type-full_page .flv-content{padding:32px 20px}
}