/* =========================================================
   Luxury Glass UI – Full Reskin (Option D)
   - Frosted glass panels (settings/controls)
   - Crystal glass orb (breathing circle)
   - Equal-width fields (labels | field | unit)
   - More top spacing (idle & timer)
   - No opacity fade for the circle (only hidden before start)
   ========================================================= */

/* ---------------------------
   Theme tokens (tweak here)
--------------------------- */
:root{
  /* Surface palette */
  --bg-overlay: rgba(10, 14, 22, 0.55);
  --glass-fill: rgba(255,255,255,0.12);
  --glass-stroke: rgba(255,255,255,0.28);
  --glass-inner-stroke: rgba(255,255,255,0.55);

  /* Text */
  --text: #ECEFF4;
  --text-dim: #D8DEE9;

  /* Accent (buttons, glow) */
  --accent: #76A9FF;              /* icy blue */
  --accent-2: #00E0D8;            /* teal glow */

  /* Buttons */
  --btn-bg: rgba(255,255,255,0.18);
  --btn-stroke: rgba(255,255,255,0.32);
  --btn-hover: rgba(255,255,255,0.26);
  --btn-active: rgba(255,255,255,0.20);

  /* Crystal Orb */
  --circle-size: 240px;           /* desktop; mobiel wordt kleiner */
  --scale: 0.6;                   /* base (klein) */
  --halo: rgba(118,169,255,0.35);
  --halo-strong: rgba(0,224,216,0.45);

  /* Transition times (JS overschrijft durations per fase) */
  --inhale-time: 4s;
  --hold-time: 4s;
  --hold2-time: 4s;
  --exhale-time: 4s;

  /* Easing */
  --phase-ease: linear;           /* wil je natuurlijker? cubic-bezier(.47,0,.39,1) */
}

/* ---------------------------
   Page background & layout
--------------------------- */
body.zen-mode{
  margin:0; padding:0; height:100vh;
  background:
    radial-gradient(1200px 800px at 20% -10%,
      rgba(118,169,255,0.18), transparent 60%),
    radial-gradient(900px 900px at 110% 40%,
      rgba(0,224,216,0.12), transparent 55%),
    url('../images/timer-background.png') no-repeat center/cover fixed;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text);
  display:flex; justify-content:center; align-items:center;
  position:relative; overflow:hidden;
  opacity:0; transition: opacity 800ms ease-in;
}
body.zen-mode.loaded { opacity:1; }

.zen-overlay{
  position:fixed; inset:0;
  background: var(--bg-overlay);
  backdrop-filter: blur(10px);
  z-index:1;
}

.zen-content{
  position:relative; z-index:2;
  height:100vh; width:100%;
  padding: 2em;             /* basis */
  display:flex; flex-direction:column;
  justify-content:center;   /* idle: mooi gecentreerd */
  align-items:center; text-align:center;
  gap: 14px;
}

/* Meer ruimte boven settings-box (alleen in idle) */
body:not(.timer-running) #settings-box{
  margin-top: 3.75em;       /* naar smaak: 3–5em */
}

/* Timer-modus: meer ruimte boven de cirkel */
body.timer-running .zen-content{
  padding-top: 3em !important; /* naar smaak: 2–5em */
  padding-bottom: 2em;
  justify-content: flex-start;  /* cirkel hoger/lager sturen via padding */
}

/* ---------------------------
   Back button (glass)
--------------------------- */
.zen-back-button{
  position:absolute; top:1.5em; left:1.5em; z-index:3;
  padding: 8px 14px; font-size: 0.95em; color: var(--text);
  text-decoration:none; border-radius:12px;
  background: var(--btn-bg);
  border:1px solid var(--btn-stroke);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.25),
    inset 0 0 0.5px var(--glass-inner-stroke);
  transition: all 220ms ease;
}
.zen-back-button:hover{
  background: var(--btn-hover);
  transform: translateY(-2px);
}

/* Verberg back-button in timer-modus (optioneel) */
body.timer-running .zen-back-button{ display:none !important; }

/* ---------------------------
   Settings Box (Luxury Glass)
--------------------------- */
.settings-box{
  width: 90%; max-width: 420px;
  padding: 2.4em 2em;
  border-radius: 22px;

  background: var(--glass-fill);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 18px 44px rgba(0,0,0,0.35),
    inset 0 0 0.5px var(--glass-inner-stroke);
}




.settings-title{
  margin: 0 0 1.2em 0;
  font-size: 1.15em; letter-spacing: 0.3px;
  color: var(--text); opacity: 0.92;
}

/* Form grid: label | field | unit  (alle velden exact even breed) */
.settings-row{
  display:grid;
  grid-template-columns:
    minmax(110px, 1fr)      /* label */
    minmax(240px, 320px)    /* VELD: gelijke breedte voor alle inputs/selects */
    minmax(50px, 0.7fr);    /* unit */
  align-items:center;
  gap: 0.9em;
  margin-bottom: 1em;
}

.settings-label, .settings-unit{
  color: var(--text); opacity: 0.88; font-size: 1em;
}
.settings-label{ text-align:right; white-space: normal; }
.settings-unit { white-space: nowrap; text-align: left; }

/* Field appearance (inputs + selects gelijk) */
.settings-select{
  width: 100% !important; box-sizing: border-box;
  appearance:none; text-align:center;
  padding: 10px 12px; line-height: 1.25; font-size: 1rem;
  color: var(--text);

  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 14px;
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 0 0.5px rgba(255,255,255,0.65),
    0 10px 26px rgba(0,0,0,0.28);
}
.settings-select option{
  font-size: 1rem;
  background: rgba(12,14,22,0.85);
  color: var(--text);
}

/* Custom fields start hidden; jouw JS toont ze na eerste technique-keuze */
.hidden{ display:none !important; }

/* Number spinners verbergen (visuele consistentie) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type="number"]{ -moz-appearance: textfield; }

/* ---------------------------
   Breathing Circle (Crystal Orb)
--------------------------- */
#breathing-circle{
  position: relative;                /* nodig voor ::before/::after */
  aspect-ratio: 1/1;
  width: var(--circle-size);
  border-radius: 50%;
  /* Crystal glass core (radial highlights) */
  background:
    radial-gradient(140% 120% at 50% 35%,
      rgba(255,255,255,0.35) 0%,
      rgba(255,255,255,0.16) 42%,
      rgba(255,255,255,0.08) 66%,
      rgba(255,255,255,0.04) 100%);
  backdrop-filter: blur(30px) saturate(180%);

  /* Halo glow */
  box-shadow:
    0 0 60px var(--halo),
    inset 0 0 28px rgba(255,255,255,0.35),
    inset 0 0 90px rgba(255,255,255,0.06);

  /* Motion (geen fade; alleen schaal) */
  transform-origin: center;
  transform: translateZ(0) scale(var(--scale, 0.6));
  transition: transform var(--phase-ease);

  /* Voor start verborgen via .hidden; géén opacity-tricks meer */
}
#breathing-circle.hidden{ display:block; } /* failsafe als je ooit .hidden toevoegt */
#breathing-circle.hidden{ display:none !important; } /* vóór start verbergen */

 /* Extra glow-lagen */
#breathing-circle::before{
  content:''; position:absolute; inset:-12%;
  border-radius: 50%;
  background: radial-gradient(80% 80% at 50% 40%, var(--halo-strong), transparent 60%);
  filter: blur(18px); opacity: 0.45; pointer-events:none;
}
#breathing-circle::after{
  /* Fase-tekst in de orb */
  content: attr(data-phase);
  position:absolute; inset:0; display:grid; place-items:center;
  color: var(--text); font-weight: 700; letter-spacing: .6px;
  text-transform: lowercase; text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  opacity: 1; pointer-events: none;      /* altijd zichtbaar; geen fade */
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
}

/* Fase-states (alleen schaal, geen opacity) */
#breathing-circle.inhale{
  --scale: 1;
  transition-duration: var(--inhale-time);
}
#breathing-circle.hold,
#breathing-circle.hold1{
  --scale: 1;
  transition-duration: var(--hold-time);
}
#breathing-circle.exhale{
  --scale: 0.6;
  transition-duration: var(--exhale-time);
}
#breathing-circle.hold2{
  --scale: 0.6;                      /* klein vasthouden */
  transition-duration: var(--hold2-time, var(--hold-time));
}

/* ---------------------------
   Controls (glass buttons)
--------------------------- */
.timer-controls{
  margin-top: 8px; display:flex; gap: 0.8em; z-index:3;
}

.timer-controls button{
  padding: 12px 22px; font-size: 1.05rem; font-weight: 600;
  color: var(--text); letter-spacing: 0.3px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-stroke);
  border-radius: 16px;
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    0 12px 28px rgba(0,0,0,.28),
    inset 0 0 0.5px rgba(255,255,255,0.65);
  transition: all 180ms ease;
}
.timer-controls button:hover{
  background: var(--btn-hover);
  transform: translateY(-1px);
  box-shadow:
    0 16px 36px rgba(0,0,0,.32),
    inset 0 0 0.5px rgba(255,255,255,0.75),
    0 0 12px var(--accent);
}
.timer-controls button:active{
  background: var(--btn-active);
  transform: translateY(0);
}

/* ---------------------------
   Text & footer
--------------------------- */
.duration-text{ margin-top: 0.9em; font-size: 1em; color: var(--text-dim); }
.zen-footer{ margin-top: 1.6em; font-size: 0.92em; opacity: 0.8; }

/* ---------------------------
   Timer-mode structural rules
--------------------------- */
body.timer-running .settings-box{ display:none !important; } /* geen layout-hoogte */
body.timer-running .zen-back-button{ display:none !important; } /* optioneel */

/* ---------------------------
   Responsive tweaks
--------------------------- */
@media (max-width: 480px){
  :root{ --circle-size: 200px; }

  .zen-content{ padding: 1.2em; }
  body.timer-running .zen-content{ padding-top: 2.6em !important; }

  /* Geef de veld-kolom net wat meer ruimte op mobiel */
  .settings-row{
    grid-template-columns:
      minmax(90px, 1fr)
      minmax(220px, 1.2fr)
      minmax(44px, 0.6fr);
  }

  .timer-controls button{ padding: 11px 18px; font-size: 1rem; }
}



/* ===========================================================
   Responsive spacing ABOVE the breathing circle in timer mode
   Works with Luxury Glass UI (Option D)
   =========================================================== */

/* Mobile (small phones) */
@media (max-width: 480px) {
  body.timer-running .zen-content {
    padding-top: 3.6em !important;   /* compact but airy */
  }
}

/* Small tablets / large phones (481–768px) */
@media (min-width: 481px) and (max-width: 768px) {
  body.timer-running .zen-content {
    padding-top: 4.6em !important;   /* comfortable breathing space */
  }
}

/* Tablets / small laptops (769–1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  body.timer-running .zen-content {
    padding-top: 5.4em !important;   /* luxurious spacing */
  }
}

/* Desktop / big screens */
@media (min-width: 1025px) {
  body.timer-running .zen-content {
    padding-top: 6.2em !important;   /* full premium zen spacing */
  }
}

/* ============================================
   PERFECT CENTERING VAN DE CIRKEL IN TIMER-MODUS
   ============================================ */

body.timer-running .zen-content {
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;   /* <-- de echte fix */
    align-items: center;
    padding-top: 0 !important;            /* geen duw naar beneden */
    padding-bottom: 0 !important;
    height: 100vh;                         /* volledig scherm benutten */
    gap: 3.0em;                            /* ruimte tussen cirkel en knoppen */
}

/* ============================================
   Luxury Glass UI – Mobile Settings Box Fix
   ============================================ */

@media (max-width: 480px) {
  #settings-box.settings-box {
    width: 92% !important;        /* kleiner dan 90% voor betere marges */
    max-width: 340px !important;  /* compacte elegante breedte */
    padding: 1.8em 1.4em !important;
    border-radius: 18px !important;
  }

  /* Velden-grid op mobiel netjes houden */
  .settings-row {
    grid-template-columns:
      minmax(90px, 1fr)
      minmax(160px, 1.4fr)
      minmax(40px, .6fr) !important;
  }
}

/* ==========================================================
   FIX: Safari/iPhone invisible input/select fields
   ========================================================== */

.settings-select,
.settings-row input[type="number"] {
  -webkit-appearance: none !important;
  appearance: none !important;

  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #eceff4 !important;

  /* Safari forceert anders wit invulvak */
  background-clip: padding-box !important;

  /* voorkomt witte overlay in dark glass mode */
  -webkit-text-fill-color: #eceff4 !important;

  border: 1px solid rgba(255,255,255,0.32) !important;
}

/* iOS Safari: voorkomt wit vlak bij focus */
.settings-select:focus,
.settings-row input[type="number"]:focus {
  outline: none !important;
  background-color: rgba(255, 255, 255, 0.22) !important;
  -webkit-text-fill-color: #ffffff !important;
}