/* ============================================
   FÖRENING (CLUB PAGE) — MOBIL
   ============================================ */

@media (max-width: 768px) {

  /* ======================================
     1. HERO SECTION
     ====================================== */

  /* Hero container */
  #app .container > div[style*="linear-gradient"] {
    padding: 20px 16px !important;
    border-radius: 14px !important;
    margin-bottom: 20px !important;
  }

  /* Hero top row: stack vertically — logo on top, then name */
  .hero-content > div[style*="justify-content:space-between"] {
    flex-direction: column-reverse !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  /* Right side (Styrelse + logo): logo pushed right */
  .hero-content > div[style*="justify-content:space-between"] > div[style*="flex-shrink:0"] {
    justify-content: flex-end !important;
    width: 100% !important;
  }

  /* Club name — 30% larger than previous 26px */
  h1.hero-club-name {
    font-size: 34px !important;
    text-align: center !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
  }

  /* Slogan — 30% larger than previous 16px */
  .hero-content h2 {
    font-size: 21px !important;
    text-align: center !important;
    margin-bottom: 8px !important;
  }

  /* Description — 30% larger than previous 13px */
  p.hero-desc {
    text-align: center !important;
    font-size: 17px !important;
    margin-bottom: 0px !important;
  }

  /* Logo: larger on mobile */
  #club-logo-display {
    width: 132px !important;
    height: 132px !important;
  }

  .hero-content {
    position: relative !important;
  }

  /* Styrelse button: top-left corner */
  #btn-open-styrelse {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    font-size: 11px !important;
    padding: 5px 12px !important;
    margin: 0 !important;
    z-index: 2 !important;
  }
  #btn-open-styrelse + div,
  div:has(> #btn-open-styrelse) {
    margin: 0 !important;
  }

  /* ──────────────────────────────────────────────────────
     Stats: 2x2 grid + wide Närvaro med progress-bar (mobil-only)
     ────────────────────────────────────────────────────── */
  .forening-page .hero-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
  .forening-page .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 16px !important;
    padding-bottom: 4px !important;
  }
  .forening-page .hero-stats .stat {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: left !important;
    min-width: 0 !important;
    transition: background 0.2s !important;
  }
  .forening-page .hero-stats .stat::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1.5px !important;
    background: linear-gradient(135deg, #00D9A3, #6366F1) !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
  }
  .forening-page .hero-stats .stat:hover::before { opacity: 1 !important; }
  .forening-page .hero-stats .stat.wide {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
  }
  .forening-page .hero-stats .stat.wide .stat-value { font-size: 32px !important; }
  .forening-page .hero-stats .stat-icon {
    display: inline-block !important;
    font-size: 22px !important;
    opacity: 0.5 !important;
  }
  .forening-page .hero-stats .stat-value {
    font-size: 38px !important;
    font-weight: 900 !important;
    color: white !important;
    letter-spacing: -1.2px !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
    text-align: left !important;
  }
  .forening-page .hero-stats .stat-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.42) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    text-align: left !important;
  }
  /* Närvaro-bar visas bara på mobil */
  .forening-page .narvaro-bar {
    display: block !important;
    padding-top: 4px !important;
  }
  .forening-page .narvaro-bar .bar-track {
    height: 3px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 99px !important;
    overflow: hidden !important;
    margin-top: 6px !important;
  }
  .forening-page .narvaro-bar .bar-fill {
    height: 100% !important;
    background: linear-gradient(135deg, #00D9A3, #6366F1) !important;
    border-radius: 99px !important;
    width: 0%;
    transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }
  /* Matchstatistik-knappen i gradient (mobil-only) */
  .forening-page .stats-cta {
    margin-top: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #00D9A3, #6366F1) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 14px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: white !important;
    cursor: pointer !important;
    width: 100% !important;
    box-shadow: none !important;
    letter-spacing: -0.2px !important;
  }
  .forening-page .stats-cta svg { width: 18px !important; height: 18px !important; }

  /* Beskrivning i hero — dämpad färg som matchar nya design */
  .forening-page p.hero-desc {
    font-size: 17px !important;
    color: rgba(255, 255, 255, 0.42) !important;
    line-height: 1.5 !important;
    text-align: center !important;
    margin-bottom: 0 !important;
  }

  /* ======================================
     1b. DASHBOARD KPI-RUTOR — 2x2 istället för 4 i rad
     ====================================== */

  #dashboard-kpis {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  #dashboard-kpis > div {
    padding: 14px 10px !important;
  }
  #dashboard-kpis > div > div:first-child {
    font-size: 24px !important;
  }

  /* ======================================
     1c. RÖDA TRÅDEN — enhetlig & användbar mobillayout
     ----------------------------------------
     Mål: ETT visuellt kort per åldersgrupp. Ingen dubbel inramning, samma
     bakgrund hela vägen. Sektioner separeras bara med en tunn linje + emoji-rubrik.
     Tomma placeholders hålls korta så listan inte blir luftig på mobil. */

  /* Yttre wrapper runt #ageprog-display: använd den grå bakgrunden som "yta",
     korten flyter ovanpå som vita upphöjda kort. */
  .forening-page div:has(> #ageprog-display) {
    padding: 12px !important;
    /* background: var(--bg, #F7F9FC) !important; */
    /* border: none !important; */
    border-radius: 16px !important;
  }

  /* age-group-card — vit, lyft från grå ytan med skugga, ingen extra border */
  .age-group-card {
    margin-bottom: 10px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: white !important;
    /* border: none !important; */
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  }
  .age-group-card.expanded {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04) !important;
  }

  /* Header — vit hela vägen (ingen grå header-bg som tävlade med wrapper-grå) */
  .age-group-card .age-group-header {
    padding: 12px !important;
    gap: 12px !important;
    background: white !important;
  }
  .age-group-card.expanded .age-group-header {
    border-bottom: 1px solid var(--border) !important;
  }
  .age-group-card .age-group-header > div:first-child > div:first-child {
    width: 38px !important;
    height: 38px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
  .age-group-card .age-group-header > div:first-child > div:nth-child(2) > div:first-child {
    font-size: clamp(15px, 4.2vw, 17px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.3px !important;
  }
  .age-group-card .age-group-header > div:first-child > div:nth-child(2) > div:nth-child(2) {
    font-size: 12px !important;
    margin-top: 2px !important;
  }

  /* age-group-content: ENA enhetlig vit yta — ingen inre grå box. */
  .age-group-card .age-group-content {
    padding: 0 !important;
    background: white !important;
  }

  /* Inre Fokusområden + Förslag-grid: stapla, ingen bakgrund, ingen radius. */
  .age-group-content > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    background: transparent !important;
    padding: 12px !important;
    gap: 16px !important;
    border-radius: 0 !important;
  }

  /* Färdiga pass-sektionen — samma stil, bara separator-linje över */
  .age-group-content > div[style*="border-top"] {
    margin-top: 0 !important;
    padding: 12px !important;
    border-top: 1px solid var(--border) !important;
  }

  /* Sektionsrubriker (🎯 / 📚 / ⏱️): tydligare på mobil */
  .age-group-content > div[style*="grid-template-columns:1fr 1fr"] > div > div:first-child,
  .age-group-content > div[style*="border-top"] > div:first-child {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  /* Tomma placeholders — krympta så de inte tar onödig plats */
  .age-group-content .text-muted.small.mb-0,
  .age-group-content p.text-muted {
    font-size: 12px !important;
    margin-bottom: 0 !important;
    padding: 4px 0 !important;
  }

  /* Beskrivning under "Färdiga pass" rubriken (Pass kan laddas upp...) — mindre */
  .age-group-content > div[style*="border-top"] > div:nth-child(2) {
    font-size: 11px !important;
    margin-bottom: 8px !important;
  }

  /* Item-rader (övningar, pass) */
  .age-group-card .ageprog-linked-exercise,
  .age-group-card .ageprog-linked-session {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }

  /* "Koppla övning" / "Koppla pass" knappar — full bredd, kompakta */
  .age-group-content .ageprog-add-exercise,
  .age-group-content .ageprog-add-session {
    display: block !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
  }

  /* ======================================
     1d. PELARE — touch-drag avstängt på mobil
     ----------------------------------------
     På mobil sköts reorder via ▲▼-knapparna. Vi tar bort touch-action:none
     och draggable så att fingret kan scrolla över pelarna utan att aktivera drag. */
  .fp-pillar[draggable="true"],
  .leadership-pillar[draggable="true"] {
    touch-action: auto !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
    -webkit-touch-callout: default !important;
  }
  /* Göm den lilla ⋮⋮-drag-handle:n på mobil — den indikerar drag som inte funkar där */
  .fp-pillar .pillar-drag-handle,
  .leadership-pillar .pillar-drag-handle {
    display: none !important;
  }


  /* ======================================
     2. VISION + VÄRDEORD — 1 kolumn
     ====================================== */

  .forening-grid-vision {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
  }

  .fcard .p-4 {
    padding: 16px !important;
  }

  .fcard div[style*="width:60px;height:60px"] {
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
    margin-bottom: 10px !important;
  }

  /* Value cards: compact */
  .fcard .value-card {
    padding: 10px !important;
  }

  /* ======================================
     3. KORT-SEKTIONER (generellt)
     ====================================== */

  #app .container > .card {
    margin-bottom: 16px !important;
  }

  #app .container > .card > .card-header {
    padding: 10px 12px !important;
  }

  #app .container > .card > .card-header h5 {
    font-size: 0.95rem !important;
  }

  #app .container > .card > .card-body {
    padding: 10px !important;
  }

  /* ======================================
     4. LAG-LISTA — samma "vit på grå yta"-pattern som Röda Tråden
     ----------------------------------------
     Yttre wrappern blir grå yta. Lagkorten flyter ovanpå som vita kort.
     Layout: rad 1 = badge + namn + edit/del/→, rad 2 = coach-avatarer,
     rad 3 = [Spelare] [Närvaro] som kompakta stat-boxar. */

  /* Wrapper runt #teams-list: grå yta */
  .forening-page div:has(> #teams-list) {
    padding: 12px !important;
    background: var(--bg, #F7F9FC) !important;
    border: none !important;
    border-radius: 16px !important;
  }

  /* Lag-kort: vit, lyft från ytan med skugga (matchar röda tråden) */
  .team-card-wrapper {
    background: white !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
  }
  .team-card-wrapper:last-child {
    margin-bottom: 0 !important;
  }

  .team-card-header {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 8px !important;
    row-gap: 10px !important;
    align-items: center !important;
    padding: 14px !important;
    background: white !important;
    border: none !important;
    border-radius: 12px !important;
  }

  /* Vänster wrapper (badge + namn + coaches): rad 1, col 1 */
  .team-card-header > div:first-child {
    grid-row: 1 !important;
    grid-column: 1 !important;
    min-width: 0 !important;
  }

  /* Höger wrapper (räknare + knappar + pil): platta ut så barnen blir grid-items */
  .team-card-header > div:last-child {
    display: contents !important;
  }

  /* Spelare/Närvaro-räknare: rad 2, kompakta stat-boxar (samma stil som hero-stats):
     liten ram, tight padding, stor siffra, liten uppercase-label. */
  .team-card-header > div:last-child > div[style*="text-align:center"] {
    grid-row: 2 !important;
    background: var(--bg, #F7F9FC) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
  }
  /* Stort tal */
  .team-card-header > div:last-child > div[style*="text-align:center"] > div:first-child {
    font-size: 20px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
  }
  /* Liten label */
  .team-card-header > div:last-child > div[style*="text-align:center"] > div:last-child {
    font-size: 10px !important;
    margin-top: 2px !important;
    letter-spacing: 0.4px !important;
  }
  .team-card-header > div:last-child > div[style*="text-align:center"]:first-child {
    grid-column: 1 !important;
  }
  .team-card-header > div:last-child > div[style*="text-align:center"]:nth-child(2) {
    grid-column: 2 !important;
  }

  /* Admin-knappar (Redigera/Radera): rad 1, col 2 */
  .team-card-header > div:last-child > div[style*="display:flex;gap:4px"] {
    grid-row: 1 !important;
    grid-column: 2 !important;
  }

  /* Pilen (→): rad 1, col 3 */
  .team-card-header > div:last-child > div:last-child {
    grid-row: 1 !important;
    grid-column: 3 !important;
  }

  /* Slå av hover-padding-trick som ger borderLeft + paddingLeft-jitter */
  .team-card-header:hover {
    border-left: none !important;
    padding-left: 12px !important;
  }

  /* Initials badge: lite mindre */
  .team-card-header > div:first-child > div[style*="width:48px"] {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }

  /* Coach-rad mindre */
  .team-card-header > div:first-child > div:last-child > div:nth-child(2) {
    font-size: 12px !important;
  }

  /* ======================================
     5. CHATT + KALENDER — 1 kolumn
     ====================================== */

  .forening-grid-chat {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
  }

  /* Chat messages: shorter */
  #chat-messages {
    height: 220px !important;
  }

  /* Chat input */
  #chat-input {
    font-size: 14px !important;
  }

  /* Chat bubbles: wider on mobile */
  #chat-messages div[style*="max-width:72%"] {
    max-width: 85% !important;
  }

  /* Calendar events: compact */
  #club-calendar > div[data-event-id] {
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  /* ======================================
     6. AKTIVITETSFEED
     ====================================== */

  /* Layout: ikon | text/meta över två rader, tidstämpel under texten.
     Inline-stylingen på .activity-feed-item är display:flex med icon+text+time i rad —
     på smal skärm klämmer tidstämpeln texten. Grid med named areas låter texten ta
     full bredd och tidstämpeln droppa till rad 2 under texten. */
  .activity-feed-item {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-areas: "icon text" "icon time" !important;
    column-gap: 10px !important;
    row-gap: 4px !important;
    padding: 12px 14px !important;
    align-items: start !important;
  }
  .activity-feed-item > div:nth-child(1) {
    grid-area: icon !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    border-radius: 10px !important;
  }
  .activity-feed-item > div:nth-child(2) {
    grid-area: text !important;
    min-width: 0 !important;
  }
  .activity-feed-item > div:nth-child(3) {
    grid-area: time !important;
    font-size: 11px !important;
    margin-top: 0 !important;
  }
  /* Stäng av hover-translate på mobil — interfererar med grid + känns klumpigt på touch. */
  .activity-feed-item:hover {
    transform: none !important;
  }

  /* ======================================
     7. MEDLEMSLISTA
     ====================================== */

  #members-list > .d-flex {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  #members-list div[style*="width:36px;height:36px"] {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  /* ======================================
     8. KLUBBIBLIOTEK-PREVIEW
     ====================================== */

  #club-library-preview > .d-flex {
    gap: 10px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  #club-library-preview div[style*="width:40px;height:40px"] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  /* ======================================
     9. VÄNTANDE ANSÖKNINGAR
     ====================================== */

  #pending-section .d-flex.align-items-center {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #pending-section .d-flex.align-items-center > .d-flex:last-child {
    width: 100% !important;
  }

  #pending-section .d-flex.align-items-center > .d-flex:last-child .btn {
    flex: 1 !important;
  }

  /* ======================================
     10. MODALER — FULLSKÄRM
     ====================================== */

  /* --- Custom .modal-overlay (pillar, chat, club-chooser m.fl.) ---
     Pinna content till viewport så footer-knapparna alltid syns. */
  .forening-page .modal-overlay {
    padding: 0 !important;
  }

  .forening-page .modal-overlay .forening-modal-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .forening-page .modal-overlay .forening-modal-content .modal-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .forening-page .modal-overlay .forening-modal-content .modal-footer {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    flex-shrink: 0 !important;
  }

  .forening-page .modal-overlay .forening-modal-content .modal-footer .btn {
    flex: 1 !important;
    height: 42px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
  }


  /* --- Kalender-event modal --- */
  #club-event-modal {
    overflow: hidden !important;
  }

  #club-event-modal .modal-dialog {
    margin: 0 !important;
    display: block !important;
  }

  #club-event-modal .modal-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 1060 !important;
  }

  #club-event-modal .modal-header,
  #club-event-modal .modal-footer {
    flex-shrink: 0 !important;
  }

  #club-event-modal .modal-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #club-event-modal .modal-footer {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  #club-event-modal .modal-footer [data-bs-dismiss="modal"] {
    display: none !important;
  }

  #club-event-modal .modal-footer .btn-primary {
    flex: 1 !important;
    height: 42px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
  }

  /* --- Lag-modal --- */
  .modal-club-team {
    overflow: hidden !important;
  }

  .modal-club-team .modal-dialog {
    margin: 0 !important;
    display: block !important;
  }

  .modal-club-team .modal-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 1060 !important;
  }

  .modal-club-team .modal-header,
  .modal-club-team .modal-footer {
    flex-shrink: 0 !important;
  }

  .modal-club-team .modal-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal-club-team .modal-footer {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  .modal-club-team .modal-footer [data-bs-dismiss="modal"] {
    display: none !important;
  }

  .modal-club-team .modal-footer .btn-primary {
    flex: 1 !important;
    height: 42px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
  }

  /* --- Skapa/Gå med-modaler --- */
  #createClubModal,
  #joinClubModal {
    overflow: hidden !important;
  }

  #createClubModal .modal-dialog,
  #joinClubModal .modal-dialog {
    margin: 0 !important;
    display: block !important;
  }

  #createClubModal .modal-content,
  #joinClubModal .modal-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 1060 !important;
  }

  #createClubModal .modal-header,
  #createClubModal .modal-footer,
  #joinClubModal .modal-header,
  #joinClubModal .modal-footer {
    flex-shrink: 0 !important;
  }

  #createClubModal .modal-body,
  #joinClubModal .modal-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #createClubModal .modal-footer,
  #joinClubModal .modal-footer {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  #createClubModal .modal-footer [data-bs-dismiss="modal"],
  #joinClubModal .modal-footer [data-bs-dismiss="modal"] {
    display: none !important;
  }

  #createClubModal .modal-footer .btn-primary,
  #joinClubModal .modal-footer .btn-primary {
    flex: 1 !important;
    height: 42px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
  }

}