/* ============================================================
   lu-tarieven.css — sectie 9 van /live-chat-uitbesteden/.
   Bouwt op widgets/shared/bconnect-lu.css (handle `bconnect-lu`).
   Bron: upgrade-uitbesteden.css, "8 TARIEVEN".

   `.lu-split`, `.lu-card` en `.lu-ctarow` staan in de gedeelde
   stylesheet. Hier de opbouwkaart en de linkse uitlijning van de knop.
   ============================================================ */

.lu-tarief-col { display: block; min-width: 0; box-sizing: border-box; }

/* De knop staat hier onder een tekstkolom en niet gecentreerd onder een
   sectie. `.lu-ctarow` staat op (0,1,0), deze op (0,2,0). */
.lu-tarief-split .lu-ctarow { justify-content: flex-start; }

/* De eerste alinea volgt direct op de kop; de bron zet daar een inline
   marginTop van 20 op. */
.lu-tarief-col .lu-h2 + .lu-body,
.lu-tarief-col .lu-rise + .lu-body { margin-top: 20px; }

.lu-opbouw { display: block; width: 100%; box-sizing: border-box; padding: 28px 28px 30px; border: 1px solid #E3DFF5; border-radius: 12px; }

.lu-opbouw-kop { font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 19px; line-height: 1.25; letter-spacing: -.01em; color: var(--c-navy); margin: 0; }
.lu-opbouw-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; }
.lu-opbouw-list li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-top: 1px solid #EDEAF7; }
.lu-opbouw-list li:first-child { border-top: 0; padding-top: 0; }
.lu-opbouw-list li:last-child { padding-bottom: 0; }
/* ---- de icoontegel -------------------------------------------
   44px met een icoon van 24px, en NIET de 36/18 uit de bron.

   Alle veertien iconen van deze familie staan op stroke-width 1.75,
   maar de viewBox is 24 eenheden breed, dus de lijn schaalt mee met de
   weergavemaat. Gemeten op 1440px, 23-09-2026 — effectieve lijndikte op
   het scherm:

     lu-wanneer / lu-kanalen   svg 64px   4,67px
     lu-zonder (tegel 48px)    svg 24px   1,75px
     lu-tarieven (bron: 36/18) svg 18px   1,31px   << 25% dunner dan de tegels

   Het antwoord daarop is een grotere icoonmaat en niet een dikkere
   lijn: met 24px komt de effectieve dikte op 1,75px en staat hij gelijk
   aan de tegels van lu-zonder. De tegel groeit mee van 36 naar 44px om
   dezelfde binnenmarge te houden. De kaart wordt daar niet hoger van:
   gemeten 325px vóór en 324px ná. */
.lu-opbouw-ico { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--brand-gradient); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(168, 2, 142, .22); }
.lu-opbouw-ico svg { display: block; width: 24px; height: 24px; }
.lu-opbouw-list strong { display: block; font-family: var(--font-head); font-weight: var(--fw-bold); font-size: 16px; line-height: 1.3; color: var(--c-navy); }
.lu-opbouw-list p { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: var(--c-text-muted); }

/* ============================================================
   HARDENING

   1. `.lu-opbouw-kop` en `.lu-opbouw-list p` stonden in de bron met
      `!important` erop (19px en margin 4px). Dat kwam daar doordat de
      kaartregels `.lu-card h3` en `.lu-card p` uit dezelfde stylesheet
      op gelijke specificiteit stonden. Hier is de opbouwkaart geen
      `.lu-cards3`-kaart, dus het binnenraster raakt hem niet, en de
      kop is een `.lu-opbouw-kop` op (0,1,0) tegen `.lu-card h3` op
      (0,1,1) — die laatste wint. Vandaar deze twee regels onder de
      widgetnaam, op (0,3,1), in plaats van !important.

   2. `.lu-opbouw-list` is een <ul>; zie het HARDENING-blok van
      lu-werkt.css voor waarom de list-reset onder de widgetnaam moet.

   3. De opbouwkaart is een kaart, maar geen hover-kaart: hij is inhoud
      en geen keuze, dus hij hoort niet op te tillen als de muis erlangs
      gaat. `.lu-card:hover` in de gedeelde stylesheet staat op (0,2,0)
      en `.lu-opbouw:hover` óók — een gelijkspel dat door laadorde wordt
      beslist, en die is niet vastgelegd: de per-widget-handles krijgen
      in bconnect_child_register_widget_styles() alleen tokens, fonts en
      bconnect-shared als dependency, niet bconnect-lu. De volgorde uit
      get_style_depends() is in de praktijk goed maar niet afgedwongen.
      Vandaar onder de widgetnaam, op (0,3,0).
   ============================================================ */
.elementor-widget-bconnect_lu_tarieven .lu-opbouw .lu-opbouw-kop { font-size: 19px; }
.elementor-widget-bconnect_lu_tarieven .lu-opbouw .lu-opbouw-list p { margin: 4px 0 0; font-size: 15px; }
.elementor-widget-bconnect_lu_tarieven .lu-opbouw-list { list-style: none; margin: 20px 0 0; padding: 0; }
.elementor-widget-bconnect_lu_tarieven .lu-opbouw-list > li { display: flex; margin: 0; list-style: none; }
.elementor-widget-bconnect_lu_tarieven .lu-opbouw-list > li::marker { content: ""; }
.elementor-widget-bconnect_lu_tarieven .lu-opbouw:hover { transform: none; box-shadow: 0 6px 18px rgba(20, 20, 100, .05); }