/* =========================================
   RESET
========================================= */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
}

body{

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background:
        linear-gradient(
            180deg,
            #fafafa 0%,
            #eeeeee 100%
        );

    color:#222;

    min-height:100vh;
}


/* =========================================
   MAIN
========================================= */

.page{

    width:100%;

    max-width:620px;

    margin:0 auto;

    padding:
        18px 13px 25px;
}


/* =========================================
   TOP FLIRTY TEXT
========================================= */

.top-message{

    text-align:center;

    font-size:20px;

    font-weight:600;

    line-height:1.45;

    color:#333;

    padding:
        4px 10px 16px;

}


/* =========================================
   AUTO LOAD WEBSITE WIDGET
========================================= */

.site-widget{
    width:400px;
    height:30px;
    max-width:100%;
    margin:0 auto 16px;
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
}

.site-widget iframe{
    display:block;
    width:400px;
    max-width:100%;
    height:30px;
    border:0;
}

@media(max-width:480px){
    .site-widget,
    .site-widget iframe{
        width:100%;
        height:100px;
    }
}

/* =========================================
   LINKS
========================================= */

.links{

    display:flex;

    flex-direction:column;

    gap:13px;
}


/* =========================================
   LINK CARD
========================================= */

.link-item{

    display:flex;

    align-items:center;

    width:100%;

    min-height:72px;

    padding:
        7px 13px 7px 8px;

    background:#fff;

    border-radius:16px;

    text-decoration:none;

    color:#222;

    box-shadow:
        0 3px 12px rgba(0,0,0,.08);

    transition:
        transform .18s ease,
        box-shadow .18s ease;

    overflow:hidden;

}

.link-item:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 7px 20px rgba(0,0,0,.13);

}

.link-item:active{

    transform:
        scale(.985);

}


/* =========================================
   THUMBNAIL
========================================= */

.link-thumb{

    width:58px;

    height:58px;

    flex-shrink:0;

    object-fit:cover;

    border-radius:12px;

    background:#eee;

}


/* =========================================
   TEXT AREA
========================================= */

.link-info{

    flex:1;

    min-width:0;

    padding:
        0 12px;

}


.link-title{

    font-size:18px;

    font-weight:650;

    line-height:1.3;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}


.link-subtitle{

    margin-top:4px;

    font-size:15px;

    color:#888;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}


/* =========================================
   ARROW
========================================= */

.link-arrow{

    width:35px;

    height:35px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    background:#f0f0f1;

    color:#555;

    font-size:19px;

    transition:
        transform .18s ease,
        background .18s ease;

}


.link-item:hover .link-arrow{

    transform:
        translateX(3px);

    background:#e6e6e7;

}


/* =========================================
   WHATSAPP ARROW
========================================= */

 .whatsapp .link-arrow{
    position:relative;
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    background:linear-gradient(145deg,#2ee875,#18c95b);
    color:#fff;
    font-size:24px;
    font-weight:700;
    line-height:1;
    border:1px solid rgba(255,255,255,.55);
    box-shadow:
        0 4px 11px rgba(37,211,102,.28),
        inset 0 1px 0 rgba(255,255,255,.35);
    text-shadow:0 1px 1px rgba(0,0,0,.12);
    transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}


 .whatsapp .link-arrow::after{
    content:"";
    position:absolute;
    inset:3px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.18);
    pointer-events:none;
}

/* =========================================
   FOOTER
========================================= */

.footer{

    text-align:center;

    margin-top:23px;

    color:#999;

    font-size:11px;

}


/* =========================================
   MOBILE
========================================= */

@media(max-width:480px){

    .page{

        padding:
            13px 10px 20px;

    }


    .top-message{

        font-size:16px;

        padding-bottom:14px;

    }


    .link-item{

        min-height:68px;

        border-radius:14px;

    }


    .link-thumb{

        width:54px;

        height:54px;

        border-radius:11px;

    }


    .link-title{

        font-size:14px;

    }


    .link-subtitle{

        font-size:11px;

    }


    .link-arrow{

        width:33px;

        height:33px;

    }

}
.top-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
}

.status-dot {
    width: 9px;
    height: 9px;
    background: red;
    border-radius: 50%;
    display: inline-block;
    animation: redPulse 0.8s infinite;
}

@keyframes redPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        transform: scale(0.7);
    }
}

#timer {
    font-weight: 700;
    min-width: 20px;
}

.connected {
    color: #16a34a;
}

.connected .status-dot {
    background: #16a34a;
    animation: none;
}