/* --- Buttons --- */
.button {
    padding: 10px 24px; 
    border-radius: var(--md-sys-shape-corner-full);
    border: 1px solid var(--outline); 
    background-color: transparent; /* Default to outlined or text style base */
    color: var(--primary);
    font-family: var(--md-sys-typescale-label-large-font); 
    font-size: var(--md-sys-typescale-label-large-size);
    font-weight: var(--md-sys-typescale-label-large-weight);
    cursor: pointer; 
    text-align: center; 
    text-decoration: none !important;
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px;
    position: relative; 
    overflow: hidden; 
    min-height: 40px; /* M3 spec */
    transition: background-color var(--md-sys-motion-duration-s) var(--md-sys-motion-easing-standard),
                box-shadow var(--md-sys-motion-duration-s) var(--md-sys-motion-easing-standard),
                border-color var(--md-sys-motion-duration-s) var(--md-sys-motion-easing-standard),
                color var(--md-sys-motion-duration-s) var(--md-sys-motion-easing-standard);
    -webkit-appearance: none; /* Remove default browser styling */
    appearance: none;
}
.button:hover { 
    /* General hover state - M3 uses state layers, approximated here */
    background-color: color-mix(in srgb, var(--primary) 8%, transparent); /* For text/outlined */
}
.button:focus-visible { 
    outline: 2px solid var(--primary); 
    outline-offset: 2px; 
    /* M3 uses a state layer for focus too, this is a common web fallback */
}
.button:active {
    background-color: color-mix(in srgb, var(--primary) 12%, transparent); /* For text/outlined */
}

.button.filled { 
    background-color: var(--primary); 
    color: var(--on-primary); 
    border-color: transparent; 
    box-shadow: var(--md-sys-elevation-level0); /* Filled buttons have elevation 0 by default */
}
.button.filled:hover { 
    background-color: color-mix(in srgb, var(--primary) 92%, var(--on-primary) 8%); /* Lighten/Darken primary */
    box-shadow: var(--md-sys-elevation-level1); /* Hover elevation */
}
.button.filled:active { 
    background-color: color-mix(in srgb, var(--primary) 88%, var(--on-primary) 12%); 
    box-shadow: var(--md-sys-elevation-level0);
}

.button.outlined { 
    /* Base style is already outlined-like */
    border-color: var(--outline);
}
/* Hover/Active for outlined already covered by general .button states */

.button.text { 
    border-color: transparent; 
    padding: 10px 12px; /* Text buttons have less horizontal padding */
}
/* Hover/Active for text already covered by general .button states */

.button.icon-button { 
    padding: 8px; 
    border-radius: 50%; 
    min-width: 40px; 
    min-height: 40px; 
    border: none; 
    background-color: transparent; 
    color: var(--on-surface-variant); /* Default icon color */
}
.button.icon-button:hover { 
    background-color: color-mix(in srgb, var(--on-surface-variant) 8%, transparent); 
}
.button.icon-button:active { 
    background-color: color-mix(in srgb, var(--on-surface-variant) 12%, transparent); 
}
.button.icon-button svg { width: 24px; height: 24px; display: block; }

.button.compact { 
    padding: 6px 12px; 
    min-height: 32px; 
    font-size: calc(var(--md-sys-typescale-label-large-size) - 2px); 
}

.ripple { 
    position: absolute; 
    border-radius: 50%; 
    background-color: currentColor; 
    opacity: 0.2; /* M3 ripple opacity is often lower */
    transform: scale(0); 
    animation: ripple-animation var(--md-sys-motion-duration-l) var(--md-sys-motion-easing-standard); 
    pointer-events: none; 
}
@keyframes ripple-animation { 
    to { transform: scale(4); opacity: 0; } 
}

/* --- Inputs (General Styling) --- */
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="search"], 
input[type="tel"], 
input[type="url"], 
textarea {
    background-color: var(--surface-container-highest);
    border: 1px solid var(--outline);
    border-radius: var(--md-sys-shape-corner-xs); /* M3 uses 4px for text fields typically */
    padding: 16px; /* M3 text field padding */
    color: var(--on-surface);
    font-family: var(--md-sys-typescale-body-large-font);
    font-size: var(--md-sys-typescale-body-large-size);
    line-height: 20px/16px; /* (20px target height / 16px font size) */
    transition: border-color var(--md-sys-motion-duration-s) ease, 
                box-shadow var(--md-sys-motion-duration-s) ease;
    width: 100%; /* Make them block-like by default */
    min-height: 56px; /* M3 text field height */
}
input[type="text"]:focus, 
textarea:focus {
    border-color: var(--primary);
    outline: none; 
    box-shadow: 0 0 0 1px var(--primary); /* Focus indicator */
}
input[type="text"]::placeholder, 
textarea::placeholder { 
    color: var(--on-surface-variant); 
    opacity: 1; 
}
textarea {
    min-height: 112px; /* Roughly two lines of text fields */
    resize: vertical;
}


/* --- FAB (Floating Action Button) --- */
.fab {
    position: fixed; 
    bottom: calc(16px + var(--safe-area-inset-bottom)); /* M3 FAB distance from edge */
    right: calc(16px + var(--safe-area-inset-right));
    width: 56px; /* Standard FAB size */
    height: 56px; 
    background-color: var(--primary-container); 
    color: var(--on-primary-container);
    border-radius: var(--md-sys-shape-corner-l); /* 16px for standard FAB */
    box-shadow: var(--md-sys-elevation-level3);
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer;
    transition: all var(--md-sys-motion-duration-m) var(--md-sys-motion-easing-standard); 
    z-index: 1000;
    overflow: hidden; /* For ripple */
}
.fab.small { width: 40px; height: 40px; border-radius: var(--md-sys-shape-corner-m); } /* 12px */
.fab.large { width: 96px; height: 96px; border-radius: var(--md-sys-shape-corner-xl); } /* 28px */
.fab.extended { width: auto; padding: 0 16px; }
.fab.extended .fab-icon { margin-right: 8px; }
.fab.extended .fab-label { font-family: var(--md-sys-typescale-label-large-font); }

.fab svg.fab-icon { width: 24px; height: 24px; }
.fab:hover { 
    box-shadow: var(--md-sys-elevation-level4); 
    background-color: color-mix(in srgb, var(--primary-container) 90%, var(--on-primary-container) 10%); /* Hover state layer */
}
.fab:active {
    box-shadow: var(--md-sys-elevation-level3);
}

/* Morphing FAB example */
.fab.morphing-target { 
    width: 320px; /* Example expanded width */
    height: auto; 
    min-height: 56px;
    border-radius: var(--md-sys-shape-corner-xl); /* 28px for expanded surface */
    padding: 16px; 
    align-items: flex-start; 
    flex-direction: column; 
    overflow: hidden; /* Clip content during morph */
    opacity: 0; /* Start hidden for morph animation */
    transform: scale(0.8); 
    pointer-events: none;
    /* clip-path: circle(28px at calc(100% - 28px - 16px) calc(100% - 28px - 16px)); Initial small circle */
}
.fab.morphing-target.active { 
    opacity: 1; 
    transform: scale(1); 
    pointer-events: auto;
    /* clip-path: circle(150% at calc(100% - 28px - 16px) calc(100% - 28px - 16px)); Large circle to reveal */
}
.fab-morph-content { display: none; width: 100%; }
.fab.morphing-target.active .fab-morph-content { display: block; }
.fab.morphing-target.active .fab-icon { display: none; } 
.fab-morph-content h4 { 
    margin-top:0; 
    margin-bottom: 12px; 
    color: var(--on-primary-container); 
    font-family: var(--md-sys-typescale-title-large-font);
}
.fab-morph-content .button.text { 
    width: 100%;
    justify-content: flex-start; 
    margin-bottom: 8px;
    padding: 12px 16px; /* M3 menu item like padding */
    color: var(--on-primary-container); 
    border-radius: var(--md-sys-shape-corner-xs);
}
.fab-morph-content .button.text:hover {
    background-color: color-mix(in srgb, var(--on-primary-container) 12%, transparent);
}

/* --- Split Button --- */
.split-button-container { 
    display: inline-flex; 
    position: relative; 
    border-radius: var(--md-sys-shape-corner-full); 
    overflow: visible; 
    box-shadow: var(--md-sys-elevation-level1); 
}
.split-button-main { 
    border-top-right-radius: 0; 
    border-bottom-right-radius: 0;
    border-right-width: 0; /* Main button has no right border if trigger is present */
}
.split-button-dropdown-trigger { 
    padding: 10px; 
    background-color: var(--primary); 
    color: var(--on-primary); 
    border: 1px solid var(--primary); /* Match main button border color */
    border-left: 1px solid color-mix(in srgb, var(--on-primary) 30%, transparent); /* Separator line */
    cursor: pointer; 
    transition: background-color var(--md-sys-motion-duration-s) ease; 
    border-top-right-radius: var(--md-sys-shape-corner-full); 
    border-bottom-right-radius: var(--md-sys-shape-corner-full); 
    display: flex; align-items: center;
}
.split-button-dropdown-trigger:hover { background-color: color-mix(in srgb, var(--primary) 90%, black 10%); }
.split-button-dropdown-trigger svg { display: block; width: 20px; height: 20px; }
.split-button-options { 
    display: none; 
    position: absolute; 
    top: calc(100% + 8px); /* M3 menu offset */ 
    right: 0; 
    background-color: var(--surface-container); 
    border-radius: var(--md-sys-shape-corner-xs); /* M3 menu corner */
    box-shadow: var(--md-sys-elevation-level2); /* M3 menu elevation */
    z-index: 100; 
    min-width: 180px; /* M3 menu min width */
    overflow: hidden; 
    padding: 8px 0; /* M3 menu vertical padding */
}
.split-button-options.active { display: block; }
.split-button-options button { /* Styling for items inside the dropdown */
    display: flex; /* Use flex for alignment */
    align-items: center;
    width: 100%; 
    padding: 0 12px; /* M3 menu item horizontal padding */
    height: 48px; /* M3 menu item height */
    background: none; 
    border: none; 
    color: var(--on-surface); 
    text-align: left; 
    cursor: pointer; 
    font-family: var(--md-sys-typescale-label-large-font);
    font-size: var(--md-sys-typescale-label-large-size);
}
.split-button-options button:hover { background-color: var(--surface-container-high); }

/* --- Modals --- */
.modal-overlay { 
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background-color: var(--surface-dim); /* M3 scrim color */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 10000; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity var(--md-sys-motion-duration-m) var(--md-sys-motion-easing-standard), 
                visibility 0s var(--md-sys-motion-duration-m) ease; 
}
.modal-overlay.active { 
    opacity: 1; 
    visibility: visible; 
    transition-delay: 0s; 
}
.modal-content { 
    background-color: var(--surface-container-high); /* M3 Dialog surface */
    padding: 24px; 
    border-radius: var(--md-sys-shape-corner-xl); /* M3 Dialog shape */
    box-shadow: var(--md-sys-elevation-level3); /* M3 Dialog elevation */
    max-width: calc(100% - 32px); /* Ensure padding from viewport edges */
    width: 560px; /* M3 Dialog typical max width */
    transform: scale(0.95) translateY(16px); /* Entrance animation */
    transition: transform var(--md-sys-motion-duration-m) var(--md-sys-motion-easing-emphasized),
                opacity var(--md-sys-motion-duration-s) var(--md-sys-motion-easing-standard);
    opacity: 0;
    display: flex;
    flex-direction: column;
}
.modal-overlay.active .modal-content { 
    transform: scale(1) translateY(0); 
    opacity: 1;
}
.modal-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 16px; /* Space between header and body */
    padding-bottom: 0; /* M3: No icon means no specific top padding, handled by overall padding */
}
.modal-header .button.icon-button { /* Close button positioning */
    margin: -12px -12px -12px 12px; /* Pull to edge with M3 spacing */
}
.modal-header h2 { 
    margin: 0; 
    font-family: var(--md-sys-typescale-headline-large-font); /* M3 headline-small for dialogs */
    font-size: 24px; /* headline-small size */
    line-height: 32px; /* headline-small line height */
    font-weight: 400;
    color: var(--on-surface);
}
.modal-content p#modalDescription { /* Body text styling */
    font-family: var(--md-sys-typescale-body-large-font);
    color: var(--on-surface-variant);
    margin-bottom: 24px; /* Space before actions */
    flex-grow: 1; /* Allow body to take up space if needed */
}
.modal-actions { 
    margin-top: 24px; 
    display: flex; 
    justify-content: flex-end; 
    gap: 8px; 
}

/* --- Animated Wave Progress Bar --- */
.wave-progress-bar { 
    width: 100%; 
    height: 4px; /* M3 progress indicator height */
    background-color: var(--surface-variant); 
    border-radius: var(--md-sys-shape-corner-full); 
    overflow: hidden; 
    position: relative; 
    margin: 16px 0; 
}
.wave-progress-bar .progress-fill { 
    height: 100%; 
    background-color: var(--primary); 
    border-radius: var(--md-sys-shape-corner-full); 
    position: absolute; 
    top: 0; left: 0; width: 0%; 
    transition: width var(--md-sys-motion-duration-l) var(--md-sys-motion-easing-standard); 
}
.wave-progress-bar .wave-svg { 
    position: absolute; 
    bottom: -8px; /* Position waves below fill line slightly */
    left: 0; 
    width: 100%; 
    height: 16px; /* Make SVG taller for more wave visibility */
    opacity: 0.2; 
    transform: translateX(0); /* Initial position for animation */
}
.wave-progress-bar .wave-svg path { 
    fill: var(--primary); 
    animation: wave-animation 2s infinite linear;
}
.wave-progress-bar .wave-svg path:nth-child(2) { 
    animation-delay: -0.7s; 
    animation-duration: 2.8s; 
    opacity: 0.6; 
}
@keyframes wave-animation { 
    0% { transform: translateX(-50%); } /* Animate half the wave width */
    100% { transform: translateX(0%); } 
}

/* Lottie Animation Container */
.lottie-container { width: 100px; height: 100px; margin: 20px auto; }