/* Sports Booking Pro — UI Design System (scoped)
   Style: clear (white + grays), semi-rounded (12px), modern marketplace.
   Primary brand: #FF751F
*/

.sbp-app,
.sbp-app * { box-sizing: border-box; }

.sbp-app {
  --sbp-brand: #FF751F;
  --sbp-brand-600: #f0650c;
  --sbp-text: #0f172a;
  --sbp-muted: #475569;
  --sbp-border: #e5e7eb;
  --sbp-bg: #ffffff;
  --sbp-surface: #ffffff;
  --sbp-surface-2: #f8fafc;
  --sbp-ring: rgba(255, 117, 31, .28);
  --sbp-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  --sbp-shadow-sm: 0 4px 12px rgba(15, 23, 42, .08);
  --sbp-shadow-xs: 0 2px 8px rgba(15, 23, 42, .06);
  --sbp-radius: 12px;
  --sbp-radius-sm: 10px;

  color: var(--sbp-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.45;
}

/* Layout */
.sbp-page { padding: 24px 16px; }
.sbp-wrap,
.sbp-club-search-wrap,
.sbp-booking-form { width: 100%; max-width: 100%; margin: 0; }

/* Inline filter/tool forms (week calendar, lists) */
.sbp-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 12px;
  border: 1px solid var(--sbp-border);
  border-radius: var(--sbp-radius);
  background: var(--sbp-surface);
  box-shadow: var(--sbp-shadow-xs);
}
.sbp-inline-form label { display: grid; gap: 6px; font-size: .9rem; color: var(--sbp-muted); }
.sbp-inline-form select,
.sbp-inline-form input[type="date"],
.sbp-inline-form input[type="text"],
.sbp-inline-form input[type="email"] { min-width: 220px; }
@media (max-width: 640px) {
  .sbp-inline-form { padding: 10px; }
  .sbp-inline-form label { width: 100%; }
  .sbp-inline-form select,
  .sbp-inline-form input[type="date"],
  .sbp-inline-form input[type="text"],
  .sbp-inline-form input[type="email"] { width: 100%; min-width: 0; }
}

.sbp-card {
  background: var(--sbp-surface);
  border: 1px solid var(--sbp-border);
  border-radius: var(--sbp-radius);
  box-shadow: var(--sbp-shadow-sm);
}

.sbp-card-header { padding: 16px 16px 0 16px; }
.sbp-card-body { padding: 16px; }
.sbp-card-footer { padding: 0 16px 16px 16px; }

/* Typography */
.sbp-app h1, .sbp-app h2, .sbp-app h3 { color: var(--sbp-text); margin: 0 0 10px 0; }
.sbp-dashboard-title, .sbp-club-search-title { font-weight: 700; letter-spacing: -0.02em; }
.sbp-dashboard-title { font-size: 1.35rem; }
.sbp-club-search-title { font-size: 1.55rem; }
.sbp-muted { color: var(--sbp-muted); }

/* Field / form */
.sbp-field-label { font-size: 0.85rem; display: block; margin-bottom: 6px; color: var(--sbp-muted); }

.sbp-app input[type="text"],
.sbp-app input[type="email"],
.sbp-app input[type="password"],
.sbp-app input[type="date"],
.sbp-app input[type="time"],
.sbp-app input[type="number"],
.sbp-app select,
.sbp-app textarea {
  width: 100%;
  max-width: 100%;
  background: var(--sbp-surface);
  border: 1px solid var(--sbp-border);
  border-radius: var(--sbp-radius-sm);
  padding: 10px 12px;
  color: var(--sbp-text);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}

.sbp-app select { padding-right: 34px; }

.sbp-app textarea { min-height: 110px; resize: vertical; }

.sbp-app input:focus,
.sbp-app select:focus,
.sbp-app textarea:focus {
  border-color: var(--sbp-brand);
  box-shadow: 0 0 0 4px var(--sbp-ring);
}

.sbp-club-search-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sbp-club-search-form input[type="text"] { min-width: 240px; flex: 1 1 320px; }

/* Buttons */
.sbp-app .button,
.sbp-app button,
.sbp-app input[type="submit"],
.sbp-app a.button {
  appearance: none;
  border: 1px solid var(--sbp-border);
  border-radius: var(--sbp-radius-sm);
  padding: 10px 12px;
  font-weight: 650;
  background: var(--sbp-surface);
  color: var(--sbp-text);
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .05s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease, color .15s ease;
}

.sbp-app .button:hover,
.sbp-app button:hover,
.sbp-app a.button:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15,23,42,.10); }
.sbp-app .button:active,
.sbp-app button:active { transform: translateY(0); }

.sbp-app .button:focus,
.sbp-app button:focus,
.sbp-app input[type="submit"]:focus { box-shadow: 0 0 0 4px var(--sbp-ring); border-color: var(--sbp-brand); }

/* Primary */
.sbp-app .button.button-primary,
.sbp-app .sbp-btn-primary,
.sbp-app button[type="submit"] {
  background: var(--sbp-brand);
  border-color: var(--sbp-brand);
  color: #111827;
}
.sbp-app .button.button-primary:hover,
.sbp-app .sbp-btn-primary:hover,
.sbp-app button[type="submit"]:hover { background: var(--sbp-brand-600); border-color: var(--sbp-brand-600); }

/* Secondary */
.sbp-app .sbp-btn-secondary,
.sbp-app .button.button-secondary {
  background: var(--sbp-surface);
  border-color: var(--sbp-border);
  color: var(--sbp-text);
}

.sbp-app .sbp-btn-danger {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}
.sbp-app .sbp-btn-danger:hover { background: #fecaca; }

.sbp-app button[disabled],
.sbp-app .button[disabled],
.sbp-app input[disabled] {
  opacity: .6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Pills / badges */
.sbp-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--sbp-border);
  background: var(--sbp-surface-2);
  color: var(--sbp-text);
  font-weight: 650;
  font-size: .78rem;
}

.sbp-badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: .78rem; font-weight: 650; }
.sbp-badge--success { background: #dcfce7; color: #166534; }
.sbp-badge--warning { background: #fef9c3; color: #854d0e; }
.sbp-badge--danger  { background: #fee2e2; color: #991b1b; }
.sbp-badge--info    { background: #dbeafe; color: #1e40af; }

/* Alerts (map existing classes) */
.sbp-success, .sbp-error, .sbp-warning, .sbp-info {
  border-radius: var(--sbp-radius);
  padding: 12px 14px;
  border: 1px solid var(--sbp-border);
  background: var(--sbp-surface);
  box-shadow: var(--sbp-shadow-sm);
  margin: 12px 0;
}
.sbp-success { border-color: #bbf7d0; background: #f0fdf4; }
.sbp-error { border-color: #fecaca; background: #fef2f2; }
.sbp-warning { border-color: #fde68a; background: #fffbeb; }
.sbp-info { border-color: #bfdbfe; background: #eff6ff; }

/* Tables */
.sbp-table-wrap { overflow: auto; border-radius: var(--sbp-radius); border: 1px solid var(--sbp-border); background: var(--sbp-surface); box-shadow: var(--sbp-shadow-sm); }

.sbp-app table.sbp-table,
.sbp-app table {
  width: 100%;
  border-collapse: collapse;
}

.sbp-app table.sbp-table thead th,
.sbp-app table thead th {
  text-align: left;
  font-size: 0.8rem;
  color: var(--sbp-muted);
  font-weight: 750;
  background: var(--sbp-surface-2);
  border-bottom: 1px solid var(--sbp-border);
  padding: 12px;
}

.sbp-app table.sbp-table tbody td,
.sbp-app table tbody td {
  border-bottom: 1px solid var(--sbp-border);
  padding: 12px;
  vertical-align: top;
}

.sbp-app table tbody tr:hover td { background: #fbfbfc; }


/* Mobile-friendly stacked table (cards) when data-label is present */
@media (max-width: 720px) {
  .sbp-table--stack thead { display: none; }
  .sbp-table--stack, .sbp-table--stack tbody, .sbp-table--stack tr, .sbp-table--stack td { display: block; width: 100%; }
  .sbp-table--stack tr {
    border: 1px solid var(--sbp-border);
    border-radius: 12px;
    background: var(--sbp-surface);
    box-shadow: var(--sbp-shadow-xs);
    margin-bottom: 12px;
    padding: 10px 12px;
  }
  .sbp-table--stack td {
    border: 0 !important;
    padding: 8px 0 !important;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .sbp-table--stack td::before {
    content: attr(data-label);
    color: var(--sbp-muted);
    font-weight: 750;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    flex: 0 0 auto;
    max-width: 45%;
  }

  /* Actions cell: keep buttons usable in stacked mode */
  .sbp-table--stack td.sbp-td-actions { align-items: flex-start; }
  .sbp-table--stack td.sbp-td-actions .sbp-actions-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    width: 55%;
  }
  .sbp-table--stack td.sbp-td-actions .sbp-actions-wrap form { margin: 0; }
  .sbp-table--stack td.sbp-td-actions .sbp-actions-wrap button {
    width: auto;
    max-width: 100%;
  }
}

/* Ensure tables are still usable on narrow screens even without wrappers */
@media (max-width: 860px) {
  .sbp-app table.sbp-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sbp-app table.sbp-table thead, .sbp-app table.sbp-table tbody { width: max-content; }
}
/* Dashboard header blocks */
.sbp-dashboard-header,
.sbp-club-search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.sbp-dashboard-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.sbp-dashboard-actions a { text-decoration: none; }

/* Club list / cards */
.sbp-club-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.sbp-club-card { grid-column: span 12; }

@media (min-width: 720px) {
  .sbp-club-card { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .sbp-club-card { grid-column: span 4; }
}

.sbp-club-card-inner {
  background: var(--sbp-surface);
  border: 1px solid var(--sbp-border);
  border-radius: var(--sbp-radius);
  box-shadow: var(--sbp-shadow-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sbp-club-card-title { font-size: 1.05rem; font-weight: 800; margin: 0; }
.sbp-club-card-meta { color: var(--sbp-muted); font-size: .88rem; }

/* Weekly calendar */
.sbp-week-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--sbp-border); border-radius: var(--sbp-radius); overflow: hidden; box-shadow: var(--sbp-shadow-sm); background: var(--sbp-surface); }
.sbp-week-table th { background: var(--sbp-surface-2); color: var(--sbp-muted); font-size: .78rem; font-weight: 800; padding: 10px; border-bottom: 1px solid var(--sbp-border); }
.sbp-week-table td { padding: 10px; border-bottom: 1px solid var(--sbp-border); vertical-align: top; }

.sbp-week-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--sbp-border);
  background: var(--sbp-surface);
  font-weight: 750;
  cursor: pointer;
  user-select: none;
}

.sbp-week-slot:hover { border-color: var(--sbp-brand); box-shadow: 0 0 0 4px var(--sbp-ring); }

.sbp-week-slot--booked { background: #f3f4f6; color: #64748b; cursor: not-allowed; }

/* Helpers */
.sbp-mt-15 { margin-top: 15px; }
.sbp-mb-16 { margin-bottom: 16px; }
.sbp-mb-20 { margin-bottom: 20px; }
.sbp-ml-4  { margin-left: 4px; }
.sbp-form-inline { display: inline; }

/* Loading state (JS toggles .sbp-is-loading on form) */
.sbp-is-loading button[type="submit"] { opacity: .85; pointer-events: none; }
.sbp-is-loading button[type="submit"]::after {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(15,23,42,.25);
  border-top-color: rgba(15,23,42,.65);
  display: inline-block;
  margin-left: 8px;
  animation: sbp-spin 0.8s linear infinite;
}
@keyframes sbp-spin { to { transform: rotate(360deg); } }

/* Tooltip (generic, opt-in) */
.sbp-has-tooltip { position: relative; }
.sbp-has-tooltip:hover::after {
  content: attr(data-sbp-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: rgba(15,23,42,.92);
  color: #fff;
  font-size: .78rem;
  padding: 8px 10px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: var(--sbp-shadow);
  z-index: 50;
}

/* ------------------------------ */
/* Layout utilities               */
/* ------------------------------ */
.sbp-grid {
  display: grid;
  gap: 16px;
}
.sbp-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.sbp-col-span-2 { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .sbp-grid-2 { grid-template-columns: 1fr; }
}

/* ------------------------------ */
/* Skeleton loaders               */
/* ------------------------------ */
.sbp-club-results, .sbp-week-results { position: relative; }
.sbp-skeleton {
  display: none;
  position: absolute;
  inset: 0;
  padding: 16px;
  background: var(--sbp-surface);
  border-radius: 12px;
  z-index: 10;
}
.sbp-skeleton--cards {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1000px) { .sbp-skeleton--cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 650px) { .sbp-skeleton--cards { grid-template-columns: 1fr; } }
.sbp-skeleton-card {
  height: 180px;
  border-radius: 12px;
  border: 1px solid var(--sbp-border);
  background: linear-gradient(90deg, rgba(148,163,184,.18) 25%, rgba(148,163,184,.34) 37%, rgba(148,163,184,.18) 63%);
  background-size: 400% 100%;
  animation: sbp-shimmer 1.2s ease-in-out infinite;
}
.sbp-skeleton-line {
  height: 14px;
  margin: 10px 0;
  border-radius: 999px;
  border: 1px solid var(--sbp-border);
  background: linear-gradient(90deg, rgba(148,163,184,.18) 25%, rgba(148,163,184,.34) 37%, rgba(148,163,184,.18) 63%);
  background-size: 400% 100%;
  animation: sbp-shimmer 1.2s ease-in-out infinite;
}
@keyframes sbp-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.sbp-skeleton-on .sbp-skeleton { display: block; }
.sbp-club-results.sbp-skeleton-on .sbp-skeleton--cards { display: grid; }

/* ------------------------------ */
/* Weekly calendar (modern grid)  */
/* ------------------------------ */
.sbp-week-toolbar { margin-bottom: 10px; }
.sbp-week-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sbp-week-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--sbp-border);
  background: #fff;
  color: var(--sbp-text);
  text-decoration: none;
  box-shadow: var(--sbp-shadow-xs);
}
.sbp-week-nav-btn:hover { border-color: rgba(255,117,31,.6); box-shadow: var(--sbp-shadow); }
.sbp-week-range { color: var(--sbp-muted); font-weight: 600; }

.sbp-week-results {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* Dedicated horizontal scroller for the week grid (prevents clipping) */
.sbp-week-grid-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

/* Make horizontal scrollbars visible and usable (desktop + mobile) */
.sbp-week-grid-scroll,
.sbp-week-results {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}
.sbp-week-grid-scroll::-webkit-scrollbar,
.sbp-week-results::-webkit-scrollbar { height: 12px; }
.sbp-week-grid-scroll::-webkit-scrollbar-thumb,
.sbp-week-results::-webkit-scrollbar-thumb {
  background: rgba(15,23,42,.25);
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.9);
}
.sbp-week-grid-scroll::-webkit-scrollbar-track,
.sbp-week-results::-webkit-scrollbar-track {
  background: rgba(15,23,42,.06);
  border-radius: 999px;
}
}


/* Grid-based week layout (7 columns, scrollable) */
.sbp-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(220px, 1fr));
  gap: 12px;
  align-items: start;
  padding-bottom: 4px;
  width: max-content;
}
.sbp-week-day {
  border: 1px solid var(--sbp-border);
  border-radius: 12px;
  background: var(--sbp-surface);
  box-shadow: var(--sbp-shadow-xs);
  overflow: hidden;
  min-width: 220px;
}
.sbp-week-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--sbp-surface-2);
  border-bottom: 1px solid var(--sbp-border);
}
.sbp-week-day-dow {
  color: var(--sbp-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.sbp-week-day-date {
  color: var(--sbp-text);
  font-size: .9rem;
  font-weight: 800;
}
.sbp-week-day-body { padding: 10px 12px; }

/* On tablets/mobile: swipe horizontally through day columns (better UX than stacking) */
@media (max-width: 980px) {
  .sbp-week-grid { display: flex; gap: 12px; }
  .sbp-week-day { flex: 0 0 280px; min-width: 280px; scroll-snap-align: start; }
  .sbp-week-grid-scroll { scroll-snap-type: x mandatory; }
}
@media (max-width: 520px) {
  .sbp-week-day { flex-basis: 86vw; min-width: 86vw; }
  .sbp-page { padding: 18px 12px; }
  .sbp-week-slot { padding: 9px 10px; }
  .sbp-week-time { font-size: .95rem; }
  .sbp-week-price { font-size: .9rem; }
}
.sbp-week-table {
  border-collapse: separate;
  border-spacing: 12px;
  min-width: 980px;
}
.sbp-week-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sbp-surface);
  border: 1px solid var(--sbp-border);
  border-radius: 12px;
  box-shadow: var(--sbp-shadow-xs);
  padding: 12px;
}
.sbp-week-table td {
  vertical-align: top;
  background: var(--sbp-surface);
  border: 1px solid var(--sbp-border);
  border-radius: 12px;
  padding: 12px;
  min-width: 180px;
}
.sbp-week-col { display: flex; flex-direction: column; gap: 8px; }
.sbp-week-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--sbp-border);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  box-shadow: var(--sbp-shadow-xs);
  text-align: left;
}
.sbp-week-slot-free:hover { border-color: rgba(255,117,31,.7); box-shadow: var(--sbp-shadow); transform: translateY(-1px); }
.sbp-week-time { font-weight: 600; }
.sbp-week-price { color: var(--sbp-muted); font-weight: 700; }
.sbp-week-empty {
  padding: 12px;
  border-radius: 12px;
  background: rgba(148,163,184,.12);
  border: 1px dashed rgba(148,163,184,.45);
  color: var(--sbp-muted);
  font-size: .9rem;
}

/* ------------------------------ */
/* Public club page               */
/* ------------------------------ */
/*
  Algunos themes envuelven el contenido en contenedores angostos en desktop.
  Para la página pública del club (template del plugin), “rompemos” el contenedor
  usando 100vw para aprovechar ancho real y luego centramos el contenido.
*/
body.sbp-public-club-page .sbp-page-club-public{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: clip;
}
body.sbp-public-club-page .sbp-club-public-wrap{
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

.sbp-club-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--sbp-border);
  border-radius: 16px;
  box-shadow: var(--sbp-shadow);
  background: var(--sbp-surface);
  margin-bottom: 16px;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.sbp-club-hero-media {
  height: 210px;
  background: linear-gradient(135deg, rgba(255,117,31,.28), rgba(15,23,42,.08));
}
.sbp-club-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbp-club-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,6,23,.15), rgba(2,6,23,.55));
  pointer-events: none; /* never block clicks */
  z-index: 0;
}

/* Current premium hero markup */
.sbp-club-hero-inner {
  position: relative;
  z-index: 1;
  min-height: 190px;
  padding: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.sbp-club-hero--no-cover { background: linear-gradient(135deg, rgba(255,117,31,.20), rgba(15,23,42,.08)); }
.sbp-club-hero-brand { display: flex; align-items: flex-end; gap: 14px; }
.sbp-club-hero-logo {
  width: 86px;
  height: 86px;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,.95);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--sbp-shadow);
  flex: 0 0 auto;
}
.sbp-club-hero-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbp-club-hero-logo-placeholder { width: 100%; height: 100%; display: grid; place-items: center; font-size: 1.75rem; }
.sbp-club-hero-title { margin: 0; color: #fff; font-size: 1.55rem; line-height: 1.15; }
.sbp-club-hero-location { margin-top: 6px; color: rgba(255,255,255,.88); font-weight: 600; }
.sbp-club-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sbp-club-hero-cta { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.sbp-club-hero-cta .button { white-space: nowrap; }

@media (max-width: 700px) {
  .sbp-club-hero-inner { flex-direction: column; align-items: stretch; }
  .sbp-club-hero-brand { align-items: center; }
  .sbp-club-hero-cta { width: 100%; justify-content: stretch; }
  .sbp-club-hero-cta .button { width: 100%; text-align: center; }
}
.sbp-club-hero-content {
  position: relative;
  padding: 16px;
  margin-top: -54px;
  display: flex;
  gap: 14px;
  align-items: flex-end;
}
.sbp-club-logo {
  width: 86px;
  height: 86px;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,.95);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--sbp-shadow);
}
.sbp-club-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbp-club-hero-title { margin: 0; color: #fff; font-size: 1.55rem; }
.sbp-club-hero-meta { color: rgba(255,255,255,.9); margin-top: 6px; }
.sbp-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sbp-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.14);
  color: #fff;
  font-weight: 600;
  font-size: .86rem;
}
.sbp-club-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.sbp-club-actions .button { white-space: nowrap; }

/* ------------------------------ */
/* Tabs (premium club page)       */
/* ------------------------------ */
.sbp-tabs { background: var(--sbp-surface); border: 1px solid var(--sbp-border); border-radius: var(--sbp-radius); box-shadow: var(--sbp-shadow-sm); overflow: hidden; }
.sbp-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  background: var(--sbp-surface-2);
  border-bottom: 1px solid var(--sbp-border);
  position: relative;
  z-index: 2;
}
.sbp-tab-btn {
  appearance: none;
  border: 1px solid var(--sbp-border);
  background: #fff;
  color: var(--sbp-text);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.sbp-tab-btn:hover { border-color: rgba(255,117,31,.45); box-shadow: var(--sbp-shadow-xs); }
.sbp-tab-btn:focus { outline: none; box-shadow: 0 0 0 4px var(--sbp-ring); border-color: rgba(255,117,31,.55); }
.sbp-tab-btn.is-active { background: rgba(255,117,31,.12); border-color: rgba(255,117,31,.55); }
.sbp-tabs-panels { padding: 14px; }

@media (max-width: 560px) {
  .sbp-tabs-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .sbp-tab-btn { flex: 0 0 auto; padding: 9px 12px; font-size: .95rem; }
  .sbp-tabs-panels { padding: 12px; }
}
.sbp-tab-panel { display: none; 
  overflow: visible;}
.sbp-tab-panel.is-active { display: block; }

/* ------------------------------ */
/* Featured slots                 */
/* ------------------------------ */
.sbp-featured .sbp-section-head { margin-bottom: 12px; }
.sbp-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1000px) { .sbp-featured-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 650px) { .sbp-featured-grid { grid-template-columns: 1fr; } }
.sbp-featured-slot {
  display: block;
  text-decoration: none;
  border: 1px solid var(--sbp-border);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  box-shadow: var(--sbp-shadow-xs);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.sbp-featured-slot:hover { transform: translateY(-1px); box-shadow: var(--sbp-shadow-sm); border-color: rgba(255,117,31,.45); }
.sbp-featured-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sbp-featured-time { font-weight: 800; font-size: 1.05rem; margin-top: 8px; color: var(--sbp-text); }
.sbp-featured-meta { margin-top: 2px; }
.sbp-badge--brand { background: rgba(255,117,31,.14); border-color: rgba(255,117,31,.35); color: var(--sbp-text); }

/* ------------------------------ */
/* Courts grid (marketplace cards)*/
/* ------------------------------ */
.sbp-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.sbp-courts-grid { position: relative; }
.sbp-courts-grid .sbp-skeleton { position: absolute; inset: 0; }
.sbp-courts-grid.sbp-skeleton-on .sbp-skeleton--cards { display: grid; }
.sbp-courts-grid.sbp-skeleton-on .sbp-court-card { opacity: 0; pointer-events: none; }

.sbp-courts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1000px) { .sbp-courts-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 650px) { .sbp-courts-grid { grid-template-columns: 1fr; } }

.sbp-court-card {
  border: 1px solid var(--sbp-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--sbp-shadow-xs);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.sbp-court-card:hover { transform: translateY(-1px); box-shadow: var(--sbp-shadow-sm); border-color: rgba(255,117,31,.45); }
.sbp-court-card-head { padding: 14px 14px 10px; border-bottom: 1px solid rgba(229,231,235,.7); }
.sbp-court-card-title { margin: 0; font-size: 1.05rem; font-weight: 800; }
.sbp-court-card-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sbp-court-card-body { padding: 12px 14px; }
.sbp-kpis { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.sbp-kpi { border: 1px solid var(--sbp-border); border-radius: 14px; padding: 10px; background: var(--sbp-surface-2); }
.sbp-kpi-label { color: var(--sbp-muted); font-size: .85rem; font-weight: 650; }
.sbp-kpi-value { font-weight: 900; margin-top: 4px; }
.sbp-court-card-footer { padding: 12px 14px 14px; margin-top: auto; }

/* ------------------------------ */
/* Map placeholder                */
/* ------------------------------ */
.sbp-map-placeholder {
  border: 1px dashed rgba(148,163,184,.8);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(248,250,252,1) 0%, rgba(255,255,255,1) 100%);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sbp-map-inner { text-align: center; }
.sbp-map-pin { font-size: 2rem; margin-bottom: 8px; }




/* ===== SBP Club Dashboard Premium (v7.1.0) ===== */
.sbp-page-club-dashboard .sbp-dashboard-header{
  display:flex;
  gap:16px;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
}
.sbp-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  margin: 14px 0 16px;
}
.sbp-kpi{
  background: var(--sbp-surface);
  border:1px solid var(--sbp-border);
  border-radius:12px;
  padding:12px 12px;
  box-shadow: var(--sbp-shadow-sm);
}
.sbp-kpi--wide{ grid-column: span 1; }
.sbp-kpi-label{
  font-size:12px;
  color: var(--sbp-muted);
  margin-bottom:6px;
}
.sbp-kpi-value{
  font-size:20px;
  font-weight:800;
  letter-spacing:-0.01em;
  color: var(--sbp-text);
  line-height:1.15;
}
.sbp-kpi-sub{
  margin-top:6px;
  font-size:12px;
  color: var(--sbp-muted);
}

/* Tabs */
.sbp-tabs{ margin-top: 8px; }
.sbp-tabs-nav{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  padding: 6px;
  background: #fff;
  border:1px solid var(--sbp-border);
  border-radius:12px;
  box-shadow: var(--sbp-shadow-sm);
}
.sbp-tab-link{
  appearance:none;
  border:1px solid transparent;
  background: transparent;
  color: var(--sbp-text);
  padding: 8px 10px;
  border-radius: 10px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.sbp-tab-link:hover{ background: rgba(255,117,31,.10); }
.sbp-tab-link.is-active{
  background: rgba(255,117,31,.14);
  border-color: rgba(255,117,31,.30);
  color: var(--sbp-text);
}
.sbp-tabs-panels{ margin-top: 12px; }
.sbp-tab-panel{ display:none; }
.sbp-tab-panel.is-active{ display:block; overflow: visible; }

@media (max-width: 900px){
  .sbp-kpis{ grid-template-columns: 1fr; }
  .sbp-tabs-nav{
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap:nowrap;
  }
  .sbp-tab-link{ white-space:nowrap; }
}
/* ===== /SBP Club Dashboard Premium ===== */

/* ===== SBP Teams (Player) ===== */
.sbp-inline-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: end;
}
.sbp-inline-form label { flex: 1 1 240px; }
.sbp-member-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.sbp-member-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--sbp-border);
  border-radius: 12px;
  background: var(--sbp-surface);
}
.sbp-member-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--sbp-brand);
}
.sbp-pill {
  margin-left: auto;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--sbp-border);
  background: var(--sbp-surface-2);
  color: var(--sbp-muted);
}
.sbp-card--soft {
  background: var(--sbp-surface-2);
  border: 1px solid var(--sbp-border);
}
.sbp-grid--2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 820px) {
  .sbp-grid--2 { grid-template-columns: 1fr; }
}
/* ===== /SBP Teams (Player) ===== */


/* v7.4.2 calendar overflow hardening */
.sbp-tabs-panels, .sbp-tab-panel { max-width: 100%; overflow: visible; }
.sbp-week-grid-scroll { width: 100%; max-width: 100%; }
@media (max-width: 800px) { .sbp-grid-2 { grid-template-columns: 1fr; } }


/* Club cards — logo + pill layout */
.sbp-club-card--with-logo { flex-direction: row; align-items: center; gap: 12px; }
.sbp-club-card__logo {
  width: 56px; height: 56px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--sbp-surface-2);
  border: 1px solid var(--sbp-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.sbp-club-card__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbp-club-card__logo-fallback { font-weight: 900; color: var(--sbp-muted); font-size: .95rem; }

/* Player dashboard — table separators */
.sbp-table-sep td{
  background: var(--sbp-surface-2);
  color: var(--sbp-muted);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
  padding: 10px 12px;
  border-top: 1px solid var(--sbp-border);
}



/* ===== Modal (Club Calendar) ===== */
.sbp-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.sbp-modal.sbp-modal--open { display: block; }
.sbp-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.sbp-modal__dialog { position: relative; max-width: 720px; width: calc(100% - 24px); margin: 48px auto; background: #fff; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.18); padding: 18px; }
.sbp-modal__close { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; opacity: .7; }
.sbp-modal__close:hover { opacity: 1; }
.sbp-modal__title { margin: 0 0 12px; font-size: 18px; }
.sbp-modal__body { display: grid; gap: 10px; }
.sbp-modal__footer { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.sbp-kv { display:flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid #eee; border-radius: 12px; background: #fafafa; }
.sbp-kv > span { color: #666; font-size: 12px; }
.sbp-kv > strong { font-weight: 700; }
.sbp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .sbp-grid-2 { grid-template-columns: 1fr; } .sbp-modal__dialog { margin: 18px auto; } }

/* ===== Calendar slots statuses ===== */
.sbp-week-slot--free { border-color: rgba(255,117,31,.35); }
.sbp-week-slot--free:hover { background: rgba(255,117,31,.08); }
.sbp-week-slot--booked { background: #fff5f5; border-color: rgba(220,38,38,.35); }
.sbp-week-slot--booked:hover { background: #ffecec; }
.sbp-week-slot--pending { background: #fff7ed; border-color: rgba(245,158,11,.35); }
.sbp-week-slot--blocked { background: #f3f4f6; border-color: rgba(17,24,39,.18); cursor: not-allowed; opacity: .8; }
.sbp-week-legend { display:flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0 12px; }
.sbp-pill { display:inline-flex; align-items:center; gap:6px; padding: 6px 10px; border-radius: 999px; font-size: 12px; border:1px solid rgba(17,24,39,.12); background:#fff; }
.sbp-pill--free { border-color: rgba(255,117,31,.35); }
.sbp-pill--confirmed { border-color: rgba(220,38,38,.35); background:#fff5f5; }
.sbp-pill--pending { border-color: rgba(245,158,11,.35); background:#fff7ed; }
.sbp-pill--blocked { border-color: rgba(107,114,128,.35); background:#f3f4f6; }
.sbp-hint { color:#666; font-size: 12px; }

/* ===== v7.5.2 - Improve contrast on booked slots (club calendar) ===== */
/* Username + status pills inside booked slots were too low-contrast on light red background */
.sbp-week-slot--booked .sbp-pill,
.sbp-week-slot--pending .sbp-pill {
  color: #0f172a; /* slate-900 */
  background: rgba(255,255,255,.82);
  border-color: rgba(15,23,42,.18);
}

/* Stronger status pills */
.sbp-week-slot--booked .sbp-pill--confirmed {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}
.sbp-week-slot--pending .sbp-pill--pending {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #111827;
}

/* If action buttons are rendered inside a slot or modal, ensure readable text */
.sbp-week-slot--booked .sbp-btn,
.sbp-week-slot--pending .sbp-btn,
.sbp-modal__footer .sbp-btn {
  color: inherit;
}


/* Notices */
.sbp-app .sbp-notice{border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:14px 16px;margin:10px 0 18px 0;}
.sbp-app .sbp-notice-success{background:#ECFDF5;border-color:rgba(16,185,129,.28);}
.sbp-app .sbp-notice-title{font-size:18px;font-weight:800;line-height:1.2;margin-bottom:6px;color:#065F46;}
.sbp-app .sbp-notice-sub{font-size:14px;line-height:1.35;color:#064E3B;}
.sbp-app .sbp-notice-error{background:#FEF2F2;border-color:rgba(239,68,68,.25);}
.sbp-app .sbp-notice-error .sbp-notice-title{color:#7F1D1D;}