/* ═══ OVERLAY ═══ */
#zhex-auth-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.8) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    margin: 0 !important;
    border: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #e8e8ec !important;
    box-sizing: border-box !important;
}
#zhex-auth-overlay *, #zhex-auth-overlay *::before, #zhex-auth-overlay *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    outline: none !important;
}
#zhex-auth-overlay.zap-open {
    display: flex !important;
}
#zhex-auth-overlay.zap-visible {
    opacity: 1 !important;
}
body.zap-body-lock {
    overflow: hidden !important;
}

/* ═══ POPUP ═══ */
#zhex-auth-overlay .zap-popup {
    width: 100% !important;
    max-width: 920px !important;
    min-height: 540px !important;
    display: flex !important;
    background: linear-gradient(135deg, #131313 0%, #1a1f2e 35%, #1e2740 65%, #131313 100%) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    position: relative !important;
    overflow: hidden !important;
    transform: translateY(30px) scale(0.97) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)) !important;
}
#zhex-auth-overlay.zap-visible .zap-popup {
    transform: translateY(0) scale(1) !important;
}
#zhex-auth-overlay .zap-popup::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important; right: -1px !important;
    width: 60px !important; height: 60px !important;
    background: linear-gradient(225deg, rgba(74,158,255,0.12) 0%, transparent 60%) !important;
    z-index: 1 !important; pointer-events: none !important;
    display: block !important;
}
#zhex-auth-overlay .zap-popup::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important; left: -1px !important;
    width: 60px !important; height: 60px !important;
    background: linear-gradient(45deg, rgba(74,158,255,0.12) 0%, transparent 60%) !important;
    z-index: 1 !important; pointer-events: none !important;
    display: block !important;
}

/* ═══ CLOSE ═══ */
#zhex-auth-overlay .zap-close {
    position: absolute !important;
    top: 16px !important; right: 16px !important;
    width: 36px !important; height: 36px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.5) !important;
    cursor: pointer !important; z-index: 10 !important;
    transition: all 0.2s ease !important;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
    font-size: 0 !important; line-height: 1 !important;
}
#zhex-auth-overlay .zap-close:hover {
    background: rgba(214,48,49,0.12) !important;
    border-color: rgba(214,48,49,0.25) !important;
    color: #d63031 !important;
}
#zhex-auth-overlay .zap-close svg {
    width: 16px !important; height: 16px !important;
    fill: none !important; stroke: currentColor !important;
    stroke-width: 2 !important; stroke-linecap: square !important;
}

/* ═══ LEFT PANEL ═══ */
#zhex-auth-overlay .zap-left {
    width: 360px !important; min-width: 360px !important;
    background: linear-gradient(160deg, #0b1017 0%, #101826 40%, #142035 70%, #0b1017 100%) !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    padding: 40px 28px !important;
    position: relative !important; overflow: hidden !important;
    border-right: 1px solid rgba(255,255,255,0.04) !important;
}
#zhex-auth-overlay .zap-left::before {
    content: '' !important;
    position: absolute !important; inset: 0 !important;
    background-image: linear-gradient(rgba(74,158,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(74,158,255,0.025) 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
    pointer-events: none !important; display: block !important;
}
#zhex-auth-overlay .zap-left::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    height: 60% !important;
    background: url('https://www.zhexcheats.com/wp-content/uploads/2026/02/zhex-login-popup.svg') no-repeat bottom center / 100% auto !important;
    opacity: 0.45 !important;
    pointer-events: none !important; display: block !important;
    z-index: 1 !important;
}
#zhex-auth-overlay .zap-left-inner { position: relative !important; z-index: 2 !important; text-align: center !important; }
#zhex-auth-overlay .zap-logo img {
    width: 72px !important; height: 72px !important;
    display: block !important; margin: 0 auto 20px !important;
    object-fit: contain !important;
}
#zhex-auth-overlay .zap-left h2 {
    font-size: 20px !important; font-weight: 700 !important;
    color: #e8e8ec !important; margin: 0 0 10px !important;
    letter-spacing: 1.5px !important; text-transform: uppercase !important;
    background: none !important; border: none !important;
}
#zhex-auth-overlay .zap-left p {
    font-size: 12px !important; color: rgba(255,255,255,0.95) !important;
    font-weight: 700 !important;
    line-height: 1.7 !important; margin: 0 0 24px !important;
}
#zhex-auth-overlay .zap-dots {
    display: flex !important; gap: 8px !important;
    justify-content: center !important; margin: 0 0 28px !important;
    list-style: none !important;
}
#zhex-auth-overlay .zap-dots span {
    width: 6px !important; height: 6px !important; background: #4a9eff !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
    display: block !important;
}
#zhex-auth-overlay .zap-dots span:nth-child(1),
#zhex-auth-overlay .zap-dots span:nth-child(5) { opacity: 0.3 !important; }
#zhex-auth-overlay .zap-dots span:nth-child(2),
#zhex-auth-overlay .zap-dots span:nth-child(4) { opacity: 0.6 !important; }
#zhex-auth-overlay .zap-dots span:nth-child(3) { opacity: 1 !important; }
#zhex-auth-overlay .zap-slogan {
    font-size: 13px !important; font-weight: 700 !important;
    color: #fff !important; letter-spacing: 2.5px !important;
    text-transform: uppercase !important; text-align: center !important;
    margin: 0 !important; padding: 0 !important; line-height: 1.5 !important;
    display: block !important;
}

/* ═══ LEFT PANEL ART (background, no overflow issues) ═══ */

/* ═══ RIGHT PANEL ═══ */
#zhex-auth-overlay .zap-right {
    flex: 1 !important; display: flex !important; flex-direction: column !important;
    padding: 44px 44px 32px !important;
    position: relative !important; overflow-y: auto !important;
    background: none !important; border: none !important;
}

/* TABS */
#zhex-auth-overlay .zap-tabs {
    display: flex !important; gap: 0 !important; margin: 0 0 28px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    list-style: none !important; background: none !important;
}
#zhex-auth-overlay .zap-tabs button {
    padding: 10px 22px !important; font-size: 12px !important; font-weight: 600 !important;
    color: rgba(255,255,255,0.35) !important; background: transparent !important;
    border: none !important; cursor: pointer !important; position: relative !important;
    transition: color 0.2s ease !important;
    letter-spacing: 0.8px !important; text-transform: uppercase !important;
    font-family: inherit !important; display: inline-block !important;
}
#zhex-auth-overlay .zap-tabs button:hover { color: rgba(255,255,255,0.55) !important; }
#zhex-auth-overlay .zap-tabs button.zap-active { color: #4a9eff !important; }
#zhex-auth-overlay .zap-tabs button.zap-active::after {
    content: '' !important;
    position: absolute !important; bottom: -1px !important; left: 0 !important; right: 0 !important;
    height: 2px !important; background: #4a9eff !important; display: block !important;
}

/* PANELS */
#zhex-auth-overlay .zap-panel { display: none !important; flex-direction: column !important; flex: 1 !important; }
#zhex-auth-overlay .zap-panel.zap-active { display: flex !important; }
#zhex-auth-overlay .zap-panel h3 {
    font-size: 22px !important; font-weight: 700 !important; color: #e8e8ec !important;
    margin: 0 0 4px !important; background: none !important; border: none !important;
    letter-spacing: 0 !important; text-transform: none !important;
}
#zhex-auth-overlay .zap-panel .zap-sub {
    font-size: 12px !important; color: rgba(255,255,255,0.35) !important; margin: 0 0 24px !important;
}

/* ERROR / SUCCESS */
#zhex-auth-overlay .zap-msg {
    display: none !important; padding: 10px 14px !important; font-size: 12px !important;
    margin: 0 0 16px !important; line-height: 1.5 !important;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
}
#zhex-auth-overlay .zap-msg.zap-error {
    display: block !important;
    background: rgba(214,48,49,0.1) !important; border: 1px solid rgba(214,48,49,0.2) !important; color: #d63031 !important;
}
#zhex-auth-overlay .zap-msg.zap-success {
    display: block !important;
    background: rgba(0,184,148,0.1) !important; border: 1px solid rgba(0,184,148,0.2) !important; color: #00b894 !important;
}

/* FIELDS */
#zhex-auth-overlay .zap-field { margin: 0 0 16px !important; position: relative !important; }
#zhex-auth-overlay .zap-field label {
    display: block !important; font-size: 10px !important; font-weight: 600 !important;
    color: rgba(255,255,255,0.5) !important; text-transform: uppercase !important;
    letter-spacing: 0.8px !important; margin: 0 0 6px !important; cursor: default !important;
    background: none !important; border: none !important;
}
#zhex-auth-overlay .zap-field-wrap {
    position: relative !important; display: flex !important; align-items: center !important;
}
#zhex-auth-overlay .zap-field-wrap .zap-icon {
    position: absolute !important; left: 14px !important; width: 16px !important; height: 16px !important;
    color: rgba(255,255,255,0.25) !important; pointer-events: none !important; z-index: 1 !important;
    display: flex !important; align-items: center !important;
}
#zhex-auth-overlay .zap-field-wrap .zap-icon svg {
    width: 100% !important; height: 100% !important; fill: none !important; stroke: currentColor !important;
    stroke-width: 1.5 !important; stroke-linecap: square !important; stroke-linejoin: miter !important;
}
#zhex-auth-overlay .zap-field input[type="text"],
#zhex-auth-overlay .zap-field input[type="email"],
#zhex-auth-overlay .zap-field input[type="password"] {
    width: 100% !important; height: 44px !important; padding: 0 14px 0 42px !important;
    background: rgba(0,0,0,0.35) !important; border: 1px solid rgba(255,255,255,0.06) !important;
    color: #e8e8ec !important; font-size: 13px !important; font-family: inherit !important;
    outline: none !important; transition: all 0.2s ease !important;
    box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important;
}
#zhex-auth-overlay .zap-field input:focus {
    border-color: rgba(74,158,255,0.4) !important;
    background: rgba(0,0,0,0.45) !important;
    box-shadow: 0 0 0 3px rgba(74,158,255,0.06) !important;
}
#zhex-auth-overlay .zap-field input::placeholder { color: rgba(255,255,255,0.2) !important; font-size: 12px !important; }

/* PW Toggle */
#zhex-auth-overlay .zap-pw-toggle {
    position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important;
    background: none !important; border: none !important;
    color: rgba(255,255,255,0.3) !important; cursor: pointer !important; padding: 4px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: color 0.2s ease !important;
}
#zhex-auth-overlay .zap-pw-toggle:hover { color: rgba(255,255,255,0.55) !important; }
#zhex-auth-overlay .zap-pw-toggle svg {
    width: 16px !important; height: 16px !important; fill: none !important;
    stroke: currentColor !important; stroke-width: 1.5 !important;
}

/* REMEMBER + FORGOT */
#zhex-auth-overlay .zap-row {
    display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 0 20px !important;
}
#zhex-auth-overlay .zap-check {
    display: flex !important; align-items: center !important; gap: 8px !important;
    cursor: pointer !important; font-size: 12px !important; color: rgba(255,255,255,0.5) !important; user-select: none !important;
}
#zhex-auth-overlay .zap-check input[type="checkbox"] {
    -webkit-appearance: none !important; appearance: none !important;
    width: 16px !important; height: 16px !important; margin: 0 !important;
    background: rgba(0,0,0,0.3) !important; border: 1px solid rgba(255,255,255,0.08) !important;
    cursor: pointer !important; position: relative !important; flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}
#zhex-auth-overlay .zap-check input[type="checkbox"]:checked {
    background: #4a9eff !important; border-color: #4a9eff !important;
}
#zhex-auth-overlay .zap-check input[type="checkbox"]:checked::after {
    content: '' !important; position: absolute !important; left: 5px !important; top: 2px !important;
    width: 4px !important; height: 8px !important;
    border: solid #fff !important; border-width: 0 2px 2px 0 !important; transform: rotate(45deg) !important;
    display: block !important;
}
#zhex-auth-overlay .zap-forgot-link {
    font-size: 12px !important; color: #4a9eff !important; cursor: pointer !important;
    transition: color 0.2s ease !important; background: none !important; border: none !important;
}
#zhex-auth-overlay .zap-forgot-link:hover { color: #6bb3ff !important; }

/* TURNSTILE */
#zhex-auth-overlay .zap-ts { margin: 0 0 18px !important; min-height: 65px !important; }
#zhex-auth-overlay .zap-ts iframe { max-width: 100% !important; }

/* SUBMIT */
#zhex-auth-overlay .zap-submit {
    width: 100% !important; height: 46px !important; background: #4a9eff !important;
    border: none !important; color: #fff !important;
    font-size: 12px !important; font-weight: 700 !important; font-family: inherit !important;
    cursor: pointer !important; text-transform: uppercase !important; letter-spacing: 1.2px !important;
    transition: all 0.25s ease !important; position: relative !important; overflow: hidden !important;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
    display: block !important; text-align: center !important; line-height: 46px !important; padding: 0 !important;
}
#zhex-auth-overlay .zap-submit:hover { background: #3a8eef !important; transform: translateY(-1px) !important; }
#zhex-auth-overlay .zap-submit:active { transform: translateY(0) !important; }
#zhex-auth-overlay .zap-submit.zap-loading { pointer-events: none !important; opacity: 0.7 !important; }

/* SWITCH */
#zhex-auth-overlay .zap-switch {
    text-align: center !important; margin: 18px 0 0 !important; font-size: 12px !important; color: rgba(255,255,255,0.35) !important;
}
#zhex-auth-overlay .zap-switch a {
    color: #4a9eff !important; font-weight: 600 !important; cursor: pointer !important;
    transition: color 0.2s ease !important; background: none !important; border: none !important;
}
#zhex-auth-overlay .zap-switch a:hover { color: #6bb3ff !important; }

/* FOOTER */
#zhex-auth-overlay .zap-footer {
    margin: auto 0 0 !important; padding: 16px 0 0 !important; text-align: center !important;
    font-size: 9px !important; color: rgba(255,255,255,0.18) !important;
    letter-spacing: 1px !important; text-transform: uppercase !important;
}

/* PW STRENGTH */
#zhex-auth-overlay .zap-str { display: flex !important; gap: 4px !important; margin: 8px 0 0 !important; }
#zhex-auth-overlay .zap-str-bar {
    flex: 1 !important; height: 3px !important; background: rgba(255,255,255,0.05) !important;
    transition: background 0.3s ease !important; display: block !important;
}
#zhex-auth-overlay .zap-str-bar.zap-weak    { background: #d63031 !important; }
#zhex-auth-overlay .zap-str-bar.zap-medium  { background: #f39c12 !important; }
#zhex-auth-overlay .zap-str-bar.zap-strong  { background: #00b894 !important; }
#zhex-auth-overlay .zap-str-text {
    font-size: 10px !important; color: rgba(255,255,255,0.3) !important; margin: 4px 0 0 !important; text-align: right !important;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 860px) {
    #zhex-auth-overlay {
        /* PERF FIX: backdrop-filter: blur kills GPU on mobile, replace with solid overlay */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(0,0,0,0.92) !important;
    }
    #zhex-auth-overlay .zap-popup { max-width: 460px !important; min-height: auto !important; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)) !important; }
    #zhex-auth-overlay .zap-left { display: none !important; }
    #zhex-auth-overlay .zap-right { padding: 36px 32px 24px !important; }
}
@media (max-width: 480px) {
    #zhex-auth-overlay { padding: 12px !important; align-items: flex-start !important; padding-top: 32px !important; }
    #zhex-auth-overlay .zap-popup { max-width: 100% !important; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important; }
    #zhex-auth-overlay .zap-right { padding: 28px 20px 18px !important; }
    #zhex-auth-overlay .zap-close { top: 10px !important; right: 10px !important; width: 32px !important; height: 32px !important; }
    #zhex-auth-overlay .zap-tabs button { padding: 8px 14px !important; font-size: 11px !important; }
    #zhex-auth-overlay .zap-panel h3 { font-size: 18px !important; }
    #zhex-auth-overlay .zap-row { flex-direction: column !important; gap: 10px !important; align-items: flex-start !important; }
}
@media (max-width: 360px) {
    #zhex-auth-overlay .zap-right { padding: 24px 14px 14px !important; }
    #zhex-auth-overlay .zap-tabs button { padding: 8px 10px !important; font-size: 10px !important; }
}