.floating-preview{
    position:fixed;

    left:50%;
    bottom:18px;

    transform:translateX(-50%);

    z-index:99999;

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px;

    border-radius:999px;

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.9);

    box-shadow:
    0 8px 30px rgba(0,0,0,.08);
}

/* TITLE */
.preview-title{
    padding:0 10px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    color:#111;

    white-space:nowrap;
}

/* BACK BUTTON */
.preview-back{
    text-decoration:none;

    background:#6f9f7a;

     color:#fff;

    height:38px;
    min-width: 60px;

    padding:0 14px;

    border-radius:999px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    font-weight:600;

    white-space:nowrap;

    transition:.2s;
}

.preview-back:hover{
    transform:translateY(-1px);

   background:#5e8f6b;
}

/* STYLE SWITCHER WRAP */
.preview-switch{
    display:flex;

    align-items:center;

    gap:6px;
}

/* STYLE BUTTONS (FIXED TEXT VERSION) */
.style-btn{
    height:38px;

    padding:0 14px;

    border-radius:999px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#666;

    font-size:12px;

    font-weight:700;

    white-space:nowrap;

    transition:.2s;
}

.style-btn:hover{
    background:rgba(0,0,0,.06);

    color:#111;
}

/* ACTIVE STYLE */
.style-btn.active{
    background:white;

    color:#111;

    box-shadow:
    0 2px 10px rgba(0,0,0,.08);
}


/* MOBILE */
@media(max-width:768px){

    .floating-preview{
        bottom:10px;

        gap:6px;

        padding:7px;

        max-width:calc(100% - 20px);
    }

    .preview-title{
        font-size:10px;

        padding:0 6px;
    }

    .preview-back{
        height:30px;

        padding:0 10px;

        font-size:11px;
    }

    .preview-switch{
        gap:4px;
    }

    .style-btn{
        height:30px;

        padding:0 10px;

        font-size:10px;
    }
    
}






.mobile-toggle{
    text-decoration:none;

    background:#111;

    color:white;

    height:38px;

    padding:0 16px;

    border-radius:999px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    font-weight:600;

    transition:.2s;

    white-space:nowrap;
}

.mobile-toggle:hover{
    transform:translateY(-1px);

    background:#000;
}

/* na mobilu schovej */
@media(max-width:768px){
    .mobile-toggle{
        display:none;
    }
}



#mobileOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.25);
    z-index:999999;

    display:none;

    align-items:center;
    justify-content:center;
}

/* ===== PREVIEW BOX ===== */
.mobile-frame-box{
    position:relative;

    width:375px;
    height:90vh;
}

/* ===== IFRAME ===== */
#mobileFrame{
    width:100%;
    height:100%;

    border:0;
    border-radius:16px;

    background:#fff;

    box-shadow:0 8px 20px rgba(0,0,0,.2);
}

/* ===== CLOSE BUTTON ===== */
.close-preview{
    position:absolute;

    /* anchor na střed overlaye */
    top:50%;
    left:50%;

    /* posun MIMO iframe box */
    transform:translate(
        calc(375px/2 + 12px),
        calc(-90vh/2 - 12px)
    );

    width:44px;
    height:44px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:22px;
    font-weight:900;

    background:rgb(221, 221, 221);
    color:#000000;

    cursor:pointer;

    z-index:1000000;

    transition:transform .15s ease, background .15s ease;
}

.close-preview:hover{
    transform:translate(
        calc(375px/2 + 12px),
        calc(-90vh/2 - 12px)
    ) scale(1.1);
    background:rgb(255, 255, 255);
}