:root {
    --main-bg-color: oklch(95% 0.05 260);
    --text-color: oklch(20% 0.25 260);
    --accent-color: oklch(70% 0.25 260);
    --button-bg-color: oklch(65% 0.25 260);
    --button-text-color: oklch(98% 0 0);
    --shadow-color: oklch(50% 0.05 260 / 50%);
}

body {
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column; /* Ensure vertical stacking of main elements */
    justify-content: flex-start; /* Align content from the start (top) */
    align-items: center;
    min-height: 100vh;
    background-color: var(--main-bg-color);
    background-image: linear-gradient(135deg, oklch(98% 0.02 260), oklch(95% 0.05 260));
    margin: 0;
    transition: background-color 0.3s ease;
}

menu-recommender {
    display: block;
    width: 90%;
    max-width: 500px;
}

#main-content {
    margin-top: 100px; /* Space from the top controls */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px; /* Space between recommender and contact form */
    margin-bottom: 40px; /* Add some space at the bottom of the content */
}

body[data-theme="dark"] {
    --main-bg-color: oklch(20% 0.05 260);
    --text-color: oklch(95% 0.25 260);
    --accent-color: oklch(70% 0.25 260);
    --button-bg-color: oklch(65% 0.25 260);
    --button-text-color: oklch(10% 0 0);
    --shadow-color: oklch(10% 0.05 260 / 50%);
    background-image: linear-gradient(135deg, oklch(15% 0.02 260), oklch(20% 0.05 260));
}

#theme-toggle-container {
    /* No absolute positioning needed, handled by #top-right-controls */
}

#theme-toggle {
    --icon-color: oklch(60% 0.15 50);
    background: none;
    border: none;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0; /* Hide the text */
    color: transparent;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

#theme-toggle:hover {
    transform: scale(1.1);
}

#theme-toggle::before,
#theme-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
}

/* Sun */
#theme-toggle::before {
    width: 20px;
    height: 20px;
    background: var(--icon-color);
    box-shadow: 0 0 10px 2px var(--icon-color);
}

/* Moon */
#theme-toggle::after {
    width: 16px;
    height: 16px;
    background: var(--main-bg-color);
    transform: translate(-30%, -50%) scale(0);
}

/* Dark mode icon state */
body[data-theme="dark"] #theme-toggle {
    --icon-color: oklch(85% 0.15 260);
}

body[data-theme="dark"] #theme-toggle::before {
    transform: translate(-50%, -50%) scale(0.9);
    box-shadow: none;
}
body[data-theme="dark"] #theme-toggle::after {
    transform: translate(-30%, -50%) scale(1);
}

#top-right-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px; /* Space between theme and language toggles */
    align-items: center;
}

#lang-toggle {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.3s ease;
}

#lang-toggle:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* Contact Form Section Styles */
#contact-form-section {
    width: 90%;
    max-width: 500px;
    /* margin-top: 40px; REMOVED, now handled by #main-content gap */
    padding: 2rem;
    border: 1px solid oklch(0 0 0 / 0.1);
    border-radius: 1rem;
    text-align: center;
    box-shadow: 0 4px 15px var(--shadow-color), 0 15px 35px var(--shadow-color);
    background: oklch(99% 0 0 / 70%); /* Light theme background */
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between elements */
}

body[data-theme="dark"] #contact-form-section {
    border-color: oklch(1 1 1 / 0.1);
    background: oklch(15% 0 0 / 40%); /* Dark theme background */
}

#contact-form-section h2 {
    color: var(--text-color);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

#contact-form-section form {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Stretch form elements */
    gap: 10px;
}

#contact-form-section label {
    color: var(--text-color);
    text-align: left;
    margin-bottom: -5px; /* Pull label closer to input */
    font-size: 0.9em;
    font-weight: 500;
}

#contact-form-section input[type="text"],
#contact-form-section input[type="email"],
#contact-form-section textarea {
    padding: 10px 15px;
    border: 1px solid oklch(0 0 0 / 0.2);
    border-radius: 5px;
    background-color: oklch(100% 0 0 / 0.8);
    color: var(--text-color);
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

body[data-theme="dark"] #contact-form-section input,
body[data-theme="dark"] #contact-form-section textarea {
    background-color: oklch(0% 0 0 / 0.5);
    border-color: oklch(100% 0 0 / 0.2);
}

#contact-form-section input:focus,
#contact-form-section textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--accent-color);
}

#contact-form-section textarea {
    resize: vertical; /* Allow vertical resizing */
    min-height: 100px;
}

#contact-form-section button[type="submit"] {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px -5px var(--shadow-color);
    font-weight: 600;
    margin-top: 15px;
}

#contact-form-section button[type="submit"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px -5px var(--shadow-color);
}