/**
 * Pagina Kluis - Vault Door Styles
 *
 * Professional vault door UI with realistic design
 */

/* Reset and Container */
.pk-vault-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 600px;
    padding: 40px 20px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.pk-vault-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 107, 107, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.pk-vault-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Door Frame */
.pk-door-frame {
    position: relative;
    width: 600px;
    height: 600px;
    background: linear-gradient(145deg, #2d2d3a, #1f1f2a);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Hinges */
.pk-hinge {
    position: absolute;
    left: -15px;
    width: 30px;
    height: 50px;
    background: linear-gradient(90deg, #4a4a5a, #3a3a4a, #4a4a5a);
    border-radius: 5px;
    box-shadow: 
        2px 2px 8px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.pk-hinge::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #666, #444);
    border-radius: 50%;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.pk-hinge-top { top: 40px; }
.pk-hinge-middle { top: 50%; transform: translateY(-50%); }
.pk-hinge-bottom { bottom: 40px; }

/* Main Door Circle */
.pk-door-circle {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #4a4a5a, #2a2a3a);
    border-radius: 50%;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}

/* Metal Texture */
.pk-metal-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-radial-gradient(
            circle at center,
            transparent 0,
            transparent 2px,
            rgba(255, 255, 255, 0.02) 2px,
            rgba(255, 255, 255, 0.02) 4px
        );
    pointer-events: none;
}

/* Vault Title */
.pk-vault-title {
    font-family: 'Arial Black', sans-serif;
    font-size: 24px;
    font-weight: 900;
    color: #8a8a9a;
    text-transform: uppercase;
    letter-spacing: 6px;
    margin-bottom: 15px;
    text-shadow: 
        0 1px 0 rgba(255, 255, 255, 0.1),
        0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* Digital Display Panel */
.pk-display-panel {
    background: linear-gradient(180deg, #1a1a1a, #0a0a0a);
    padding: 15px 25px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 
        inset 0 2px 10px rgba(0, 0, 0, 0.8),
        0 1px 0 rgba(255, 255, 255, 0.05);
}

.pk-display {
    font-family: 'Courier New', monospace;
    font-size: 36px;
    font-weight: bold;
    color: #00ff88;
    text-align: center;
    letter-spacing: 8px;
    text-shadow: 
        0 0 10px rgba(0, 255, 136, 0.5),
        0 0 20px rgba(0, 255, 136, 0.3),
        0 0 40px rgba(0, 255, 136, 0.1);
    min-width: 140px;
}

.pk-display.pk-error {
    color: #ff4444;
    text-shadow: 
        0 0 10px rgba(255, 68, 68, 0.5),
        0 0 20px rgba(255, 68, 68, 0.3);
    animation: pk-shake 0.5s ease-in-out;
}

.pk-display.pk-success {
    color: #00ff88;
    animation: pk-pulse 0.5s ease-in-out;
}

.pk-display-label {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 8px;
}

/* Keypad */
.pk-keypad {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.pk-keypad-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.pk-keypad-row .pk-key {
    flex: 0 0 50px;
}

.pk-key {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(145deg, #3a3a4a, #2a2a3a);
    color: #ccc;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    font-family: 'Arial', sans-serif;
}

.pk-key:hover {
    background: linear-gradient(145deg, #4a4a5a, #3a3a4a);
    color: #fff;
    transform: translateY(-2px);
}

.pk-key:active {
    transform: translateY(1px);
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.pk-key-back {
    background: linear-gradient(145deg, #4a3a3a, #3a2a2a);
    color: #ff8888;
}

.pk-key-back:hover {
    background: linear-gradient(145deg, #5a4a4a, #4a3a3a);
    color: #ff9999;
}

.pk-key-enter {
    background: linear-gradient(145deg, #2a4a3a, #1a3a2a);
    color: #88ff88;
}

.pk-key-enter:hover {
    background: linear-gradient(145deg, #3a5a4a, #2a4a3a);
    color: #99ff99;
}

.pk-backspace-icon,
.pk-enter-icon {
    font-size: 18px;
}

/* Wheel Handle */
.pk-wheel {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(145deg, #5a5a6a, #3a3a4a);
    border-radius: 50%;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.1);
    transition: transform 0.5s ease;
}

.pk-wheel-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
}

.pk-spoke {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 6px;
    background: linear-gradient(90deg, #666, #888, #666);
    border-radius: 3px;
    transform-origin: center center;
    margin-left: -20px;
    margin-top: -3px;
}

.pk-spoke:nth-child(1) { transform: rotate(0deg); }
.pk-spoke:nth-child(2) { transform: rotate(60deg); }
.pk-spoke:nth-child(3) { transform: rotate(120deg); }

/* Lock Bolts */
.pk-bolts {
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.pk-bolt {
    width: 20px;
    height: 15px;
    background: linear-gradient(90deg, #666, #888, #666);
    border-radius: 2px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
}

/* Forget Access Button */
.pk-forget-access {
    margin-top: 30px;
    padding: 12px 24px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
    border-radius: 30px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pk-forget-access:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.9);
}

.pk-forget-access .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Animations */
@keyframes pk-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-10px); }
    40%, 80% { transform: translateX(10px); }
}

@keyframes pk-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes pk-spin {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(-180deg); }
}

@keyframes pk-unlock {
    0% { transform: translateX(0); }
    100% { transform: translateX(30px); }
}

/* Unlock Animation Classes */
.pk-vault-container.pk-unlocking .pk-wheel {
    animation: pk-spin 0.5s ease-out forwards;
}

.pk-vault-container.pk-unlocking .pk-bolt {
    animation: pk-unlock 0.3s ease-out 0.3s forwards;
}

.pk-vault-container.pk-unlocked .pk-vault-door {
    animation: pk-door-open 0.8s ease-out forwards;
}

@keyframes pk-door-open {
    0% { 
        transform: perspective(1000px) rotateY(0deg); 
        opacity: 1;
    }
    100% { 
        transform: perspective(1000px) rotateY(-90deg); 
        opacity: 0;
    }
}

/* Content Unlocked State */
.pk-content-unlocked {
    padding: 0px;
    background: transparent;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Blocked/Error State */
.pk-vault-container.pk-blocked .pk-display {
    color: #ff4444 !important;
    text-shadow: 
        0 0 10px rgba(255, 68, 68, 0.5),
        0 0 20px rgba(255, 68, 68, 0.3),
        0 0 40px rgba(255, 68, 68, 0.2) !important;
}

.pk-vault-container.pk-blocked .pk-door-circle {
    box-shadow: 
        0 10px 40px rgba(255, 0, 0, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

/* Device specific classes (v1.8.2 - small-screen spacing hotfix) */
.pk-vault-container.pk-device-desktop {
    min-height: 600px;
    padding: 40px 20px;
}

.pk-vault-container.pk-device-desktop .pk-door-frame {
    width: 600px;
    height: 600px;
}

.pk-vault-container.pk-device-tablet {
    min-height: 520px;
    padding: 28px 16px;
}

.pk-vault-container.pk-device-tablet .pk-door-frame {
    width: min(520px, 92vw);
    height: min(520px, 92vw);
    padding: 18px;
}

.pk-vault-container.pk-device-tablet .pk-door-circle {
    border-radius: 24%;
}

.pk-vault-container.pk-device-tablet .pk-vault-title {
    font-size: 22px;
    letter-spacing: 5px;
}

.pk-vault-container.pk-device-tablet .pk-keypad {
    gap: 10px;
    max-width: 240px;
}

.pk-vault-container.pk-device-tablet .pk-keypad-row {
    gap: 10px;
}

.pk-vault-container.pk-device-tablet .pk-key,
.pk-vault-container.pk-device-tablet .pk-keypad-row .pk-key {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
    font-size: 24px;
}

.pk-vault-container.pk-device-tablet .pk-wheel {
    width: 56px;
    height: 56px;
    right: 14px;
}

.pk-mobile-pin-interface {
    display: none;
}

.pk-vault-container.pk-device-mobile {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    box-sizing: border-box;
    padding: max(20px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    background: radial-gradient(circle at 18% 92%, rgba(83, 130, 225, 0.18) 0%, rgba(83, 130, 225, 0) 50%),
        linear-gradient(180deg, #0a0a0d 0%, #111218 42%, #171a24 100%);
}

.pk-vault-container.pk-device-mobile .pk-vault-wrapper {
    width: 100%;
    height: 100%;
    max-width: 420px;
    margin: 0 auto;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(20px, 3.8vh, 34px);
    align-items: stretch;
}

.pk-vault-container.pk-device-mobile .pk-vault-door--desktop {
    display: none;
}

.pk-vault-container.pk-device-mobile .pk-mobile-pin-interface {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: start;
    justify-items: center;
    gap: clamp(14px, 2.8vh, 24px);
    width: 100%;
    min-height: 100%;
    padding-top: clamp(12vh, 14vh, 18vh);
    transition: opacity 0.34s ease, transform 0.34s ease;
}

.pk-vault-container.pk-device-mobile .pk-mobile-header {
    text-align: center;
}

.pk-vault-container.pk-device-mobile .pk-mobile-title {
    margin: 0 0 6px;
    font-size: clamp(14px, 4vw, 16px);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.62);
    text-transform: none;
}

.pk-vault-container.pk-device-mobile .pk-mobile-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 4.2vw, 18px);
    min-height: 18px;
    margin-bottom: clamp(30px, 5.4vh, 52px);
}

.pk-vault-container.pk-device-mobile .pk-mobile-display-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pk-vault-container.pk-device-mobile .pk-mobile-dots .pk-dot {
    width: clamp(12px, 3.4vw, 14px);
    height: clamp(12px, 3.4vw, 14px);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.6);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    transform: scale(0.98);
}

.pk-vault-container.pk-device-mobile .pk-mobile-dots .pk-dot.is-filled {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.9);
    transform: scale(1);
}

.pk-vault-container.pk-device-mobile .pk-mobile-dots.pk-dot-overflow .pk-dot:last-child {
    border-color: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}

.pk-vault-container.pk-device-mobile .pk-mobile-keypad {
    width: 100%;
    max-width: min(86vw, 330px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 4vh, 26px);
}

.pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-keypad-row {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 6vw, 26px);
}

.pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-key,
.pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-keypad-row .pk-key {
    width: clamp(74px, 21vw, 80px);
    height: clamp(74px, 21vw, 80px);
    min-width: clamp(74px, 21vw, 80px);
    min-height: clamp(74px, 21vw, 80px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.95);
    font-size: clamp(30px, 8.2vw, 32px);
    font-weight: 300;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    position: relative;
    overflow: hidden;
    transition: transform 0.14s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-key::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 66%);
    opacity: 0;
    transform: scale(0.72);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-key:hover,
.pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-key.pk-touch-active,
.pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-key.pk-pressed {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.28);
}

.pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-key.pk-pressed::after,
.pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-key.pk-touch-active::after {
    opacity: 1;
    transform: scale(1);
}

.pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-key:active {
    transform: scale(0.95);
}

.pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-key-spacer {
    width: clamp(74px, 21vw, 80px);
    height: clamp(74px, 21vw, 80px);
    flex: 0 0 clamp(74px, 21vw, 80px);
    pointer-events: none;
}

.pk-vault-container.pk-device-mobile .pk-forget-access {
    justify-self: center;
    align-self: end;
    margin: 0;
    padding: 8px 0;
    min-height: 0;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: clamp(14px, 4.2vw, 17px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
    gap: 0;
    transition: color 0.2s ease, transform 0.15s ease;
}

.pk-vault-container.pk-device-mobile .pk-forget-access .dashicons {
    display: none;
}

.pk-vault-container.pk-device-mobile .pk-forget-access:hover,
.pk-vault-container.pk-device-mobile .pk-forget-access.pk-touch-active {
    background: transparent;
    border-color: transparent;
    color: rgba(255, 255, 255, 0.72);
    transform: scale(0.99);
}

.pk-vault-container.pk-device-mobile.pk-unlocking .pk-mobile-pin-interface,
.pk-vault-container.pk-device-mobile.pk-unlocking .pk-forget-access {
    opacity: 0;
    transform: translateY(10px);
}

.pk-vault-container.pk-device-mobile.pk-pin-error .pk-mobile-pin-interface {
    animation: pk-mobile-error-shake 0.34s ease;
}

@keyframes pk-mobile-error-shake {
    0%,
    100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

/* Fullscreen overlay tuning for mobile */
.pk-vault-overlay.pk-device-mobile {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: linear-gradient(180deg, #07080d 0%, #0f1421 58%, #141f32 100%);
}

.pk-vault-overlay.pk-device-mobile::before {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 100%, rgba(93, 140, 230, 0.16) 0%, rgba(93, 140, 230, 0) 56%);
}

.pk-vault-overlay.pk-device-mobile .pk-vault-container {
    max-width: none;
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    margin: 0;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
}

body.pk-vault-mobile-active {
    overflow: hidden !important;
    touch-action: manipulation;
}

@media (max-width: 767px) and (orientation: landscape) {
    .pk-vault-container.pk-device-mobile {
        padding-top: max(10px, env(safe-area-inset-top));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .pk-vault-container.pk-device-mobile .pk-vault-wrapper {
        max-width: 650px;
        gap: 10px;
    }

    .pk-vault-container.pk-device-mobile .pk-mobile-pin-interface {
        padding-top: clamp(18px, 8vh, 42px);
        gap: 10px;
    }

    .pk-vault-container.pk-device-mobile .pk-mobile-dots {
        margin-bottom: clamp(18px, 5vh, 36px);
    }

    .pk-vault-container.pk-device-mobile .pk-mobile-keypad {
        max-width: 340px;
        gap: 14px;
    }

    .pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-keypad-row {
        gap: 16px;
    }

    .pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-key,
    .pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-keypad-row .pk-key,
    .pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-key-spacer {
        width: clamp(58px, 10vw, 66px);
        height: clamp(58px, 10vw, 66px);
        min-width: clamp(58px, 10vw, 66px);
        min-height: clamp(58px, 10vw, 66px);
        flex-basis: clamp(58px, 10vw, 66px);
        font-size: clamp(24px, 4.2vw, 28px);
    }

    .pk-vault-container.pk-device-mobile .pk-forget-access {
        font-size: clamp(13px, 2.2vw, 15px);
    }
}

/* Extra small phones (320px / iPhone SE 1st gen) */
@media (max-width: 360px) and (max-height: 667px) {
    .pk-vault-container.pk-device-mobile .pk-vault-wrapper {
        gap: clamp(10px, 2.2vh, 18px);
    }

    .pk-vault-container.pk-device-mobile .pk-mobile-pin-interface {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: clamp(10vh, 10.8vh, 12vh);
        gap: 10px;
    }

    .pk-vault-container.pk-device-mobile .pk-mobile-title {
        margin-bottom: 4px;
    }

    .pk-vault-container.pk-device-mobile .pk-mobile-dots {
        margin-bottom: clamp(60px, 11vh, 78px);
    }

    .pk-vault-container.pk-device-mobile .pk-mobile-keypad {
        max-width: min(88vw, 300px);
        gap: 12px;
    }

    .pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-keypad-row {
        gap: 14px;
    }

    .pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-key,
    .pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-keypad-row .pk-key,
    .pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-key-spacer {
        width: 65px;
        height: 65px;
        min-width: 65px;
        min-height: 65px;
        flex-basis: 65px;
        font-size: 30px;
    }
}

/* Small phones (361-375px / iPhone SE 2-3) */
@media (min-width: 361px) and (max-width: 375px) {
    .pk-vault-container.pk-device-mobile .pk-mobile-pin-interface {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: clamp(11vh, 12vh, 14vh);
    }

    .pk-vault-container.pk-device-mobile .pk-mobile-dots {
        margin-bottom: clamp(54px, 8.6vh, 66px);
    }

    .pk-vault-container.pk-device-mobile .pk-mobile-keypad {
        gap: 14px;
    }

    .pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-keypad-row {
        gap: clamp(16px, 5vw, 20px);
    }
}

/* 320px class devices in taller aspect ratios */
@media (max-width: 360px) and (min-height: 668px) {
    .pk-vault-container.pk-device-mobile .pk-mobile-pin-interface {
        padding-top: clamp(10vh, 11.5vh, 13vh);
    }

    .pk-vault-container.pk-device-mobile .pk-mobile-dots {
        margin-bottom: clamp(56px, 9vh, 70px);
    }

    .pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-key,
    .pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-keypad-row .pk-key,
    .pk-vault-container.pk-device-mobile .pk-mobile-keypad .pk-key-spacer {
        width: clamp(65px, 19vw, 70px);
        height: clamp(65px, 19vw, 70px);
        min-width: clamp(65px, 19vw, 70px);
        min-height: clamp(65px, 19vw, 70px);
        flex-basis: clamp(65px, 19vw, 70px);
        font-size: clamp(28px, 8vw, 30px);
    }
}

/* Responsive fallback (for older markup without device class) */
@media (max-width: 1024px) {
    .pk-vault-container:not(.pk-device-desktop):not(.pk-device-tablet):not(.pk-device-mobile) .pk-door-circle {
        border-radius: 18%;
    }
}

@media (max-width: 767px) {
    .pk-vault-container:not(.pk-device-desktop):not(.pk-device-tablet):not(.pk-device-mobile) {
        min-height: 420px;
        padding: 14px 8px;
    }

    .pk-vault-container:not(.pk-device-desktop):not(.pk-device-tablet):not(.pk-device-mobile) .pk-door-frame {
        width: min(360px, 96vw);
        height: min(360px, 96vw);
        padding: 12px;
    }
}


/* ========================================
 * FULL-PAGE OVERLAY - Security Fix v1.3.0
 * Verbergt ALLE content totdat toegang is verleend
 * ======================================== */

/* Full-page overlay om content te verbergen */
.pk-vault-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        #1e3c72 0%, 
        #2a5298 100%
    );
    /* Statische gradient - animatie verwijderd in v1.5.0 */
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Extra achtergrond effecten voor overlay */
.pk-vault-overlay::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 107, 107, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* Kluis container binnen overlay - past container styling aan */
.pk-vault-overlay .pk-vault-container {
    position: relative;
    z-index: 1000000;
    background: transparent !important;
    min-height: auto;
    padding: 20px;
    border-radius: 0;
}

/* Remove the container's own ::before gradient when in overlay */
.pk-vault-overlay .pk-vault-container::before {
    display: none !important;
}

/* Verberg de overlay na succesvolle toegang */
.pk-vault-overlay.pk-access-granted {
    animation: pkOverlayFadeOut 0.5s ease-out forwards;
}

@keyframes pkOverlayFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* Responsive overlay */
.pk-vault-overlay {
    padding: clamp(6px, 1.8vw, 14px);
    box-sizing: border-box;
}

.pk-vault-overlay .pk-vault-container {
    width: 100%;
    max-width: min(98vw, 760px);
    margin: 0 auto;
    box-sizing: border-box;
    overflow: visible;
}

.pk-vault-overlay.pk-device-tablet .pk-vault-container {
    max-width: min(96vw, 620px);
}

.pk-vault-overlay.pk-device-mobile .pk-vault-container {
    max-width: none;
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
}

@media (max-width: 768px) {
    .pk-vault-overlay:not(.pk-device-mobile) {
        padding: 6px;
    }

    .pk-vault-overlay:not(.pk-device-mobile) .pk-vault-container {
        max-width: 98vw;
    }
}