/*
 * Padel Club — frontend booking app styles.
 * Following the design prototypes (Prototips/*.html). Paleta del brief:
 * negre #0a0a0a, groc accent #fffeb6, blanc amb opacitats.
 * Mobile-first des de 360px, graella temps×pistes a partir de 720px.
 */

.padel-app {
  --padel-bg: #0a0a0a;
  --padel-bg-2: #161616;
  --padel-accent: #fffeb6;
  --padel-accent-soft: rgba(255, 254, 182, 0.08);
  --padel-accent-border: rgba(255, 254, 182, 0.2);
  --padel-text: #fff;
  --padel-text-2: rgba(255, 255, 255, 0.7);
  --padel-text-3: rgba(255, 255, 255, 0.5);
  --padel-text-4: rgba(255, 255, 255, 0.4);
  --padel-text-5: rgba(255, 255, 255, 0.3);
  --padel-surface: rgba(255, 255, 255, 0.03);
  --padel-surface-2: rgba(255, 255, 255, 0.05);
  --padel-border: rgba(255, 255, 255, 0.08);
  --padel-border-2: rgba(255, 255, 255, 0.16);
  --padel-success: #7dd99d;
  --padel-warning: #e8d066;
  --padel-error: #ff6464;
  --padel-radius-sm: 8px;
  --padel-radius-md: 10px;
  --padel-radius-lg: 16px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  background: var(--padel-bg);
  color: var(--padel-text);
  border-radius: var(--padel-radius-lg);
  padding: 28px 28px 160px;          /* extra bottom space so the fixed status bar never covers the last court */
  min-height: 480px;
  max-width: 1100px;
  margin: 24px auto;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .padel-app {
    padding: 18px 18px 180px;
    margin: 12px auto;
    border-radius: 12px;
  }
}

.padel-app *,
.padel-app *::before,
.padel-app *::after { box-sizing: border-box; }

/* ==================================================================
   Reset — defeat Elementor / theme styles that bleed into our app
   (button colors, img widths, link underlines, focus rings, etc.)
   ================================================================== */

/* Use :where() so the reset has zero internal specificity. This way our
   component rules (.padel-slot, .padel-date, etc.) automatically win in
   the cascade, while the reset still beats theme rules using type selectors
   like `body button { ... }`. */

.padel-app :where(a),
.padel-app :where(a:hover),
.padel-app :where(a:focus),
.padel-app :where(a:active),
.padel-app :where(a:visited) {
  color: inherit;
  text-decoration: none;
  background: transparent;
  box-shadow: none;
}

.padel-app :where(button),
.padel-app :where(input),
.padel-app :where(select),
.padel-app :where(textarea) {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  letter-spacing: normal;
  text-transform: none;
  border-radius: 0;
  box-shadow: none;
}

.padel-app :where(button) { padding: 0; cursor: pointer; }
.padel-app :where(button:focus),
.padel-app :where(button:focus-visible),
.padel-app :where(input:focus),
.padel-app :where(input:focus-visible) {
  outline: none;
  box-shadow: none;
}

.padel-app :where(img) {
  max-width: 100%;
  height: auto;
  display: block;
}

.padel-app :where(h1, h2, h3, h4, h5, h6, p) {
  margin: 0;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

/* ==================================================================
   Header — logo + accent dot + subtitle + title + side link
   ================================================================== */

.padel-header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 0.5px solid var(--padel-border);
}

.padel-header__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.padel-app .padel-logo {
  height: 48px !important;
  width: auto !important;
  max-width: 140px !important;
  max-height: 48px !important;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}
@media (min-width: 600px) {
  .padel-app .padel-logo {
    height: 56px !important;
    max-width: 180px !important;
    max-height: 56px !important;
  }
}

.padel-header__title-block {
  min-width: 0;
}

.padel-header__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.padel-header__dot {
  width: 8px;
  height: 8px;
  background: var(--padel-accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.padel-header__kicker {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--padel-text-3);
}

.padel-header__title {
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--padel-text);
}

.padel-header__link {
  font-size: 13px;
  color: var(--padel-accent);
  text-decoration: none;
  border-bottom: 0.5px solid var(--padel-accent);
  padding-bottom: 2px;
  white-space: nowrap;
}
.padel-header__link:hover { opacity: 0.85; }

/* ==================================================================
   Date picker — 7-column week grid (with optional next-week scroll)
   ================================================================== */

.padel-section-label {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--padel-text-4);
  margin-bottom: 12px;
}

.padel-dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 24px;
}
@media (max-width: 480px) {
  .padel-dates { gap: 4px; }
}

.padel-date {
  padding: 12px 4px;
  border-radius: 10px;
  text-align: center;
  background: var(--padel-surface);
  border: 0.5px solid var(--padel-border);
  cursor: pointer;
  font-family: inherit;
  color: var(--padel-text);
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
.padel-date:hover:not(:disabled) {
  border-color: var(--padel-border-2);
}

.padel-date__weekday {
  display: block;
  font-size: 10px;
  color: var(--padel-text-4);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.padel-date__day {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.padel-date--selected {
  background: var(--padel-accent);
  border-color: var(--padel-accent);
}
.padel-date--selected .padel-date__weekday { color: #5a5810; font-weight: 500; }
.padel-date--selected .padel-date__day { color: #1a1900; }

.padel-date:disabled,
.padel-date--closed {
  background: rgba(255, 255, 255, 0.01);
  border: 0.5px dashed rgba(255, 255, 255, 0.06);
  cursor: not-allowed;
  opacity: 0.35;
}
.padel-date--closed .padel-date__day { text-decoration: line-through; color: var(--padel-text-4); font-weight: 400; }

.padel-dates-nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
.padel-dates-nav__btn {
  background: transparent;
  border: 0.5px solid var(--padel-border);
  color: var(--padel-text-2);
  padding: 6px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.padel-dates-nav__btn:hover:not(:disabled) {
  border-color: var(--padel-border-2);
  color: var(--padel-text);
}
.padel-dates-nav__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.padel-dates-nav__label {
  font-size: 12px;
  color: var(--padel-text-3);
  align-self: center;
}

/* ==================================================================
   Legend
   ================================================================== */

.padel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 14px;
  background: var(--padel-accent-soft);
  border: 0.5px solid var(--padel-accent-border);
  border-radius: var(--padel-radius-md);
  margin-bottom: 20px;
}
.padel-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.padel-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.padel-legend__swatch--free    { background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.2); }
.padel-legend__swatch--selected{ background: var(--padel-accent); }
.padel-legend__swatch--booked  { background: rgba(255,255,255,0.08); position: relative; overflow: hidden; }
.padel-legend__swatch--booked::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255,255,255,0.15) 2px, rgba(255,255,255,0.15) 3px);
}
.padel-legend__swatch--blocked { background: rgba(255,255,255,0.02); border: 0.5px dashed rgba(255,255,255,0.25); }
.padel-legend__label {
  font-size: 11px;
  color: var(--padel-text-2);
}

/* ==================================================================
   Slots — desktop: time × courts grid · mobile: per-court vertical
   ================================================================== */

.padel-banner {
  border: 0.5px dashed var(--padel-border-2);
  border-radius: var(--padel-radius-md);
  padding: 28px 20px;
  color: var(--padel-text-2);
  text-align: center;
  font-size: 14px;
  margin-bottom: 20px;
  background: var(--padel-surface);
}

.padel-loading {
  text-align: center;
  color: var(--padel-text-3);
  font-size: 13px;
  padding: 32px 0;
}

/* Court grid: stack on mobile, side-by-side cards on desktop */

.padel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
@media (min-width: 720px) {
  .padel-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
  }
}

.padel-court {
  border: 0.5px solid var(--padel-border);
  border-radius: var(--padel-radius-md);
  padding: 16px 18px;
  background: var(--padel-surface);
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
.padel-court__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
}
.padel-court__name {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  color: var(--padel-text);
}
.padel-court__hint {
  font-size: 10px;
  color: var(--padel-text-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.padel-court__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 8px;
}

.padel-slot {
  padding: 12px 8px;
  background: var(--padel-surface);
  border: 0.5px solid var(--padel-border);
  border-radius: var(--padel-radius-sm);
  cursor: pointer;
  font-family: inherit;
  color: var(--padel-text);
  text-align: center;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
  overflow: hidden;
}
.padel-slot:hover:not(:disabled) {
  border-color: var(--padel-accent-border);
  background: rgba(255, 254, 182, 0.04);
}
.padel-slot:active:not(:disabled) { transform: scale(0.98); }

.padel-slot__time {
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.padel-slot__price {
  font-size: 11px;
  color: var(--padel-text-3);
}
.padel-slot__peak {
  font-size: 9px;
  color: var(--padel-warning);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.padel-slot--selected {
  background: var(--padel-accent);
  border-color: var(--padel-accent);
  color: #1a1900;
}
.padel-slot--selected .padel-slot__price { color: #5a5810; }
.padel-slot--selected .padel-slot__peak { color: #5a5810; }

.padel-slot--booked {
  cursor: not-allowed;
  background: var(--padel-surface-2);
}
.padel-slot--booked::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.04) 4px, rgba(255,255,255,0.04) 5px);
  pointer-events: none;
}
.padel-slot--booked .padel-slot__time,
.padel-slot--booked .padel-slot__price { color: var(--padel-text-5); }

.padel-slot--blocked {
  cursor: not-allowed;
  background: rgba(255,255,255,0.02);
  border-style: dashed;
}
.padel-slot--blocked .padel-slot__time,
.padel-slot--blocked .padel-slot__price { color: var(--padel-text-5); }

.padel-slot--too_soon {
  cursor: not-allowed;
  opacity: 0.4;
}
.padel-slot--too_soon .padel-slot__time,
.padel-slot--too_soon .padel-slot__price { color: var(--padel-text-4); }

/* ==================================================================
   Status bar — current selection + Continue button
   ================================================================== */

/* Fixed at the bottom of the viewport so the Continuar action is always
   reachable. Inner content respects the same max-width as the booking app. */
.padel-status-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: rgba(12, 12, 12, 0.92);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  border-top: 0.5px solid var(--padel-accent-border);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  animation: padel-slide-in-bottom 220ms ease;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
}

.padel-status-bar__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
}
.padel-status-bar__info { min-width: 0; flex: 1; }

.padel-status-bar__kicker {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 254, 182, 0.6);
  margin-bottom: 4px;
}
.padel-status-bar__line1 {
  font-size: 15px;
  color: var(--padel-text);
  font-weight: 500;
}
.padel-status-bar__line2 {
  font-size: 12px;
  color: var(--padel-text-3);
  margin-top: 2px;
}
.padel-status-bar__hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--padel-warning);
  display: flex;
  align-items: center;
  gap: 6px;
}
.padel-status-bar__hint::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--padel-warning);
}
.padel-status-bar__cta {
  flex-shrink: 0;
  padding: 12px 22px;
}

@media (max-width: 600px) {
  .padel-status-bar { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .padel-status-bar__line1 { font-size: 14px; }
  .padel-status-bar__cta { padding: 12px 18px; font-size: 14px; }
}

@keyframes padel-slide-in-bottom {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ==================================================================
   Buttons
   ================================================================== */

.padel-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: var(--padel-radius-sm);
  border: 0.5px solid var(--padel-border-2);
  background: transparent;
  color: var(--padel-text);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.padel-btn:hover:not(:disabled) { border-color: var(--padel-text-2); }
.padel-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.padel-btn--primary {
  background: var(--padel-accent);
  border-color: var(--padel-accent);
  color: #1a1900;
}
.padel-btn--primary:hover:not(:disabled) {
  background: #fffacc;
  border-color: #fffacc;
}

.padel-btn--danger {
  background: transparent;
  border-color: rgba(255, 100, 100, 0.3);
  color: rgba(255, 100, 100, 0.85);
}
.padel-btn--danger:hover:not(:disabled) {
  border-color: var(--padel-error);
  color: var(--padel-error);
}

/* ==================================================================
   Modal — centred panel with backdrop blur
   ================================================================== */

.padel-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: padel-fade-in 200ms ease;
}

.padel-modal__panel {
  background: var(--padel-bg-2);
  border: 0.5px solid var(--padel-accent-border);
  border-radius: var(--padel-radius-lg);
  padding: 28px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  animation: padel-slide-up 220ms ease;
}

.padel-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 12px;
}
.padel-modal__kicker {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--padel-accent);
  margin-bottom: 6px;
}
.padel-modal__title {
  font-size: 18px;
  font-weight: 500;
  color: var(--padel-text);
  margin: 0;
}
.padel-modal__close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  color: var(--padel-text-2);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background 150ms ease, color 150ms ease;
}
.padel-modal__close:hover { background: rgba(255, 255, 255, 0.1); color: var(--padel-text); }

.padel-summary {
  background: var(--padel-accent-soft);
  border: 0.5px solid rgba(255, 254, 182, 0.15);
  border-radius: var(--padel-radius-md);
  padding: 14px 16px;
  margin-bottom: 22px;
}
.padel-summary__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--padel-text-3);
}
.padel-summary__row:last-child { margin-bottom: 0; }
.padel-summary__main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 6px;
}
.padel-summary__when {
  font-size: 14px;
  color: var(--padel-text);
  font-weight: 500;
}
.padel-summary__price {
  font-size: 18px;
  color: var(--padel-accent);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ==================================================================
   Form fields
   ================================================================== */

.padel-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.padel-field__label {
  font-size: 11px;
  color: var(--padel-text-3);
  letter-spacing: 0.3px;
}
.padel-field__input {
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  color: var(--padel-text);
  padding: 11px 14px;
  border-radius: var(--padel-radius-sm);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 150ms ease;
}
.padel-field__input:focus {
  outline: none;
  border-color: var(--padel-accent);
}
.padel-field__error {
  font-size: 11px;
  color: var(--padel-error);
}
.padel-field__hint {
  font-size: 11px;
  color: rgba(255, 254, 182, 0.7);
  display: flex;
  align-items: center;
  gap: 5px;
}
.padel-field__hint-dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--padel-accent);
  border-radius: 50%;
}

.padel-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.padel-form-error {
  font-size: 13px;
  color: var(--padel-error);
  background: rgba(255, 100, 100, 0.08);
  border: 0.5px solid rgba(255, 100, 100, 0.3);
  border-radius: var(--padel-radius-sm);
  padding: 10px 12px;
  margin-bottom: 14px;
}

.padel-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.padel-modal .padel-btn {
  flex: 1;
  padding: 14px;
  font-size: 15px;
}
.padel-modal__footnote {
  text-align: center;
  margin-top: 14px;
  font-size: 11px;
  color: var(--padel-text-4);
}

/* Success state inside modal */
.padel-success {
  text-align: center;
  padding: 12px 8px;
}
.padel-success__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(125, 217, 157, 0.12);
  border: 0.5px solid var(--padel-success);
  color: var(--padel-success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
}
.padel-success__title {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--padel-text);
}
.padel-success__body {
  font-size: 13px;
  color: var(--padel-text-2);
  line-height: 1.5;
  margin: 0 0 14px;
}
.padel-success__code {
  display: inline-block;
  background: var(--padel-accent-soft);
  border: 0.5px solid var(--padel-accent);
  color: var(--padel-accent);
  padding: 4px 12px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 13px;
  letter-spacing: 0.5px;
}

/* ==================================================================
   My-bookings cards (used by [padel_my_bookings])
   ================================================================== */

.padel-empty {
  border: 0.5px dashed var(--padel-border-2);
  border-radius: var(--padel-radius-md);
  padding: 28px 20px;
  text-align: center;
  color: var(--padel-text-2);
  font-size: 14px;
}

.padel-section-kicker {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 254, 182, 0.7);
  margin: 24px 0 14px;
}
.padel-section-kicker--muted {
  color: var(--padel-text-4);
}

.padel-card {
  border: 0.5px solid var(--padel-border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 12px;
  background: var(--padel-surface);
}
.padel-card--featured {
  background: var(--padel-accent-soft);
  border-color: var(--padel-accent-border);
}

.padel-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  gap: 16px;
}
.padel-card__main { min-width: 0; flex: 1; }
.padel-card__pills {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.padel-pill {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--padel-text);
  white-space: nowrap;
}
.padel-pill--code {
  background: var(--padel-accent);
  color: #1a1900;
}
.padel-pill--ok    { background: rgba(50, 150, 80, 0.15); color: var(--padel-success); }
.padel-pill--warn  { background: rgba(200, 180, 50, 0.15); color: var(--padel-warning); }
.padel-pill--bad   { background: rgba(255, 100, 100, 0.15); color: var(--padel-error); }

.padel-card__when {
  font-size: 16px;
  font-weight: 500;
  color: var(--padel-text);
  margin-bottom: 4px;
}
.padel-card__meta {
  font-size: 13px;
  color: var(--padel-text-3);
}
.padel-card__hint {
  font-size: 12px;
  color: rgba(232, 208, 102, 0.8);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.padel-card__hint-dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--padel-warning);
  border-radius: 50%;
}

.padel-card__date {
  text-align: right;
  flex-shrink: 0;
}
.padel-card__date-day {
  font-size: 28px;
  font-weight: 500;
  color: var(--padel-accent);
  line-height: 1;
}
.padel-card--past .padel-card__date-day { color: var(--padel-text); opacity: 0.6; }
.padel-card__date-month {
  font-size: 11px;
  color: var(--padel-text-3);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 2px;
}

.padel-card__actions {
  display: flex;
  gap: 8px;
  padding-top: 14px;
  border-top: 0.5px solid var(--padel-border);
  flex-wrap: wrap;
}
.padel-card__actions .padel-btn {
  flex: 1;
  min-width: 110px;
  padding: 9px 12px;
  font-size: 12px;
}

.padel-card--past {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.padel-card--past .padel-card__row {
  font-size: 13px;
  color: var(--padel-text-2);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.padel-card--past .padel-card__sub {
  font-size: 12px;
  color: var(--padel-text-4);
}
.padel-card--past .padel-card__price {
  font-size: 13px;
  color: var(--padel-text-3);
  font-variant-numeric: tabular-nums;
}

/* ==================================================================
   Toast — recover form messages
   ================================================================== */

.padel-toast {
  border-radius: var(--padel-radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  margin-top: 12px;
}
.padel-toast--ok    { color: var(--padel-success); background: rgba(125, 217, 157, 0.08); border: 0.5px solid rgba(125, 217, 157, 0.5); }
.padel-toast--error { color: var(--padel-error);   background: rgba(255, 100, 100, 0.08); border: 0.5px solid rgba(255, 100, 100, 0.5); }

.padel-recover-form {
  max-width: 420px;
}

/* ==================================================================
   Animations + helpers
   ================================================================== */

@keyframes padel-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes padel-slide-up {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

[x-cloak] { display: none !important; }