/* ============================================================
   KBI FRONTEND STYLES — KissBooK Inscription (v3.1)
   Extracted from book-frontend.php inline <style> block
   ============================================================ */

/* File Upload Button */
.kbg-book input[type="file"]::-webkit-file-upload-button {
    background: #e2e8f0;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

/* Field Labels */
.kbi-l {
    display: block;
    font-weight: 600;
    font-size: 0.68em;
    margin-bottom: 2px;
    color: #475569;
}

/* Field Inputs */
.kbi-f {
    width: 100%;
    padding: 6px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: 'Coming Soon';
    font-size: 0.85em;
    background: #f8fafc;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.kbi-f:focus {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}
select.kbi-f { background: #fff; }
textarea.kbi-f { resize: vertical; }

/* Submit Button Click Effect */
#kbi-submit-btn:not([disabled]):active {
    transform: scale(0.96) translateY(2px);
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.5);
    filter: brightness(0.9);
}

/* Turn Page Hint */
.kbi-turn-hint {
    position: absolute;
    bottom: 35px;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: 'Coming Soon', cursive;
    font-size: 0.82rem;
    color: #d97706;
    font-weight: 600;
    animation: kbiHintBounce 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 100;
}
@keyframes kbiHintBounce {
    0%, 100% { transform: translateX(0); opacity: 0.6; }
    50% { transform: translateX(5px); opacity: 1; }
}

/* Honeypot — invisible to humans, visible to bots */
.kbi-hp-wrap {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
}

/* TOC Step Lock States */
.kbi-toc-locked { opacity: .4; pointer-events: none; cursor: not-allowed; }
.kbi-toc-locked .kbi-lock { display: inline; }
.kbi-toc-unlocked .kbi-lock { display: none; }

/* Charte Scroll Hint Bounce */
@keyframes kbiBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* ============================================================
   MOBILE RESPONSIVE — KBI (Phase 2 Fix)
   ============================================================ */
@media (max-width: 768px) {
    /* Prevent iOS auto-zoom on focus */
    .kbi-f {
        font-size: max(16px, 0.85em);
        padding: 10px;
        min-height: 44px;
    }
    select.kbi-f {
        font-size: max(16px, 0.85em) !important;
        min-height: 44px;
    }
    .kbi-l {
        font-size: 0.8em;
        margin-bottom: 4px;
    }
    /* Make touch targets big enough (44px min) */
    #kbi-submit-btn {
        min-height: 50px;
        font-size: 1.1em;
    }
    /* Login form inputs */
    #kbi-login-form input[type="text"],
    #kbi-login-form input[type="password"] {
        font-size: 16px;
        min-height: 44px;
    }
    #kbi-login-submit-btn {
        min-height: 48px;
        font-size: 1em;
    }
    /* Charte text bigger on mobile */
    #kbi-charte-container {
        font-size: 0.85rem;
        line-height: 1.6;
        -webkit-overflow-scrolling: touch;
    }
    /* Charte validation box */
    #kbi-validation-box label {
        font-size: 0.9rem;
    }
    /* Turn hint */
    .kbi-turn-hint {
        font-size: 0.9rem;
        bottom: 20px;
    }
    /* Radio/Checkbox groups need bigger tap targets */
    .kbi-f-multi {
        width: 20px;
        height: 20px;
        min-width: 20px;
    }
    /* File upload */
    .kbg-book input[type="file"] {
        font-size: max(16px, 0.8em);
        min-height: 44px;
    }
}
/* A11y: focus style for keyboard nav on page corners */
.kbg-page-corner:focus { outline: none; }
.kbg-page-corner:focus-visible { outline: 2px solid #60a5fa; outline-offset: -2px; border-radius: 4px; }