/**
 * bootstrap-extended.css
 *
 * Utökningar ovanpå Bootstrap 5 (vendor min.css) — samlingsfil för t.ex.
 * LiveCanvas-liknande utilities. Laddas direkt efter bootstrap-*.min.css.
 *
 * Innehåll:
 *   §1 Spacing m-/p-* steg 6–10 (Bootstrap stoppar vid 5)
 *
 * Bootstrap $spacer=1rem → py-5 = 3rem. Fortsättning:
 *   6 → 4rem, 7 → 5rem, 8 → 6rem, 9 → 8rem, 10 → 10rem
 * (justera :root-variabler vid behov)
 */

/* =============================================================================
   §1 — Spacing 6–10
   ============================================================================= */

:root {
  --nova-space-6: 4rem;
  --nova-space-7: 5rem;
  --nova-space-8: 6rem;
  --nova-space-9: 8rem;
  --nova-space-10: 10rem;
}

/* ----- margin ----- */
.m-6 { margin: var(--nova-space-6) !important; }
.m-7 { margin: var(--nova-space-7) !important; }
.m-8 { margin: var(--nova-space-8) !important; }
.m-9 { margin: var(--nova-space-9) !important; }
.m-10 { margin: var(--nova-space-10) !important; }

.mx-6 { margin-left: var(--nova-space-6) !important; margin-right: var(--nova-space-6) !important; }
.mx-7 { margin-left: var(--nova-space-7) !important; margin-right: var(--nova-space-7) !important; }
.mx-8 { margin-left: var(--nova-space-8) !important; margin-right: var(--nova-space-8) !important; }
.mx-9 { margin-left: var(--nova-space-9) !important; margin-right: var(--nova-space-9) !important; }
.mx-10 { margin-left: var(--nova-space-10) !important; margin-right: var(--nova-space-10) !important; }

.my-6 { margin-top: var(--nova-space-6) !important; margin-bottom: var(--nova-space-6) !important; }
.my-7 { margin-top: var(--nova-space-7) !important; margin-bottom: var(--nova-space-7) !important; }
.my-8 { margin-top: var(--nova-space-8) !important; margin-bottom: var(--nova-space-8) !important; }
.my-9 { margin-top: var(--nova-space-9) !important; margin-bottom: var(--nova-space-9) !important; }
.my-10 { margin-top: var(--nova-space-10) !important; margin-bottom: var(--nova-space-10) !important; }

.mt-6 { margin-top: var(--nova-space-6) !important; }
.mt-7 { margin-top: var(--nova-space-7) !important; }
.mt-8 { margin-top: var(--nova-space-8) !important; }
.mt-9 { margin-top: var(--nova-space-9) !important; }
.mt-10 { margin-top: var(--nova-space-10) !important; }

.mb-6 { margin-bottom: var(--nova-space-6) !important; }
.mb-7 { margin-bottom: var(--nova-space-7) !important; }
.mb-8 { margin-bottom: var(--nova-space-8) !important; }
.mb-9 { margin-bottom: var(--nova-space-9) !important; }
.mb-10 { margin-bottom: var(--nova-space-10) !important; }

.ms-6 { margin-inline-start: var(--nova-space-6) !important; }
.ms-7 { margin-inline-start: var(--nova-space-7) !important; }
.ms-8 { margin-inline-start: var(--nova-space-8) !important; }
.ms-9 { margin-inline-start: var(--nova-space-9) !important; }
.ms-10 { margin-inline-start: var(--nova-space-10) !important; }

.me-6 { margin-inline-end: var(--nova-space-6) !important; }
.me-7 { margin-inline-end: var(--nova-space-7) !important; }
.me-8 { margin-inline-end: var(--nova-space-8) !important; }
.me-9 { margin-inline-end: var(--nova-space-9) !important; }
.me-10 { margin-inline-end: var(--nova-space-10) !important; }

/* ----- padding ----- */
.p-6 { padding: var(--nova-space-6) !important; }
.p-7 { padding: var(--nova-space-7) !important; }
.p-8 { padding: var(--nova-space-8) !important; }
.p-9 { padding: var(--nova-space-9) !important; }
.p-10 { padding: var(--nova-space-10) !important; }

.px-6 { padding-left: var(--nova-space-6) !important; padding-right: var(--nova-space-6) !important; }
.px-7 { padding-left: var(--nova-space-7) !important; padding-right: var(--nova-space-7) !important; }
.px-8 { padding-left: var(--nova-space-8) !important; padding-right: var(--nova-space-8) !important; }
.px-9 { padding-left: var(--nova-space-9) !important; padding-right: var(--nova-space-9) !important; }
.px-10 { padding-left: var(--nova-space-10) !important; padding-right: var(--nova-space-10) !important; }

.py-6 { padding-top: var(--nova-space-6) !important; padding-bottom: var(--nova-space-6) !important; }
.py-7 { padding-top: var(--nova-space-7) !important; padding-bottom: var(--nova-space-7) !important; }
.py-8 { padding-top: var(--nova-space-8) !important; padding-bottom: var(--nova-space-8) !important; }
.py-9 { padding-top: var(--nova-space-9) !important; padding-bottom: var(--nova-space-9) !important; }
.py-10 { padding-top: var(--nova-space-10) !important; padding-bottom: var(--nova-space-10) !important; }

.pt-6 { padding-top: var(--nova-space-6) !important; }
.pt-7 { padding-top: var(--nova-space-7) !important; }
.pt-8 { padding-top: var(--nova-space-8) !important; }
.pt-9 { padding-top: var(--nova-space-9) !important; }
.pt-10 { padding-top: var(--nova-space-10) !important; }

.pb-6 { padding-bottom: var(--nova-space-6) !important; }
.pb-7 { padding-bottom: var(--nova-space-7) !important; }
.pb-8 { padding-bottom: var(--nova-space-8) !important; }
.pb-9 { padding-bottom: var(--nova-space-9) !important; }
.pb-10 { padding-bottom: var(--nova-space-10) !important; }

.ps-6 { padding-inline-start: var(--nova-space-6) !important; }
.ps-7 { padding-inline-start: var(--nova-space-7) !important; }
.ps-8 { padding-inline-start: var(--nova-space-8) !important; }
.ps-9 { padding-inline-start: var(--nova-space-9) !important; }
.ps-10 { padding-inline-start: var(--nova-space-10) !important; }

.pe-6 { padding-inline-end: var(--nova-space-6) !important; }
.pe-7 { padding-inline-end: var(--nova-space-7) !important; }
.pe-8 { padding-inline-end: var(--nova-space-8) !important; }
.pe-9 { padding-inline-end: var(--nova-space-9) !important; }
.pe-10 { padding-inline-end: var(--nova-space-10) !important; }

/* =============================================================================
   §2 — Glass / frosted panels (backdrop-filter)
   ============================================================================= */

.sa-glass,
.card.sa-glass,
.bg-glass {
    --sa-glass-bg: rgba(15, 23, 42, 0.42);
    --sa-glass-border: rgba(255, 255, 255, 0.22);
    background-color: var(--sa-glass-bg) !important;
    background-image: none !important;
    border: 1px solid var(--sa-glass-border);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

.sa-glass--light,
.card.sa-glass--light,
.bg-glass--light {
    --sa-glass-bg: rgba(255, 255, 255, 0.16);
    --sa-glass-border: rgba(255, 255, 255, 0.28);
}

/* =============================================================================
   §3 — (lägg till fler block här: typografi, skuggor, sektioner, …)
   ============================================================================= */