/**

 * UNEVELLO - Test Questions CSS

 * 

 * UMÍSTĚNÍ: /www/styles/test-questions.css

 * POUŽITÍ: test-questions.php (7 otázek s timerem)

 * 

 * Design:

 * - Circular timer s SVG animací

 * - Progress bar

 * - Kompaktní textarea (bez scrollování)

 * - Timeout modal

 * 

 * @version 1.3 (Kompaktnější na PC - vše bez scrollu)

 */



/* ========================================== */

/* IMPORTS & RESET */

/* ========================================== */



@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



/* ========================================== */

/* CSS VARIABLES */

/* ========================================== */



:root {

    /* Colors */

    --bg: #0a0a0a;

    --bg-secondary: #141414;

    --text-primary: #fafafa;

    --text-secondary: #a1a1a1;

    --text-tertiary: #737373;

    --border: rgba(255, 255, 255, 0.08);

    --gold-start: #f6d365;

    --gold-end: #fda085;

    --success: #10b981;

    --warning: #ef4444;

    

    /* Spacing - KOMPAKTNĚJŠÍ PRO PC */

    --spacing-xs: 6px;

    --spacing-sm: 10px;

    --spacing-md: 14px;

    --spacing-lg: 20px;

    --spacing-xl: 28px;

    --spacing-2xl: 36px;

    --spacing-3xl: 48px;

    

    /* Border radius */

    --radius-sm: 8px;

    --radius-md: 12px;

    --radius-lg: 16px;

    --radius-xl: 24px;

    

    /* Transitions */

    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    --transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



/* ========================================== */

/* BASE STYLES */

/* ========================================== */



html, body {

    height: 100%;

    overflow: hidden; /* Žádný scroll na stránce */

}



body {

    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    background: var(--bg);

    color: var(--text-primary);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    display: flex;

    flex-direction: column;

}



.container {

    max-width: 750px;

    margin: 0 auto;

    padding: 0 var(--spacing-lg);

    width: 100%;

}



/* ========================================== */

/* HEADER */

/* ========================================== */



.test-header {

    padding: var(--spacing-md) 0;

    border-bottom: 1px solid var(--border);

    flex-shrink: 0;

}



/* Progress Header (uvnitř main) */

.progress-header {

    margin-bottom: var(--spacing-lg);

    text-align: center;

}



/* Progress Bar */

.progress-bar {

    height: 5px;

    background: var(--bg-secondary);

    border-radius: 3px;

    overflow: hidden;

    margin-bottom: var(--spacing-xs);

}



.progress-fill {

    height: 100%;

    background: linear-gradient(90deg, var(--gold-start), var(--gold-end));

    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);

}



.progress-text {

    text-align: center;

    font-size: 0.9375rem;

    font-weight: 600;

    color: var(--text-secondary);

}



/* ========================================== */

/* MAIN LAYOUT - FLEXBOX PRO PWA BEZ SCROLLU */

/* ========================================== */



.test-questions {

    flex: 1;

    display: flex;

    align-items: center;

    padding: var(--spacing-md) 0;

    height: 100vh;

    overflow: hidden;

}



.test-questions .container {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: var(--spacing-md);

    max-height: 100%;

}



/* ========================================== */

/* TIMER - KOMPAKTNĚJŠÍ */

/* ========================================== */



.timer {

    display: flex;

    justify-content: center;

    margin-bottom: var(--spacing-sm);

}



.timer-circle {

    position: relative;

    width: 100px;

    height: 100px;

}



.timer-svg {

    width: 100%;

    height: 100%;

    transform: rotate(-90deg);

}



.timer-bg {

    fill: none;

    stroke: var(--bg-secondary);

    stroke-width: 6;

}



.timer-progress {

    fill: none;

    stroke: var(--gold-end);

    stroke-width: 6;

    stroke-linecap: round;

    transition: stroke-dashoffset 1s linear;

}



.timer-progress.warning {

    stroke: var(--warning);

    animation: pulse-warning 0.5s ease-in-out infinite;

}



@keyframes pulse-warning {

    0%, 100% {

        stroke-width: 6;

    }

    50% {

        stroke-width: 8;

    }

}



.timer-text {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    font-size: 2rem;

    font-weight: 700;

    color: var(--text-primary);

}



/* ========================================== */

/* QUESTION - KOMPAKTNĚJŠÍ */

/* ========================================== */



.question-box {

    margin-bottom: var(--spacing-md);

    text-align: center;

}



.question-text {

    font-size: 1.5rem;

    font-weight: 600;

    line-height: 1.35;

    color: var(--text-primary);

    animation: fadeIn 0.4s ease-out;

}



/* ========================================== */

/* ANSWER FORM - KOMPAKTNĚJŠÍ */

/* ========================================== */



.answer-form {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-xs);

}



.answer-input {

    width: 100%;

    min-height: 130px;

    max-height: 130px;

    padding: var(--spacing-md);

    font-family: 'Montserrat', sans-serif;

    font-size: 1rem;

    color: var(--text-primary);

    background: var(--bg-secondary);

    border: 2px solid var(--border);

    border-radius: var(--radius-md);

    resize: none; /* Zakázat resize pro konzistentní layout */

    transition: all var(--transition-fast);

    outline: none;

    line-height: 1.5;

}



.answer-input::placeholder {

    color: var(--text-tertiary);

}



.answer-input:focus {

    border-color: var(--gold-end);

    box-shadow: 0 0 0 3px rgba(253, 160, 133, 0.1);

}



.char-count {

    text-align: right;

    font-size: 0.875rem;

    color: var(--text-tertiary);

    margin-bottom: var(--spacing-xs);

}



/* ========================================== */

/* BUTTON - KOMPAKTNĚJŠÍ */

/* ========================================== */



.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--spacing-sm);

    padding: var(--spacing-md) var(--spacing-xl);

    font-family: 'Montserrat', sans-serif;

    font-size: 1.05rem;

    font-weight: 600;

    text-decoration: none;

    border-radius: var(--radius-md);

    transition: all var(--transition-medium);

    cursor: pointer;

    border: none;

}



.btn-primary {

    background: linear-gradient(135deg, var(--gold-start), var(--gold-end));

    color: #000;

    box-shadow: 0 4px 16px rgba(253, 160, 133, 0.3);

    opacity: 0.5;

    cursor: not-allowed;

}



.btn-primary.enabled {

    opacity: 1;

    cursor: pointer;

}



.btn-primary.enabled:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 24px rgba(253, 160, 133, 0.5);

}



.btn-primary.enabled:active {

    transform: translateY(0);

}



.btn-primary:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



.btn-large {

    padding: var(--spacing-md) var(--spacing-2xl);

    font-size: 1.1rem;

    width: 100%;

}



.btn svg {

    width: 22px;

    height: 22px;

}



/* ========================================== */

/* MODAL (TIMEOUT) */

/* ========================================== */



.modal {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.9);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 1000;

    opacity: 0;

    visibility: hidden;

    transition: all var(--transition-medium);

}



.modal.active {

    opacity: 1;

    visibility: visible;

}



.modal-content {

    max-width: 500px;

    padding: var(--spacing-xl);

    background: var(--bg-secondary);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    text-align: center;

    animation: modalIn 0.4s ease-out;

    margin: var(--spacing-lg);

}



@keyframes modalIn {

    from {

        opacity: 0;

        transform: scale(0.9) translateY(20px);

    }

    to {

        opacity: 1;

        transform: scale(1) translateY(0);

    }

}



.modal-icon {

    width: 80px;

    height: 80px;

    margin: 0 auto var(--spacing-lg);

    background: rgba(239, 68, 68, 0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

}



.modal-icon svg {

    width: 40px;

    height: 40px;

    color: var(--warning);

}



.modal-content h2 {

    font-size: 1.75rem;

    font-weight: 700;

    margin-bottom: var(--spacing-md);

    color: var(--text-primary);

}



.modal-content p {

    font-size: 1rem;

    color: var(--text-secondary);

    line-height: 1.6;

    margin-bottom: var(--spacing-md);

}



.modal-content p:last-of-type {

    margin-bottom: var(--spacing-xl);

}



.modal-content strong {

    color: var(--text-primary);

}



.modal-content .btn {

    opacity: 1;

    cursor: pointer;

}



/* ========================================== */

/* RESPONSIVE - MOBIL */

/* ========================================== */



@media (max-width: 768px) {

    :root {

        --spacing-xs: 5px;

        --spacing-sm: 8px;

        --spacing-md: 12px;

        --spacing-lg: 16px;

        --spacing-xl: 20px;

        --spacing-2xl: 28px;

        --spacing-3xl: 40px;

    }

    

    .container {

        max-width: 100%;

        padding: 0 var(--spacing-md);

    }

    

    .progress-bar {

        height: 4px;

    }

    

    .progress-text {

        font-size: 0.8125rem;

    }

    

    .question-text {

        font-size: 1.25rem;

    }

    

    .timer-circle {

        width: 85px;

        height: 85px;

    }

    

    .timer-text {

        font-size: 1.75rem;

    }

    

    .answer-input {

        min-height: 110px;

        max-height: 110px;

        font-size: 16px; /* ⚠️ DŮLEŽITÉ: 16px+ prevence zoom */

    }

    

    .char-count {

        font-size: 0.75rem;

    }

    

    .btn {

        font-size: 0.9375rem;

    }

    

    .btn-large {

        font-size: 1rem;

        padding: var(--spacing-sm) var(--spacing-lg);

    }

    

    .btn svg {

        width: 20px;

        height: 20px;

    }

    

    .modal-content h2 {

        font-size: 1.5rem;

    }

    

    .modal-content p {

        font-size: 0.9375rem;

    }

    

    .modal-icon {

        width: 70px;

        height: 70px;

    }

    

    .modal-icon svg {

        width: 35px;

        height: 35px;

    }

}



@media (max-width: 480px) {

    .question-text {

        font-size: 1.1rem;

    }

    

    .timer-circle {

        width: 75px;

        height: 75px;

    }

    

    .timer-text {

        font-size: 1.5rem;

    }

    

    .answer-input {

        min-height: 100px;

        max-height: 100px;

        padding: var(--spacing-sm);

        font-size: 16px; /* ⚠️ DŮLEŽITÉ: 16px+ prevence zoom */

    }

    

    .btn-large {

        padding: var(--spacing-sm) var(--spacing-md);

        font-size: 0.875rem;

    }

}



/* ========================================== */

/* PREVENCE ZOOM NA iOS */

/* ========================================== */



@media screen and (max-width: 768px) {

    input[type="text"],

    input[type="email"],

    textarea {

        font-size: 16px !important; /* iOS nezoomy při < 16px */

    }

}



/* ========================================== */

/* ANIMATIONS */

/* ========================================== */



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Focus animation for textarea */

.answer-input:focus {

    animation: focusPulse 0.3s ease-out;

}



@keyframes focusPulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.005);

    }

    100% {

        transform: scale(1);

    }

}



/* Timer warning animation */

.timer-circle.warning {

    animation: shake 0.5s ease-in-out infinite;

}



@keyframes shake {

    0%, 100% {

        transform: translateX(0);

    }

    25% {

        transform: translateX(-2px);

    }

    75% {

        transform: translateX(2px);

    }

}