/*
  FlipClass custom overrides
  Formål: bedre lesbarhet og ryddigere artikkel-/infosider uten å redigere theme.min.css.
  Lastes etter ../assets/css/theme.min.css.
*/

:root {
  --fc-body-font-size: 1.0625rem;      /* 17px */
  --fc-reading-font-size: 1.125rem;    /* 18px */
  --fc-line-height: 1.7;
  --fc-reading-line-height: 1.75;
  --fc-readable-width: 760px;
  --fc-legal-width: 860px;
  --fc-media-width: 980px;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Generell brødtekst. Navigasjon, footer, badges og .small holdes utenfor.
   Only on the app pages whose sketch has <main> (learning environment, Mine kurs, profile, receipts, article): their
   templates set the body class fc-app. Every page sits in cradmin's <main>, so unscoped these rules would also
   enlarge the text of the marketing pages, whose sketches have no <main>. */
body.fc-app main p:not(.small):not(.lead):not(.fs-6):not(.message),
body.fc-app main li:not(.small) {
  font-size: var(--fc-body-font-size);
  line-height: var(--fc-line-height);
}

body.fc-app main p:not(.small):not(.lead):not(.fs-6):not(.message) {
  margin-bottom: 1rem;
}

body.fc-app main .lead {
  font-size: 1.25rem;
  line-height: 1.6;
}

/* The breadcrumb looks the same on every page: the theme's own size, as on the marketing pages (34 of the 35 sketch
   pages with one); the app-page rules above must not enlarge it. */
body.fc-app main .breadcrumb,
body.fc-app main .breadcrumb li,
body.fc-app main .breadcrumb a {
  font-size: .75rem;
  line-height: 1.6;
}

/* Kompakte UI-elementer skal ikke blåses opp av de generelle reglene over. */
body.fc-app main .badge,
body.fc-app main .form-text,
body.fc-app main .table,
body.fc-app main .table p,
body.fc-app main .list-group-item p.small,
body.fc-app main .accordion-button {
  font-size: .875rem;
  line-height: 1.5;
}

body.fc-app main .breadcrumb li {
  margin-bottom: 0;
}

.card p:not(.lead):not(.small),
.alert p:not(.lead):not(.small),
.list-group-item p:not(.lead):not(.small),
.accordion-body p:not(.lead):not(.small) {
  font-size: 1rem;
  line-height: 1.6;
}

/* Gjenbrukbare lesebredder for artikkel-, info- og juridiske sider. */
.article-content,
.fc-article-content,
.page-content,
.fc-readable {
  max-width: var(--fc-readable-width);
  margin-left: auto;
  margin-right: auto;
}

.legal-content {
  max-width: var(--fc-legal-width);
  margin-left: auto;
  margin-right: auto;
}

.fc-readable-wide,
.fc-article-media {
  max-width: var(--fc-media-width);
  margin-left: auto;
  margin-right: auto;
}

.article-content p:not(.small),
.fc-article-content p:not(.small),
.page-content p:not(.small),
.fc-readable p:not(.small) {
  font-size: var(--fc-reading-font-size);
  line-height: var(--fc-reading-line-height);
  margin-bottom: 1.25rem;
}

.legal-content p:not(.small) {
  font-size: var(--fc-body-font-size);
  line-height: var(--fc-line-height);
  margin-bottom: 1.1rem;
}

.article-content li,
.fc-article-content li,
.page-content li,
.legal-content li,
.fc-readable li {
  font-size: var(--fc-body-font-size);
  line-height: var(--fc-line-height);
  margin-bottom: .6rem;
}

.article-content h2,
.fc-article-content h2,
.page-content h2,
.legal-content h2,
.fc-readable h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.article-content h3,
.fc-article-content h3,
.page-content h3,
.legal-content h3,
.fc-readable h3 {
  margin-top: 2rem;
  margin-bottom: .75rem;
  font-weight: 700;
}

/* Artikkelside / blog-single.html */
.fc-article-page .article-hero-img,
.article-hero-img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
}

.fc-article-page .article-meta-dot::before,
.article-meta-dot::before {
  content: "";
  display: inline-block;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: #adb5bd;
  margin: 0 .65rem .12rem;
}

.fc-article-cta {
  max-width: var(--fc-readable-width);
}

.fc-article-cta p {
  font-size: var(--fc-body-font-size);
  line-height: 1.65;
}

/* Footer og sekundærtekst beholder kompakt uttrykk. */
footer p,
footer .nav-link,
footer .small,
.footer p,
.footer .nav-link,
.footer .small,
small,
.small {
  line-height: 1.5;
}

/* Synlig fokus for tastaturnavigasjon. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(252, 63, 30, .35);
  outline-offset: 3px;
}

@media (max-width: 767.98px) {
  body.fc-app main p:not(.small):not(.lead):not(.fs-6):not(.message),
  body.fc-app main li:not(.small),
  .article-content p:not(.small),
  .fc-article-content p:not(.small),
  .page-content p:not(.small),
  .legal-content p:not(.small),
  .fc-readable p:not(.small) {
    font-size: 1rem;
    line-height: 1.65;
  }

  body.fc-app main .lead,
  .fc-article-page .lead {
    font-size: 1.125rem;
    line-height: 1.6;
  }

  .article-content h2,
  .fc-article-content h2,
  .page-content h2,
  .legal-content h2,
  .fc-readable h2 {
    margin-top: 2rem;
  }

  .fc-article-page .article-hero-img,
  .article-hero-img {
    max-height: 380px;
  }
}

/* "Fag & kurs" mega menu (base_bs5, {% course_menu %}). The theme's .dropdown-fullwidth centres it on the
   navbar with max-width 1024px; widen it to the navbar's content width (container-fluid px-lg-4). The navbar
   expands from xl. */
@media (min-width: 1200px) {
  .navbar .dropdown-fullwidth .dropdown-menu.fc-course-menu {
    max-width: min(1320px, calc(100% - 3rem));
  }
}

/* From lg the navbar is sticky but still collapsed (it expands from xl): the open menu scrolls within the screen. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar.sticky-top .navbar-collapse {
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }
}

/* Toasts (#fc-toasts, base_bs5): top right, just below the sticky navbar; never wider than a phone screen. */
.fc-toast-container {
  top: 4.5rem;
  max-width: 100%;
}

/* Countdown bar along the bottom of a toast: shrinks over --fc-toast-delay (set from data-bs-delay by app.js)
   while .fc-toast-counting is on. app.js drops the class while the toast is hovered or focused, because
   Bootstrap then holds the toast and restarts the full delay afterwards. */
.fc-toast {
  position: relative;
  overflow: hidden;
}

.fc-toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  transform-origin: left center;
}

.fc-toast-counting .fc-toast-progress {
  animation: fc-toast-countdown var(--fc-toast-delay, 5000ms) linear forwards;
}

@keyframes fc-toast-countdown {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .fc-toast-progress {
    display: none;
  }
}

/* Course cards on /fag course lists are targets of the mega menu's #kurs-<pk> links; clear the sticky navbar. */
.fc-course-anchor {
  scroll-margin-top: 6rem;
}

/* Course catalog (/fag), and the search bar of the Formler og tabeller pages (#fc-sokelinje): the filter bar sticks
   below the sticky navbar from md up (on a phone it would take half the screen), under the navbar's menus; its chip
   rows scroll sideways on a phone and wrap from md up. */
@media (min-width: 768px) {
  .fc-catalog-filter {
    position: sticky;
    top: var(--fc-navbar-height, 0);
    z-index: 1015;
  }
  .fc-catalog-chips {
    flex-wrap: wrap;
  }
}
.fc-catalog-chips {
  overflow-x: auto;
  scrollbar-width: none;
}
.fc-catalog-chips::-webkit-scrollbar {
  display: none;
}
@media (min-width: 768px) {
  .fc-catalog .fc-course-anchor {
    scroll-margin-top: 16rem; /* navbar + filter bar */
  }
}
@media (min-width: 992px) {
  .fc-catalog-search {
    width: 28rem;
  }
}

/* Corner ribbon on a card (the catalog's free courses): <div class="card position-relative overflow-hidden">
   <span class="fc-ribbon">Gratis</span>. Bootstrap and the Geeks theme have none. */
.fc-ribbon {
  position: absolute;
  top: 1.1rem;
  right: -2.4rem;
  z-index: 1;
  width: 9rem;
  padding: 0.25rem 0;
  transform: rotate(45deg);
  background-color: var(--geeks-success);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

/* A full-width, pill-shaped "Legg i handlekurv" where the other card buttons are (Gratis smakebiter). */
.fc-full-width-cart .fc-add-to-cart .btn {
  width: 100%;
  border-radius: 50rem;
  padding: 0.5rem 1rem;
  font-size: inherit;
}

/* Sticky right column of the course page (storefront), below the sticky navbar. */
.fc-sticky-aside {
  top: 6rem;
}

.flipclass-cart-badge {
  font-size: .6rem;
}

.flipclass-notification-list {
  max-height: 300px;
}

.flipclass-footer-logo {
  height: 34px;
  filter: brightness(0) invert(1);
}

/* FlipClass primary buttons */
.btn-primary {
  color: #fff;
  background-color: #fc3f1e;
  border-color: #fc3f1e;

  --geeks-btn-color: #fff;
  --geeks-btn-bg: #fc3f1e;
  --geeks-btn-border-color: #fc3f1e;

  --geeks-btn-hover-color: #fff;
  --geeks-btn-hover-bg: #d93418;
  --geeks-btn-hover-border-color: #d93418;

  --geeks-btn-focus-shadow-rgb: 252, 63, 30;

  --geeks-btn-active-color: #fff;
  --geeks-btn-active-bg: #bf2d14;
  --geeks-btn-active-border-color: #bf2d14;
  --geeks-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

  --geeks-btn-disabled-color: #fff;
  --geeks-btn-disabled-bg: #fc3f1e;
  --geeks-btn-disabled-border-color: #fc3f1e;
}

.btn-primary:hover,
.btn-primary:focus {
  color: #fff;
  background-color: #d93418;
  border-color: #d93418;
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #bf2d14;
  border-color: #bf2d14;
}

.btn-primary:focus {
  box-shadow: 0 0 0 .25rem rgba(252, 63, 30, .25);
}

.btn-primary:disabled,
.btn-primary.disabled {
  color: #fff;
  background-color: #fc3f1e;
  border-color: #fc3f1e;
}

/* Outline primary buttons */
.btn-outline-primary {
  color: #fc3f1e;
  border-color: #fc3f1e;

  --geeks-btn-color: #fc3f1e;
  --geeks-btn-border-color: #fc3f1e;
  --geeks-btn-hover-color: #fff;
  --geeks-btn-hover-bg: #fc3f1e;
  --geeks-btn-hover-border-color: #fc3f1e;
  --geeks-btn-focus-shadow-rgb: 252, 63, 30;
  --geeks-btn-active-color: #fff;
  --geeks-btn-active-bg: #bf2d14;
  --geeks-btn-active-border-color: #bf2d14;
  --geeks-btn-disabled-color: #fc3f1e;
  --geeks-btn-disabled-bg: transparent;
  --geeks-btn-disabled-border-color: #fc3f1e;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #fff;
  background-color: #fc3f1e;
  border-color: #fc3f1e;
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #bf2d14;
  border-color: #bf2d14;
}

.btn-outline-primary:focus {
  box-shadow: 0 0 0 .25rem rgba(252, 63, 30, .25);
}

/* Primary text/background helper overrides */
.text-primary {
  color: #fc3f1e !important;
}

.bg-primary {
  background-color: #fc3f1e !important;
}

.border-primary {
  border-color: #fc3f1e !important;
}

.bg-primary-soft {
  background-color: rgba(252, 63, 30, .10) !important;
}

.text-primary-emphasis {
  color: #bf2d14 !important;
}

/* Product-kind badges (flipclass_commerce.product_kinds) use the theme's bg-<color> / bg-<color>-soft; the theme
   has no purple, which marks Oppgavesett. */
.bg-purple {
  background-color: #6f42c1 !important;
}

.bg-purple-soft {
  background-color: rgba(111, 66, 193, .1) !important;
  color: #6f42c1;
}

a {
  --geeks-link-color-rgb: 252, 63, 30;
}

a:hover {
  --geeks-link-hover-color-rgb: 217, 52, 24;
}
.fc-cart-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px 14px;
  column-gap: .5rem;
  align-items: start;
  width: 100%;
}

.fc-cart-item-title {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.45;
}

.fc-cart-price {
  display: block !important;
  white-space: nowrap !important;
  min-width: 54px;
  text-align: right;
  color: #111827;
}

.fc-cart-remove {
  width: 14px;
  min-width: 14px;
  line-height: 1;
  text-align: center;
}

/* Handlekurv i produkt-/videosider
   Støtter både ny markup (.fc-cart-item) og eldre flex-markup i #sb-items.
   Må ligge etter theme.min.css og etter eventuelle tidligere cart-regler. */
#sb-items {
  min-width: 0;
}

#sb-items .fc-cart-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content 14px !important;
  column-gap: .6rem;
  align-items: start;
  width: 100%;
}

#sb-items .fc-cart-item-title {
  min-width: 0 !important;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.45;
}

#sb-items .fc-cart-price {
  display: inline-block !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-align: right;
  color: #111827;
}

#sb-items .fc-cart-remove {
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  width: 14px;
  min-width: 14px;
  max-width: 14px;
  line-height: 1;
  text-align: center;
}

/* Fallback for eldre JavaScript-rendering uten fc-cart-klasser */
#sb-items > .d-flex.justify-content-between {
  align-items: flex-start !important;
  gap: .6rem;
  width: 100%;
}

#sb-items > .d-flex.justify-content-between > span.small:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.45;
  padding-right: .25rem;
}

#sb-items > .d-flex.justify-content-between > .d-flex:last-child {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  width: max-content !important;
  white-space: nowrap !important;
  justify-content: flex-end;
  align-items: center;
}

#sb-items > .d-flex.justify-content-between > .d-flex:last-child > span,
#sb-items > .d-flex.justify-content-between > .d-flex:last-child > .text-dark,
#sb-items > .d-flex.justify-content-between > .d-flex:last-child > .text-primary {
  display: inline-block !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* Mobile layout for single-video purchase rows */
#videoAcc .accordion-body > .d-flex.justify-content-between {
  gap: 1rem;
  align-items: flex-start !important;
}

#videoAcc .accordion-body > .d-flex.justify-content-between > .d-flex:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

#videoAcc .accordion-body > .d-flex.justify-content-between > .d-flex:first-child > div {
  min-width: 0;
}

#videoAcc .accordion-body > .d-flex.justify-content-between > .d-flex:first-child .small.d-block {
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.45;
}

#videoAcc .accordion-body > .d-flex.justify-content-between > .d-flex:last-child {
  flex: 0 0 auto;
  white-space: nowrap;
}

#videoAcc .accordion-body > .d-flex.justify-content-between > .d-flex:last-child > .small.text-dark {
  white-space: nowrap;
  min-width: max-content;
}

@media (max-width: 767.98px) {
  #cart-alert {
    flex-direction: column;
    align-items: flex-start !important;
    gap: .75rem;
  }

  #cart-alert .btn {
    width: 100%;
    justify-content: center;
  }

  #videoAcc ~ * {}

  #videoAcc .accordion-button {
    align-items: flex-start;
  }

  #videoAcc .accordion-button .fw-semibold {
    min-width: 0;
    line-height: 1.35;
  }

  #videoAcc .accordion-button .text-muted.small {
    margin-left: .75rem !important;
    white-space: nowrap;
  }

  #videoAcc .accordion-body > .d-flex.justify-content-between {
    flex-direction: column;
    align-items: stretch !important;
    gap: .75rem;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  #videoAcc .accordion-body > .d-flex.justify-content-between > .d-flex:first-child {
    width: 100%;
    align-items: flex-start !important;
  }

  #videoAcc .accordion-body > .d-flex.justify-content-between > .d-flex:first-child > .bi {
    margin-top: .2rem;
    flex: 0 0 auto;
  }

  #videoAcc .accordion-body > .d-flex.justify-content-between > .d-flex:last-child {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: .75rem !important;
    white-space: normal;
  }

  #videoAcc .accordion-body > .d-flex.justify-content-between > .d-flex:last-child > .small.text-dark {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  #videoAcc .accordion-body > .d-flex.justify-content-between > .d-flex:last-child > .btn {
    flex: 0 1 auto;
    max-width: 230px;
    white-space: normal;
    line-height: 1.25;
    padding: .55rem .8rem;
  }
}

@media (max-width: 575.98px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  section.py-6.bg-white .col-lg-8 > .d-flex.justify-content-between.align-items-center.mb-3 {
    flex-direction: column;
    align-items: stretch !important;
    gap: .75rem;
  }

  section.py-6.bg-white .col-lg-8 > .d-flex.justify-content-between.align-items-center.mb-3 > .d-flex {
    flex-wrap: wrap;
  }

  section.py-6.bg-white .col-lg-8 > .d-flex.justify-content-between.align-items-center.mb-3 .btn {
    flex: 1 1 auto;
  }

  #videoAcc .accordion-button {
    padding-left: .875rem;
    padding-right: .875rem;
  }

  #videoAcc .accordion-button .badge {
    flex: 0 0 auto;
  }

  #videoAcc .accordion-button .text-muted.small {
    display: block;
    margin-left: 0 !important;
    margin-top: .25rem;
  }

  #videoAcc .accordion-body {
    padding-left: .875rem;
    padding-right: .875rem;
  }

  #videoAcc .accordion-body > .d-flex.justify-content-between > .d-flex:last-child {
    flex-direction: column;
    align-items: stretch;
  }

  #videoAcc .accordion-body > .d-flex.justify-content-between > .d-flex:last-child > .small.text-dark {
    align-self: flex-start;
  }

  #videoAcc .accordion-body > .d-flex.justify-content-between > .d-flex:last-child > .btn {
    width: 100%;
    max-width: none;
  }
}


/* =========================================================
   FlipClass cleanup generated rules
   Replaces former inline style="..." attributes and adds
   mobile-safe layout helpers for purchase/cart pages.
   ========================================================= */

.fc-style-01caadc1 { top:24px; }
.fc-style-01ce6717 { border-collapse:collapse; }
.fc-style-03d93c8f { width: 22%; }
.fc-style-0aad7a66 { width:5% }
.fc-style-0acde52d { width: 35% }
.fc-style-0b1229ac { font-size:2rem;font-weight:800;color:#15803d; }
.fc-style-0f49f71e { position:absolute;top:0;left:0;width:100%;height:100% }
.fc-style-0f9efaed { width: 12%; }
.fc-style-148a1a54 { width: 78%; }
.fc-style-199b6f0e { width: 100%; }
.fc-style-1c30ab94 { width: 10%; }
.fc-style-1e1dc001 { position:absolute;top:0;left:0;width:100%;height:100%; }
.fc-style-1f28c308 { width: 0%; }
.fc-style-214305d4 { min-width:48px; }
.fc-style-22c8eba1 { width: 85%; }
.fc-style-29bfe8f0 { width: 15% }
.fc-style-2af4806c { width:15% }
.fc-style-2f9ac2db { color:#0d6efd;text-decoration:none; }
.fc-style-33853f02 { overflow-x: hidden!important; overflow-y: auto!important; padding: 0!important; }
.fc-style-3558213f { font-size:.83rem;color:#7c3d12;margin:0;line-height:1.65; }
.fc-style-358621e0 { height: 6px; }
.fc-style-36ec4750 { width: 63%; }
.fc-style-3a49f437 { width: 8%; }
.fc-style-3af624f1 { width: 35%; }
.fc-style-3ea13412 { width: 25% }
.fc-style-407c0526 { font-size:.82rem;color:#0d6efd;font-weight:600;text-decoration:none; }
.fc-style-418a0872 { width: 60%; }
.fc-style-41dd0882 { width:44% }
.fc-style-4356aed8 { width: 65% }
.fc-style-48977745 { height:5px; }
.fc-style-4be8dbf2 { width: 21%; }
.fc-style-4d2bd1d2 { font-size:.88rem;font-weight:700;color:#1e40af;margin-bottom:4px; }
.fc-style-4ebf8b8b { width: 50%; }
.fc-style-50d7ff9f { width: 86%; }
.fc-style-526a45d4 { width: 65%; }
.fc-style-53797501 { padding:56.25% 0 0;position:relative;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.12) }
.fc-style-544260f6 { width: 51%; }
.fc-style-54b8b4e1 { height: 300px; }
.fc-style-56b95def { background:#ff5b24;font-size:.85rem;padding:6px 12px; }
.fc-style-5f7abeb8 { text-transform:uppercase }
.fc-style-5fdf8a4b { width:80px;height:80px;border-radius:50%;object-fit:cover;flex-shrink:0; }
.fc-style-615067a1 { width: 80%; }
.fc-style-63b005af { width: 45%; }
.fc-style-640f055c { width: 95%; }
.fc-style-672d5ae3 { height: 1.875rem; }
.fc-style-686a9aae { max-width:760px; }
.fc-style-6d567387 { width:100% }
.fc-style-6e0430a4 { display:flex;justify-content:space-between;align-items:flex-start; }
.fc-style-6eb050e0 { width:100%; height:250px }
.fc-style-6f687733 { width:27% }
.fc-style-71495e9d { text-align:center;margin-top:48px; }
.fc-style-716ecfd3 { margin-top:20px; }
.fc-style-73fabb06 { color:#0d6efd;font-size:.78rem;text-decoration:none; }
.fc-style-77c8140b { overflow-x:auto; }
.fc-style-7951f7c7 { margin-top:16px;text-align:center; }
.fc-style-7ed716c4 { width: 600px; }
.fc-style-7f2d660a { width: 52%; }
.fc-style-81ad57fe { width: 62%; }
.fc-style-8253f033 { width: 3%; }
.fc-style-828e8eb9 { width: 10% }
.fc-style-8362f68d { height:36px; }
.fc-style-86ee7c87 { width:89.5% }
.fc-style-89024287 { height:6px; }
.fc-style-8f7f6c86 { width:56% }
.fc-style-93e37d42 { width:72% }
.fc-style-9c33ea5e { width:0% }
.fc-style-9cf478ca { width: 17%; }
.fc-style-9d49ecb1 { height: 5px; }
.fc-style-a0b01ddb { max-height: 300px; }
.fc-style-a2257957 { color:#22c55e;margin-top:2px;flex-shrink:0; }
.fc-style-a294a435 { width: 25%; }
.fc-style-a50d8d62 { height:8px; }
.fc-style-a722ee36 { min-width:160px; }
.fc-style-aa6beafa { padding:56.25% 0 0 0;position:relative; }
.fc-style-ae8c8239 { width: 22% }
.fc-style-ae925e10 { resize:vertical; }
.fc-style-b475fd1b { position:sticky;top:24px; }
.fc-style-b5942db7 { width:100%;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.1); }
.fc-style-b78f46c4 { height: 100vh; overflow: auto; }
.fc-style-baedfbec { min-width:680px;max-width:100%;height:auto; }
.fc-style-becb2616 { font-size:.7rem; }
.fc-style-bfb7e90d { appearance:none;background-image:url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23718096' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E);background-repeat:no-repeat;background-position:right 14px center;padding-right:36px; }
.fc-style-c01d8566 { width: 45% }
.fc-style-d5ecfba9 { width: 75% }
.fc-style-d8269867 { height: 8px; }
.fc-style-d9289be8 { border-right:1px solid #f0f4fa; }
.fc-style-e0579b9d { height: auto; }
.fc-style-e264d9d5 { width: 37%; }
.fc-style-e65692f4 { width:91% }
.fc-style-e9344bf5 { padding:13px; }
.fc-style-f7c4e501 { width: 16% }
.fc-style-f808f073 { width: 14%; }
.fc-style-fcb9f755 { width: 30%; }
.fc-style-ffe42964 { width: 18% }

/* Moved from inline <style> blocks */
/* Source: pages/kasse.html, style block 1 */
/* Checkout auth tabs: keep tab buttons inside the card header */
.checkout-auth-tabs {
  overflow: hidden;
}

.checkout-auth-tabs .nav-tabs {
  margin: 0;
  border-bottom: 1px solid var(--geeks-border-color, #dee2e6);
}

.checkout-auth-tabs .nav-item {
  margin-bottom: 0;
}

.checkout-auth-tabs .nav-link {
  border-top: 0;
  border-radius: 0;
  margin-bottom: 0;
}

.checkout-auth-tabs .nav-link.active {
  background-color: #fff;
}


/* Mobile and responsive purchase/card helpers */
.fc-responsive-actions,
.fc-page-actions,
.fc-choice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.fc-video-row,
.fc-product-row,
.fc-purchase-row {
  min-width: 0;
}

.fc-video-row .fc-video-title,
.fc-product-row .fc-product-title,
.fc-purchase-row .fc-purchase-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fc-cart-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.25rem 1.25rem;
  column-gap: .5rem;
  align-items: start;
  width: 100%;
}

.fc-cart-item-title,
#sb-items > .d-flex.justify-content-between > span:first-child {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.45;
}

.fc-cart-price,
#sb-items .text-dark,
#sb-items .text-primary.fw-bold {
  display: inline-block !important;
  white-space: nowrap !important;
  min-width: max-content !important;
  width: max-content !important;
  word-break: keep-all !important;
  text-align: right;
}

.fc-cart-remove {
  width: 1.25rem;
  min-width: 1.25rem;
  line-height: 1;
  text-align: center;
}

#sb-items > .d-flex.justify-content-between {
  gap: .75rem;
  align-items: flex-start !important;
}

#sb-items > .d-flex.justify-content-between > div:last-child {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  min-width: max-content !important;
}

img,
iframe,
video,
embed,
object {
  max-width: 100%;
}

.ratio iframe,
.ratio video {
  max-width: none;
}

.table-responsive table {
  min-width: 640px;
}

@media (max-width: 991.98px) {
  .position-sticky,
  .sticky-top {
    position: static !important;
    top: auto !important;
  }

  .navbar .dropdown-menu,
  .dropdown-fullwidth .dropdown-menu {
    max-width: 100% !important;
  }
}

@media (max-width: 767.98px) {
  .container,
  .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .display-1,
  .display-2,
  .display-3,
  .display-4 {
    font-size: clamp(2rem, 11vw, 3rem);
    line-height: 1.1;
  }

  .btn-lg {
    white-space: normal;
  }

  .fc-responsive-actions,
  .fc-page-actions,
  .fc-choice-actions,
  .d-flex.flex-wrap.gap-3,
  .d-flex.gap-3.flex-wrap {
    row-gap: .75rem !important;
  }

  .fc-video-row,
  .fc-product-row,
  .fc-purchase-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .5rem .75rem;
    align-items: start !important;
  }

  .fc-video-row .fc-video-main,
  .fc-product-row .fc-product-main,
  .fc-purchase-row .fc-purchase-main {
    min-width: 0;
  }

  .fc-video-row .fc-video-price,
  .fc-product-row .fc-product-price,
  .fc-purchase-row .fc-purchase-price {
    grid-column: 2;
    white-space: nowrap;
    justify-self: start;
  }

  .fc-video-row .btn,
  .fc-product-row .btn,
  .fc-purchase-row .btn {
    grid-column: 1 / -1;
    justify-self: stretch;
    white-space: normal;
  }

  .fc-cart-item {
    grid-template-columns: minmax(0, 1fr) 4.25rem 1.25rem;
  }
}

@media (max-width: 575.98px) {
  .card-body,
  .card-header,
  .card-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .btn.w-100,
  .d-grid .btn {
    white-space: normal;
  }

  .fc-cart-item {
    grid-template-columns: minmax(0, 1fr) 3.75rem 1.1rem;
    column-gap: .4rem;
  }
}


/* Course link cards: simple link rows inside light cards */
.fc-course-link-card {
  padding: .55rem 0;
  background-color: transparent !important;
  border: 0 !important;
  color: #111827;
}

.fc-course-link-card:hover,
.fc-course-link-card:focus {
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none;
}

.fc-course-link-title {
  color: #111827;
  font-weight: 700;
  transition: color .15s ease;
}

.fc-course-link-card:hover .fc-course-link-title,
.fc-course-link-card:focus .fc-course-link-title {
  color: #fc3f1e;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.fc-course-link-card-icon {
  color: #fc3f1e !important;
}

@media (max-width: 575.98px) {
  .fc-course-link-card {
    align-items: flex-start !important;
  }

  .fc-course-link-card-icon {
    margin-top: .1rem;
  }
}

/* ===== Receipts (flipclass_commerce): print only the receipt ===== */
@media print {
    .fc-receipt-page .navbar,
    .fc-receipt-page .footer,
    .fc-receipt-page #djDebug,
    .fc-receipt-page #chatra,
    .fc-receipt-page .termsfeed-com---nb {
        display: none !important;
    }
    .fc-receipt-page {
        background: #fff !important;
    }
    .fc-receipt-page .card {
        break-inside: avoid;
    }
}

/* Video player (Mine kurs): 16:9 via padding, as in the sketch (the theme's .ratio is a 10rem inline-block). */
.fc-video-frame {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  background: #000;
}

.fc-video-frame iframe,
.fc-video-frame video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* A video's progress in the chapter page's topic list (compact on phones, so the title keeps its room). */
.fc-video-progress {
  width: 3.5rem;
}

@media (min-width: 576px) {
  .fc-video-progress {
    width: 8rem;
  }
}

/* Long Norwegian topic names wrap at syllables instead of overflowing on phones. */
.fc-hyphenate {
  hyphens: auto;
}

/* Lets a flex child shrink below its content, so long names wrap instead of pushing the row wider. */
.min-w-0 {
  min-width: 0;
}

/* Errors in the cradmin forms still in use (edit profile, delete account, …) look like the plain Django forms'
   Bootstrap errors: the form's message as .alert-danger, a field's errors as .invalid-feedback and the field as
   .is-invalid. Cradmin renders them as .box--warning and .message--error, and Django marks an invalid field
   aria-invalid="true". The body text rules above leave .message out, so the errors keep this size. */
.messages .box--warning,
.messages .box--error {
  position: relative;
  padding: 1rem;
  margin-bottom: 1rem;
  color: var(--geeks-danger-text-emphasis);
  background-color: var(--geeks-danger-bg-subtle);
  border: var(--geeks-border-width) solid var(--geeks-danger-border-subtle);
  border-radius: var(--geeks-border-radius);
}

.message--error {
  width: 100%;
  margin-top: .25rem;
  margin-bottom: 0;
  font-size: .875em;
  color: var(--geeks-form-invalid-color);
}

.form-control[aria-invalid="true"] {
  border-color: var(--geeks-form-invalid-border-color);
  padding-right: calc(1.6em + 1rem);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc2626'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc2626' stroke='none'/%3E%3C/svg%3E");
  background-position: right calc(.4em + .25rem) center;
  background-repeat: no-repeat;
  background-size: calc(.8em + .5rem) calc(.8em + .5rem);
}

.form-control[aria-invalid="true"]:focus {
  border-color: var(--geeks-form-invalid-border-color);
  box-shadow: 0 0 0 .25rem rgba(var(--geeks-danger-rgb), .25);
}

/* A news excerpt is editor HTML or plain text: the wrapper sets the space below, so a trailing <p> adds none */
.fc-excerpt > :last-child {
  margin-bottom: 0;
}