/* Stævneportal Pro – frontend styles (scoped) */
.spp-portal{
  --spp-radius: 16px;
  --spp-shadow: 0 18px 50px rgba(0,0,0,.35);
  --spp-max: 1180px;
  background: var(--spp-bg);
  color: var(--spp-text);
  border-radius: var(--spp-radius);
  overflow: hidden;
  position: relative;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

/* Soft star/nebula look */
.spp-portal::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 450px at 20% 20%, rgba(111,224,237,.20), transparent 60%),
    radial-gradient(900px 450px at 80% 30%, rgba(180,220,132,.18), transparent 60%),
    radial-gradient(900px 450px at 60% 80%, rgba(175,116,74,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%);
  pointer-events:none;
  z-index: 0;
}
.spp-portal *{ box-sizing: border-box; }
.spp-portal a{ color: inherit; text-decoration: none; }
/*
  Base image rule.
  Use :where() to keep specificity low so component-specific image sizes (logo/brand/icons)
  can override without needing extra selectors.
*/
.spp-portal :where(img){ max-width:100%; height:auto; display:block; }

.spp-hero{
  padding: 64px 24px 40px;
  position: relative;
  z-index: 1;
}
.spp-hero__inner{
  max-width: var(--spp-max);
  margin: 0 auto;
  text-align: center;
}

.spp-hero__logo{
  width: 250px;
  height: 250px;
  object-fit: contain;
  margin: 0 auto 14px;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.35));
}

@media (max-width: 640px){
  .spp-hero__logo{ width: 190px; height: 190px; margin-bottom: 12px; }
}

/* Embed pages (club/login) – keep header compact */
body.spp-embed .spp-hero{ padding: 34px 18px 18px; }
body.spp-embed .spp-hero__logo{ width: 180px; height: 180px; margin-bottom: 10px; }
@media (max-width: 640px){
  body.spp-embed .spp-hero{ padding: 24px 16px 16px; }
  body.spp-embed .spp-hero__logo{ width: 140px; height: 140px; }
}

.spp-topline{ margin-bottom: 14px; display:flex; justify-content:center; }
.spp-badge{
  display:inline-flex; gap:10px; align-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--spp-border);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .3px;
}

.spp-h1{
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
  margin: 14px 0 10px;
  letter-spacing: -0.6px;
}
.spp-lead{
  max-width: 880px;
  margin: 0 auto 22px;
  color: var(--spp-muted);
  font-size: 16px;
  line-height: 1.6;
}

.spp-filter{
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.2fr auto;
  gap: 12px;
  padding: 14px;
  margin: 20px auto 0;
  max-width: var(--spp-max);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--spp-border);
  border-radius: 14px;
  backdrop-filter: blur(6px);
}
@media (max-width: 920px){
  .spp-filter{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .spp-filter{ grid-template-columns: 1fr; }
}
.spp-field{ text-align:left; }
.spp-field label{
  display:block;
  font-size: 12px;
  color: var(--spp-muted);
  margin: 0 0 6px;
}
.spp-filter input, .spp-filter select{
  width:100%;
  background: rgba(11,18,24,.55);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--spp-text);
  padding: 10px 12px;
  border-radius: 12px;
  outline: none;
}
.spp-filter input::placeholder{ color: rgba(246,249,251,.55); }
.spp-field--date .spp-datewrap{ display:flex; align-items:center; gap:8px; }
.spp-field--date span{ color: var(--spp-muted); }
.spp-field--btn{ display:flex; align-items:flex-end; }

.spp-ctas{ display:flex; gap:12px; justify-content:center; margin-top: 16px; flex-wrap: wrap; }

.spp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius: 12px;
  /* Keep buttons consistent across <a> and <button> (themes often style them differently) */
  font-size: 14px;
  line-height: 1.1;
  min-height: 44px;
  padding: 10px 16px;
  font-weight: 700;
  letter-spacing: .2px;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.spp-btn--primary{
  background: linear-gradient(135deg, var(--spp-primary), rgba(111,224,237,.65));
  color: #000;
  box-shadow: 0 12px 30px rgba(111,224,237,.18);
}
.spp-btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 16px 38px rgba(111,224,237,.24); }

.spp-btn--ghost{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: var(--spp-text);
}
.spp-btn--ghost:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); }

.spp-btn--small{ padding: 10px 12px; border-radius: 10px; font-size: 13px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.spp-btn--small:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); }
.spp-btn--block{ width:100%; }

.spp-trust{
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.spp-chip{
  display:inline-flex; align-items:center; gap:8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--spp-muted);
}

.spp-section{
  padding: 46px 24px;
  position: relative;
  z-index: 1;
}
.spp-section__head{
  max-width: var(--spp-max);
  margin: 0 auto 20px;
  position: relative;
  /* Leave room for the corner brand (used on Kalender page) */
  padding-right: 92px;
}

.spp-section__brand{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 68px;
  height: 68px;
  pointer-events: none;
  opacity: .98;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 18px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.spp-section__brand-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.35));
}
@media (max-width: 520px){
  .spp-section__head{ padding-right: 78px; }
  .spp-section__brand{ top: 8px; right: 8px; width: 54px; height: 54px; padding: 6px; border-radius: 16px; }
}
.spp-h2{
  margin: 0 0 8px;
  font-size: 26px;
  letter-spacing: -0.3px;
}
.spp-sub{
  margin:0;
  color: var(--spp-muted);
  line-height: 1.6;
  max-width: 860px;
}

.spp-grid{
  max-width: var(--spp-max);
  margin: 0 auto;
  display:grid;
  gap: 14px;
}
.spp-grid--sports{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px){ .spp-grid--sports{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){ .spp-grid--sports{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px){ .spp-grid--sports{ grid-template-columns: 1fr; } }

.spp-grid--tournaments{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px){ .spp-grid--tournaments{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px){ .spp-grid--tournaments{ grid-template-columns: 1fr; } }

.spp-card{
  background: rgba(26,42,53,.70);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  transition: transform .12s ease, border-color .12s ease;
}
.spp-card:hover{ transform: translateY(-2px); border-color: rgba(111,224,237,.35); }

.spp-sport{
  display:flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  /* Make sports boxes visually consistent even with larger icons */
  min-height: 270px;
}
.spp-sport__icon{
  /* Requested: icons ~2x larger */
  /* Requested: +15% larger */
  width: 161px; height: 161px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(11,18,24,.55);
  border: 1px solid rgba(255,255,255,.12);
}
.spp-sport__icon .dashicons{ font-size: 78px; width: 78px; height: 78px; color: var(--spp-primary); }
.spp-sport__icon img{ width: 120px; height: 120px; object-fit: contain; }

@media (max-width: 480px){
  /* Keep it premium on mobile without eating the whole viewport */
  .spp-sport{ min-height: 250px; }
  .spp-sport__icon{ width: 134px; height: 134px; }
  .spp-sport__icon .dashicons{ font-size: 64px; width: 64px; height: 64px; }
  .spp-sport__icon img{ width: 99px; height: 99px; }
}

.spp-sport__body{ width: 100%; display:flex; flex-direction: column; align-items: center; }
.spp-sport__title{ font-weight: 800; }
.spp-sport__desc{ font-size: 13px; margin-top: 4px; color: var(--spp-muted); line-height: 1.4; }
.spp-sport__actions{ display:flex; gap: 10px; margin-top: 10px; flex-wrap: nowrap; width: 100%; justify-content: center; }
.spp-sport__actions .spp-mini{ flex: 1; display:inline-flex; justify-content: center; }
.spp-mini{ font-size: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(111,224,237,.10); border: 1px solid rgba(111,224,237,.22); color: var(--spp-text); }
.spp-mini--ghost{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: var(--spp-muted); }

.spp-tabs{
  max-width: var(--spp-max);
  margin: 14px auto 16px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.spp-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--spp-muted);
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
}
.spp-tab.is-active{
  color: #061016;
  border-color: rgba(111,224,237,.40);
  background: linear-gradient(135deg, rgba(111,224,237,.95), rgba(180,220,132,.55));
}

/* Phase 3: Pagination (Model A) */
.spp-tournaments{ position: relative; }
.spp-tournaments__anchor{ position: relative; top: -8px; }

.spp-pagination{
  max-width: var(--spp-max);
  margin: 16px auto 0;
}
.spp-pagination__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.spp-pagination__status{
  font-weight: 800;
  color: var(--spp-text);
  letter-spacing: -0.2px;
}
.spp-btn.is-disabled{
  opacity: .45;
  pointer-events: none;
}
.spp-loading{
  max-width: var(--spp-max);
  margin: 10px auto 0;
  color: var(--spp-muted);
  font-size: 13px;
}

/* Premium loading + status */
.spp-tournaments.is-loading [data-spp-list]{ opacity: .58; }
.spp-tournaments.is-loading .spp-loading{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(11,18,24,.72);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  z-index: 5;
  max-width: none;
  margin: 0;
}

.spp-status{
  max-width: var(--spp-max);
  margin: 10px auto 0;
  color: var(--spp-muted);
  font-size: 13px;
}
.spp-status.is-error{
  color: rgba(255, 196, 196, .95);
  background: rgba(255, 90, 90, .08);
  border: 1px solid rgba(255, 90, 90, .18);
  padding: 10px 12px;
  border-radius: 14px;
}

.spp-tournament__meta{ display:flex; align-items:center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.spp-tag{
  background: rgba(180,220,132,.14);
  border: 1px solid rgba(180,220,132,.26);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: var(--spp-text);
}
.spp-tag--danger{background:rgba(255,90,90,.10);border-color:rgba(255,90,90,.24);}
.spp-tag--muted{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--spp-muted);}

.spp-meta{ color: var(--spp-muted); font-size: 12px; }
.spp-h3{ margin: 6px 0 10px; font-size: 18px; letter-spacing: -0.2px; }
.spp-excerpt{ color: var(--spp-muted); line-height: 1.55; font-size: 13px; }
.spp-row{ display:flex; align-items:center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.spp-link{ color: var(--spp-primary); font-weight: 700; font-size: 13px; }
.spp-link:hover{ text-decoration: underline; }

.spp-section__split{
  max-width: var(--spp-max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: center;
}
.spp-section__split--reverse{ grid-template-columns: .85fr 1.15fr; }
@media (max-width: 980px){ .spp-section__split{ grid-template-columns: 1fr; } }

.spp-bullets{ margin: 14px 0 0; padding-left: 18px; color: var(--spp-muted); line-height: 1.8; }
.spp-bullets li{ margin: 4px 0; }
.spp-bullets li::marker{ color: var(--spp-green); }

.spp-mock{
  background: rgba(18,31,40,.70);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: var(--spp-shadow);
  overflow:hidden;
}
.spp-mock__chrome{
  display:flex;
  gap:8px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.spp-mock__chrome span{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.20);
}
.spp-mock__body{ padding: 14px; }
.spp-mock__body--img{ padding: 0; }
.spp-mock__img{ width: 100%; height: auto; display: block; }
.spp-mock__row{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.spp-mock__kpi{ height: 46px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); }
.spp-mock__table{ display:grid; gap: 10px; }
.spp-mock__line{ height: 14px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.spp-mock__hint{ font-size: 12px; color: var(--spp-muted); padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.08); }

.spp-steps{
  max-width: var(--spp-max);
  margin: 16px auto 0;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px){ .spp-steps{ grid-template-columns: 1fr; } }
.spp-step{
  background: rgba(26,42,53,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 16px;
  text-align:center;
}
.spp-step__num{
  width: 46px; height: 46px;
  margin: 0 auto 10px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(111,224,237,.10);
  border: 1px solid rgba(111,224,237,.22);
  font-weight: 900;
  color: var(--spp-primary);
}
.spp-step__title{ font-weight: 900; }
.spp-step__text{ margin-top: 6px; color: var(--spp-muted); line-height: 1.55; font-size: 13px; }

.spp-pricing{
  max-width: var(--spp-max);
  margin: 16px auto 0;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){ .spp-pricing{ grid-template-columns: 1fr; } }
.spp-plan{ padding: 18px; }
.spp-plan.is-featured{
  border-color: rgba(111,224,237,.35);
  box-shadow: 0 18px 60px rgba(111,224,237,.14);
}
.spp-plan__name{ font-weight: 900; font-size: 18px; }
.spp-plan__price{ margin: 10px 0 14px; display:flex; align-items:baseline; gap: 8px; }
.spp-plan__amount{ font-weight: 1000; font-size: 40px; letter-spacing: -1px; }
.spp-plan__period{ color: var(--spp-muted); font-weight: 800; }
.spp-plan__features{ margin: 0 0 16px; padding-left: 18px; color: var(--spp-muted); line-height: 1.9; }
.spp-plan__features li::marker{ color: var(--spp-orange); }

.spp-empty{
  max-width: var(--spp-max);
  margin: 0 auto;
  padding: 16px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 16px;
  color: var(--spp-muted);
  background: rgba(255,255,255,.03);
}

/* Dashicons fix inside frontend */
.spp-portal .dashicons { font-family: dashicons; }

/* =====================================================
   Calendar (Phase 4.1) – Google-like month overview
   Scoped to .spp-portal to avoid theme conflicts
===================================================== */

.spp-portal .spp-cal{
  max-width: var(--spp-max);
  margin: 0 auto;
  background: rgba(26,42,53,.45);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}

/* Top “next 4 tournaments” strip */
.spp-portal .spp-cal__upcoming{
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.spp-portal .spp-cal__upcomingtitle{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 900;
  color: var(--spp-muted);
  margin-bottom: 10px;
}

.spp-portal .spp-cal__upcominglist{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.spp-portal .spp-cal__up{
  display: flex;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
}

.spp-portal .spp-cal__up:hover{
  border-color: rgba(111,224,237,.35);
  box-shadow: 0 10px 30px rgba(111,224,237,.10);
}

.spp-portal .spp-cal__upicon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  flex: 0 0 44px;
  overflow: hidden;
}

.spp-portal .spp-cal__upicon img{
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.spp-portal .spp-cal__upicon .dashicons{
  font-size: 20px;
  width: 20px;
  height: 20px;
}

.spp-portal .spp-cal__uptext{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.spp-portal .spp-cal__upline1{
  font-size: 11px;
  font-weight: 900;
  color: var(--spp-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.spp-portal .spp-cal__upline2{
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: -.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spp-portal .spp-cal__upline3{
  font-size: 12px;
  color: var(--spp-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spp-portal .spp-cal__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 12px;
}

.spp-portal .spp-cal__layout{
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  align-items: start;
  margin-top: 12px;
}

.spp-portal .spp-cal__main{min-width:0;}

.spp-portal .spp-cal__panel{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 14px;
}

.spp-portal .spp-cal__panelhead{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.spp-portal .spp-cal__paneltitle{
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .45px;
  color: var(--spp-muted);
}

.spp-portal .spp-cal__paneldate{
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,.85);
}

.spp-portal .spp-cal__panelempty{
  padding: 10px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.12);
  color: var(--spp-muted);
  font-size: 13px;
}

.spp-portal .spp-cal__panelitem{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  text-decoration:none;
  color: var(--spp-text);
  margin-bottom: 10px;
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
}

.spp-portal .spp-cal__panelitem:hover{
  transform: translateY(-1px);
  border-color: rgba(111,224,237,.25);
  background: rgba(111,224,237,.06);
}

.spp-portal .spp-cal__paneldot{
  width: 10px;
  height: 10px;
  border-radius: 99px;
  margin-top: 5px;
  background: var(--spp-cal-accent, rgba(255,255,255,.55));
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
  flex: 0 0 auto;
}

.spp-portal .spp-cal__paneltext{
  display:flex;
  flex-direction:column;
  gap: 4px;
  min-width:0;
}

.spp-portal .spp-cal__panelitemtitle{
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: -.2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.spp-portal .spp-cal__panelitemmeta{
  font-size: 12px;
  color: var(--spp-muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.spp-portal .spp-cal__grid .spp-cal__cell.is-selected{
  box-shadow: 0 0 0 2px rgba(111,224,237,.25);
  border-color: rgba(111,224,237,.20);
}

@media (max-width: 900px){
  .spp-portal .spp-cal__layout{ grid-template-columns: 1fr; }
  .spp-portal .spp-cal__panel{ order: 2; }
}

.spp-portal .spp-cal__nav{
  display:flex;
  align-items:center;
  gap: 10px;
}

.spp-portal .spp-cal__btn{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--spp-text);
  text-decoration:none;
}

.spp-portal .spp-cal__btn:hover{
  border-color: rgba(111,224,237,.35);
  box-shadow: 0 10px 30px rgba(111,224,237,.10);
}

.spp-portal .spp-cal__month{
  font-weight: 1000;
  letter-spacing: -.2px;
  font-size: 16px;
  padding: 0 4px;
}

.spp-portal .spp-cal__filters{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 0;
}

.spp-portal .spp-cal__actions{
  display:flex;
  align-items:center;
  gap: 12px;
}

.spp-portal .spp-cal__brand{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: 0 18px 36px rgba(0,0,0,.35);
}

.spp-portal .spp-cal__brand img{
  width: 28px;
  height: 28px;
  opacity: .95;
}

.spp-portal .spp-cal__filters select{
  height: 38px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: #000 !important;
  color-scheme: dark;
  color: var(--spp-text);
  outline: none;
}

/* Make the dropdown list itself dark where supported */
.spp-portal .spp-cal__filters select option{
  background: #000 !important;
  color: var(--spp-text) !important;
}

.spp-portal .spp-cal__filters select:focus{
  border-color: rgba(111,224,237,.35);
  box-shadow: 0 0 0 4px rgba(111,224,237,.12);
}

.spp-portal .spp-cal__grid{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.spp-portal .spp-cal__dow{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.spp-portal .spp-cal__dowcell{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .4px;
  color: var(--spp-muted);
  text-transform: uppercase;
  padding: 2px 4px;
}

.spp-portal .spp-cal__cell{
  min-height: 118px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 10px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.spp-portal .spp-cal__cell.is-outside{
  opacity: .40;
}

.spp-portal .spp-cal__cell.is-today{
  border-color: rgba(111,224,237,.45);
  box-shadow: 0 12px 38px rgba(111,224,237,.10);
}

.spp-portal .spp-cal__daynum{
  font-weight: 1000;
  font-size: 13px;
  color: var(--spp-text);
  opacity: .92;
}

.spp-portal .spp-cal__events{
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.spp-portal .spp-cal__event{
  --spp-ev: var(--spp-primary);
  display:block;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  color: var(--spp-text);
  text-decoration:none;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  position: relative;
}

.spp-portal .spp-cal__event::before{
  content: "";
  position:absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--spp-ev);
}

.spp-portal .spp-cal__event:hover{
  border-color: rgba(255,255,255,.20);
  background: rgba(255,255,255,.05);
}

.spp-portal .spp-cal__more{
  margin-top: 2px;
  align-self: flex-start;
  border: 0;
  background: transparent;
  color: var(--spp-primary);
  font-weight: 900;
  cursor: pointer;
  padding: 2px 0;
}

.spp-portal .spp-cal__more:hover{
  text-decoration: underline;
}

/* Modal */
.spp-portal .spp-cal__modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.spp-portal .spp-cal__modal.is-open{
  display:block;
}

.spp-portal .spp-cal__modalback{
  position:absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}

.spp-portal .spp-cal__modalcard{
  position: relative;
  margin: 6vh auto 0;
  width: min(720px, calc(100% - 28px));
  max-height: 80vh;
  overflow:auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(18,28,36,.92);
  box-shadow: 0 24px 90px rgba(0,0,0,.55);
  padding: 16px;
}

.spp-portal .spp-cal__modalclose{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--spp-text);
  cursor:pointer;
  font-size: 22px;
  line-height: 1;
}

.spp-portal .spp-cal__modalclose:hover{
  border-color: rgba(111,224,237,.35);
}

.spp-portal .spp-cal__modaltitle{
  font-weight: 1000;
  letter-spacing: -.2px;
  font-size: 16px;
  padding-right: 42px;
  margin-bottom: 10px;
}

.spp-portal .spp-cal__modallist{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.spp-portal .spp-cal__modalitem{
  --spp-ev: var(--spp-primary);
  display:block;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 12px 12px 12px 14px;
  text-decoration:none;
  color: var(--spp-text);
  position: relative;
}

.spp-portal .spp-cal__modalitem::before{
  content:"";
  position:absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 4px;
  background: var(--spp-ev);
}

.spp-portal .spp-cal__modalitemtitle{
  font-weight: 1000;
}

.spp-portal .spp-cal__modalitemmeta{
  margin-top: 4px;
  color: var(--spp-muted);
  font-size: 12px;
  line-height: 1.35;
}

.spp-portal .spp-cal__modalempty{
  padding: 12px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
  color: var(--spp-muted);
}

/* Tournament details (modal) */
.spp-portal .spp-cal__detailsmodal .spp-cal__modalcard{
  width: min(620px, calc(100% - 28px));
}

.spp-portal .spp-cal-detail__top{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.spp-portal .spp-cal-detail__sport{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.spp-portal .spp-cal-detail__sporticon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  object-fit: cover;
  background: rgba(255,255,255,.04);
}

.spp-portal .spp-cal-detail__sportname{
  font-weight: 1000;
  letter-spacing: -.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spp-portal .spp-cal-detail__type{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  white-space: nowrap;
}

.spp-portal .spp-cal-detail__title{
  font-weight: 1100;
  font-size: 20px;
  letter-spacing: -.4px;
  margin: 2px 0 12px;
}

.spp-portal .spp-cal-detail__meta{
  display:flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

.spp-portal .spp-cal-detail__row{
  display:flex;
  gap: 10px;
  justify-content: space-between;
}

.spp-portal .spp-cal-detail__k{
  color: var(--spp-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.spp-portal .spp-cal-detail__v{
  color: rgba(255,255,255,.92);
  font-size: 14px;
  text-align: right;
}

.spp-portal .spp-cal-detail__desc{
  margin-top: 12px;
  color: rgba(255,255,255,.80);
  line-height: 1.45;
}

.spp-portal .spp-cal-detail__actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* Loading overlay */
.spp-portal .spp-cal.is-loading{
  pointer-events: none;
}

.spp-portal .spp-cal.is-loading::after{
  content:"";
  position:absolute;
  inset: 0;
  background: rgba(18,28,36,.55);
  backdrop-filter: blur(3px);
}

.spp-portal .spp-cal.is-loading::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 42px;
  margin-left: -21px;
  margin-top: -21px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: rgba(111,224,237,.65);
  animation: sppSpin .9s linear infinite;
  z-index: 1;
}

@keyframes sppSpin{
  to{ transform: rotate(360deg); }
}

html.spp-modal-open{ overflow: hidden; }

/* Organizer/account forms */
.spp-form{max-width:720px;margin:0 auto;}
.spp-form__brand{max-width:720px;margin:0 auto 10px;display:flex;justify-content:flex-end;opacity:.95;}
.spp-form__brandimg{height:34px;width:auto;display:block;}
.spp-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.spp-form__grid--1{grid-template-columns:1fr;}
.spp-form label{display:block;font-size:13px;color:rgba(255,255,255,0.85);margin:10px 0 6px;}
.spp-form input[type=text],.spp-form input[type=email],.spp-form input[type=password],.spp-form input[type=tel],.spp-form input[type=url],.spp-form input[type=date],.spp-form input[type=time],.spp-form select,.spp-form textarea{
  width:100%;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(111,224,237,.25);
  border-radius: 12px;
  padding: 10px 12px;
  color: #fff;
  outline: none;
}
.spp-form textarea{min-height:110px;resize:vertical;}
.spp-form input:focus,.spp-form select:focus,.spp-form textarea:focus{box-shadow:0 0 0 3px rgba(111,224,237,.15);border-color: rgba(111,224,237,.45);}
.spp-form .spp-btn{margin-top:14px;}
.spp-help{font-size:12px;color:rgba(255,255,255,0.7);margin-top:10px;}
.spp-msg{padding:12px 14px;border-radius:14px;margin:12px 0;border:1px solid rgba(255,255,255,0.12);}
.spp-msg--ok{background:rgba(0,255,170,0.06);border-color:rgba(0,255,170,0.18);}
.spp-msg--err{background:rgba(255,60,60,0.07);border-color:rgba(255,60,60,0.18);}
.spp-konto{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
.spp-konto__card{background:rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.10);border-radius:18px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,0.25);}
.spp-konto__title{font-weight:700;margin:0 0 6px;color:#fff;}

/* Phase 6.1 – Club portal head actions */
.spp-clubhead__actions{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;}

/* Phase 6.1 – Auth (login + opret klub) */
html.spp-hasjs .spp-auth-inline{display:none;}

.spp-auth{background:rgba(0,0,0,0.18);border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:14px;}
.spp-auth__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;}
.spp-auth__title{font-size:16px;font-weight:800;color:#fff;letter-spacing:.2px;}
.spp-auth__sub{color:rgba(255,255,255,0.72);font-size:13px;}
.spp-auth__brand{flex:0 0 auto;opacity:.95;}
.spp-auth__brandimg{height:32px;width:auto;display:block;}

.spp-auth__tabs{display:flex;gap:8px;margin:10px 0 14px;}
.spp-auth__tab{appearance:none;border:1px solid rgba(255,255,255,0.14);background:rgba(0,0,0,0.22);color:#fff;border-radius:999px;padding:8px 12px;font-weight:700;font-size:13px;cursor:pointer;}
.spp-auth__tab.is-active{border-color:rgba(111,224,237,0.65);box-shadow:0 0 0 3px rgba(111,224,237,0.12);}

.spp-auth__pane{display:none;}
.spp-auth__pane.is-active{display:block;}

.spp-auth__modal{position:fixed;inset:0;display:none;z-index:9999;}
.spp-auth__modal.is-open{display:block;}
.spp-auth__modalback{position:absolute;inset:0;background:rgba(0,0,0,0.66);backdrop-filter:blur(4px);}
.spp-auth__modalcard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,calc(100% - 32px));max-height:calc(100% - 40px);overflow:auto;background:#0c141b;border:1px solid rgba(255,255,255,0.12);border-radius:18px;padding:14px;box-shadow:0 18px 50px rgba(0,0,0,0.55);}
.spp-auth__modalclose{position:sticky;top:0;float:right;margin-left:10px;border:1px solid rgba(255,255,255,0.16);background:rgba(0,0,0,0.25);color:#fff;width:36px;height:36px;border-radius:12px;cursor:pointer;}

@media (max-width: 560px){
  .spp-auth__modalcard{width:calc(100% - 20px);border-radius:16px;}
}

/* Phase 6.1: Club portal */
.spp-portal .spp-clubbar{max-width:var(--spp-max);margin:0 auto 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.spp-portal .spp-clubbar__left{flex:1;min-width:240px}
.spp-portal .spp-clubbar__hint{font-size:13px;line-height:1.35;color:rgba(255,255,255,.78)}
.spp-portal .spp-grid--club{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width: 900px){.spp-portal .spp-grid--club{grid-template-columns:1fr;}}
.spp-portal .spp-card--club{padding:14px;border-radius:18px;}
.spp-portal .spp-clubcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.spp-portal .spp-clubcard__title{font-weight:900;letter-spacing:-.3px;margin:0 0 8px;color:#fff;}
.spp-portal .spp-clubcard__meta{display:flex;flex-wrap:wrap;gap:8px;}
.spp-portal .spp-clubcard__actions{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;}
.spp-portal .spp-status{display:inline-flex;align-items:center;gap:8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);color:rgba(255,255,255,.85);}
.spp-portal .spp-status--pub{border-color:rgba(0,255,170,.22);background:rgba(0,255,170,.08);}
.spp-portal .spp-status--hid{border-color:rgba(255,60,60,.18);background:rgba(255,60,60,.07);}

.spp-portal .spp-btn--warn{border-color:rgba(255,169,64,.28);background:rgba(255,169,64,.10);color:var(--spp-text);}
.spp-portal .spp-btn--warn:hover{transform:translateY(-1px);border-color:rgba(255,169,64,.38);}
.spp-portal .spp-btn--danger{border-color:rgba(255,60,60,.28);background:rgba(255,60,60,.10);}
.spp-portal .spp-btn--danger:hover{transform:translateY(-1px);border-color:rgba(255,60,60,.38);}

/* Make club portal hero a bit more compact */
.spp-section--club{padding:34px 18px}
.spp-section--club .spp-section__head{padding:22px 22px 18px;border-radius:20px;}
.spp-section--club .spp-h2{font-size:28px;}
.spp-section--club .spp-sub{font-size:14px;}

@media (max-width: 560px){
  .spp-section--club{padding:24px 14px}
  .spp-section--club .spp-section__head{padding:18px 18px 16px}
  .spp-section--club .spp-h2{font-size:24px}
}

/* List header */
.spp-portal .spp-club__listhead{max-width:var(--spp-max);margin:14px auto 10px;}
.spp-portal .spp-club__listtitle{margin:0;font-size:20px;font-weight:900;letter-spacing:-.2px;color:#fff;}

/* Collapsible create section */
.spp-portal .spp-details{max-width:var(--spp-max);margin:12px auto 0;}
.spp-portal .spp-details__summary{list-style:none;cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);color:#fff;}
.spp-portal .spp-details__summary::-webkit-details-marker{display:none;}
.spp-portal .spp-details__title{font-weight:900;letter-spacing:-.2px;}
.spp-portal .spp-details__meta{font-size:12px;font-weight:700;color:rgba(255,255,255,.72);}
.spp-portal .spp-details__body{margin-top:12px;}
.spp-portal .spp-details[open] .spp-details__summary{border-color:rgba(111,224,237,.45);box-shadow:0 0 0 3px rgba(111,224,237,.10);}

@media (max-width: 720px){
  .spp-form__grid{grid-template-columns:1fr;}
  .spp-konto{grid-template-columns:1fr;}
}

@media (max-width: 900px){
  .spp-portal .spp-cal{ padding: 12px; }
  .spp-portal .spp-cal__upcominglist{ grid-template-columns: 1fr; }
  .spp-portal .spp-cal__cell{ min-height: 92px; padding: 8px; border-radius: 14px; }
  .spp-portal .spp-cal__event{ font-size: 11px; padding: 5px 7px; border-radius: 11px; }
  .spp-portal .spp-cal__event::before{ top: 7px; bottom: 7px; }
  .spp-portal .spp-cal__grid{ gap: 8px; }
  .spp-portal .spp-cal__dow{ gap: 8px; }
}

@media (max-width: 520px){
  .spp-portal .spp-cal__bar{ gap: 10px; }
  .spp-portal .spp-cal__actions{ width: 100%; justify-content: space-between; }
  .spp-portal .spp-cal__filters{ width: 100%; justify-content: space-between; }
  .spp-portal .spp-cal__filters select{ flex: 1; }
  .spp-portal .spp-cal__month{ font-size: 15px; }
  .spp-portal .spp-cal__cell{ min-height: 86px; }
  .spp-portal .spp-cal__event{ font-size: 10.5px; }
  .spp-portal .spp-cal__dowcell{ font-size: 10px; }
}


/* Clickable cards (sports) */
.spp-card[data-spp-cardlink]{ cursor: pointer; }
.spp-card[data-spp-cardlink]:focus{ outline: 2px solid rgba(111,224,237,.55); outline-offset: 2px; }


/* Embed kalender: ingen højre sidekolonne */
body.spp-embed .spp-cal__layout{ grid-template-columns: 1fr !important; }
body.spp-embed .spp-cal__panel{ display: none !important; }


/* Calendar filter chips */
.spp-cal__chips{ display:flex; align-items:center; gap:10px; margin-left: 10px; }
.spp-cal__chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color: var(--spp-text); text-decoration:none; font-size:12px; font-weight:700; }
.spp-cal__chip:hover{ background: rgba(255,255,255,.09); }
.spp-cal__chipx{ opacity:.75; font-size: 14px; line-height: 1; }
@media (max-width: 600px){ .spp-cal__chips{ width:100%; margin:10px 0 0 0; justify-content:flex-start; } }


/* Club portal lifecycle badges */
.spp-portal .spp-status--closed{border-color:rgba(255,169,64,.22);background:rgba(255,169,64,.08);}
.spp-portal .spp-status--cancelled{border-color:rgba(255,90,90,.24);background:rgba(255,90,90,.10);}


/* Edit form wrapper inside club portal */
.spp-editcard{max-width:var(--spp-max);margin:16px auto 0;padding:16px;border-radius:18px;background:var(--spp-surface);border:1px solid var(--spp-border);}
.spp-editcard__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.spp-editcard__title{font-weight:900;font-size:16px;letter-spacing:-0.2px;}
.spp-editcard__sub{color:var(--spp-muted);font-size:12px;margin-top:2px;}


/* Calendar detail pills */
.spp-portal .spp-cal-detail__pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--spp-border);background:rgba(255,255,255,.06);color:var(--spp-text);font-size:12px;font-weight:800;letter-spacing:-0.2px;}
.spp-portal .spp-cal-detail__pill.is-warn{border-color:rgba(255,169,64,.28);background:rgba(255,169,64,.10);}
.spp-portal .spp-cal-detail__pill.is-danger{border-color:rgba(255,90,90,.24);background:rgba(255,90,90,.10);}


/* Embed calendar button polish (Tilbage + Opdater) */
body.spp-embed .spp-embed-back{
  color:#fff !important;
}

body.spp-embed .spp-cal__filters .spp-btn--small,
body.spp-embed .spp-cal__filters button,
body.spp-embed .spp-cal__filters input[type="submit"]{
  background: rgba(111,224,237,.95) !important;
  border-color: rgba(111,224,237,.45) !important;
  color:#fff !important;
  font-weight:800;
}

body.spp-embed .spp-cal__filters .spp-btn--small:hover,
body.spp-embed .spp-cal__filters button:hover,
body.spp-embed .spp-cal__filters input[type="submit"]:hover{
  filter: brightness(1.06);
}