/* General Body and Layout */
html, body {
    height: 100%;
}

body {
    background-color: #262626; /* Dark background */
    font-family: 'Space Grotesk', sans-serif;
    position: relative;
    overflow: hidden; /* Prevent scroll bars if background is larger */
}

/* Background Image Container */
#background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1; /* Place behind other content */
    /* filter: brightness(0.7) blur(3px);  */
    filter: blur(1px); 
    transition: filter 0.5s ease-in-out; /* Smooth transition for filter changes */
}

#background-container.hidden {
    filter: brightness(0) blur(10px); /* Hide effect */
}

#background-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the entire container */
    object-position: center;
    transition: opacity 0.5s ease-in-out; /* Smooth transition for image changes */
}

/* YouTube Player (hidden in background) */
#player {
    position: absolute;
    top: -100px; /* Hide off-screen */
    left: 0;
    width: 100%;
    height: calc(100% + 200px); /* Make it larger to fill space */
    pointer-events: none; /* Make it unclickable */
    z-index: -2; /* Ensure it's behind the image and container */
}

/* Cover Container for Main Content */
.cover-container {
    max-width: 60em; /* Max width for central content */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push nav to top, footer to bottom */
    height: 100%;
    z-index: 1; /* Place above background */
    position: relative;
}

/* Main Content Area */
main {
    flex-grow: 1; /* Allow main content to expand */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    padding-top: 20px;
    padding-bottom: 20px;
}

/* --- Pomodoro Mode Buttons --- */
.pomodoro-modes {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.pomodoro-btn {
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    border-radius: 2rem; /* Keep rounded corners */
    /* Default style for non-active buttons (outline effect) */
    background-color: transparent; /* Transparent background */
    color: #f0f0f0; /* Light text color */
    border: 1px solid rgba(255, 255, 255, 0.4); /* White border with some transparency */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, font-weight 0.3s ease;
    font-weight: normal; /* Normal weight for non-active */
}

.pomodoro-btn:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Slight hover effect */
    border-color: rgba(255, 255, 255, 0.6);
}

.pomodoro-btn.active {
    /* Active button style (filled) */
    background-color: #fff; /* White background */
    color: #262626; /* Dark text for active button */
    border-color: #fff; /* Solid white border */
    font-weight: bold; /* Bold text for active button */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* Optional: subtle glow */
}

/* Timer Display */
.timer {
    font-size: 8rem; /* Large font size for timer */
    line-height: 1;
    margin-bottom: 30px;
    font-weight: bold;
}

/* Control Buttons (Start/Stop/Reset) - NEW styles for start/pause */
#control {
    display: flex; /* Use flexbox for horizontal alignment */
    align-items: center; /* Vertically align items in the middle */
    justify-content: center; /* Center the buttons horizontally */
    gap: 10px; /* Space between buttons */
}

.control-btn { /* NEW class for start/pause buttons */
    padding: 0.6rem 1.2rem;
    font-size: 1.1rem; /* Slightly larger font */
    border-radius: 2rem; /* Make them rounded too */
    background-color: #fff; /* White background */
    color: #262626; /* Dark text */
    border: 1px solid #fff; /* White border */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    font-weight: bold;
    min-width: 120px;
}

.control-btn:hover {
    background-color: #262626;
    color: #fff;
    border-color: #262626; /* Keep border white on hover */
}

.btn-restart, .btn-settings { /* Apply restart styles to settings button too */
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px; /* Match approximate height of buttons for alignment */
    width: 40px;
    text-decoration: none;
    color: inherit; /* Inherit text color from parent */
}

.btn-restart:hover, .btn-settings:hover {
    opacity: 1;
}

/* --- Bottom Controls (Music and Fullscreen) --- */
.bottom-controls {
    display: flex;
    justify-content: space-between; /* Push left and right groups apart */
    align-items: center;
    padding: 15px 20px;
    /* REMOVED background styles: */
    /* background: rgba(0, 0, 0, 0.4); */
    /* border-top: 1px solid rgba(255, 255, 255, 0.1); */
    /* backdrop-filter: blur(5px); */
    /* -webkit-backdrop-filter: blur(5px); */
    /* border-radius: 0 0 15px 15px; */
    width: 100%;
}

/* Container for Play/Pause button and Music Info (LEFT side) */
.lofi-info-section {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between play/pause button and info */
    flex-grow: 1; /* Allow it to take available space */
    justify-content: flex-start; /* Align content to the left */
    min-width: 0; /* Ensures content inside can shrink */
    max-width: 60%; /* Limit width to give space to other controls */
}

/* Style for the Play/Pause button specifically within the info section */
.play-pause-button-in-info {
    font-size: 1.5rem; /* Make it a bit larger */
    padding: 8px 10px; /* Adjust padding */
    display: flex; /* Use flex for centering icon */
    justify-content: center;
    align-items: center;
    border-radius: 50%; /* Make it perfectly round */
    background: rgba(255, 255, 255, 0.1); /* Subtle background */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Border */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2); /* Subtle shadow */
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
    text-decoration: none;

}

.play-pause-button-in-info:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Music Info Text Styles */
.lofi-info {
    text-align: left;
    flex-shrink: 1; /* Allow info section to shrink */
    min-width: 0; /* Important for text-overflow to work */
    overflow: hidden; /* Hide overflow */
}

.lofi-text {
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden;    /* Hide overflowed text */
    text-overflow: ellipsis; /* Show ellipsis (...) for overflowed text */
    max-width: 100%; /* Important for text-overflow to work correctly */
    font-size: 0.9rem;
    line-height: 1.3;
}

#video-title {
    font-weight: bold;
    font-size: 1rem;
    color: #fff;
}

.lofi-credit a {
    color: inherit; /* Inherit text color */
    text-decoration: underline;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
.lofi-credit a:hover {
    opacity: 1;
}

/* Right-side controls group (Lofi Controls + Fullscreen) */
.bottom-right-group {
    display: flex;
    align-items: center;
    gap: 15px; /* Adjust gap between lofi controls and fullscreen */
}

/* Lofi Music Controls (Mute/Next/Volume) */
.lofi-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-lofi-control {
    font-size: 1.1rem; /* Adjust icon size */
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.btn-lofi-control:hover {
    opacity: 1;
}

.lofi-volume-slider {
    width: 80px; /* Adjust as needed */
    height: 4px; /* Thin slider track */
    -webkit-appearance: none; /* Remove default styling for WebKit browsers */
    appearance: none; /* Standard property */
    background: rgba(255, 255, 255, 0.3); /* Transparent white track */
    border-radius: 2px;
    outline: none; /* Remove blue outline on focus */
    cursor: pointer;
    transition: background 0.2s;
}

/* Slider Thumb (circle) styles */
.lofi-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.lofi-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Fullscreen Controls */
.fullscreen-controls {
    display: flex;
    align-items: center;
}

.btn-fullscreen {
    font-size: 1.2rem;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.btn-fullscreen:hover {
    opacity: 1;
}

/* --- REVISED: Settings Modal Styles (Simple, Modern, Clean & Consistent - Modal Popup Only) --- */
/*
   This revision focuses ONLY on the visual styling of the existing modal popup UI.
   It aims for a clean, simple, and modern look with precise alignment,
   consistent button styles matching the main page, and green accents.
   No changes to HTML or JavaScript are intended or required by this CSS.
*/
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: #262626; /* Match main body background for consistency */
    border-radius: 8px; /* Slightly less rounded for a modern edge */
    padding: 35px 45px; /* Generous padding for clean layout */
    width: 90%;
    max-width: 550px; /* Optimized width */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.7); /* Subtle, sharp shadow */
    color: #f0f0f0; /* Light text color */
    transform: translateY(-15px); /* Gentle slide-in effect */
    transition: transform 0.3s ease, opacity 0.3s ease;
    border: none; /* No visible border for a flatter, simpler look */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    max-height: 90vh; /* Prevent modal from exceeding viewport height */
    overflow-y: auto; /* Allow content to scroll if it overflows */
    box-sizing: border-box; /* Include padding in element's total width and height */
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
    opacity: 1;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px; /* Space below header */
    padding-bottom: 20px; /* Padding for the separator */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Thin, subtle separator */
}

.modal-header h2 {
    margin: 0;
    font-size: 2.5rem; /* Prominent title */
    font-weight: 700;
    color: #ffffff; /* Pure white for title */
    text-align: left; /* Explicitly left-aligned */
}

.close-button {
    background: none;
    border: none;
    font-size: 3rem; /* Large 'x' for easy clicking */
    color: #a0a0a0; /* Soft grey for the 'x' */
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s ease; /* Simpler transition */
}

.close-button:hover {
    color: #ffffff; /* White on hover */
}

.modal-body {
    flex-grow: 1; /* Allows body to expand and push footer down */
}

.settings-section {
    margin-bottom: 35px; /* Generous spacing between sections */
    padding-bottom: 25px; /* Padding for the separator */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Very subtle separator */
}

.settings-section:last-child {
    border-bottom: none; /* No border for the last section */
    margin-bottom: 0;
    padding-bottom: 0;
}

.settings-section h3 {
    font-size: 1.7rem; /* Section heading */
    margin-top: 0;
    margin-bottom: 20px; /* Space below heading */
    color: #ffffff; /* White color for headings */
    font-weight: 600;
    text-align: left; /* Explicitly left-aligned */
}

/* Theme Options - Clean Grid Layout */
.theme-options {
    display: grid;
    /* Responsive grid: 2 columns on larger screens, adjust based on content */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px 30px; /* Generous gaps for clear separation */
    align-items: center;
    justify-content: start; /* Align items to the start of the grid cell */
}

.theme-options label {
    display: flex; /* Use flex for precise alignment of radio and text */
    align-items: center;
    gap: 15px; /* Space between radio and text */
    cursor: pointer;
    font-size: 1.05rem; /* Readable font size */
    color: #e0e0e0; /* Softer white text */
    transition: color 0.2s ease;
    white-space: nowrap; /* Prevent text wrapping within a label */
}

.theme-options label:hover {
    color: #ffffff; /* White text on hover */
}

.theme-options input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 24px; /* Standard radio button size */
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.4); /* Match pomodoro-btn border style for consistency */
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.theme-options input[type="radio"]:checked {
    border-color: #4CAF50; /* Green border when checked */
    background-color: #4CAF50; /* Green background when checked */
}

.theme-options input[type="radio"]:checked::before {
    content: '';
    display: block;
    width: 12px; /* Inner dot */
    height: 12px;
    background: #262626; /* Dark dot to contrast with green (modal's bg) */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Toggle Switch (for notifications) - Modern Look with Green */
.notification-toggle-group {
    display: flex;
    align-items: center; /* Crucial for vertical alignment of toggle and label */
    gap: 20px; /* Space between toggle and label */
    padding: 5px 0;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 55px; /* Standard width */
    height: 30px; /* Standard height */
    vertical-align: middle;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider { /* The track */
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.3); /* Match general border transparency */
    transition: .4s;
    border-radius: 30px; /* Fully rounded track */
}

.slider:before { /* The thumb/handle */
    position: absolute;
    content: "";
    height: 22px; /* Size of the thumb */
    width: 22px;
    left: 4px; /* Offset from left */
    bottom: 4px;
    background-color: #f0f0f0; /* Off-white thumb */
    border-radius: 50%; /* Round thumb */
    transition: .4s;
}

input:checked + .slider {
    background-color: #4CAF50; /* Green when on */
}

input:focus + .slider {
    box-shadow: 0 0 1px #4CAF50; /* Green shadow on focus */
}

input:checked + .slider:before {
    transform: translateX(25px); /* Move thumb to the right */
    background-color: #ffffff; /* White thumb when on (contrasts with green) */
}

.toggle-label {
    font-size: 1.05rem; /* Readable font size */
    color: #e0e0e0; /* Soft white text */
    line-height: 1.4; /* Better readability */
    flex-grow: 1; /* Allow label to take remaining space */
    text-align: left; /* Ensure label text is left-aligned */
}

.modal-footer {
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 15px; /* Space between buttons, matching main page */
    padding-top: 30px; /* Space above footer */
    border-top: 1px solid rgba(255, 255, 255, 0.08); /* Separator */
    margin-top: 20px; /* Space from content above */
}

.modal-info-text {
    font-size: 0.85rem; /* Smaller font for disclaimers/info */
    color: #b0b0b0; /* Softer grey for less emphasis */
    line-height: 1.5;
    text-align: left; /* Ensure left alignment */
    width: 100%; /* Take full width */
}

.modal-info-text p {
    margin-bottom: 0.8em; /* Space between paragraphs */
    margin-top: 0;
}

.modal-info-text p:last-child {
    margin-bottom: 0;
}

.modal-info-text a {
    color: #4CAF50; /* Green links for interaction */
    text-decoration: none; /* No underline by default */
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.modal-info-text a:hover {
    color: #6CD970; /* Lighter green on hover */
    text-decoration: underline; /* Underline on hover */
}


/* Modal Buttons (Matching main page buttons for consistency) */
.modal-footer .btn {
    padding: 0.6rem 1.2rem; /* Match pomodoro-btn padding */
    font-size: 1rem; /* Match pomodoro-btn font size */
    border-radius: 2rem; /* Match pomodoro-btn border-radius */
    font-weight: bold; /* Match active pomodoro-btn font-weight */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    min-width: 120px; /* Match control-btn min-width */
    text-align: center;
    box-shadow: none; /* Keep flat for modern/simple */
}

.modal-footer .btn-secondary {
    background-color: transparent; /* Match pomodoro-btn default */
    color: #f0f0f0; /* Match pomodoro-btn default */
    border: 1px solid rgba(255, 255, 255, 0.4); /* Match pomodoro-btn default */
}
.modal-footer .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Match pomodoro-btn hover */
    border-color: rgba(255, 255, 255, 0.6); /* Match pomodoro-btn hover */
    color: #f0f0f0;
}

.modal-footer .btn-primary {
    background-color: #fff; /* Match pomodoro-btn active */
    color: #262626; /* Match pomodoro-btn active */
    border: 1px solid #fff; /* Match pomodoro-btn active */
}
.modal-footer .btn-primary:hover {
    background-color: #e0e0e0; /* Slightly darker white on hover */
    border-color: #e0e0e0;
    color: #262626;
}

/* --- Responsive Design (Mobile First adjustments) --- */
@media (max-width: 768px) {
    .cover-container {
        padding: 15px; /* Reduce padding on smaller screens */
    }

    /* Pomodoro Mode Buttons - Responsive Adjustments */
    .pomodoro-modes {
        /* Remove ALL specific mobile styles for .pomodoro-modes */
        /* flex-direction: row; */ /* REMOVED */
        /* flex-wrap: wrap; */ /* REMOVED */
        /* justify-content: center; */ /* This can stay if you want it centered */
        /* gap: 8px; */ /* REMOVED - will revert to desktop gap */
        margin-bottom: 15px;
        /* width: 100%; */ /* REMOVED */
        /* Revert to desktop behavior: display: flex; justify-content: center; gap: 10px; */
    }
    .pomodoro-btn {
        /* Remove ALL specific mobile styles for .pomodoro-btn */
        /* flex: 1 1 auto; */ /* REMOVED */
        /* max-width: 32%; */ /* REMOVED */
        /* margin: 0; */ /* REMOVED */
        padding: 0.5rem 0.8rem; /* Keep slightly reduced padding */
        font-size: 0.85rem; /* Keep slightly smaller font size */
        /* Revert to desktop behavior: width auto, padding 0.6rem 1.2rem */
    }

    .timer {
        font-size: 5rem; /* Smaller timer font size */
        margin-bottom: 20px;
    }

    /* Control buttons responsive adjustments */
    #control {
        gap: 8px; /* Reduce gap on small screens */
    }
    .control-btn {
        min-width: 90px; /* Smaller min-width for control buttons */
        font-size: 0.9rem;
        padding: 0.5rem 0.8rem;
    }
    .btn-restart {
        font-size: 1.2rem;
        height: 36px; /* Adjust height for alignment */
        width: 36px;
    }

    /* Bottom controls stack vertically */
    .bottom-controls {
        flex-direction: column;
        align-items: flex-start; /* Align content to the left */
        gap: 10px;
        padding: 10px 15px;
    }

    /* Info section takes full width on small screens */
    .lofi-info-section {
        width: 100%;
        margin-bottom: 5px;
        max-width: 100%; /* Ensure it uses full available width */
    }

    /* Right-side group takes full width and justifies content */
    .bottom-right-group {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap; /* Allow wrapping if items are too wide */
    }

    .lofi-controls {
        flex-grow: 1; /* Allow lofi controls to expand */
        justify-content: flex-start; /* Align to the left within its space */
        gap: 8px; /* Slightly smaller gap */
    }
    .lofi-volume-slider {
        width: 60px; /* Smaller slider on small screens */
    }
    .fullscreen-controls {
        margin-left: auto; /* Push fullscreen to the right */
    }

    .btn-lofi-control, .btn-fullscreen {
        font-size: 1rem; /* Slightly smaller icons */
    }

    /* REVISED: Settings Modal Media Query Styles */
    .modal-content {
        padding: 25px 30px; /* Adjusted padding for smaller screens */
        max-width: 95%; /* Adjust width */
        max-height: 95vh; /* Adjust height */
    }
    .modal-header {
        margin-bottom: 25px;
        padding-bottom: 15px;
    }
    .modal-header h2 {
        font-size: 2rem; /* Smaller title on mobile */
    }
    .close-button {
        font-size: 2.5rem; /* Smaller 'x' on mobile */
    }
    .settings-section {
        margin-bottom: 30px;
        padding-bottom: 20px;
    }
    .settings-section h3 {
        font-size: 1.5rem; /* Smaller section heading on mobile */
    }
    .theme-options {
        grid-template-columns: 1fr; /* Stack themes vertically on small screens */
        gap: 15px; /* Adjusted gap */
    }
    .theme-options label {
        font-size: 1rem; /* Slightly smaller text */
    }
    .theme-options input[type="radio"] {
        width: 22px; /* Adjust size */
        height: 22px;
    }
    .theme-options input[type="radio"]:checked::before {
        width: 10px;
        height: 10px;
    }

    .notification-toggle-group {
        gap: 15px;
    }
    .toggle-switch {
        width: 50px; /* Adjust size */
        height: 28px;
    }
    .slider:before {
        height: 20px; /* Adjust thumb size */
        width: 20px;
        left: 4px;
        bottom: 4px;
    }
    input:checked + .slider:before {
        transform: translateX(22px); /* Adjust thumb travel */
    }
    .toggle-label {
        font-size: 1rem;
    }

    .modal-footer {
        flex-direction: column; /* Stack buttons vertically */
        gap: 15px; /* Adjusted gap */
        padding-top: 25px;
    }
    .modal-footer .btn {
        width: 100%; /* Full width buttons */
        font-size: 1rem; /* Slightly smaller font */
        padding: 0.8rem 1.6rem;
        min-width: unset; /* Remove min-width constraint */
    }
}