/* Fairway Yoga — Breathe Timer
   All selectors scoped under .fyb-root. Colours and type bind to Elementor
   Global CSS variables with standalone fallbacks. */

.fyb-root{
  --fyb-bg:      var(--e-global-color-primary,   #0A130E);
  --fyb-surface: var(--e-global-color-secondary, #0F1F17);
  --fyb-text:    var(--e-global-color-text,      #F2EFE6);
  --fyb-accent:  var(--e-global-color-accent,    #C8F169);
  --fyb-sage:    var(--e-global-color-9fb3a61,   #9FB3A6);
  --fyb-display: var(--e-global-typography-primary-font-family, "Inter Tight"), "Inter Tight", Inter, system-ui, sans-serif;
  --fyb-body:    var(--e-global-typography-text-font-family, "Inter"), Inter, system-ui, sans-serif;
  --fyb-hair:    rgba(242,239,230,.10);
  --fyb-stage:   clamp(240px, 62vw, 380px);

  font-family: var(--fyb-body);
  color: var(--fyb-text);
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 34px 20px 30px;
  background: var(--fyb-surface);
  border: 1px solid var(--fyb-hair);
  border-radius: 22px;
}
.fyb-root *,
.fyb-root *::before,
.fyb-root *::after{ box-sizing: border-box; }

.fyb-heading{
  font-family: var(--fyb-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.5px;
  font-size: clamp(20px, 3.4vw, 28px);
  line-height: 1.05;
  margin: 0;
  text-align: center;
  color: var(--fyb-text);
}

/* ---------- stage ---------- */
.fyb-stage{
  position: relative;
  width: var(--fyb-stage);
  height: var(--fyb-stage);
  flex: 0 0 auto;
}
.fyb-rings{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.fyb-track{ fill:none; stroke: rgba(242,239,230,.12); stroke-width:2; }
.fyb-progress{
  fill:none; stroke: var(--fyb-accent); stroke-width:3; stroke-linecap:round;
  transition: stroke-dashoffset .18s linear;
}
.fyb-orb{
  position:absolute; left:50%; top:50%;
  width:64%; height:64%;
  margin:-32% 0 0 -32%;
  border-radius:50%;
  background: radial-gradient(circle at 50% 50%,
      rgba(200,241,105,.03) 0%,
      rgba(200,241,105,.07) 52%,
      rgba(200,241,105,.18) 86%,
      rgba(200,241,105,.28) 100%);
  box-shadow: 0 0 72px rgba(200,241,105,.18),
              inset 0 0 40px rgba(200,241,105,.10);
  transform: scale(.72);
  will-change: transform;
}
.fyb-orbedge{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid rgba(200,241,105,.85);
}

/* ---------- centre readout ---------- */
.fyb-readout{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; pointer-events:none;
}
.fyb-phase{
  font-family: var(--fyb-display);
  font-weight:800; text-transform:uppercase;
  font-size: clamp(26px, 5.2vw, 38px);
  line-height:1; letter-spacing:-1px;
  color: var(--fyb-text);
  margin:0;
}
.fyb-count{
  font-size: clamp(13px, 1.8vw, 15px);
  font-weight:600; letter-spacing:2.2px; text-transform:uppercase;
  color: var(--fyb-sage);
  font-variant-numeric: tabular-nums;
  margin:0; min-height:1.2em;
}

/* ---------- meta row ---------- */
.fyb-meta{
  display:flex; gap:22px; align-items:center; justify-content:center;
  flex-wrap:wrap;
  font-size:13px; letter-spacing:1.6px; text-transform:uppercase;
  color: var(--fyb-sage);
  font-variant-numeric: tabular-nums;
  min-height:18px; margin:-6px 0 0;
}
.fyb-meta b{ color: var(--fyb-text); font-weight:600; }

/* ---------- controls ---------- */
.fyb-controls{
  display:flex; flex-direction:column; gap:16px; align-items:center;
  width:100%; max-width:520px;
  transition: opacity .35s ease;
}
.fyb-root[data-state="running"] .fyb-controls{ opacity:.45; }
.fyb-root[data-state="running"] .fyb-controls:hover,
.fyb-root[data-state="running"] .fyb-controls:focus-within{ opacity:1; }

.fyb-group{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }

.fyb-pill{
  appearance:none; cursor:pointer;
  font-family: var(--fyb-body);
  font-size:12px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase;
  color: var(--fyb-sage);
  background: rgba(242,239,230,.04);
  border:1px solid var(--fyb-hair);
  border-radius:999px;
  padding:11px 16px;
  min-height:44px;
  transition: color .2s, border-color .2s, background .2s;
}
.fyb-pill:hover{ color: var(--fyb-text); border-color: rgba(242,239,230,.26); }
.fyb-pill[aria-checked="true"],
.fyb-pill[aria-pressed="true"]{
  color: var(--fyb-accent);
  border-color: var(--fyb-accent);
  background: rgba(200,241,105,.10);
}

.fyb-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; align-items:center; }

.fyb-btn{
  appearance:none; cursor:pointer;
  font-family: var(--fyb-body);
  font-size:15px; font-weight:600; letter-spacing:.3px;
  border-radius:999px; padding:15px 30px; min-height:48px;
  border:1px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.fyb-btn--primary{ background: var(--fyb-accent); color: var(--fyb-bg); }
.fyb-btn--primary:hover{ background:#D6F585; }
.fyb-btn--ghost{ background:transparent; color: var(--fyb-text); border-color: rgba(242,239,230,.22); }
.fyb-btn--ghost:hover{ border-color: var(--fyb-text); }

/* Anchors styled as buttons: beat the theme's global link rules. */
.fyb-root a.fyb-btn{ text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.fyb-root a.fyb-btn--ghost{ color: var(--fyb-text); }
.fyb-root a.fyb-btn--ghost:hover{ color: var(--fyb-accent); border-color: var(--fyb-accent); }
.fyb-root a.fyb-btn--primary{ color: var(--fyb-bg); }
.fyb-btn--link{
  background:none; border:none; padding:12px 6px;
  color: var(--fyb-text); text-decoration:underline; text-underline-offset:4px;
}
.fyb-btn--link:hover{ color: var(--fyb-accent); }

.fyb-root :focus-visible{
  outline:2px solid var(--fyb-accent);
  outline-offset:2px;
  border-radius:999px;
}

.fyb-legend{
  font-size:12px; letter-spacing:1.6px; text-transform:uppercase;
  color: var(--fyb-sage); text-align:center; margin:0;
}
.fyb-hidden{ display:none !important; }

.fyb-sr{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- completion ---------- */
.fyb-done{
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
}
.fyb-done p{ margin:0; color: var(--fyb-sage); font-size:15px; line-height:1.6; }

@media (max-width: 479px){
  .fyb-root{ padding:26px 14px 24px; gap:22px; border-radius:18px; }
  .fyb-actions{ width:100%; }
  .fyb-btn--primary, .fyb-btn--ghost{ flex:1 1 100%; }
  .fyb-meta{ gap:14px; font-size:12px; }
}

@media (prefers-reduced-motion: reduce){
  .fyb-orb{ transform: scale(.72) !important; transition:none !important; }
  .fyb-progress{ transition:none; }
}