/* RESET A ZÁKLAD */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

:root {
    --bg-color: #F6F0E6; /* Vonkajšie pozadie podľa zadania */
    --card-bg: #F6F0E6; /* Zjednotené pozadie pre kartu */
    --separator: #B08B69; /* Tmavšia farba pre oddeľovač (s opacity) */
    --text-muted: #A48C79; /* Čas / hodinky */
    --accent: #B08B69; /* Tlačidlo / srdiečko */
    --text-body: #6F6258; /* Odseky */
    --text-main: #4E392E; /* Hlavné nadpisy / logo */
}

html {
    background-color: var(--bg-color); /* Zabezpečí, že aj okraje v Safari budú mať správnu farbu */
}

body {
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
    height: 100%;
    height: 100dvh; /* Pre moderné mobily (safari) */
    overflow: hidden; /* Zakáže scrollovanie celej stránky */
    display: flex;
    font-family: 'Inter', sans-serif;
    overscroll-behavior-y: none; /* Zabráni odskakovaniu stránky za okraj v iOS */
}

.screen-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0; /* Žiadny padding, chceme aby to vyplnilo celý displej */
}

.card-container {
    width: 100%; 
    max-width: none; /* MUSÍ BYŤ NONE, inak to zostane zablokované v 480px stĺpci */
    flex: 1; /* Natiahne sa na celú výšku */
    background: var(--bg-color); 
    border-radius: 0; /* Žiadne oblé rohy, vyzerá to ako celá appka */
    box-shadow: none; /* Žiadny tieň */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0 auto; /* Centrovanie na veľkých obrazovkách */
}

/* Obal pre obsah - použijeme absolútne presné pixely */
.card-content {
    padding: 30px 20px 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2; 
    height: 100%;
    
    /* Na mobiloch menšie, na PC sa to roztiahne */
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    min-height: 0; /* Dôležité pre vnútorné scrollovanie flexboxu */
}

#start-screen {
    overflow-y: auto; /* Úvodná obrazovka sa môže scrollovať celá */
}

/* LOGO SEKCOA */
.logo-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
    margin-top: -30px;
    opacity: 0;
    animation: fadeIn 600ms ease-out forwards;
}

.logo-m {
    height: 105px; /* Zmenšené o cca 12% z pôvodných 120px */
    object-fit: contain;
    margin-bottom: -32px; /* Priblížené k textu Mamori */
}

.logo-text {
    font-size: 21px; /* Zmenšené o dvojnásobok na základe spätnej väzby (z 42px na 21px) */
    font-weight: 700; /* Bold */
    color: var(--text-main);
    letter-spacing: -0.5px;
    font-family: 'Lora', serif;
    position: relative;
    z-index: 2;
}

/* NADPIS */
.headline {
    font-size: 20px; 
    font-weight: 500; 
    line-height: 1.3; 
    text-align: center;
    text-wrap: balance; /* Vyváženie riadkov aj pre nadpis */
    font-family: 'Lora', serif;
    color: var(--text-main);
    margin: 0 auto 24px auto; 
    width: 85%; 
    opacity: 0;
    animation: fadeIn 600ms ease-out 150ms forwards;
}

.heart-icon {
    color: var(--accent);
    font-size: 28px;
    animation: pulse 1.5s infinite;
}

/* ODDELOVAČE */
.separator {
    width: 40px; /* Tenká línia 40px */
    height: 1px;
    background-color: var(--separator);
    opacity: 0.25; /* 25% opacity */
    margin-bottom: 24px; 
    opacity: 0;
    animation: fadeIn 600ms ease-out 300ms forwards;
}

/* ODSEKY TEXTU */
.body-text {
    font-size: 15px; /* Zväčšené pre lepšiu čitateľnosť */
    line-height: 1.7; /* Väčšie riadkovanie pre vzdušnosť */
    text-align: center;
    font-weight: 400;
    color: var(--text-main); /* Trochu výraznejšia farba */
    width: 90%; /* Širšie, aby nebolo tak potlačené do stredu */
    margin: 0 auto 16px auto;
    opacity: 0;
    animation: fadeIn 600ms ease-out forwards;
}

.body-text:last-of-type {
    margin-bottom: 32px; 
}

/* SPODNÁ ČASŤ */
.bottom-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* ČASOVÝ ÚDAJ */
.time-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Priestor medzi ikonou a textom */
    font-size: 16px;
    font-weight: 400; 
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 24px; 
    opacity: 0;
    animation: fadeIn 600ms ease-out 500ms forwards;
}

/* TLAČIDLO */
.primary-btn {
    width: calc(100% - 48px); /* 24px margin z každej strany */
    max-width: 332px; 
    height: 48px; /* Znížené z 54px pre ušetrenie miesta */
    font-size: 15px;
    font-weight: 500; /* Zjemnené */
    letter-spacing: 0.5px;
    background: transparent;
    color: var(--text-main);
    border: 1.5px solid var(--text-main);
    border-radius: 30px; 
    cursor: pointer;
    box-shadow: none;
    opacity: 0;
    transform: translateY(15px);
    animation: slideUpFade 700ms ease-out 650ms forwards;
    transition: all 0.3s ease;
}

.primary-btn:hover {
    transform: translateY(-2px);
    background: var(--text-main);
    color: #fff;
}

/* KVIETKY ÚPLNE DOLE */
.flowers-decor {
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 250px; 
    background-image: url('flowers.png'); 
    background-size: cover; /* Na širokom PC obrazovka vyplní pekne do strán */
    background-position: bottom center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1; 
    opacity: 0.6; /* Ešte viac zjemnené */
    mix-blend-mode: multiply; /* Toto zabezpečí dokonalé farebné splynutie s pozadím */
    
    /* Maska, ktorá plynulo rozmaže obrázok smerom nahor do stratena */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 60%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 60%);
}

/* ANIMÁCIE */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* DOTAZNÍK - VNÚTORNÉ STRÁNKY */
#question-screen {
    padding-top: 10px; /* Zmenšené */
    justify-content: flex-start; /* Zhora nadol */
    flex: 1; /* Natiahne sa presne na zvyšok karty bez fixnej výšky */
    display: flex;
    flex-direction: column;
    z-index: 2; /* Musí byť nad kvetmi kvôli klikaniu na tlačidlá */
    min-height: 0; /* Dôležité pre vnútorné scrollovanie flexboxu */
    position: relative; /* Potrebné pre absolútne pozicovanie tlačidiel */
    padding-bottom: 100px; /* Bezpečné miesto pre fixné tlačidlá */
}

.progress-container {
    width: 100%;
    height: 6px;
    background-color: var(--separator);
    border-radius: 3px;
    margin-bottom: 15px;
    overflow: hidden;
    display: none; /* Odstránená horná hnedá čiara */
}

.progress-bar {
    height: 100%;
    background-color: var(--accent);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 3px;
}

.question-header {
    width: 100%;
    text-align: right;
    margin-bottom: 20px;
}

.question-counter {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}

.question-text {
    font-size: 19px; /* Mierne zmenšené */
    font-weight: 500; /* Rovnaká hrúbka ako úvodný nadpis */
    color: var(--text-main);
    font-family: 'Lora', serif;
    text-align: center;
    text-wrap: balance; /* Nádherné zalamovanie */
    margin: 0 auto 15px auto; /* Zmenšený spodný okraj z 30px na 15px */
    width: 95%; /* Viac priestoru do šírky */
    line-height: 1.25;
}

.options-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Zmenšené z 12px, aby sa zmestilo viac odpovedí */
    margin-bottom: 0;
    z-index: 3; /* Klikanie musí fungovať */
    flex: 1 1 auto; /* Návrat k pôvodnému správaniu */
    overflow-y: auto; /* Scrollovanie len pre odpovede (ak by predsa len bolo treba) */
    min-height: 0; /* Dôležité pre flexbox */
    padding-bottom: 5px;
    
    /* Skrytie scrollbaru pre čistejší dizajn */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.options-container::-webkit-scrollbar {
    display: none;
}

.option-btn {
    width: 100%;
    padding: 14px 16px; /* Zmenšené z 18px 20px */
    background-color: var(--bg-color); /* Ivory Whisper */
    border: 2px solid transparent;
    border-radius: 16px; /* Zmenšené z 20px */
    font-family: 'Inter', sans-serif;
    font-size: 14.5px; /* Mierne zmenšené z 15px */
    font-weight: 500;
    color: var(--text-body);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.option-btn:hover {
    border-color: var(--separator);
}

.option-btn.selected {
    border-color: transparent;
    background-color: #EFE8DD; /* Jemne tmavšie pozadie pre odlíšenie výberu bez orámovania */
}

.option-btn:focus {
    outline: none;
}

.text-input, .email-input {
    width: 100%;
    padding: 16px 20px;
    background-color: var(--bg-color);
    border: 2px solid var(--separator);
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--text-main);
    outline: none;
    transition: border-color 0.2s ease;
}

.text-input:focus, .email-input:focus {
    border-color: var(--accent);
}

.text-input {
    min-height: 120px;
    resize: vertical;
}

.navigation-buttons {
    width: calc(100% - 40px);
    display: flex;
    flex-direction: column-reverse; /* Ďalej bude hore, Späť dole */
    align-items: center;
    gap: 8px; /* Zmenšená medzera */
    position: absolute; /* Úplne napevno dole */
    bottom: 15px; 
    left: 20px; /* Padding */
    z-index: 10;
}
.secondary-btn {
    height: auto;
    padding: 10px;
    background: transparent;
    color: var(--text-muted);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500; /* Zjemnené zo 600 na 500 */
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.secondary-btn:hover {
    color: var(--text-main);
}

.next-btn {
    width: 100%;
}

.error-text {
    position: absolute;
    bottom: 125px; /* Tesne nad tlačidlom Ďalej */
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    max-width: 320px;
    color: #9C5B5B;
    background-color: rgba(156, 91, 91, 0.08);
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    font-family: 'Inter', sans-serif;
    padding: 10px 20px;
    border-radius: 30px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 15; /* Ešte nad tlačidlami */
    pointer-events: none; /* Aby neblokovalo klikanie omylom */
}

.error-text.show {
    opacity: 1;
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-4px); }
}

/* RESPONZÍVNY DIZAJN PRE VEĽMÍ ÚZKE MOBILY (napr. iPhone SE) */
@media (max-width: 380px) {
    .card-content {
        padding: 30px 20px; /* Menší padding na okrajoch */
    }
    .headline {
        font-size: 18px; /* Ešte menší nadpis na malých mobiloch */
    }
    .logo-text {
        font-size: 18px; /* Menší text na mobile */
    }
    .logo-m {
        height: 100px; /* Ešte menšie logo na mobile */
        margin-bottom: -30px;
    }
    .question-text {
        font-size: 18px;
    }
}

/* --- DESKTOP VERZIA (PC / TABLET) --- */
@media (min-width: 768px) {
    .card-content {
        padding: 60px 40px; /* Viac priestoru na PC */
    }
    
    .headline {
        font-size: 34px; /* Väčší nadpis na PC */
        width: 100%; /* Necháme ho roztiahnuť */
        max-width: 900px;
    }
    
    .logo-text {
        font-size: 26px;
    }
    
    .logo-m {
        height: 140px;
    }
    
    .body-text {
        font-size: 18px; /* Väčší a čitateľnejší text na PC */
        width: 100%; /* Plne rozliate */
        max-width: 900px;
        line-height: 1.7;
    }
    
    .question-text {
        font-size: 24px;
        max-width: 800px;
    }
    
    .options-container {
        max-width: 800px;
        margin: 0 auto;
    }
    
    .option-btn {
        padding: 20px 25px; /* Väčšie tlačidlá na PC */
        font-size: 16px;
    }
    
    .primary-btn {
        max-width: 400px; /* Trochu širšie tlačidlo Ďalej na PC */
        height: 54px;
        font-size: 16px;
    }
    
    .flowers-decor {
        background-size: 100% 100%; /* Roztiahnutie na celú šírku obrazovky */
    }
}