/*
 * =========================================
 * PomodoroDrive :: Liquid Glass Refactor
 * =========================================
 * This CSS has been restructured to create a cohesive "Liquid Glass"
 * design aesthetic inspired by modern UI trends (e.g., Apple's design).
 *
 * Key Principles Applied:
 * 1. Robust Design System: Centralized colors, shadows, and radii in :root.
 * 2. Glassmorphism: Consistent use of semi-transparent backgrounds with
 * backdrop-filter for a frosted glass effect.
 * 3. Depth & Elevation: Soft, multi-layered shadows to make elements float.
 * 4. Fluidity: Smooth, cubic-bezier transitions for a liquid feel.
 * 5. Cohesion: All components (modals, players, buttons) share the same design language.
 * =========================================
 */

/* 1. ROOT & DESIGN SYSTEM
   ========================================= */
:root {
  /* Fonts */
  --font-primary: 'Roboto', sans-serif;
  --font-display: 'Bebas Neue', sans-serif; /* For the timer */

  /* Colors */
  --accent-primary: #ff5252;
  --accent-hover: #ff7070;
  --text-primary: #f0f0f0;
  --text-secondary: #a0a0a0;
  --white: #ffffff;
  --black: #000000;

  /* Glassmorphism Effect */
  --glass-bg: rgba(35, 35, 40, 0.5); /* Base for glass components */
  --glass-border: 1px solid rgba(255, 255, 255, 0.15);
  --glass-blur: 16px;

  /* Shadows for depth */
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-strong: 0 8px 30px rgba(0, 0, 0, 0.4);

  /* Sizing & Radius */
  --radius-small: 8px;
  --radius-medium: 16px;
  --radius-large: 20px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-fast: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-medium: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2. GLOBAL STYLES & BACKGROUND
   ========================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  font-family: var(--font-primary);
  color: var(--text-primary);
  overflow: hidden; /* Prevent scrollbars from layout shifts */
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--black) url('photo1.webp') center/cover no-repeat;
  transition: background-image 0.5s ease-in-out;
}

/* Dark overlay for better text contrast */
.bg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 20, 30, 0.45);
  z-index: 0;
}

/* Position all core UI above the overlay */
header, main, .audio-toggle-btn, .audio-panel {
  position: relative;
  z-index: 2;
}

/* 3. CORE UI ELEMENTS (Header, Main, Timer, Controls)
   ========================================= */
header {
  position: fixed;
  top: 24px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  font-size: 1.2rem;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

main {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Mode Pills (Pomodoro, Break, etc.) */
.mode-row {
  display: flex;
  gap: 10px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  border-radius: var(--radius-pill);
  padding: 6px;
  box-shadow: var(--shadow-soft);
}

.mode {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition-fast);
}
.mode:hover {
  color: var(--text-primary);
}
.mode.active {
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow-strong);
  transform: scale(1.05);
}

/* Timer Display */
.timer-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.timer {
  font-family: var(--font-display);
  font-size: 7rem; /* Larger and more impactful */
  font-weight: 400;
  letter-spacing: 2px;
  background: linear-gradient(180deg, #ffffff 60%, #dcdcdc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Progress Bar */
.progress-bar {
  width: 250px;
  height: 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-pill);
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffffff, #e0e0e0);
  border-radius: var(--radius-pill);
  transition: width 0.5s linear;
}

/* Control Buttons */
/* This replaces the old .controls and button.primary/ghost styles */
.controls {
  display: flex;
  gap: 20px;
  align-items: center;
}

.control-btn {
  border: none;
  cursor: pointer;
  border-radius: 50%; /* Perfect circle */
  transition: var(--transition-fast);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;  /* Main button size */
  height: 72px;
}

.control-btn:hover {
  transform: scale(1.08);
}
.control-btn:active {
  transform: scale(0.96);
  transition-duration: 0.1s;
}

/* The main Start/Pause button */
.control-btn.primary {
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow-strong);
}
.control-btn.primary:hover {
  background: #f0f0f0;
}
.control-btn.primary svg {
  width: 32px;
  height: 32px;
}

/* The secondary Reset button */
.control-btn.ghost {
  background: var(--glass-bg);
  border: var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--text-primary);
  width: 56px; /* Slightly smaller */
  height: 56px;
  box-shadow: var(--shadow-soft);
}
.control-btn.ghost:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(50, 50, 55, 0.7);
}
.control-btn.ghost svg {
  width: 28px;
  height: 28px;
}

/* Re-using ghost for settings icon */
.icon-btn {
  background: var(--glass-bg);
  border: var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-medium);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}
.icon-btn:hover {
  transform: scale(1.1) rotate(15deg);
}

/* 4. SETTINGS MODAL
   ========================================= */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.modal-inner {
  width: min(500px, 95vw);
  background: var(--glass-bg);
  backdrop-filter: blur(24px); /* Extra blur for modals */
  -webkit-backdrop-filter: blur(24px);
  border: var(--glass-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-strong);
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.modal.is-visible .modal-inner {
  transform: scale(1);
  opacity: 1;
}

.modal-body {
  padding: 24px 32px;
  color: var(--text-primary);
}

.modal-header {
  display: flex;
  justify-content: flex-end; /* Only need the close button */
  align-items: center;
  margin-bottom: 16px;
}

.close-x {
  background: rgba(0,0,0,0.2);
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}
.close-x:hover {
  background: var(--accent-primary);
  color: var(--white);
  transform: rotate(90deg);
}

.settings-form .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.settings-form .row:last-of-type {
  border-bottom: none;
}
.settings-form label {
  font-weight: 500;
}
.settings-form .input-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Form inputs */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: none;
  border: var(--glass-border);
  background: rgba(0,0,0,0.3);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: var(--radius-small);
  font-size: 1rem;
  width: 80px;
  text-align: center;
  transition: var(--transition-fast);
}
input[type="number"]:focus {
  border-color: var(--accent-primary);
  background: rgba(0,0,0,0.5);
  outline: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.muted {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}
.btn-primary, .btn-gray { /* Re-skin modal buttons */
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}
.btn-primary {
  background: var(--accent-primary);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: scale(1.03);
}
.btn-gray {
  background: rgba(255,255,255,0.1);
  color: var(--text-primary);
}
.btn-gray:hover {
  background: rgba(255,255,255,0.2);
}

/* 5. AUDIO PANEL & PLAYERS
   ========================================= */
.audio-toggle-btn {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 1500;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  box-shadow: var(--shadow-strong);
  color: var(--white);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-medium);
}
.audio-toggle-btn svg {
  width: 28px;
  height: 28px;
}
.audio-toggle-btn:hover {
  transform: scale(1.1);
  background: rgba(50, 50, 55, 0.7);
}

.audio-panel {
  position: fixed;
  bottom: 100px;
  left: 24px;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.audio-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Base style for both player widgets */
.player-widget {
  width: 340px;
  padding: 16px;
  border-radius: var(--radius-large);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  box-shadow: var(--shadow-strong);
  color: var(--text-primary);
}

/* YouTube Player */
.yt-music-player {
  display: flex;
  align-items: center;
  gap: 16px;
}
.yt-music-player .album-art {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-small);
  flex-shrink: 0;
  object-fit: cover;
}
.yt-music-player .track-info {
  flex-grow: 1;
  min-width: 0;
}
.yt-music-player .song-title, .yt-music-player .song-artist {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yt-music-player .song-title {
  font-size: 1rem;
  font-weight: 600;
}
.yt-music-player .song-artist {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.yt-music-player .player-controls {
  display: flex;
  align-items: center;
}
.yt-music-player .player-controls button {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: var(--transition-fast);
  display: flex;
}
.yt-music-player .player-controls button:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.1);
}
#youtube-player-container {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

/* Background Noise Player */
.bg-noise-player {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.noise-sound-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.noise-btn {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  padding: 12px 6px;
  border-radius: var(--radius-medium);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: var(--transition-fast);
}
.noise-btn:hover {
  border-color: rgba(255,255,255,0.3);
  color: var(--text-primary);
}
.noise-btn[aria-pressed="true"] {
  background: var(--accent-primary);
  border-color: var(--accent-hover);
  color: var(--white);
  transform: scale(1.05);
}
.noise-controls {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}
.noise-controls button {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--transition-fast);
}
.noise-controls button:hover {
  color: var(--text-primary);
}

/* Volume Slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.4);
  cursor: pointer;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  border: none;
  transition: transform 0.2s ease;
}
input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.2);
}

/* 6. LOADER & ANIMATIONS
   ========================================= */
.loader-overlay {
  /* No changes needed, this animation is great */
  position: fixed;
  inset: 0;
  background: #1a1a1a;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeOut .4s 1.8s forwards;
}
.loader-car {
  width: 240px;
  height: auto;
  opacity: 0;
  animation:
    fadeIn .3s .1s forwards,
    drive .9s .4s cubic-bezier(.25, .46, .45, .94) forwards,
    exit .3s 1.3s forwards;
}
@keyframes fadeIn { to { opacity: 1 } }
@keyframes drive { to { transform: translateX(60vw) } }
@keyframes exit { to { transform: translateX(160vw); opacity: 0 } }
@keyframes fadeOut { to { opacity: 0; visibility: hidden } }

/*
 * =========================================
 * Custom Form Element Styling (Checkbox & Select)
 * =========================================
 */

/* 1. CUSTOM CHECKBOX
   ========================================= */
.custom-checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none; /* Prevents text selection on click */
  gap: 12px;
  width: 100%; /* Make the whole row clickable */
}

/* Hide the default checkbox but keep it accessible */
.custom-checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Style the visible, fake checkbox box */
.checkbox-visual {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: rgba(0,0,0,0.3);
  border: var(--glass-border);
  border-radius: var(--radius-small);
  transition: var(--transition-fast);
  position: relative;
  flex-shrink: 0; /* Prevent it from shrinking */
}

/* Style the checkmark (using a clever border trick) */
.checkbox-visual::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid var(--white);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  opacity: 0; /* Hidden by default */
  transition: opacity 0.2s ease;
}

/* Change style when the real checkbox is checked */
.custom-checkbox-label input[type="checkbox"]:checked + .checkbox-visual {
  background: var(--accent-primary);
  border-color: var(--accent-hover);
}

/* Show the checkmark when checked */
.custom-checkbox-label input[type="checkbox"]:checked + .checkbox-visual::after {
  opacity: 1;
}

/* Focus style for accessibility */
.custom-checkbox-label input[type="checkbox"]:focus-visible + .checkbox-visual {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* 2. CUSTOM SELECT (DROPDOWN)
   ========================================= */
.custom-select-wrapper {
  position: relative;
  width: 180px; /* Give it a specific width */
}

/* Style the main select box */
.custom-select-wrapper select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 8px 36px 8px 12px; /* Add padding on right for arrow */
  border: var(--glass-border);
  background: rgba(0,0,0,0.3);
  color: var(--text-primary);
  border-radius: var(--radius-small);
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.custom-select-wrapper select:focus {
  outline: none;
  border-color: var(--accent-primary);
  background: rgba(0,0,0,0.5);
}

/* Add the custom dropdown arrow */
.custom-select-wrapper::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--text-secondary);
  pointer-events: none; /* Lets clicks pass through to the select */
  transition: var(--transition-fast);
}

/* Animate arrow on hover */
.custom-select-wrapper:hover::after {
  border-top-color: var(--text-primary);
}


/*
 * =========================================
 * Sliding Tab Bar Effect (CSS Update)
 * =========================================
 */

/* Find and UPDATE this rule */
.mode-row {
  display: flex;
  position: relative; /* This is crucial for positioning the highlighter */
  gap: 10px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  border-radius: var(--radius-pill);
  padding: 6px;
  box-shadow: var(--shadow-soft);
}

/* ADD THIS ENTIRE NEW RULE */
.mode-highlighter {
  position: absolute;
  top: 6px; /* Match the parent's padding */
  left: 0;  /* We will control horizontal position with transform */
  background: var(--white);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-strong);
  /* The magic transition for the sliding effect */
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 1; /* Position it below the button text */
}

/* Find and UPDATE this rule */
.mode {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent; /* Buttons are now see-through */
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 600;
  transition: color 0.4s ease; /* Only transition the text color */
  position: relative; /* Needed for z-index to work */
  z-index: 2; /* Ensure text is on top of the highlighter */
}

/* Find and UPDATE this rule */
.mode.active {
  background: transparent; /* IMPORTANT: Remove the white background */
  color: var(--black);      /* The active button just gets black text */
  box-shadow: none;       /* The shadow is now on the highlighter */
  transform: none;        /* Remove the scale effect */
}
/* The hover effect on non-active buttons remains the same */
.mode:not(.active):hover {
  color: var(--text-primary);
}