
.skyfi-hair-launcher{display:inline-block;font-family:Outfit,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.skyfi-hair-open{
min-height:50px;
padding:0 20px;
border-radius:14px;
border:1px solid rgba(143,159,255,.32);
background:linear-gradient(180deg,rgb(79 78 63),rgb(79 78 63));
color:#ffffff;
font:600 13px/1 Outfit,system-ui,sans-serif;
display:inline-flex;
align-items:center;
gap:10px;
cursor:pointer;
box-shadow:0 10px 28px rgba(56,67,130,.10);
transition:.28s ease
}
.skyfi-hair-open:hover{
transform:translateY(-1px);
border-color:rgba(143,159,255,.50);
background:linear-gradient(180deg,rgb(86 85 69),rgb(86 85 69));
box-shadow:0 14px 34px rgba(56,67,130,.14)
}
.skyfi-hair-open svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.skyfi-hair-open:hover svg{transform:translateX(2px)}
.skyfi-hair-dialog[hidden]{display:none!important}
.skyfi-hair-dialog{position:fixed;z-index:2147483000;inset:0;display:grid;place-items:center;padding:18px}
.skyfi-hair-dialog-backdrop{position:absolute;inset:0;background:rgba(4,6,11,.82);backdrop-filter:blur(14px);animation:skyfiBackdropIn .3s ease both}
.skyfi-hair-dialog-shell{position:relative;z-index:1;width:min(1500px,calc(100vw - 36px));height:min(920px,calc(100dvh - 36px));border:1px solid rgba(170,181,215,.13);border-radius:24px;background:#020203;overflow:hidden;box-shadow:0 28px 90px rgba(0,0,0,.48);animation:skyfiDialogIn .48s cubic-bezier(.16,1,.3,1) both}
.skyfi-hair-frame-wrap,.skyfi-hair-frame-wrap iframe{width:100%;height:100%;border:0;display:block}
.skyfi-hair-frame-wrap{position:relative;background:#020203}
.skyfi-hair-close{position:absolute;z-index:5;top:14px;right:14px;width:40px;height:40px;border-radius:12px;border:1px solid rgba(170,181,215,.13);background:rgba(10,13,21,.76);backdrop-filter:blur(14px);color:#cdd3e8;display:grid;place-items:center;cursor:pointer;transition:.25s ease}
.skyfi-hair-close:hover{color:#fff;border-color:rgba(143,159,255,.34);background:rgba(143,159,255,.09)}
.skyfi-hair-close svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.skyfi-hair-frame-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;background:#020203;z-index:2;transition:opacity .3s ease,visibility .3s ease}
.skyfi-hair-frame-loader.is-ready{opacity:0;visibility:hidden;pointer-events:none}
.skyfi-hair-frame-loader span{width:6px;height:6px;border-radius:50%;background:#00e5ff;animation:skyfiDot 1s ease-in-out infinite}
.skyfi-hair-frame-loader span:nth-child(2){animation-delay:.12s}.skyfi-hair-frame-loader span:nth-child(3){animation-delay:.24s}
body.skyfi-hair-modal-open{overflow:hidden!important}
@keyframes skyfiDialogIn{from{opacity:0;transform:translateY(12px) scale(.985);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes skyfiBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes skyfiDot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
@media(max-width:720px){.skyfi-hair-dialog{padding:0}.skyfi-hair-dialog-shell{width:100vw;height:100dvh;border:0;border-radius:0}.skyfi-hair-close{top:10px;right:10px}}



/* ===== V1.3: global popup trigger ===== */
.skyfi-hair-global-launcher{
    position:static;
    width:0;
    height:0;
    margin:0;
    padding:0;
}

/* ===== V1.3: [skyfi_hair_treatment_popup] is now an inline section ===== */
.skyfi-hair-inline-section{
    position:relative;
    width:100%;
    height:var(--skyfi-hair-inline-height,900px);
    min-height:620px;
    margin:0;
    font-family:Outfit,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.skyfi-hair-inline-shell{
    position:relative;
    width:100%;
    height:100%;
    min-height:inherit;
    overflow:hidden;
    border:1px solid rgba(170,181,215,.13);
    border-radius:24px;
    background:#020203;
    box-shadow:
        0 24px 70px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.025);
}

.skyfi-hair-inline-shell iframe{
    display:block;
    width:100%;
    height:100%;
    min-height:inherit;
    border:0;
    background:#020203;
}

.skyfi-hair-inline-shell .skyfi-hair-frame-loader{
    border-radius:inherit;
}

@media(max-width:720px){
    .skyfi-hair-inline-section{
        height:var(--skyfi-hair-inline-height,100dvh);
        min-height:720px;
    }

    .skyfi-hair-inline-shell{
        border-radius:18px;
    }
}
