:root {
    --primary-color: #0f4c75;
    --accent-color: #3282b8;
    --light-accent: #bbe1fa;
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.4);
    --text-main: #1b262c;
    --text-secondary: #0f1c24;
    --option-bg: rgba(255, 255, 255, 0.4);
    --option-hover: rgba(255, 255, 255, 0.85);
    --bubble-border: 1px solid rgba(255, 255, 255, 0.5);
    --shadow-soft: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    background-color: #e0f7fa; /* Fallback */
    background-image: url('background.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--text-main);
    min-height: 100vh;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3); /* Lighten the bg image slightly */
    backdrop-filter: blur(3px);
    z-index: -1;
}

.container {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
}

.header {
    text-align: center;
    margin-bottom: 50px;
    background: var(--glass-bg);
    padding: 30px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
}

.title {
    font-family: 'Playfair Display', serif;
    color: var(--primary-color);
    font-size: 3em;
    margin: 0 0 10px 0;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.subtitle {
    font-size: 1.2em;
    color: var(--text-secondary);
    font-weight: 300;
}

.question-card {
    background: var(--glass-bg);
    margin-bottom: 30px;
    padding: 30px;
    border-radius: 25px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    transition: transform 0.3s ease;
}

.question-card:hover {
    transform: translateY(-5px);
}

.question-text {
    color: var(--primary-color);
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: 500;
}

.options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.option {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: var(--option-bg);
    border-radius: 50px; /* Bubble shape */
    cursor: pointer;
    border: var(--bubble-border);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.option:hover {
    background: var(--option-hover);
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.option input[type="radio"] {
    display: none;
}

.bubble {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--accent-color);
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.bubble::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.option input[type="radio"]:checked + .bubble::after {
    opacity: 1;
    transform: scale(1);
}

.option input[type="radio"]:checked + .bubble {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px var(--light-accent);
}

.option input[type="radio"]:checked ~ .option-text {
    font-weight: 600;
    color: var(--primary-color);
}

/* Liquid/Glass effect on selection */
.option input[type="radio"]:checked ~ .option-text::before {
     /* Optional: could handle background change here if needed differently */
}

/* Apply specific style to the parent label when input checked? 
   CSS :has selector is widely supported now but pure CSS sibling approach is safer for old pattern.
   Let's stick to simple state changes for reliability or add JS class if needed. 
   Actually, let's use a subtle gradient on checked for that liquid feel.
*/
.option:has(input:checked) {
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(187, 225, 250, 0.6));
    border-color: var(--light-accent);
}


.option-text {
    font-size: 1.1em;
    line-height: 1.4;
    color: var(--text-main);
}

.form-footer {
    text-align: center;
    margin-top: 40px;
    padding-bottom: 60px;
}

.cta-button {
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    color: white;
    border: none;
    padding: 16px 40px;
    font-size: 1.3em;
    border-radius: 50px;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 10px 20px rgba(15, 76, 117, 0.3);
    transition: all 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(15, 76, 117, 0.4);
    filter: brightness(1.1);
}

/* Modal */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

.modal.hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.modal-content {
    background: rgba(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: 20px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    position: relative;
    text-align: center;
    border: 1px solid white;
    max-height: 90vh;
    overflow-y: auto;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    transition: color 0.3s;
}

.close-btn:hover {
    color: var(--primary-color);
}

.result-title {
    font-family: 'Playfair Display', serif;
    color: var(--primary-color);
    font-size: 2.5em;
    margin-bottom: 20px;
}

.result-phase {
    font-size: 1.5em;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
}

.result-description {
    text-align: left;
    line-height: 1.6;
    margin-bottom: 15px;
    color: var(--text-main);
}

.result-description strong {
    color: var(--primary-color);
}