/* ===== UnderMarket Secret Friend Roulette - Estilos principales ===== */

.um-sf-container{
    max-width:440px;
    margin:0 auto;
    padding:26px 22px 30px;
    background:radial-gradient(circle at top left,#ffe4f1 0,#fff7ed 40%,#ffffff 100%);
    border-radius:26px;
    border:1px solid rgba(251,113,133,0.35);
    box-shadow:0 18px 40px rgba(248,113,133,0.25);
    color:#111827;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    text-align:left;
    position:relative;
    overflow:hidden;
}
.um-sf-container::before{
    content:'';
    position:absolute;
    width:180px;
    height:180px;
    background:radial-gradient(circle,#f97393 0,transparent 65%);
    opacity:0.14;
    top:-60px;
    right:-60px;
    pointer-events:none;
}

/* Kicker */
.um-sf-kicker{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 10px;
    border-radius:999px;
    background:rgba(248,113,133,0.08);
    border:1px solid rgba(248,113,133,0.4);
    font-size:11px;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#be185d;
    margin-bottom:6px;
}
.um-sf-kicker-dot{
    width:8px;
    height:8px;
    border-radius:999px;
    background:linear-gradient(135deg,#f97393,#f97316);
}

/* Titular */
.um-sf-title{
    font-size:1.5rem;
    margin:0 0 4px;
    font-weight:800;
    color:#be185d;
}
.um-sf-sub{
    font-size:0.9rem;
    opacity:0.9;
    margin:0 0 18px;
    color:#4b5563;
}

/* Formulario */
.um-sf-form-row{
    margin-bottom:14px;
}
.um-sf-label{
    display:block;
    font-size:0.8rem;
    margin-bottom:4px;
    color:#6b21a8;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
}
.um-sf-select,
.um-sf-input{
    width:100%;
    border-radius:999px;
    border:1px solid rgba(148,163,184,0.9);
    background:#ffffff;
    color:#111827;
    padding:10px 14px;
    font-size:0.9rem;
    outline:none;
    transition:border-color .15s, box-shadow .15s, transform .12s, background .15s;
}
.um-sf-select:focus,
.um-sf-input:focus{
    border-color:#f97393;
    box-shadow:0 0 0 1px rgba(248,113,133,.8);
    transform:translateY(-1px);
    background:#fff7fb;
}

/* Botón */
.um-sf-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:none;
    border-radius:999px;
    padding:10px 18px;
    margin-top:4px;
    font-size:0.95rem;
    font-weight:700;
    background:linear-gradient(135deg,#f97393,#f97316);
    color:#fefce8;
    cursor:pointer;
    transition:transform .12s, box-shadow .12s, filter .12s;
}
.um-sf-button span{
    font-size:1rem;
}
.um-sf-button:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(248,113,133,0.45);
    filter:brightness(1.05);
}
.um-sf-button:active{
    transform:translateY(0);
    box-shadow:none;
}

/* Bloque ruleta: oculto hasta enviar */
.um-sf-roulette-wrap{
    margin-top:18px;
    display:none;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .25s ease, transform .25s ease;
}
.um-sf-roulette-wrap.um-sf-show{
    display:block;
    opacity:1;
    transform:translateY(0);
}

.um-sf-roulette-inner{
    border-radius:22px;
    padding:14px 14px 16px;
    background:linear-gradient(135deg,rgba(248,113,133,0.08),rgba(56,189,248,0.06));
    border:1px solid rgba(248,113,133,0.35);
}
.um-sf-roulette-heading{
    font-size:0.85rem;
    margin:0 0 8px;
    color:#6b21a8;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:6px;
}
.um-sf-roulette-heading span{
    font-size:1rem;
}

/* Preloader */
.um-sf-preloader{
    text-align:center;
}
.um-sf-preloader img{
    max-width:130px;
    border-radius:18px;
    display:block;
    margin:0 auto 6px;
}
.um-sf-preloader p{
    font-size:0.83rem;
    margin:0 0 4px;
    opacity:0.85;
    color:#4b5563;
}

/* Ruleta */
.um-sf-pointer{
    width:0;
    height:0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:14px solid #facc15;
    margin:6px auto 4px;
}
.um-sf-wheel{
    position:relative;
    width:170px;
    height:170px;
    margin:6px auto 0;
    border-radius:50%;
    border:4px solid #f97393;
    box-shadow:0 0 0 2px rgba(190,24,93,0.35),0 12px 30px rgba(248,113,133,0.5);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:conic-gradient(
        #7c3aed 0 72deg,
        #22c55e 72deg 144deg,
        #f97316 144deg 216deg,
        #0ea5e9 216deg 288deg,
        #ec4899 288deg 360deg
    );
}
.um-sf-wheel::after{
    content:'';
    position:absolute;
    inset:12px;
    background:radial-gradient(circle at center,#020617 0,#020617 45%,transparent 60%);
    border-radius:50%;
}
.um-sf-wheel span{
    position:absolute;
    z-index:2;
    font-size:0.7rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:#fefce8;
}
.um-sf-wheel span:nth-child(1){ transform:rotate(0deg) translateY(-65px); }
.um-sf-wheel span:nth-child(2){ transform:rotate(72deg) translateY(-65px); }
.um-sf-wheel span:nth-child(3){ transform:rotate(144deg) translateY(-65px); }
.um-sf-wheel span:nth-child(4){ transform:rotate(216deg) translateY(-65px); }
.um-sf-wheel span:nth-child(5){ transform:rotate(288deg) translateY(-65px); }

/* Animación ruleta */
.um-sf-spin{
    animation:umSfSpin 1.2s cubic-bezier(.21,.8,.33,1) infinite;
}
.um-sf-spin-done{
    animation:none;
}
@keyframes umSfSpin{
    0% { transform:rotate(0deg); }
    100% { transform:rotate(540deg); }
}

/* Resultado */
.um-sf-result-wrap{
    display:none;
    margin-top:14px;
}
.um-sf-result-card{
    margin-top:4px;
    padding:14px 12px 10px;
    border-radius:18px;
    background:linear-gradient(135deg,rgba(248,113,133,0.12),rgba(249,115,22,0.18));
    border:1px solid rgba(248,113,133,0.55);
    text-align:left;
}
.um-sf-result-title{
    font-size:0.85rem;
    opacity:0.95;
    margin-bottom:4px;
    color:#6b21a8;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.06em;
}
.um-sf-result-name{
    font-size:1.15rem;
    font-weight:800;
    color:#be185d;
}
.um-sf-result-gif{
    text-align:center;
}
.um-sf-result-gif img{
    margin-top:10px;
    max-width:170px;
    border-radius:16px;
    box-shadow:0 8px 18px rgba(0,0,0,0.2);
}

/* Error */
.um-sf-error{
    margin-top:8px;
    color:#b91c1c;
    font-size:0.8rem;
}

/* Responsive */
@media (max-width:480px){
    .um-sf-container{
        padding:20px 16px 24px;
        border-radius:22px;
    }
    .um-sf-title{
        font-size:1.3rem;
    }
    .um-sf-wheel{
        width:150px;
        height:150px;
    }
}