/* =====================================================
   KITTYY VPN — FREE TRIAL
   ===================================================== */

.trial-launch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    width: fit-content;

    margin-top: 17px;
    padding: 12px 18px;

    border: 1px solid rgba(188, 133, 255, .32);
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(112, 58, 221, .16),
            rgba(71, 31, 143, .12)
        );

    color: #d8c4f5;

    font: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    backdrop-filter: blur(12px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05);

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.trial-launch:hover {
    transform: translateY(-2px);

    border-color:
        rgba(202, 157, 255, .55);

    background:
        linear-gradient(
            135deg,
            rgba(124, 67, 236, .25),
            rgba(83, 38, 162, .19)
        );
}


.kittyy-trial-overlay {
    position: fixed;

    inset: 0;

    z-index: 99999;

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

    padding: 22px;

    background:
        rgba(5, 3, 11, .76);

    backdrop-filter: blur(12px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .2s ease,
        visibility .2s ease;
}

.kittyy-trial-overlay.is-open {
    opacity: 1;
    visibility: visible;
}


.kittyy-trial-modal {
    position: relative;

    width:
        min(100%, 520px);

    padding:
        34px;

    border:
        1px solid
        rgba(171, 110, 255, .30);

    border-radius:
        25px;

    background:
        linear-gradient(
            145deg,
            rgba(30, 18, 51, .98),
            rgba(13, 8, 25, .98)
        );

    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, .55),
        inset 0 1px 0
        rgba(255,255,255,.05);

    color: white;

    text-align: center;
}


.kittyy-trial-close {
    position: absolute;

    top: 14px;
    right: 15px;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 50%;

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

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

    font-size: 22px;

    cursor: pointer;
}


.kittyy-trial-icon {
    width: 66px;
    height: 66px;

    display: grid;
    place-items: center;

    margin:
        4px auto 18px;

    border:
        1px solid
        rgba(190, 131, 255, .35);

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            rgba(147, 78, 244, .25),
            rgba(89, 44, 180, .15)
        );

    font-size: 30px;
}


.kittyy-trial-modal h2 {
    margin: 0 0 12px;

    font-size:
        clamp(28px, 5vw, 36px);

    letter-spacing:
        -.04em;
}


.kittyy-trial-text {
    margin:
        0 auto 22px;

    max-width:
        410px;

    color:
        #bdb2c9;

    font-size:
        15px;

    line-height:
        1.6;
}


.kittyy-trial-loader {
    width: 38px;
    height: 38px;

    margin:
        28px auto;

    border:
        3px solid
        rgba(255,255,255,.10);

    border-top-color:
        #a966ff;

    border-radius:
        50%;

    animation:
        kittyySpin .8s linear infinite;
}


@keyframes kittyySpin {
    to {
        transform:
            rotate(360deg);
    }
}


.kittyy-trial-key-label {
    margin-bottom:
        8px;

    color:
        #968ba4;

    font-size:
        12px;

    text-transform:
        uppercase;

    letter-spacing:
        .14em;
}


.kittyy-trial-key {
    display: block;

    margin-bottom:
        16px;

    padding:
        18px 16px;

    border:
        1px solid
        rgba(183, 120, 255, .40);

    border-radius:
        16px;

    background:
        rgba(122, 62, 220, .13);

    color:
        #d9b7ff;

    font-size:
        clamp(22px, 6vw, 30px);

    font-weight:
        800;

    letter-spacing:
        .07em;

    text-decoration:
        none;

    word-break:
        break-word;

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


.kittyy-trial-key:hover {
    transform:
        translateY(-2px);

    background:
        rgba(133, 68, 235, .20);
}


.kittyy-trial-expiry {
    margin-bottom:
        22px;

    color:
        #aca0b9;

    font-size:
        14px;
}


.kittyy-trial-open {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    padding:
        16px 20px;

    border: 0;
    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #9957f5,
            #6f36d4
        );

    color:
        white;

    font-size:
        16px;

    font-weight:
        700;

    text-decoration:
        none;

    box-shadow:
        0 13px 35px
        rgba(112, 53, 215, .30);
}


.kittyy-trial-copy {
    margin-top:
        12px;

    border: 0;

    background:
        transparent;

    color:
        #b89bd8;

    font: inherit;
    font-size:
        13px;

    cursor: pointer;
}


.kittyy-trial-error {
    margin:
        22px 0;

    padding:
        15px;

    border:
        1px solid
        rgba(255, 128, 162, .23);

    border-radius:
        14px;

    background:
        rgba(158, 43, 75, .10);

    color:
        #efbdca;

    font-size:
        14px;

    line-height:
        1.5;
}


@media(max-width:600px) {

    .kittyy-trial-modal {
        padding:
            30px 20px 25px;
    }

    .trial-launch {
        margin-left:
            auto;
        margin-right:
            auto;
    }

}