/**
 * BornData Forening — shared components.
 *
 * Our own components, used by both the member pages and Booking: a greeting
 * with numbers, filter chips, event rows with a date badge, status pills and
 * fact boxes. Unlike forening-site.css (a scoped subset of Bootstrap, only
 * loaded in "self" mode) this file is loaded in every style mode, because no
 * template's Bootstrap provides these.
 *
 * The club colour is one variable, --bd-accent, set from the component
 * options (SiteAssets adds it inline). Everything that should carry the club's
 * colour uses it; tints are mixed from it, so one setting is enough.
 *
 * Design origin: KartBook's list and cards, made generic.
 */

.bd-forening {
    --bd-accent: #0d6efd;
    --bd-accent-contrast: #fff;
    --bd-accent-soft: color-mix(in srgb, var(--bd-accent) 8%, #fff);
    --bd-accent-line: color-mix(in srgb, var(--bd-accent) 30%, transparent);
    --bd-comp-border: #dee2e6;
    --bd-comp-muted: #6c757d;
    --bd-comp-radius: 0.75rem;
    --bd-comp-radius-sm: 0.5rem;
    --bd-comp-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --bd-comp-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* --- Layout helpers the booking pages need ----------------------------- */
@media (min-width: 992px) {
    .bd-forening .col-lg-8 { flex: 0 0 auto; width: 66.6667%; }
    .bd-forening .col-lg-4 { flex: 0 0 auto; width: 33.3333%; }
}

/* The event page: the details, and the sign-up beside them. Its own grid —
   with .row/.col-* the widths were decided by whichever stylesheet came last
   (ours, the template's, Bootstrap's), and the sign-up ended up a third wide
   under the text with the rest of the line empty. One column on a phone. */
.bd-forening .bd-event-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
@media (min-width: 992px) {
    .bd-forening .bd-event-layout { grid-template-columns: minmax(0, 1.7fr) minmax(20rem, 1fr); }
    /* The sign-up stays in view while the details are read. */
    .bd-forening .bd-event-side { position: sticky; top: 1rem; }
}

/* Page builders set their content box to justified (u-align-justify on this
   site), and our pages inherit it. A date, a label or a price is not a
   paragraph of prose, and justified it breaks into gaps ("søndag   25.
   oktober"). Set on the elements themselves, which beats an inherited value;
   zero specificity past the wrapper, so text-center and the like still win. */
.bd-forening,
.bd-forening :where(p, dd, dt, li, td, th, label, span, div, h1, h2, h3, h4) {
    text-align: start;
}

/* --- Greeting with numbers --------------------------------------------- */
.bd-forening .bd-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    background: var(--bd-accent-soft);
    border: 1px solid var(--bd-accent-line);
    border-radius: var(--bd-comp-radius);
}
.bd-forening .bd-hero-title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 700;
    line-height: 1.25;
}
.bd-forening .bd-hero-sub { margin: 0; color: var(--bd-comp-muted); }
.bd-forening .bd-stats { display: flex; gap: 1.5rem; }
.bd-forening .bd-stat { min-width: 5rem; text-align: center; }
.bd-forening .bd-stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bd-accent);
}
.bd-forening .bd-stat-label {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bd-comp-muted);
}

/* --- Filter chips ------------------------------------------------------- */
.bd-forening .bd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.bd-forening .bd-chip {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--bd-comp-border);
    border-radius: 999px;
    transition: border-color 0.15s, background-color 0.15s;
}
.bd-forening .bd-chip:hover { border-color: var(--bd-accent); background: var(--bd-accent-soft); }
.bd-forening .bd-chip.is-active {
    color: var(--bd-accent-contrast);
    font-weight: 600;
    background: var(--bd-accent);
    border-color: var(--bd-accent);
}

/* --- Event rows --------------------------------------------------------- */
.bd-forening .bd-event-list { display: flex; flex-direction: column; gap: 0.6rem; }
.bd-forening .bd-event-row {
    display: grid;
    grid-template-columns: 3.5rem 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--bd-comp-border);
    border-left: 4px solid var(--bd-comp-border);
    border-radius: var(--bd-comp-radius);
    box-shadow: var(--bd-comp-shadow);
    transition: box-shadow 0.15s;
}
.bd-forening .bd-event-row:hover { box-shadow: var(--bd-comp-shadow-hover); }
.bd-forening .bd-event-row.is-open { border-left-color: #198754; }
.bd-forening .bd-event-row.is-mine { border-left-color: var(--bd-accent); }
.bd-forening .bd-event-row.is-full { border-left-color: #adb5bd; }
.bd-forening .bd-event-row.is-cancelled { opacity: 0.7; border-left-color: #dc3545; }

.bd-forening .bd-date-badge {
    align-self: start;
    padding: 0.35rem 0.25rem;
    text-align: center;
    color: var(--bd-accent-contrast);
    background: var(--bd-accent);
    border-radius: var(--bd-comp-radius-sm);
}
.bd-forening .bd-date-day { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1; }
.bd-forening .bd-date-month {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bd-forening .bd-event-main { min-width: 0; }
.bd-forening .bd-event-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}
.bd-forening .bd-event-title { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.bd-forening .bd-event-title a { color: inherit; text-decoration: none; }
.bd-forening .bd-event-title a:hover { color: var(--bd-accent); }
.bd-forening .bd-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 1rem;
    font-size: 0.85rem;
    color: var(--bd-comp-muted);
}
.bd-forening .bd-event-action .btn { white-space: nowrap; }

@media (max-width: 575.98px) {
    .bd-forening .bd-event-row { grid-template-columns: 3rem 1fr; }
    .bd-forening .bd-event-action { grid-column: 1 / -1; }
    .bd-forening .bd-event-action .btn { width: 100%; }
    .bd-forening .bd-hero { padding: 1.25rem; }
}

/* --- Status pills ------------------------------------------------------- */
/* The text always says the status; the colour only repeats it. */
.bd-forening .bd-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 999px;
}
.bd-forening .bd-pill.is-success { color: #0f5132; background: #d1e7dd; }
.bd-forening .bd-pill.is-warning { color: #664d03; background: #fff3cd; }
.bd-forening .bd-pill.is-danger  { color: #842029; background: #f8d7da; }
.bd-forening .bd-pill.is-neutral { color: #495057; background: #e9ecef; }
.bd-forening .bd-pill.is-accent  { color: var(--bd-accent-contrast); background: var(--bd-accent); }

/* --- Event page --------------------------------------------------------- */
.bd-forening .bd-back {
    display: inline-block;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--bd-accent);
    text-decoration: none;
}
.bd-forening .bd-back:hover { text-decoration: underline; }
.bd-forening .bd-event-heading {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    line-height: 1.2;
}
.bd-forening .bd-fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}
.bd-forening .bd-fact {
    padding: 0.65rem 0.85rem;
    background: #f8f9fa;
    border: 1px solid var(--bd-comp-border);
    border-radius: var(--bd-comp-radius-sm);
}
.bd-forening .bd-fact-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bd-comp-muted);
}
.bd-forening .bd-fact-value { display: block; font-weight: 600; }

/* One row per person in the signup card and in "my registrations". */
.bd-forening .bd-person-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--bd-comp-border);
}
.bd-forening .card-body > .bd-person-row:last-child { border-bottom: 0; }
.bd-forening .list-group-item.bd-person-row { padding: 0.75rem 1.25rem; }

.bd-forening .bd-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--bd-comp-muted);
    background: #f8f9fa;
    border-radius: var(--bd-comp-radius);
}

/* Anti-spam field: off-screen for people, still in the form for bots. */
.bd-forening .bd-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Butikken: rammen om et varebillede.

   Merchandise-fotos kommer i alle former — et fladt trøjefoto, en hjelm på
   hvid baggrund, et telefonbillede i højformat. En fast højde med `cover`
   klipper hættetrøjen over på midten, og det er præcis den vare, ingen køber.
   Derfor et kvadrat med hele billedet inde i og en neutral baggrund bagved:
   samme størrelse på alle fliser, uden at der skæres i noget.
   --------------------------------------------------------------------------- */
.bd-forening .bd-frame {
    aspect-ratio: 1 / 1;

    /* Og et loft. Uden det er rammen lige saa hoej, som spalten er bred, og en
       flise fylder hele skaermen paa en stor maskine. */
    max-height: 220px;
    background: #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bd-forening .bd-frame img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Varens egen side har plads til et større billede. */
.bd-forening .bd-frame-lg {
    aspect-ratio: 4 / 3;
    max-height: 380px;
    border-radius: .4rem;
}

/* Miniaturen, der skifter det store billede ud. */
.bd-forening .bd-thumb {
    background: #fff;
    border-radius: .3rem;
    line-height: 0;
}

.bd-forening .bd-thumb:hover {
    border-color: var(--bd-comp-accent, #0d6efd) !important;
}

/* ---------------------------------------------------------------------------
   Fuldskærmsviseren i butikken. Ingen bibliotek: et lag over siden, billedet
   midt i, og en vej ud der hvor folk leder efter den — Esc, et klik udenfor,
   og et kryds i hjørnet.
   --------------------------------------------------------------------------- */
.bd-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(0, 0, 0, .88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.bd-lightbox[hidden] {
    display: none;
}

.bd-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.bd-lightbox button {
    position: absolute;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 0;
    border-radius: 50%;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.bd-lightbox button:hover,
.bd-lightbox button:focus {
    background: rgba(255, 255, 255, .28);
}

.bd-lightbox .bd-lb-close { top: 1rem; right: 1rem; }
.bd-lightbox .bd-lb-prev  { left: 1rem; }
.bd-lightbox .bd-lb-next  { right: 1rem; }

/* Billedet siger selv, at der er mere at se. */
.bd-forening .bd-frame-lg { cursor: zoom-in; }

/* ---------------------------------------------------------------------------
   Antallet i kurven. Egen klasse og egne farver: laante utility-klasser fra
   Bootstrap er ikke laant, hvis templatet ikke har dem — og et tal, der staar
   hvidt paa hvidt, er vaerre end intet tal.
   --------------------------------------------------------------------------- */
.bd-forening .bd-count {
    display: inline-block;
    min-width: 1.5rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    background: var(--bd-comp-accent, #0d6efd);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

/* Og når knappen selv bliver farvet ved hover, vender tallet om, så det
   stadig kan læses. */
.bd-forening .btn:hover .bd-count,
.bd-forening .btn:focus .bd-count {
    background: #fff;
    color: var(--bd-comp-accent, #0d6efd);
}

/* Butiksgitteret.
   Fliserne lå på Bootstraps row-cols-*, og de klasser findes ikke i alle
   skabeloner — så en butik med fire varer viste fire linjer på en bred skærm.
   Et gitter af egen kraft spørger browseren om så mange spalter, der er plads
   til, hvilket er det, et butiksvindue gør. */
.bd-forening .bd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

/* Kategorikortene er større: billedet er 4:3 og skal kunne ses. */
.bd-forening .bd-grid-lg {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* På en telefon er to smalle fliser stadig bedre end én bred: man ser to varer
   i stedet for én, og billedet er stadig stort nok til at vise trykket. */
@media (max-width: 575.98px) {
    .bd-forening .bd-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.75rem;
    }

    .bd-forening .bd-grid-lg {
        grid-template-columns: 1fr;
    }
}

.bd-forening .bd-grid > .card {
    height: 100%;
}

/* Kassen: det, der udfyldes, til venstre — det, der købes, til højre.
   Sammentællingen bliver stående, mens der rulles, som i enhver anden butik:
   den, der udfylder en adresse, skal kunne se, hvad det koster, mens han gør
   det, og ikke først når han har trykket. */
.bd-forening .bd-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 860px) {
    .bd-forening .bd-checkout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.bd-forening .bd-summary {
    position: sticky;
    top: 1rem;
}

/* Et valg med plads til en forklaring under sig. Bootstraps .form-check er en
   enkelt linje, og en forsendelsesmåde er sjældent en enkelt linje. */
.bd-forening .bd-option {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.bd-forening .bd-option:last-child {
    border-bottom: 0;
}

.bd-forening .bd-option > input {
    margin-top: 0.25rem;
    flex: 0 0 auto;
    /* Skabeloner trækker gerne .form-check-input 1,5em til venstre, fordi
       Bootstraps .form-check rykker hele rækken lige så langt til højre igen.
       Her er rækken et flex-layout uden den indrykning, så knappen endte ude
       på kortets kant. Vi sætter den tilbage på nul. */
    margin-left: 0;
}

.bd-forening .bd-option > label {
    flex: 1 1 auto;
    cursor: pointer;
}

.bd-forening .bd-option-line {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

/* En linje i sammentællingen: billede, hvad det er, hvad det koster. */
.bd-forening .bd-sum-line {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.bd-forening .bd-sum-shot {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    background: #f4f4f5;
    border-radius: 4px;
    overflow: visible;
}

.bd-forening .bd-sum-shot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

/* Antallet som et lille mærke i hjørnet, som i en indkøbskurv. */
.bd-forening .bd-sum-qty {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--bd-accent, #2b6cb0);
    color: #fff;
    font-size: 0.7rem;
    line-height: 1.25rem;
    text-align: center;
}

.bd-forening .bd-sum-what {
    flex: 1 1 auto;
    min-width: 0;
}

.bd-forening .bd-sum-money {
    flex: 0 0 auto;
    white-space: nowrap;
}

.bd-forening .bd-sum-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25rem 0;
}

.bd-forening .bd-sum-total {
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Feltrækker i kassen.
   Bootstraps .col-4/.col-8 findes ikke i alle skabeloner — der, hvor de
   mangler, fik hvert felt en linje for sig selv, mens kortet ovenfor havde tre
   på samme linje. To kort lige under hinanden, der ikke ligner hinanden, ser
   ud som en fejl, fordi det er en. Så har vi vores eget gitter. */
.bd-forening .bd-fields {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.75rem;
}

.bd-forening .bd-fields > * {
    grid-column: span 12;
    min-width: 0;
}

@media (min-width: 576px) {
    .bd-forening .bd-fields > .bd-f4 { grid-column: span 4; }
    .bd-forening .bd-fields > .bd-f6 { grid-column: span 6; }
    .bd-forening .bd-fields > .bd-f8 { grid-column: span 8; }
}

/* Varens egen side.
   Billedet er det, der sælger, så det må fylde — og et portrætbillede i en
   bred 4:3-ramme bliver til to grå felter med noget imellem. Rammen her er
   kvadratisk og høj nok til, at et billede af et helt menneske kan ses. */
.bd-forening .bd-frame-xl {
    aspect-ratio: 1 / 1;
    max-height: 460px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}

/* Den valgte miniature skal kunne ses. Uden markering ved man ikke, hvilket
   af fire billeder man kigger på. */
.bd-forening .bd-thumb {
    border-radius: 6px;
    opacity: 0.75;
    transition: opacity .15s ease, box-shadow .15s ease;
}

.bd-forening .bd-thumb:hover,
.bd-forening .bd-thumb.is-active {
    opacity: 1;
}

.bd-forening .bd-thumb.is-active {
    box-shadow: 0 0 0 2px var(--bd-accent, #2b6cb0);
}

/* Prisen er det andet, man kigger efter. */
.bd-forening .bd-price {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.bd-forening .bd-price-vat {
    font-size: .875rem;
    font-weight: 400;
}

/* Købsfeltet som en kasse for sig, så størrelse, antal og knap hører sammen
   og ikke flyder sammen med beskrivelsen ovenfor. */
.bd-forening .bd-buy {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.015);
}

.bd-forening .bd-stock-in {
    color: #1a7f4b;
}