/* Base Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Import Inter Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&family=Noto+Sans+Gujarati:wght@400;700&family=Noto+Sans+Devanagari:wght@400;700&display=swap');

/* Typography */
body {
font-family: 'Inter', 'Noto Sans Gujarati', 'Noto Sans Devanagari', sans-serif;
font-size: 18px;
line-height: 1.6;
color: #333;
background-color: #f7ede2;
}

/* Language Selection Screen */
.language-select-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #f7ede2;
}

/* Logo - Top Left corner, appears on all screens */
.logo-container {
position: fixed;
top: 10px;
left: -30px;
width: 300px;
height: 180px;
z-index: 100;
}

.logo-image {
width: 100%;
height: 100%;
object-fit: contain;
}

/* Main Content Layout - Hidden (not used with absolute positioning) */
.main-content-layout {
position: relative;
width: 100%;
height: 100%;
}

/* Left Content - Hidden (not used) */
.left-content {
/* This container is not used with absolute positioning */
}

/* Cycling Heading - Centered, shifted up 80px */
.heading-container {
position: absolute;
top: calc(50% - 80px);
left: 50%;
transform: translate(-50%, -50%);
width: 700px;
text-align: center;
z-index: 10;
}

.main-heading {
font-family: 'Inter', 'Noto Sans Gujarati', 'Noto Sans Devanagari', sans-serif;
font-size: 36px;
font-weight: 700;
color: #447d3e;
line-height: 1.3;
margin: 0;
padding: 0;
transition: opacity 0.3s ease-in-out;
white-space: pre-line;
}

/* Language Buttons - 50px below heading */
.language-buttons-container {
position: absolute;
top: calc(50% + 100px);
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
gap: 15px;
align-items: center;
width: 300px;
}

.language-button-new {
width: 100%;
height: 65px;
background-color: #447d3e;
border: none;
border-radius: 32px;
color: #f7ede2;
font-family: 'Inter', 'Noto Sans Gujarati', 'Noto Sans Devanagari', sans-serif;
font-size: 24px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
position: relative;
transform: translateZ(0); /* Hardware acceleration */
will-change: transform, background-color, box-shadow;
}

.language-button-new:hover {
background-color: #d99648;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(68, 125, 62, 0.3);
}

.language-button-new:active,
.language-button-new.selected {
background-color: #d99648;
transform: translateY(0);
}

/* Touch device specific fixes for language buttons */
@media (hover: none) and (pointer: coarse) {
    .language-button-new.selected {
        background-color: #d99648 !important;
        color: white !important;
    }
}

/* Nuclear reset CSS - override any persistent states */
.language-button-new.reset-state {
    background: linear-gradient(135deg, #447d3e 0%, #3a6b35 100%) !important;
    color: #f7ede2 !important;
    transform: none !important;
    box-shadow: 0 8px 25px rgba(68, 125, 62, 0.3) !important;
}

.language-button-new.reset-state.selected,
.language-button-new.reset-state.active,
.language-button-new.reset-state.orange,
.language-button-new.reset-state.highlighted {
    background: linear-gradient(135deg, #447d3e 0%, #3a6b35 100%) !important;
    color: #f7ede2 !important;
    transform: none !important;
    box-shadow: 0 8px 25px rgba(68, 125, 62, 0.3) !important;
}

/* Right Content - Hidden (not used) */
.right-content {
/* This container is not used with absolute positioning */
}

/* Child Image - Bottom Right corner, 2px from bottom */
.child-image {
position: absolute;
bottom: 2px;
right: 20px;
width: 350px;
height: 420px;
background-image: url('./images/LanguageSelection_Image.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 20px;
}

/* Other screens */
.question-container {
background-color: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
margin: 20px 0;
max-width: 600px;
width: 90%;
}

/* Layout */
#app {
max-width: 100vw;
min-height: 100vh;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

/* Progress bar */
.progress-container {
width: 100%;
background-color: #ddd;
border-radius: 10px;
margin: 20px 0;
}

.progress-bar {
height: 20px;
background-color: #D99648;
border-radius: 10px;
transition: width 0.3s ease;
}

/* Button styles */
.option-button {
min-width: 120px;
margin: 10px;
padding: 15px 25px;
font-size: 1.2rem;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
background-color: #f1c40f;
color: #2c3e50;
}

.option-button:hover {
background-color: #e67e22;
transform: translateY(-2px);
}

.option-button.selected {
background-color: #27ae60;
color: white;
transform: scale(1.05);
}

.nav-button {
min-width: 120px;
margin: 10px;
padding: 15px 25px;
font-size: 1.1rem;
border: none;
border-radius: 8px;
cursor: pointer;
background-color: #9b59b6;
color: white;
transition: all 0.3s ease;
}

.nav-button:hover {
background-color: #8e44ad;
transform: translateY(-2px);
}

/* Accessibility */
button, [role="button"] {
min-width: 48px;
min-height: 48px;
font-size: 1.2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
body {
font-size: 16px;
}

#app {
padding: 0;
}

.language-select-container {
padding: 0;
}

/* Mobile Logo - Top Left corner */
.logo-container {
top: 10px;
left: -8px;
width: 230px;
height: 138px;
}

.logo-image {
width: 100%;
height: 100%;
object-fit: contain;
}

/* Mobile Heading - Centered and shifted up 50px from mobile center */
.heading-container {
top: calc(40% - 80px);
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 500px;
}

.main-heading {
font-size: 28px;
padding: 0;
line-height: 1.2;
}

/* Mobile Buttons - Keep original mobile position */
.language-buttons-container {
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 0;
width: 90%;
max-width: 250px;
gap: 10px;
}

.language-button-new {
height: 55px;
font-size: 20px;
border-radius: 27px;
}

/* Mobile Image - Bottom Right corner, smaller size */
.child-image {
bottom: 2px;
right: 15px;
width: 200px;
height: 240px;
}

.question-container {
padding: 20px;
margin: 10px;
width: 95%;
}

.option-button, .nav-button {
width: 90%;
margin: 10px auto;
display: block;
}
}

/* Extra small mobile screens (phones in portrait) */
@media (max-width: 480px) {
/* Extra small mobile logo */
.logo-container {
top: 10px;
left: -6px;
width: 172px;
height: 103px;
}

/* Extra small mobile heading */
.heading-container {
top: calc(35% - 80px);
width: 95%;
max-width: 400px;
}

.main-heading {
font-size: 24px;
line-height: 1.1;
}

/* Extra small mobile buttons */
.language-buttons-container {
top: 50%;
width: 95%;
max-width: 230px;
gap: 8px;
}

.language-button-new {
height: 50px;
font-size: 18px;
border-radius: 25px;
}

/* Extra small mobile image */
.child-image {
bottom: 1px;
right: 10px;
width: 160px;
height: 190px;
}
}

/* Landscape mobile orientation */
@media (max-width: 768px) and (orientation: landscape) {
.logo-container {
top: 10px;
left: -10px;
}

.heading-container {
top: calc(25% - 80px);
}

.language-buttons-container {
top: 45%;
margin-top: 0;
width: 90%;
max-width: 220px;
gap: 8px;
}

.language-button-new {
height: 50px;
font-size: 18px;
border-radius: 25px;
}

.option-button-new {
height: 50px;
font-size: 18px;
border-radius: 25px;
}

.child-image {
bottom: 2px;
right: 10px;
width: 207px;
height: 253px;
}
}

/* ===== QUESTIONNAIRE SCREEN STYLES ===== */
.questionnaire-screen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #f7ede2;
}

/* Progress Section */
.progress-section {
position: absolute;
top: calc(50% - 180px);
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
margin-bottom: 30px;
}

.progress-container {
width: 100%;
background-color: rgba(240, 240, 240, 0.3);
border: 2px solid #447d3e;
border-radius: 25px;
overflow: hidden;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-bar {
height: 16px;
background: linear-gradient(135deg, #D99648 0%, #e6a85a 100%);
border-radius: 12px;
transition: width 0.5s ease;
box-shadow: 0 2px 8px rgba(217, 150, 72, 0.3);
margin: 2px;
}

/* Question Box - Fixed height as per original design */
.question-box {
position: absolute;
top: calc(50% - 90px);
left: 50%;
transform: translate(-50%, -50%);
background-color: transparent;
padding: 20px;
border: 2px solid #447d3e;
border-radius: 48.5px;
width: 600px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.question-box h3 {
font-family: 'Inter', 'Noto Sans Gujarati', 'Noto Sans Devanagari', sans-serif;
font-size: 28px;
font-weight: 700;
color: #447d3e;
line-height: 1.5;
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
}

/* Options Section */
.options-section {
position: absolute;
top: calc(50% + 100px);
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
gap: 15px;
width: 350px;
align-items: center;
z-index: 15;
}

/* Question Image - Right Bottom Corner (like language selection page) */
.question-image {
position: absolute;
bottom: 2px;
right: 20px;
width: 320px;
height: 384px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border-radius: 20px;
}

/* Special sizing for q3 and q6 images in mobile */
.question-image.q3,
.question-image.q6 {
width: 304px;
height: 365px;
}

.option-button-new {
width: 100%;
height: 65px;
background-color: #447d3e;
border: none;
border-radius: 32px;
color: #f7ede2;
font-family: 'Inter', 'Noto Sans Gujarati', 'Noto Sans Devanagari', sans-serif;
font-size: 24px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
position: relative;
pointer-events: auto;
transform: translateZ(0); /* Hardware acceleration */
will-change: transform, background-color, box-shadow;
}

.option-button-new:hover {
background-color: #d99648;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(68, 125, 62, 0.3);
}

.option-button-new:active {
background-color: #d99648;
transform: translateY(0);
}

.option-button-new.selected {
background-color: #d99648 !important;
color: white !important;
transform: scale(1.02);
box-shadow: 0 4px 16px rgba(217, 150, 72, 0.4);
}

/* Touch device specific fixes */
@media (hover: none) and (pointer: coarse) {
    .option-button-new.selected {
        background-color: #d99648 !important;
        color: white !important;
    }
    
    .option-button-new:not(.selected) {
        background: linear-gradient(135deg, #447d3e 0%, #3a6b35 100%) !important;
        color: #f7ede2 !important;
    }
}

/* ===== TABLET/iPAD SPECIFIC STYLES ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Tablet/iPad Language Selection Page */
    .language-select-screen .heading-container {
        top: calc(50% - 120px) !important; /* Move 30px up from center */
    }
    
    .language-select-screen .language-buttons-container {
        top: calc(50% + 20px) !important; /* Move 30px up from center */
    }
    
    .language-select-screen .child-image {
        top: calc(100vh - 420px) !important; /* Move 10px up from bottom */
    }
    
    /* Tablet/iPad Question Pages */
    .questionnaire-screen .progress-container {
        top: calc(50% - 200px) !important; /* Move 30px up from center */
    }
    
    .questionnaire-screen .question-container {
        top: calc(50% - 120px) !important; /* Move 30px up from center */
    }
    
    .questionnaire-screen .options-section {
        top: calc(50% + 80px) !important; /* Move 30px up from center */
    }
    
    .questionnaire-screen .question-image {
        top: calc(100vh - 470px) !important; /* Move 10px up from bottom */
    }
}

/* ===== RESULTS SCREEN STYLES ===== */
.results-screen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: linear-gradient(135deg, #f7ede2 0%, #e8f5e8 100%);
}

.results-container {
position: absolute;
top: calc(50% - 50px);
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
max-width: 500px;
width: 90%;
background-color: transparent;
padding: 30px;
border: 2px solid #447d3e;
border-radius: 48.5px;
backdrop-filter: blur(10px);
}

.results-container h1 {
color: #447d3e;
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 25px;
font-family: 'Inter', sans-serif;
text-shadow: 0 2px 4px rgba(68, 125, 62, 0.1);
}

.results-container p {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 25px;
font-family: 'Inter', sans-serif;
line-height: 1.4;
padding: 20px;
border-radius: 15px;
background: rgba(68, 125, 62, 0.1);
border: 2px solid rgba(68, 125, 62, 0.3);
box-shadow: 0 4px 16px rgba(68, 125, 62, 0.15);
backdrop-filter: blur(10px);
}

.results-container .recommendation {
color: #e74c3c;
background: linear-gradient(135deg, rgba(231, 76, 60, 0.1) 0%, rgba(231, 76, 60, 0.05) 100%);
border: 2px solid rgba(231, 76, 60, 0.4);
}

.results-container .healthy {
color: #447d3e;
background: linear-gradient(135deg, rgba(68, 125, 62, 0.1) 0%, rgba(68, 125, 62, 0.05) 100%);
border: 2px solid rgba(68, 125, 62, 0.4);
}

.results-container .nav-button {
background: linear-gradient(135deg, #447d3e 0%, #3a6b35 100%);
color: #f7ede2;
border: none;
border-radius: 28px;
padding: 12px 32px;
font-size: 1.1rem;
font-weight: 700;
font-family: 'Inter', sans-serif;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(68, 125, 62, 0.3);
position: relative;
overflow: hidden;
}

.results-container .nav-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}

.results-container .nav-button:hover::before {
left: 100%;
}

.results-container .nav-button:hover {
background: linear-gradient(135deg, #d99648 0%, #c8853a 100%);
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(217, 150, 72, 0.4);
}

.results-container .nav-button:active,
.results-container .nav-button.selected {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(217, 150, 72, 0.3);
background: linear-gradient(135deg, #d99648 0%, #c0853f 100%) !important;
}

/* Touch device specific fixes for results button */
@media (hover: none) and (pointer: coarse) {
    .results-container .nav-button.selected {
        background: linear-gradient(135deg, #d99648 0%, #c0853f 100%) !important;
        color: white !important;
    }
}

/* Result Image - Bottom Right Corner (same position as question images) */
.result-image {
position: absolute;
bottom: 2px;
right: 20px;
width: 323px;
height: 388px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 10;
}

/* Responsive Design for Questionnaire */
@media (max-width: 768px) {
.progress-section {
width: 80vw;
max-width: 280px;
}

.question-box {
padding: 20px;
width: 80vw;
max-width: 400px;
height: 80px;
top: calc(50% - 111px);
}

.question-box h3 {
font-size: 22px;
}

.option-button-new {
width: 100%;
height: 50px;
font-size: 18px;
border-radius: 25px;
}

.options-section {
width: 80vw;
max-width: 250px;
gap: 15px;
top: calc(50% + 35px);
}

.question-image {
width: 211px;
height: 254px;
bottom: 2px;
right: 15px;
}

/* Special sizing for q3 and q6 images in mobile */
.question-image.q3,
.question-image.q6 {
width: 200px;
height: 241px;
}
}

@media (max-width: 480px) {
.progress-section {
width: 85vw;
max-width: 250px;
}

.question-box {
padding: 20px;
width: 85vw;
max-width: 320px;
height: 70px;
top: calc(50% - 101px);
}

.question-box h3 {
font-size: 20px;
}

.option-button-new {
width: 100%;
height: 45px;
font-size: 16px;
border-radius: 22px;
}

.options-section {
width: 85vw;
max-width: 220px;
gap: 15px;
top: calc(50% + 25px);
}

.question-image {
width: 173px;
height: 207px;
bottom: 1px;
right: 10px;
}

/* Special sizing for q3 and q6 images in extra small mobile */
.question-image.q3,
.question-image.q6 {
width: 164px;
height: 197px;
}
}

/* Mobile Results Styling */
@media (max-width: 768px) {
.results-container {
padding: 20px;
}

.results-container h1 {
font-size: 1.6rem;
margin-bottom: 15px;
}

.results-container p {
font-size: 1.1rem;
margin-bottom: 20px;
padding: 15px;
}

.results-container .nav-button {
padding: 10px 25px;
font-size: 1.1rem;
}

/* Mobile Result Image Styling */
.result-image {
width: 227px;
height: 272px;
bottom: 2px;
right: 15px;
}
}

@media (max-width: 480px) {
.results-container {
padding: 20px;
}

.results-container h1 {
font-size: 1.6rem;
margin-bottom: 15px;
}

.results-container p {
font-size: 1.1rem;
margin-bottom: 20px;
padding: 15px;
}

.results-container .nav-button {
padding: 10px 25px;
font-size: 1.1rem;
}

.result-image {
width: 227px;
height: 272px;
bottom: 1px;
right: 10px;
}
}