/**
 * ==========================================================
 * RAGOTOOLS
 * Freemium Plan Styles
 * ==========================================================
 *
 * LOCKED ENGINE
 *
 * Responsibilities
 * ----------------------------------------------------------
 * • Freemium Popup UI
 * • Overlay
 * • Glass Effect
 * • Glow Effect
 * • Responsive Layout
 *
 * Future Rule
 * ----------------------------------------------------------
 * Never place:
 * • Tool Styles
 * • Theme Styles
 * • Global Styles
 * • Admin Styles
 *
 * Only Freemium UI belongs here.
 * ==========================================================
*/


/* ==========================================================
   Overlay
========================================================== */

.rt-freemium-overlay{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(10px);

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

    z-index:999999;

}


/* ==========================================================
   Popup
========================================================== */

.rt-freemium-popup{

    width:100%;

    max-width:520px;

    padding:45px;

    border-radius:24px;

    text-align:center;

    color:#ffffff;

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

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

    backdrop-filter:blur(25px);

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

    box-shadow:

        0 25px 60px rgba(0,0,0,.45),

        0 0 50px rgba(0,180,255,.18);

    animation:rtFreemiumPopup .35s ease;

}


/* ==========================================================
   Icon
========================================================== */

.rt-freemium-icon{

    width:78px;

    height:78px;

    margin:0 auto 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:34px;

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

    box-shadow:

        0 0 25px rgba(0,180,255,.35);

}


/* ==========================================================
   Title
========================================================== */

.rt-freemium-title{

    margin:0;

    font-size:30px;

    font-weight:700;

    line-height:1.3;

}


/* ==========================================================
   Description
========================================================== */

.rt-freemium-description{

    margin:20px 0 35px;

    color:rgba(255,255,255,.82);

    line-height:1.8;

    font-size:16px;

}


/* ==========================================================
   Buttons
========================================================== */

.rt-freemium-actions{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    justify-content:center;

}


/* Primary */

.rt-freemium-primary{

    cursor:pointer;

    border:0;

    border-radius:14px;

    padding:14px 28px;

    font-size:16px;

    font-weight:600;

    color:#ffffff;

    background:linear-gradient(135deg,#2b7fff,#00d4ff);

    box-shadow:

        0 10px 30px rgba(0,180,255,.35);

    transition:.25s;

}

.rt-freemium-primary:hover{

    transform:translateY(-2px);

    box-shadow:

        0 18px 40px rgba(0,180,255,.45);

}


/* Secondary */

.rt-freemium-secondary{

    cursor:pointer;

    border-radius:14px;

    padding:14px 28px;

    font-size:16px;

    font-weight:600;

    color:#ffffff;

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

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

    transition:.25s;

}

.rt-freemium-secondary:hover{

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

}


/* ==========================================================
   Animation
========================================================== */

@keyframes rtFreemiumPopup{

    from{

        opacity:0;

        transform:translateY(20px) scale(.96);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}


/* ==========================================================
   Responsive
========================================================== */

@media(max-width:640px){

    .rt-freemium-popup{

        padding:30px 24px;

    }

    .rt-freemium-title{

        font-size:24px;

    }

    .rt-freemium-actions{

        flex-direction:column;

    }

    .rt-freemium-primary,

    .rt-freemium-secondary{

        width:100%;

    }

}