/* --- 0. FONTS AND ICONS --- */
@font-face {
    font-family: 'Bookerly';
    src: url('/static/fonts/Bookerly-Light.woff2') format('woff2'), url('/static/fonts/Bookerly Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Ensures text is visible during font loading */
}

@font-face {
    font-family: 'Bookerly';
    src: url('/static/fonts/Bookerly-Bold.woff2') format('woff2'), url('/static/fonts/Bookerly Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap; /* Ensures text is visible during font loading */
}

.icon-sun { display: none; }
body.dark-theme .icon-moon { display: none; }
body.dark-theme .icon-sun { display: block; }

/* --- 1. MATERIAL DESIGN 3: MODERN VARIABLES AND COLOR SYSTEM --- */
:root {
    --md-sys-font: 'Bookerly', "Georgia", serif;
    --md-sys-spacing: 20px;
    --md-sys-border-radius: 16px;
    --md-sys-border-radius-large: 24px;
    --md-sys-border-radius-small: 8px;

    /* Modern Light Theme Palette - Consistent Indigo/Purple */
    --md-sys-color-primary: #6366f1;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #e0e7ff;
    --md-sys-color-on-primary-container: #1e1b4b;
    --md-sys-color-secondary: #64748b;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #f1f5f9;
    --md-sys-color-on-secondary-container: #334155;
    --md-sys-color-tertiary: #8b5cf6;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #ede9fe;
    --md-sys-color-on-tertiary-container: #4c1d95;
    --md-sys-color-error: #d32f2f;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffebee;
    --md-sys-color-on-error-container: #b71c1c;
    --md-sys-color-background: #fafafa;
    --md-sys-color-on-background: #1a1a1a;
    --md-sys-color-surface: #ffffff;
    --md-sys-color-on-surface: #1a1a1a;
    --md-sys-color-surface-variant: #f5f5f5;
    --md-sys-color-on-surface-variant: #616161;
    --md-sys-color-surface-container: #f8f9fa;
    --md-sys-color-surface-container-low: #ffffff;
    --md-sys-color-surface-container-high: #f1f3f4;
    --md-sys-color-surface-container-highest: #e8eaed;
    --md-sys-color-outline: #9e9e9e;
    --md-sys-color-outline-variant: #e0e0e0;
    --md-sys-color-shadow: rgba(0, 0, 0, 0.1);
    --md-sys-color-scrim: rgba(0, 0, 0, 0.32);
}

/* Modern Dark Theme Palette */
body.dark-theme {
    --md-sys-color-primary: #818cf8;
    --md-sys-color-on-primary: #1e1b4b;
    --md-sys-color-primary-container: #312e81;
    --md-sys-color-on-primary-container: #e0e7ff;
    --md-sys-color-secondary: #94a3b8;
    --md-sys-color-on-secondary: #1e293b;
    --md-sys-color-secondary-container: #334155;
    --md-sys-color-on-secondary-container: #f1f5f9;
    --md-sys-color-tertiary: #a78bfa;
    --md-sys-color-on-tertiary: #4c1d95;
    --md-sys-color-tertiary-container: #6d28d9;
    --md-sys-color-on-tertiary-container: #ede9fe;
    --md-sys-color-error: #ff5252;
    --md-sys-color-on-error: #1a1a1a;
    --md-sys-color-error-container: #3d1a1a;
    --md-sys-color-on-error-container: #ffcdd2;
    --md-sys-color-background: #0f0f0f;
    --md-sys-color-on-background: #e8e8e8;
    --md-sys-color-surface: #1a1a1a;
    --md-sys-color-on-surface: #e8e8e8;
    --md-sys-color-surface-variant: #2d2d2d;
    --md-sys-color-on-surface-variant: #b0b0b0;
    --md-sys-color-surface-container: #262626;
    --md-sys-color-surface-container-low: #1a1a1a;
    --md-sys-color-surface-container-high: #333333;
    --md-sys-color-surface-container-highest: #404040;
    --md-sys-color-outline: #666666;
    --md-sys-color-outline-variant: #333333;
    --md-sys-color-shadow: rgba(0, 0, 0, 0.3);
    --md-sys-color-scrim: rgba(0, 0, 0, 0.6);
}

/* --- 2. LAYOUT AND FUNDAMENTALS --- */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
    font-family: var(--md-sys-font);
    font-size: 16px;
    line-height: 1.6;
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    margin: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
}

header {
    padding: 0 var(--md-sys-spacing);
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: color-mix(in srgb, var(--md-sys-color-surface) 80%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: 64px;
}

.header-title a { text-decoration: none; color: var(--md-sys-color-primary); font-weight: bold; font-size: 1.5rem; transition: color 0.3s ease; }
.header-title a:hover { color: var(--md-sys-color-on-surface); }
.header-nav { display: flex; align-items: center; gap: 8px; }
.user-info {
    position: relative; /* This is crucial for positioning the dropdown menu */
    display: flex;
    align-items: center;
    gap: 12px;
}
.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-size: 16px;
    font-weight: bold;
    cursor: default;
}

.main-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows the container to grow and fill available space */
    overflow: auto; /* Prevents tooltips in the header from being clipped */
}

main {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--md-sys-spacing);
}

/* In-page navigation for pages like 'About' */
.page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

#initial-state-container {
    text-align: center;
    padding: 40px 0;
    transform-origin: top; /* Animation starts from the top */
    transition: transform 0.4s ease, opacity 0.4s ease, padding 0.4s ease, margin 0.4s ease;
    transform: scaleY(1); /* Default state: open */
    opacity: 1;
}

#initial-state-container.faded-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Disable interactions when faded out */
    transform: scaleY(0); /* Collapse vertically */
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.welcome-message h2 { color: var(--md-sys-color-primary); }
.welcome-message p {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 1.1rem;
    word-wrap: break-word; /* Fallback for older browsers */
    overflow-wrap: break-word; /* Standard property to prevent overflow */
}

.search-card-note {
    text-align: center;
    font-size: 0.9rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 16px;
}

/* Typography */
h1, h2, h3, h4 { font-weight: 800; }
h1 { font-size: 2.2rem; margin: 0; }
h2 { font-size: 1.8rem; margin: 24px 0 16px; color: var(--md-sys-color-on-surface); }
h3 { font-size: 1.4rem; margin: 20px 0 12px; color: var(--md-sys-color-on-surface); }
h4 { font-size: 1.1rem; margin: 16px 0 8px; color: var(--md-sys-color-primary); }
p { margin-bottom: 16px; }
li { margin-bottom: 8px; }
p, ul, ol { color: var(--md-sys-color-on-surface-variant); }
ul, ol { padding-left: 24px; }
a { color: var(--md-sys-color-primary); text-decoration: underline; transition: color 0.3s ease; }
a:hover { color: var(--md-sys-color-tertiary); }
code { background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-primary); padding: 2px 6px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 0.9em; }

/* --- 3. CENTERED SEARCH CONTAINER & MODAL --- */
.search-container {
    width: 100%;
    max-width: 800px;
    margin: 16px auto 32px;
    position: relative;
    min-height: 100px;
    display: flex; /* Use flex to center the expandable button */
    justify-content: center;
    align-items: flex-start; /* Align items to the start */
}

.search-expandable-container {
    /* Initial button styles */
    position: relative; /* For positioning inner content */
    overflow: hidden; /* Hide overflowing content */
    transition: all 0.5s ease-in-out; /* Smooth transition for expansion */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 32px; /* Initial padding for the button */
    border-radius: var(--md-sys-border-radius-large); /* Rounded corners for button */
    box-shadow: 0 3px 6px var(--md-sys-color-shadow); /* Button shadow */
    background-color: var(--md-sys-color-primary); /* Button background */
    color: var(--md-sys-color-on-primary); /* Button text color */
    cursor: pointer;
    width: auto; /* Allow width to shrink to content */
    min-width: 200px; /* Minimum width for the button */
}

.search-expandable-container.expanded {
    /* Expanded state: transform to look like the card */
    width: 100%;
    max-width: 900px; /* Match card max-width */
    height: auto; /* Allow height to expand with content */
    min-height: auto; /* Minimum height for the expanded card */
    padding: 24px; /* Padding for the expanded card */
    border-radius: var(--md-sys-border-radius-large); /* Keep rounded corners */
    box-shadow: 0 6px 12px var(--md-sys-color-shadow); /* Card shadow */
    background-color: var(--md-sys-color-surface); /* Card background */
    color: var(--md-sys-color-on-surface); /* Card text color */
    cursor: default; /* No pointer on expanded card */
    align-items: stretch; /* Stretch content inside */
}

.search-expandable-container > .button-content-collapsed {
    /* This styles the <button> to be transparent, inheriting styles from its parent */
    /* so the parent .search-expandable-container can act as the visual button. */
    background-color: transparent;
    color: inherit;
    border: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;

    /* Flex properties to align icon and text inside the button */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.search-expandable-container.expanded .button-content-collapsed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: absolute; /* Take out of flow during transition */
}

.button-content-expanded {
    display: none; /* Explicitly hide when not expanded */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease 0.2s, visibility 0.5s ease 0.2s; /* Fade in after the container expands */
    width: 100%;
    overflow-y: auto; /* Allow scrolling for card content */
    flex-grow: 1; /* Ensures the container expands to fill the available space */
    padding: 16px; /* Adds internal padding so content doesn't touch the edges */
    box-sizing: border-box; /* Includes padding and border in width/height calculation */
    flex-direction: column; /* Stacks form elements vertically */
}

/* This rule is now handled by the default state of .button-content-expanded, so !important is not needed. */

.search-expandable-container.expanded .button-content-expanded {
    display: flex; /* Show when expanded */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Ensure form elements inside expanded content are visible */
.button-content-expanded form {
    display: flex;
    flex-direction: column;
}

.form-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    width: 100%;
}


/* --- 4. COMPONENTS (Refined) --- */
.md-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border: none; border-radius: var(--md-sys-border-radius); font-family: var(--md-sys-font); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; text-decoration: none; }
.md-btn:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}
.md-btn-primary { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.md-btn-primary:hover, .md-btn-primary:focus-visible {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 90%, white); /* Schiarisce leggermente lo sfondo */
    box-shadow: 0 4px 8px var(--md-sys-color-shadow);
}
.md-btn-outlined {
    background-color: transparent;
    color: var(--md-sys-color-primary);
    border: 1px solid var(--md-sys-color-outline);
}
.md-btn-outlined:hover, .md-btn-outlined:focus-visible { background-color: var(--md-sys-color-surface-container); border-color: var(--md-sys-color-primary); }
.md-btn-text { background: transparent; color: var(--md-sys-color-primary); }
.md-btn-text:hover, .md-btn-text:focus-visible { background-color: var(--md-sys-color-surface-container); }
.md-btn-danger { background-color: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
.md-btn-danger:hover, .md-btn-danger:focus-visible { filter: brightness(1.1); box-shadow: 0 4px 8px var(--md-sys-color-shadow); }
.md-btn-icon { background: transparent; padding: 8px; border-radius: 50%; color: var(--md-sys-color-on-surface-variant); }
.md-btn-icon:hover, .md-btn-icon:focus-visible { background-color: var(--md-sys-color-surface-container); color: var(--md-sys-color-primary); }

/* Google Login Button */
.google-login-btn {
    background-color: #FFFFFF;
    color: #1F1F1F;
    border: 1px solid #747775;
    padding: 10px 24px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.google-login-btn:hover, .google-login-btn:focus-visible {
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
body.dark-theme .google-login-btn {
    background-color: #131314;
    color: #E3E3E3;
    border: 1px solid #8E918F;
}
body.dark-theme .google-login-btn:hover, body.dark-theme .google-login-btn:focus-visible {
    background-color: #282A2C;
}


.md-text-field { position: relative; width: 100%; }
.md-text-field label { position: absolute; top: 16px; left: 16px; pointer-events: none; transition: all 0.2s ease; background-color: var(--md-sys-color-surface); padding: 0 4px; font-size: 1rem; color: var(--md-sys-color-on-surface-variant); }
.md-text-field input, .md-text-field select { width: 100%; padding: 16px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-border-radius-small); background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); font-size: 1rem; font-family: var(--md-sys-font); transition: all 0.2s ease; }
.md-text-field input:focus, .md-text-field select:focus { outline: none; border-color: var(--md-sys-color-primary); box-shadow: 0 0 0 1px var(--md-sys-color-primary); }
.md-text-field input:focus + label, .md-text-field input:not(:placeholder-shown) + label { transform: translateY(-28px) scale(0.85); color: var(--md-sys-color-primary); }

.chip-set { display: flex; flex-wrap: wrap; gap: 12px; }
.md-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; height: 32px; border-radius: var(--md-sys-border-radius-small); border: 1px solid var(--md-sys-color-outline-variant); background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface-variant); cursor: pointer; transition: all 0.2s ease; font-size: 0.875rem; }
.md-filter-chip:hover, .md-filter-chip:focus-visible { background-color: var(--md-sys-color-surface-container); border-color: var(--md-sys-color-primary); }
.md-filter-chip.selected { background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); border-color: var(--md-sys-color-primary); font-weight: 600; }
.hidden-checkbox { display: none; }
.md-filter-chip .md-chip-icon { transition: all 0.2s ease; width: 0; opacity: 0; overflow: hidden; }
.md-filter-chip.selected .md-chip-icon { width: 18px; opacity: 1; }

.md-chip-wrapper {
    display: inline-block; /* Ensures chips are laid out inline */
    margin: 4px; /* Adds some space between chips */
}

.md-filter-chip.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    border-color: var(--md-sys-color-outline-variant);
}
.md-filter-chip.disabled:hover {
    background-color: var(--md-sys-color-surface-variant); /* No hover effect for disabled */
    border-color: var(--md-sys-color-outline-variant);
}

#category-counter { color: var(--md-sys-color-on-surface-variant); font-size: 0.9rem; margin-left: 8px; transition: all 0.2s ease; padding: 2px 6px; border-radius: var(--md-sys-border-radius-small); }
#category-counter.limit-reached { color: var(--md-sys-color-on-primary); background-color: var(--md-sys-color-primary); font-weight: 600; }
.chip-set.limit-reached .md-filter-chip:not(.selected) { opacity: 0.5; cursor: not-allowed; }

.category-toggle-container {
    display: flex;
    justify-content: flex-start;
    margin-top: 8px;
}

/* "Show More" logic for category chips */
.chip-set .md-filter-chip.extra-category {
    display: none;
}

/* When the container is expanded, show the extra categories */
.chip-set.expanded .md-filter-chip.extra-category {
    display: inline-flex; /* Or 'block' if needed, but inline-flex matches the chip */
}

#toggle-categories-btn.hidden {
    display: none;
}
.md-linear-loader { position: relative; overflow: hidden; width: 100%; height: 8px; /* Slightly increased height */ background-color: var(--md-sys-color-surface-container); margin: var(--md-sys-spacing) auto; border-radius: 4px; }
.md-linear-loader .md-linear-loader-bar {
    position: absolute;
}

/* --- Loader with text messages --- */
.loader-container {
    padding: var(--md-sys-spacing) 0;
    text-align: center;
}

.loading-text {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 8px;
}

.md-text-field-select {
    /* This container needs to be relative for the absolute positioning of its label. */
    position: relative;
}

.md-text-field-select label {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    pointer-events: none;
    transition: all 0.2s ease-in-out;
    color: var(--md-sys-color-on-surface-variant);
    background-color: var(--md-sys-color-surface); /* Ensures the label covers the select's border when floating */
    padding: 0 4px;
    line-height: 1; /* Prevents vertical alignment issues */
}

/*
 * When the select has focus or a value (via the .label-floating class),
 * the label moves up, mimicking the behavior of standard text fields.
 */
.md-text-field-select select:focus + label, .md-text-field-select.label-floating label {
    top: 0;
    font-size: 0.75rem;
    color: var(--md-sys-color-primary);
}
#results-container .md-card { background-color: var(--md-sys-color-surface); border-radius: var(--md-sys-border-radius-large); padding: 32px; border: 1px solid var(--md-sys-color-outline-variant); margin-bottom: var(--md-sys-spacing); }
.error-message { color: var(--md-sys-color-on-error-container); background-color: var(--md-sys-color-error-container); border: 1px solid var(--md-sys-color-error); padding: 20px; border-radius: var(--md-sys-border-radius); text-align: center; font-weight: 500; }

/* Styles for the summary header with copy button */
#results-container .summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

#results-container .summary-header h3 {
    margin: 0; /* Override default h3 margin */
}

#copy-summary-btn .material-symbols-outlined {
    font-size: 20px;
}

/* Style for the static, always-visible note above the summary title */
.summary-feedback {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    padding: 8px 16px;
    border-radius: var(--md-sys-border-radius-small);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 16px;
}

/* --- Image Gallery in Summary Card --- */
.summary-image-gallery {
    display: grid;
    gap: 8px;
    margin: 16px 0;
    border-radius: var(--md-sys-border-radius);
    overflow: hidden;
}

.gallery-item {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background-color: var(--md-sys-color-surface-variant);
}

.gallery-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop images to fit the container */
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* Layouts for 1, 2, or 3 images */
.gallery-items-1 { grid-template-columns: 1fr; }
.gallery-items-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-items-3 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
}
.gallery-items-3 .gallery-item:first-child { grid-column: 1 / 3; grid-row: 1 / 2; }

/* --- 5. ENHANCED PRICING PAGE --- */
.pricing-page-main {
    padding-top: 40px;
    padding-bottom: 40px; 
    max-width: 1200px; /* Increases the max-width of the pricing container */
}
.pricing-header { text-align: center; margin-bottom: 24px; }
.pricing-header h2 { font-size: 2.5rem; color: var(--md-sys-color-on-surface); }
.pricing-header p { font-size: 1.1rem; color: var(--md-sys-color-on-surface-variant); max-width: 500px; margin: 8px auto 0; }

.billing-cycle-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 600;
}

.billing-cycle-toggle .switch { position: relative; display: inline-block; width: 52px; height: 28px; }
.billing-cycle-toggle .switch input { opacity: 0; width: 0; height: 0; }
.billing-cycle-toggle .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--md-sys-color-surface-container-high); transition: .4s; border-radius: 28px; }
.billing-cycle-toggle .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
.billing-cycle-toggle input:checked + .slider { background-color: var(--md-sys-color-primary); }
.billing-cycle-toggle input:focus-visible + .slider {
    box-shadow: 0 0 0 2px var(--md-sys-color-primary);
}
.billing-cycle-toggle input:checked + .slider:before { transform: translateX(24px); }
body.dark-theme .billing-cycle-toggle .slider:before { background-color: var(--md-sys-color-surface-container-highest); }

.billing-cycle-toggle .yearly-discount {
    color: var(--md-sys-color-primary);
    font-weight: bold;
    font-size: 0.9rem;
    background-color: var(--md-sys-color-primary-container);
    padding: 2px 8px;
    border-radius: var(--md-sys-border-radius-small);
    margin-left: 8px;
}

.billing-cycle-toggle .toggle-label {
    transition: color 0.3s ease;
}

.billing-cycle-toggle .toggle-label.active {
    color: var(--md-sys-color-primary);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Default for 3 cards */
    gap: 32px; align-items: stretch;
}
.pricing-card { background-color: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-border-radius-large); transition: all 0.3s ease; display: flex; flex-direction: column; }
.pricing-card.recommended { border-color: var(--md-sys-color-primary); border-width: 2px; transform: scale(1.02); }
.pricing-card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px var(--md-sys-color-shadow); }
.pricing-card-header { padding: 32px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.pricing-card-header h3 { font-size: 1.5rem; color: var(--md-sys-color-primary); margin: 0 0 8px 0; }
.plan-description { font-size: 0.9rem; color: var(--md-sys-color-on-surface-variant); margin: 0; min-height: 40px; }
.pricing-card-body { padding: 32px; flex-grow: 1; }
.price { font-size: 2.8rem; font-weight: bold; color: var(--md-sys-color-on-surface); margin-bottom: 24px; }
.price span { font-size: 1rem; font-weight: normal; color: var(--md-sys-color-on-surface-variant); }
.pricing-card ul { list-style: none; padding: 0; margin: 0; text-align: left; }
.pricing-card li { padding: 8px 0 8px 28px; color: var(--md-sys-color-on-surface-variant); position: relative; }
.pricing-card li::before { content: '✓'; position: absolute; left: 0; color: var(--md-sys-color-primary); font-weight: bold; }
.pricing-card-footer { padding: 32px; }
.pricing-card .md-btn { width: 100%; }

.tax-notice {
    text-align: center;
    margin-top: 40px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.9rem;
}

/* --- 6. UNIFORM SITE FOOTER --- */
.footer-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    padding: 12px var(--md-sys-spacing);
    background: var(--md-sys-color-surface-container);
    border-top: 1px solid var(--md-sys-color-outline-variant);
    margin-top: auto;
}

.footer-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px; /* Consistent gap for all items */
    margin: 0;
}

/* This single rule targets all direct children of the footer content area,
   including the copyright span, all links, and the Iubenda widget. */
.footer-content > * {
    color: var(--md-sys-color-on-surface-variant); /* Uniform color */
    font-size: inherit;
    text-decoration: underline; /* Consistent link style */
}

/* --- 7. NOTIFICATIONS & FLASH MESSAGES --- */
.flash-messages {
    padding: 0 var(--md-sys-spacing);
    max-width: 900px;
    margin: var(--md-sys-spacing) auto 0;
    width: 100%;
}
.flash-message {
    padding: 16px;
    margin-bottom: 16px;
    border-radius: var(--md-sys-border-radius-small);
    font-weight: 500;
    border: 1px solid transparent;
}
.flash-success { color: var(--md-sys-color-on-primary-container); background-color: var(--md-sys-color-primary-container); border-color: var(--md-sys-color-primary); }
.flash-error { color: var(--md-sys-color-on-error-container); background-color: var(--md-sys-color-error-container); border-color: var(--md-sys-color-error); }
.flash-info { color: var(--md-sys-color-on-secondary-container); background-color: var(--md-sys-color-secondary-container); border-color: var(--md-sys-color-secondary); }

/* Stili per le Notifiche Toast (impilabili) */
#notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Spazio tra le notifiche */
    align-items: flex-end; /* Allinea le notifiche a destra (desktop) */
    pointer-events: none; /* Permette di cliccare attraverso il container */
}

.app-notification {
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    color: #fff;
    box-shadow: 0 4px 12px var(--md-sys-color-shadow);
    max-width: 350px;
    word-wrap: break-word;
    pointer-events: auto; /* Rende cliccabile la notifica stessa */
    
    /* Stato iniziale (nascosto) e animazione */
    opacity: 0;
    transform: translateX(110%);
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

/* Stato visibile */
.app-notification.show {
    opacity: 1;
    transform: translateX(0);
}

/* Colori di sfondo per tipo */
.notification-success { background-color: #28a745; }
.notification-error { background-color: #dc3545; }
.notification-info { background-color: #17a2b8; }


/* --- 8. UTILITIES AND HELPERS --- */
.hidden { display: none; }

/* Accessibility improvements for fieldset/legend */
fieldset {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0; /* Fixes flex/grid layout issues in some browsers */
}

legend {
    padding: 0; /* Resets browser default padding */
}

.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.grid-col-span-4 { grid-column: span 4; }
.grid-col-span-6 { grid-column: span 6; }
.grid-col-span-12 { grid-column: span 12; }
.category-section { border-top: 1px solid var(--md-sys-color-outline-variant); margin-top: 0; padding-top: 0; }
.category-section > .md-label { font-size: 1.1rem; font-weight: 600; color: var(--md-sys-color-on-surface); margin-bottom: 16px; display: flex; align-items: center; padding-top: 16px; }
.summary-progress-bar { display: flex; align-items: center; gap: 8px; cursor: default; }
.summary-progress-bar-track { width: 100px; height: 6px; background-color: var(--md-sys-color-surface-container); border-radius: 3px; overflow: hidden; border: 1px solid var(--md-sys-color-outline-variant); }
.summary-progress-bar-fill { height: 100%; background-color: var(--md-sys-color-primary); border-radius: 3px; transition: all 0.5s ease; }
.summary-progress-bar-fill.warning { background-color: #ff9800; }
.summary-progress-bar-fill.error { background-color: #f44336; }
.summary-progress-label { font-size: 0.8rem; font-weight: 500; white-space: nowrap; color: var(--md-sys-color-on-surface-variant); }

/* Custom Tooltip for Summary Progress Bar */
.summary-progress-bar {
    position: relative;
}

.summary-progress-bar::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%; /* Position below the bar */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.875rem;
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    margin-top: 5px; /* Space between bar and tooltip */
}

.summary-progress-bar:hover::after {
    opacity: 1;
    visibility: visible;
}

body.dark-theme .summary-progress-bar::after {
    background-color: var(--md-sys-color-surface-container-highest);
    color: var(--md-sys-color-on-surface);
}

/* --- 9. RESPONSIVE DESIGN --- */
@media (max-width: 768px) {
    body { font-size: 15px; }
    .header-content { height: auto; flex-direction: column; align-items: flex-start; padding: 12px 0; }
    .header-nav { width: 100%; justify-content: space-between; }
    .search-container { margin: 16px auto 24px; }
    .form-grid { grid-template-columns: 1fr; }
    .grid-col-span-4, .grid-col-span-6, .grid-col-span-12 { grid-column: span 1; }
    .pricing-grid { grid-template-columns: 1fr; }
    
    /* Notification adjustments for mobile */
    #notification-container {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 90vw;
        max-width: 400px;
        align-items: stretch; /* Notifications take up the full width of the container */
    }

    .app-notification {
        text-align: center;
        /* Animazione dall'alto per mobile */
        transform: translateY(-150%);
    }

    .app-notification.show {
        transform: translateY(0);
    }
}

.user-menu-trigger {
    /* Reset default button styles to act as a simple wrapper */
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    /* Accessibility and layout styles */
    cursor: pointer;
    border-radius: 50%; /* Match avatar shape for focus outline and hover effect */
}

.user-menu-trigger:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.user-menu-trigger .user-avatar {
    transition: background-color 0.2s ease;
}

.user-menu-trigger:hover .user-avatar {
    /* Apply hover effect to the avatar when the trigger is hovered */
    background-color: color-mix(in srgb, var(--md-sys-color-primary-container) 85%, black)
}

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px); /* Position below the trigger */
    right: 0;
    width: 280px; /* As per design spec */
    background-color: var(--md-sys-color-surface);
    border-radius: var(--md-sys-border-radius);
    box-shadow: 0 4px 12px var(--md-sys-color-shadow);
    border: 1px solid var(--md-sys-color-outline-variant);
    z-index: 1000; /* High z-index to overlay other elements */
    padding: 16px 0;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.user-dropdown-menu.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none; /* Disable interactions when hidden */
}

.user-info-header {
    padding: 0 16px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    margin-bottom: 16px;
}

.user-info-header p {
    margin: 0;
    line-height: 1.4;
}

.user-info-header .user-name {
    font-weight: bold;
    color: var(--md-sys-color-on-surface);
    font-size: 1.1rem;
}

.user-info-header .user-email {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.9rem;
}

.user-info-header .user-plan {
    color: var(--md-sys-color-primary);
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 4px;
    transition: color 0.3s ease;
}

.user-info-header .user-reset-time {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.9rem;
    margin-top: 4px;
}

.menu-divider {
    border: none;
    border-top: 1px solid var(--md-sys-color-outline-variant);
    margin: 8px 0;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    width: 100%; /* Ensure full width for clickable area */
    text-align: left;
    background: none;
    border: none;
    font-family: var(--md-sys-font);
    font-size: 1rem;
    cursor: pointer;
}

.menu-item:hover, .menu-item:focus-visible {
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-primary);
}

.menu-item:disabled, .menu-item:disabled:hover, .menu-item:disabled:focus-visible {
    color: var(--md-sys-color-outline);
    background-color: transparent;
    cursor: not-allowed;
}

.menu-item:disabled .material-symbols-outlined,
.menu-item:disabled:hover .material-symbols-outlined {
    color: var(--md-sys-color-outline);
}

.menu-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--md-sys-color-on-surface-variant);
}

.menu-item:hover .material-symbols-outlined, .menu-item:focus-visible .material-symbols-outlined {
    color: var(--md-sys-color-primary);
}

.menu-item.danger-item {
    color: var(--md-sys-color-error);
}

.menu-item.danger-item .material-symbols-outlined {
    color: var(--md-sys-color-error);
}

.menu-item.danger-item:hover, .menu-item.danger-item:focus-visible {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}

.menu-item.danger-item:hover .material-symbols-outlined, .menu-item.danger-item:focus-visible .material-symbols-outlined {
    color: var(--md-sys-color-on-error-container);
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .user-dropdown-menu {
        width: 100%;
        right: 0;
        left: 0;
        border-radius: 0;
        top: 64px; /* Below the header */
        box-shadow: none;
        border-top: 1px solid var(--md-sys-color-outline-variant); /* This was correct */
    }
}

/* --- 11. ACCORDION COMPONENT (for Privacy Policy) --- */
.accordion details {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    margin-bottom: 16px;
}

.accordion details:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none; /* Rimuove l'indicatore di default */
    padding: 16px 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.accordion summary::-webkit-details-marker {
    display: none; /* Rimuove l'indicatore di default su Chrome/Safari */
}

.accordion summary::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    transition: transform 0.3s ease;
}

.accordion details[open] > summary::after {
    transform: rotate(180deg);
}

.accordion-content {
    padding: 0 0 24px 0;
}

/* --- 12. KNEWVIA LOGO --- */
.knewvia-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.knewvia-logo:hover {
    transform: scale(1.02);
}

.logo-icon {
    position: relative;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%);
    border-radius: var(--md-sys-border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px var(--md-sys-color-shadow);
    overflow: hidden;
}

.logo-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    animation: shine 4s ease-in-out infinite;
}

@keyframes shine {
    0%, 100% { transform: translateX(-100%) rotate(45deg); }
    50% { transform: translateX(100%) rotate(45deg); }
}

/* News Convergence Animation */
.news-convergence {
    position: relative;
    width: 24px;
    height: 24px;
    z-index: 1;
}

.news-item {
    position: absolute;
    width: 5px;
    height: 5px;
    background: white;
    border-radius: 1px;
    opacity: 0.8;
    animation: converge 3s ease-in-out infinite;
}

.news-item:nth-child(1) {
    top: 1px;
    left: 1px;
    animation-delay: 0s;
}

.news-item:nth-child(2) {
    top: 1px;
    right: 1px;
    animation-delay: 0.3s;
}

.news-item:nth-child(3) {
    bottom: 1px;
    left: 1px;
    animation-delay: 0.6s;
}

.news-item:nth-child(4) {
    bottom: 1px;
    right: 1px;
    animation-delay: 0.9s;
}

.central-summary {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 1.5px;
    opacity: 1;
    animation: pulse 3s ease-in-out infinite;
}

@keyframes converge {
    0%, 70% { transform: scale(1); opacity: 0.8; }
    85% { transform: scale(0.4); opacity: 0.4; }
    100% { transform: scale(1); opacity: 0.8; }
}

@keyframes pulse {
    0%, 70% { transform: translate(-50%, -50%) scale(1); }
    85% { transform: translate(-50%, -50%) scale(1.2); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

.logo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
}

.brand-name {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-tertiary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--md-sys-color-primary); /* Fallback */
    letter-spacing: -0.02em;
    line-height: 1;
}

.tagline {
    font-size: 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Disabilita animazioni se l'utente preferisce reduced motion */
@media (prefers-reduced-motion: reduce) {
    .logo-icon::before,
    .news-item,
    .central-summary {
        animation: none;
    }
}

/* --- 13. EARLY ACCESS PAGE --- */
.early-access-page-main {
    padding-top: 40px;
    padding-bottom: 40px;
}

.early-access-page-main .form-container {
    max-width: 700px; /* Match the form's max-width */
}

.early-access-page-main .md-card {
    max-width: 600px;
    margin: 0 auto;
}

.early-access-page-main .form-header {
    text-align: center;
    margin-bottom: 24px;
}

.early-access-page-main .form-title {
    color: var(--md-sys-color-primary);
    margin-bottom: 8px;
}

.early-access-page-main .form-subtitle {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 1.1rem;
    margin: 0;
}

.early-access-page-main .form-field {
    margin-bottom: 20px;
}

.early-access-page-main .form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
}

.early-access-page-main .form-input,
.early-access-page-main .form-select {
    width: 100%;
}

.early-access-page-main .form-submit {
    width: 100%;
    margin-top: 12px;
}

.early-access-page-main .form-guarantee,
.early-access-page-main .powered-by {
    text-align: center;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.9rem;
    margin-top: 16px;
}

.early-access-page-main .powered-by a {
    color: var(--md-sys-color-on-surface-variant);
}