/* ============================================================================
   Padelistii UI Kit — shared, token-driven component classes (design: "Padelistii
   UI Kit Responsive"). Use these everywhere instead of re-styling inputs/buttons/etc.
   inline. All values come from the design tokens in styles.css. See /design-tokens.
   ============================================================================ */

/* ── Text fields ─────────────────────────────────────────────────────────── */
.ui-input {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.ui-input:focus { border-color: var(--lime); }
.ui-input::placeholder { color: var(--dim); }
.ui-input[type="number"] { -moz-appearance: textfield; }
.ui-input[type="number"]::-webkit-inner-spin-button,
.ui-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }

/* search variant: wrap an .ui-input + leading icon in .ui-search */
.ui-search { position: relative; }
.ui-search > svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); }
.ui-search > .ui-input { padding-left: 44px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ui-btn {
  cursor: pointer;
  border: none;
  border-radius: var(--r-sm);
  padding: 13px 20px;
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.ui-btn:disabled { opacity: 0.4; cursor: default; }
.ui-btn--primary { background: var(--lime); color: var(--ink); }
.ui-btn--primary:hover:not(:disabled) { opacity: 0.9; }
.ui-btn--secondary { background: var(--surface); color: var(--text); border: 1.5px solid var(--border-strong); }
.ui-btn--secondary:hover:not(:disabled) { border-color: var(--lime); }
.ui-btn--ghost { background: transparent; color: var(--lime); padding: 13px 12px; }
.ui-btn--icon { width: 46px; height: 46px; padding: 0; background: var(--surface); border: 1.5px solid var(--border-strong); color: var(--lime); }
.ui-btn--cta { width: 100%; padding: 16px; font-size: 15px; background: var(--lime); color: var(--ink); }

/* ── Segmented control ───────────────────────────────────────────────────── */
.ui-segmented { display: inline-flex; background: var(--surface); border-radius: var(--r-pill); padding: 4px; gap: 2px; }
.ui-segmented.full { display: flex; }
.ui-seg { cursor: pointer; border: none; background: transparent; color: var(--muted); font-family: var(--font-bold); font-weight: 800; font-size: 13px; padding: 9px 18px; border-radius: var(--r-pill); transition: all 0.14s ease; }
.ui-segmented.full .ui-seg { flex: 1; padding: 10px 0; }
.ui-seg.active { background: var(--lime); color: var(--ink); }

/* ── Chips ───────────────────────────────────────────────────────────────── */
.ui-chip { cursor: pointer; font-family: var(--font-label); font-weight: 600; font-size: 12.5px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface); color: var(--text-2); border: 1.5px solid var(--border-strong); transition: all 0.14s ease; }
.ui-chip.active { background: var(--lime-tint); color: var(--lime); border-color: var(--lime-border); }

/* ── LIVE badge ──────────────────────────────────────────────────────────── */
.ui-badge-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-label); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; padding: 6px 11px; border-radius: var(--r-pill); background: var(--lime); color: var(--ink); }
.ui-badge-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); animation: uiPulse 1.4s infinite; }

/* ── Toggle switch ───────────────────────────────────────────────────────── */
.ui-switch { cursor: pointer; border: none; width: 50px; height: 30px; border-radius: var(--r-pill); background: var(--border-strong); padding: 0; position: relative; transition: background 0.18s ease; flex-shrink: 0; }
.ui-switch.on { background: var(--lime); }
.ui-switch > .ui-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--text); transition: transform 0.18s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.4); }
.ui-switch.on > .ui-knob { transform: translateX(20px); }

/* ── Loaders ─────────────────────────────────────────────────────────────── */
.ui-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3.5px solid var(--border); border-top-color: var(--lime); animation: uiSpin 0.8s linear infinite; }
.ui-dots { display: inline-flex; gap: 7px; align-items: center; }
.ui-dots > span { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); animation: uiDot 1.1s infinite; }
.ui-dots > span:nth-child(2) { animation-delay: 0.16s; }
.ui-dots > span:nth-child(3) { animation-delay: 0.32s; }
.ui-progress { position: relative; height: 7px; border-radius: var(--r-pill); background: var(--surface); overflow: hidden; }
.ui-progress > span { position: absolute; top: 0; height: 100%; border-radius: var(--r-pill); background: var(--lime); animation: uiIndet 1.3s ease infinite; }

/* ── Skeleton (shimmer placeholder) ──────────────────────────────────────── */
.ui-skeleton {
  background-color: var(--surface);
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0) 100%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  border-radius: var(--r-sm);
  animation: uiShimmer 1.3s ease infinite;
}

/* ── Padel racket loader (branded spinner) ───────────────────────────────── */
.padel-loader { width: 180px; height: 90px; display: inline-flex; align-items: center; justify-content: center; }
.padel-loader svg { width: 100%; height: 100%; overflow: visible; }
.padel-loader .floor { fill: rgba(201, 255, 47, 0.16); filter: blur(4px); }
.padel-loader .frame,
.padel-loader .handle { fill: none; stroke: #6f788b; stroke-width: 4; vector-effect: non-scaling-stroke; }
.padel-loader .holes circle { fill: #818aa0; }
.padel-loader .racket { transform-box: fill-box; }
.padel-loader .racket-left { transform-origin: 80px 88px; animation: plLeftSwing 1.6s ease-in-out infinite; }
.padel-loader .racket-right { transform-origin: 240px 88px; animation: plRightSwing 1.6s ease-in-out infinite; }
.padel-loader .racket-left .frame,
.padel-loader .racket-left .handle,
.padel-loader .racket-left .holes circle { animation: plLeftGlow 1.6s linear infinite; }
.padel-loader .racket-right .frame,
.padel-loader .racket-right .handle,
.padel-loader .racket-right .holes circle { animation: plRightGlow 1.6s linear infinite; }
.padel-loader .ball-wrap { transform-box: fill-box; transform-origin: center; animation: plBallLoop 1.6s linear infinite; }
.padel-loader .ball { fill: #c9ff2f; filter: url(#plGlow); }
.padel-loader .ball-stripe { fill: none; stroke: rgba(255,255,255,0.9); stroke-width: 1.2; stroke-linecap: round; }
.padel-loader .impact { fill: #c9ff2f; opacity: 0; filter: url(#plGlow); }
.padel-loader .impact-right { transform: translate(240px, 58px); animation: plImpactRight 1.6s linear infinite; }
.padel-loader .impact-left { transform: translate(80px, 58px); animation: plImpactLeft 1.6s linear infinite; }

@keyframes plBallLoop {
  0%, 10%   { transform: translate(0px, 0px); }
  26%       { transform: translate(124px, -19px); }
  34%       { transform: translate(95px, -9px); }
  44%       { transform: translate(95px, -9px); }
  61%       { transform: translate(-26px, 0px); }
  70%       { transform: translate(6px, -4px); }
  100%      { transform: translate(0px, 0px); }
}
@keyframes plLeftSwing {
  0%, 8%    { transform: rotate(0deg); }
  16%       { transform: rotate(-26deg); }
  24%       { transform: rotate(0deg); }
  61%       { transform: rotate(8deg); }
  69%       { transform: rotate(0deg); }
  80%       { transform: rotate(-26deg); }
  90%, 100% { transform: rotate(0deg); }
}
@keyframes plRightSwing {
  0%, 38%   { transform: rotate(0deg); }
  47%       { transform: rotate(26deg); }
  56%       { transform: rotate(0deg); }
  100%      { transform: rotate(0deg); }
}
@keyframes plLeftGlow {
  0%, 22%, 61%, 70%, 80%, 92%, 100% { stroke: #c9ff2f; filter: drop-shadow(0 0 6px rgba(201,255,47,0.45)); }
  30%, 55%, 74% { stroke: #6f788b; filter: none; }
}
@keyframes plRightGlow {
  0%, 35% { stroke: #6f788b; filter: none; }
  40%, 58% { stroke: #c9ff2f; filter: drop-shadow(0 0 6px rgba(201,255,47,0.45)); }
  66%, 100% { stroke: #6f788b; filter: none; }
}
@keyframes plImpactRight {
  0%, 24%, 100% { opacity: 0; transform: translate(240px, 58px) scale(0.6); }
  27%           { opacity: 1; transform: translate(240px, 58px) scale(1.25); }
  31%           { opacity: 0; transform: translate(240px, 58px) scale(1.55); }
}
@keyframes plImpactLeft {
  0%, 58%, 100% { opacity: 0; transform: translate(80px, 58px) scale(0.6); }
  62%           { opacity: 1; transform: translate(80px, 58px) scale(1.25); }
  66%           { opacity: 0; transform: translate(80px, 58px) scale(1.55); }
}

@keyframes uiShimmer { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } }
@keyframes uiSpin { to { transform: rotate(360deg); } }
@keyframes uiDot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.35; } 40% { transform: translateY(-9px); opacity: 1; } }
@keyframes uiIndet { 0% { left: -45%; width: 45%; } 50% { width: 62%; } 100% { left: 100%; width: 28%; } }
@keyframes uiPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.82); } }