/* ====================================================
   JK TESTS PWA CSS
   Unique Prefix: jktests_
   ==================================================== */


/* Floating Install Button */

#jktests_pwa_install_btn {

display: none;

position: fixed;

right: 15px;

top: 50%;

transform: translateY(-50%);

z-index: 999999;

background: linear-gradient(135deg,#0066ff,#0099ff);

color: #ffffff;

border: none;

border-radius: 50px;

padding: 14px 18px;

font-size: 15px;

font-weight: 700;

cursor: pointer;

box-shadow: 0 10px 30px rgba(0,102,255,.35);

transition: all .3s ease;

display: flex;

align-items: center;

gap: 8px;

text-decoration: none;

user-select: none;

-webkit-user-select: none;

animation: jktests_pulse 2s infinite;

}

#jktests_pwa_install_btn:hover {

transform: translateY(-50%) scale(1.05);

box-shadow: 0 15px 40px rgba(0,102,255,.45);

}

#jktests_pwa_install_btn:active {

transform: translateY(-50%) scale(.96);

}


/* Bottom Popup */

#jktests_pwa_popup {

position: fixed;

left: 50%;

bottom: 20px;

transform: translateX(-50%);

width: calc(100% - 30px);

max-width: 560px;

z-index: 999998;

border-radius: 22px;

overflow: hidden;

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

backdrop-filter: blur(18px);

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

box-shadow: 0 20px 60px rgba(0,0,0,.18);

animation: jktests_popup_show .5s ease;

}

#jktests_pwa_popup_inner {

padding: 18px;

display: flex;

align-items: center;

gap: 15px;

}

#jktests_pwa_popup_icon {

width: 58px;

height: 58px;

border-radius: 16px;

background: linear-gradient(135deg,#0066ff,#0099ff);

display: flex;

align-items: center;

justify-content: center;

font-size: 28px;

color: #ffffff;

flex-shrink: 0;

}

#jktests_pwa_popup_content {

flex: 1;

min-width: 0;

}

#jktests_pwa_popup_title {

font-size: 18px;

font-weight: 700;

color: #111111;

margin-bottom: 4px;

}

#jktests_pwa_popup_text {

font-size: 14px;

line-height: 1.5;

color: #555555;

}

#jktests_pwa_popup_actions {

display: flex;

align-items: center;

gap: 10px;

margin-top: 12px;

}

#jktests_pwa_install_popup_btn {

border: none;

cursor: pointer;

background: linear-gradient(135deg,#0066ff,#0099ff);

color: #ffffff;

font-weight: 700;

padding: 10px 18px;

border-radius: 40px;

font-size: 14px;

transition: .3s;

}

#jktests_pwa_install_popup_btn:hover {

transform: translateY(-2px);

}

#jktests_pwa_close {

position: absolute;

top: 10px;

right: 12px;

width: 28px;

height: 28px;

border-radius: 50%;

border: none;

cursor: pointer;

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

color: #444444;

font-size: 18px;

line-height: 28px;

text-align: center;

transition: .3s;

}

#jktests_pwa_close:hover {

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

}


/* iOS Install Hint */

#jktests_ios_hint {

margin-top: 10px;

font-size: 13px;

color: #666666;

line-height: 1.5;

}


/* Hidden State */

.jktests_pwa_hidden {

display: none !important;

}


/* Animations */

@keyframes jktests_popup_show {

from {

opacity: 0;

transform: translateX(-50%) translateY(120px);

}

to {

opacity: 1;

transform: translateX(-50%) translateY(0);

}

}

@keyframes jktests_pulse {

0% {

box-shadow: 0 0 0 0 rgba(0,102,255,.5);

}

70% {

box-shadow: 0 0 0 14px rgba(0,102,255,0);

}

100% {

box-shadow: 0 0 0 0 rgba(0,102,255,0);

}

}


/* Mobile */

@media (max-width: 600px) {

#jktests_pwa_install_btn {

right: 10px;

font-size: 13px;

padding: 12px 14px;

}

#jktests_pwa_popup {

bottom: 12px;

width: calc(100% - 16px);

}

#jktests_pwa_popup_inner {

padding: 16px;

}

#jktests_pwa_popup_icon {

width: 50px;

height: 50px;

font-size: 24px;

}

#jktests_pwa_popup_title {

font-size: 16px;

}

#jktests_pwa_popup_text {

font-size: 13px;

}

}