/**
 * INR Pressure Profile — tool-styling.
 *
 * BELANGRIJK over !important en Elementor/WordPress:
 * Elke regel heeft !important omdat thema's en Elementor anders door onze stijl
 * heen breken. MAAR !important alleen lost het padding-/rand-probleem NIET op:
 * Elementor zet de OMRINGENDE container vaak op padding:0 of een full-width-
 * stretch, waardoor onze inhoud tegen de schermrand plakt. Daarom geeft de ROOT
 * hieronder z'n EIGEN zij-padding (hangt niet af van de container), forceren we
 * box-sizing, en resetten we eventuele negatieve container-marges. Zo blijft er
 * altijd lucht rond de tool, ongeacht hoe de pagina is opgebouwd.
 */

/* Box-sizing forceren binnen de hele tool: anders rekent het thema padding
   verkeerd door en lopen breedtes/marges scheef. */
.inr-pp-root, .inr-pp-root * , .inr-pp-root *::before, .inr-pp-root *::after { box-sizing: border-box !important; }

.inr-pp-root {
	font-family: 'Inter', sans-serif !important;
	color: #0F172A !important;
	max-width: 820px !important;
	margin: 0 auto !important;
	/* Eigen ademruimte rond de tool — onafhankelijk van de Elementor-container.
	   Dit is de kern van de fix: nooit meer rand-aan-rand. */
	padding: 28px 24px !important;
	width: auto !important;
	box-sizing: border-box !important;
}
/* Op smalle schermen iets minder zij-padding, maar nooit nul. */
@media (max-width: 600px) {
	.inr-pp-root { padding: 20px 16px !important; }
}
.inr-pp-laden, .inr-pp-fout { padding: 40px 16px !important; text-align: center !important; color: #64748B !important; font-size: 14px !important; }
.inr-pp-fout { color: #B3261E !important; }

/* Kop met titel + credits */
.inr-pp-kop { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; margin-bottom: 8px !important; }
.inr-pp-titel { font-size: 22px !important; font-weight: 600 !important; color: #0F172A !important; margin: 0 !important; letter-spacing: -.01em !important; }
.inr-pp-credits { display: inline-flex !important; align-items: baseline !important; gap: 6px !important; background: rgba(0,123,255,.08) !important; border: 1px solid rgba(0,123,255,.18) !important; border-radius: 99px !important; padding: 6px 14px !important; flex: none !important; }
.inr-pp-credits-getal { font-size: 17px !important; font-weight: 700 !important; color: #007BFF !important; }
.inr-pp-credits-label { font-size: 12px !important; font-weight: 500 !important; color: #007BFF !important; }
.inr-pp-intro { font-size: 14.5px !important; line-height: 1.6 !important; color: #475569 !important; margin: 6px 0 20px !important; font-weight: 300 !important; }
.inr-pp-subkop { font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .04em !important; color: #94A3B8 !important; margin: 26px 0 12px !important; }

/* Meldingen */
.inr-pp-melding { border-radius: 12px !important; padding: 14px 16px !important; font-size: 13.5px !important; line-height: 1.55 !important; margin: 4px 0 18px !important; }
.inr-pp-melding-upsell { background: rgba(245,158,11,.10) !important; border: 1px solid rgba(245,158,11,.30) !important; color: #92400E !important; }
.inr-pp-melding-waarschuwing { background: rgba(245,158,11,.10) !important; border: 1px solid rgba(245,158,11,.30) !important; color: #92400E !important; }
.inr-pp-melding-ok { background: rgba(52,168,83,.10) !important; border: 1px solid rgba(52,168,83,.28) !important; color: #1E7B34 !important; }
.inr-pp-melding-fout { background: rgba(179,38,30,.08) !important; border: 1px solid rgba(179,38,30,.25) !important; color: #B3261E !important; }
.inr-pp-melding-bezig { background: rgba(15,23,42,.04) !important; border: 1px solid rgba(15,23,42,.10) !important; color: #475569 !important; }
.inr-pp-melding-zone { margin-top: 8px !important; }

/* Type-keuze grid */
.inr-pp-typegrid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
@media (max-width: 620px) { .inr-pp-typegrid { grid-template-columns: 1fr !important; } }
.inr-pp-typekaart { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; text-align: left !important; background: #fff !important; border: 1px solid rgba(15,23,42,.12) !important; border-radius: 16px !important; padding: 18px !important; cursor: pointer !important; transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease !important; }
.inr-pp-typekaart:hover { border-color: rgba(0,123,255,.5) !important; box-shadow: 0 4px 16px rgba(0,123,255,.10) !important; transform: translateY(-1px) !important; }
.inr-pp-typekaart-uit { opacity: .55 !important; cursor: not-allowed !important; }
.inr-pp-typekaart-uit:hover { border-color: rgba(15,23,42,.12) !important; box-shadow: none !important; transform: none !important; }
.inr-pp-typenaam { display: block !important; max-width: 100% !important; min-width: 0 !important; font-size: 16px !important; font-weight: 600 !important; color: #0F172A !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: break-word !important; }
.inr-pp-typeuitleg { display: block !important; max-width: 100% !important; min-width: 0 !important; font-size: 13px !important; line-height: 1.5 !important; color: #64748B !important; font-weight: 300 !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: break-word !important; }
.inr-pp-typemeta { display: block !important; max-width: 100% !important; min-width: 0 !important; font-size: 11.5px !important; font-weight: 600 !important; color: #94A3B8 !important; margin-top: 4px !important; white-space: normal !important; overflow-wrap: break-word !important; }

/* Eigen profielen-lijst */
.inr-pp-lijst { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.inr-pp-lijstrij { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; background: #fff !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: 12px !important; padding: 12px 16px !important; }
.inr-pp-lijstinfo { display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; }
.inr-pp-lijstnaam { font-size: 14px !important; font-weight: 600 !important; color: #0F172A !important; }
.inr-pp-status { font-size: 11px !important; font-weight: 600 !important; padding: 2px 9px !important; border-radius: 99px !important; }
.inr-pp-status-concept { background: rgba(15,23,42,.07) !important; color: #64748B !important; }
.inr-pp-status-ingestuurd { background: rgba(0,123,255,.12) !important; color: #007BFF !important; }
.inr-pp-status-beoordeeld { background: rgba(52,168,83,.14) !important; color: #1E7B34 !important; }
.inr-pp-lijstacties { display: flex !important; align-items: center !important; gap: 6px !important; flex: none !important; }

/* Knoppen */
.inr-pp-knop { background: #007BFF !important; color: #fff !important; border: none !important; border-radius: 10px !important; padding: 10px 20px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; transition: background .14s ease !important; }
.inr-pp-knop:hover { background: #0064d6 !important; }
.inr-pp-knop-insturen { background: #5B30D6 !important; }
.inr-pp-knop-insturen:hover { background: #4a25b3 !important; }
.inr-pp-knop-secundair { background: #fff !important; color: #475569 !important; border: 1px solid rgba(15,23,42,.16) !important; border-radius: 10px !important; padding: 10px 18px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; }
.inr-pp-knop-secundair:hover { background: rgba(15,23,42,.04) !important; }
.inr-pp-knop-tekst { background: transparent !important; border: none !important; color: #007BFF !important; font-size: 13.5px !important; font-weight: 600 !important; cursor: pointer !important; padding: 6px 8px !important; border-radius: 7px !important; }
.inr-pp-knop-tekst:hover { background: rgba(0,123,255,.08) !important; }
.inr-pp-knop-tekst.gevaar { color: #B3261E !important; }
.inr-pp-knop-tekst.gevaar:hover { background: rgba(179,38,30,.07) !important; }

/* Solo/team keuze */
.inr-pp-keuzerij { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; align-items: center !important; margin: 8px 0 !important; }
.inr-pp-keuzeknop { background: #fff !important; border: 1px solid rgba(0,123,255,.4) !important; color: #007BFF !important; border-radius: 12px !important; padding: 14px 22px !important; font-size: 14.5px !important; font-weight: 600 !important; cursor: pointer !important; transition: background .14s ease !important; }
.inr-pp-keuzeknop:hover { background: rgba(0,123,255,.06) !important; }

/* ── Invul-flow: één vraag per scherm (stijl als INR Align) ── */
.inr-pp-flowkop { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 14px !important; }
.inr-pp-flowfase { font-size: 22px !important; font-weight: 700 !important; color: #0F172A !important; letter-spacing: -.01em !important; }
.inr-pp-flowteller { font-size: 15px !important; font-weight: 500 !important; color: #94A3B8 !important; flex: none !important; }

/* Tabbalk: segment + label per fase */
.inr-pp-tabs { display: flex !important; gap: 10px !important; margin-bottom: 22px !important; }
.inr-pp-tab { display: flex !important; flex-direction: column !important; gap: 8px !important; flex: 1 1 0 !important; min-width: 0 !important; }
.inr-pp-tabbalk { height: 5px !important; border-radius: 99px !important; background: rgba(15,23,42,.10) !important; transition: background .2s ease !important; }
.inr-pp-tab.gedaan .inr-pp-tabbalk { background: #5B30D6 !important; }
.inr-pp-tab.actief .inr-pp-tabbalk { background: #007BFF !important; }
.inr-pp-tablabel { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .03em !important; color: #CBD5E1 !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.inr-pp-tab.actief .inr-pp-tablabel { color: #007BFF !important; }
.inr-pp-tab.gedaan .inr-pp-tablabel { color: #94A3B8 !important; }
@media (max-width: 600px) { .inr-pp-tablabel { font-size: 9.5px !important; } .inr-pp-tabs { gap: 6px !important; } }

/* Subbalk: Vorige + type-naam */
.inr-pp-flowsub { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 20px !important; }
.inr-pp-flowtype { font-size: 13px !important; font-weight: 700 !important; letter-spacing: .06em !important; color: #94A3B8 !important; text-align: right !important; }

/* Fase-intro als rustig citaat */
.inr-pp-faseintro { border-left: 3px solid rgba(0,123,255,.3) !important; margin: 0 0 22px !important; padding: 4px 0 4px 16px !important; font-size: 16px !important; line-height: 1.6 !important; font-style: italic !important; color: #475569 !important; font-weight: 300 !important; }

/* De vraag */
.inr-pp-vraagkop { font-size: 24px !important; font-weight: 700 !important; line-height: 1.35 !important; color: #0F172A !important; margin: 0 0 24px !important; letter-spacing: -.01em !important; }
@media (max-width: 600px) { .inr-pp-vraagkop { font-size: 21px !important; } }

/* Antwoordkaarten A/B/C/D/E */
.inr-pp-opties { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.inr-pp-optiekaart { display: flex !important; align-items: center !important; gap: 18px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; text-align: left !important; background: #fff !important; border: 1.5px solid rgba(15,23,42,.12) !important; border-radius: 16px !important; padding: 20px 22px !important; cursor: pointer !important; transition: border-color .14s ease, box-shadow .14s ease, background .14s ease !important; }
.inr-pp-optiekaart:hover { border-color: rgba(0,123,255,.45) !important; box-shadow: 0 3px 14px rgba(0,123,255,.08) !important; }
.inr-pp-optiekaart.gekozen { border-color: #007BFF !important; background: rgba(0,123,255,.05) !important; box-shadow: inset 4px 0 0 #007BFF !important; }
.inr-pp-optieletter { font-size: 15px !important; font-weight: 700 !important; color: #007BFF !important; flex: none !important; width: 22px !important; text-align: center !important; }
.inr-pp-optietekst { display: block !important; flex: 1 1 auto !important; min-width: 0 !important; font-size: 16.5px !important; line-height: 1.45 !important; color: #1E293B !important; font-weight: 400 !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: break-word !important; }
@media (max-width: 600px) { .inr-pp-optietekst { font-size: 15.5px !important; } .inr-pp-optiekaart { padding: 17px 18px !important; gap: 14px !important; } }

/* Onderbalk */
.inr-pp-flowonder { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-top: 26px !important; flex-wrap: wrap !important; }

/* Slot-paneel (geen credits) */
.inr-pp-slot { display: flex !important; align-items: flex-start !important; gap: 16px !important; background: rgba(15,23,42,.03) !important; border: 1px solid rgba(15,23,42,.12) !important; border-radius: 16px !important; padding: 18px 20px !important; margin: 4px 0 22px !important; }
.inr-pp-slot-icoon { flex: none !important; width: 48px !important; height: 48px !important; border-radius: 12px !important; background: rgba(15,23,42,.06) !important; color: #64748B !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.inr-pp-slot-tekst { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.inr-pp-slot-tekst strong { font-size: 15px !important; font-weight: 700 !important; color: #334155 !important; }
.inr-pp-slot-tekst span { font-size: 13.5px !important; line-height: 1.55 !important; color: #64748B !important; font-weight: 300 !important; }

/* Slotje op geblokkeerde typekaart */
.inr-pp-typekaart { position: relative !important; }
.inr-pp-typeslot { position: absolute !important; top: 14px !important; right: 14px !important; color: #94A3B8 !important; }

/* Bedankt */
.inr-pp-dank { text-align: center !important; padding: 30px 16px !important; }
.inr-pp-dank-icoon { width: 56px !important; height: 56px !important; border-radius: 50% !important; background: rgba(52,168,83,.14) !important; color: #1E7B34 !important; font-size: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto 16px !important; }
.inr-pp-dank .inr-pp-titel { justify-content: center !important; }
.inr-pp-dank .inr-pp-intro { max-width: 460px !important; margin: 10px auto 22px !important; }

/* Superadmin-beoordeelbak */
.inr-pp-beheer { background: rgba(91,48,214,.05) !important; border: 1px solid rgba(91,48,214,.16) !important; border-radius: 16px !important; padding: 18px !important; margin: 0 0 24px !important; }
.inr-pp-beheer-kop { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 10px !important; }
.inr-pp-badge { font-size: 12px !important; font-weight: 700 !important; background: #5B30D6 !important; color: #fff !important; border-radius: 99px !important; padding: 3px 11px !important; flex: none !important; }
.inr-pp-leeg { font-size: 13.5px !important; color: #64748B !important; margin: 4px 0 0 !important; font-weight: 300 !important; }
.inr-pp-beheerrij { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; background: #fff !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: 12px !important; padding: 12px 16px !important; flex-wrap: wrap !important; }
.inr-pp-beheerrij.inr-pp-bezig { opacity: .6 !important; pointer-events: none !important; }
.inr-pp-beheermeta { font-size: 12px !important; color: #94A3B8 !important; font-weight: 500 !important; margin-top: 3px !important; }

/* Credit-beheer (superadmin) */
.inr-pp-credbeheer { background: rgba(0,123,255,.05) !important; border: 1px solid rgba(0,123,255,.16) !important; border-radius: 16px !important; padding: 18px !important; margin: 0 0 16px !important; }
.inr-pp-credzelf { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; background: #fff !important; border: 1px solid rgba(0,123,255,.20) !important; border-radius: 12px !important; padding: 12px 16px !important; margin-bottom: 14px !important; flex-wrap: wrap !important; }
.inr-pp-credzelf-sub { font-size: 12px !important; color: #94A3B8 !important; font-weight: 500 !important; }
.inr-pp-credsaldo { font-size: 14px !important; font-weight: 700 !important; color: #007BFF !important; min-width: 20px !important; text-align: center !important; }
.inr-pp-credzelf .inr-pp-credsaldo { margin-top: 4px !important; text-align: left !important; }
.inr-pp-credknoppen { display: flex !important; align-items: center !important; gap: 6px !important; flex: none !important; }
.inr-pp-credknop { background: #fff !important; border: 1px solid rgba(15,23,42,.18) !important; border-radius: 8px !important; padding: 5px 11px !important; font-size: 13px !important; font-weight: 700 !important; color: #334155 !important; cursor: pointer !important; transition: background .12s ease, border-color .12s ease !important; }
.inr-pp-credknop:hover { background: rgba(0,123,255,.08) !important; border-color: rgba(0,123,255,.4) !important; }
.inr-pp-credlabel { display: block !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .04em !important; color: #94A3B8 !important; margin: 6px 0 8px !important; }
.inr-pp-credselect { width: 100% !important; padding: 10px 12px !important; border: 1px solid rgba(15,23,42,.18) !important; border-radius: 10px !important; font-size: 14px !important; color: #0F172A !important; background: #fff !important; }
.inr-pp-credgebruikers { margin-top: 12px !important; }
.inr-pp-credtotaal { font-size: 13px !important; color: #475569 !important; margin-bottom: 10px !important; }
.inr-pp-credwaarsch { color: #92400E !important; font-weight: 500 !important; }
.inr-pp-credrij { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; background: #fff !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: 12px !important; padding: 10px 16px !important; flex-wrap: wrap !important; }

/* ── Mobiele afkap-fix (hardnekkig probleem, zie ook tool-align) ──
   De keuzeknoppen (profiel-keuze en vraag-opties) zijn opgebouwd uit
   span-elementen. De live Elementor-omgeving legt op spans binnen knoppen
   white-space:nowrap op (themaregel zoals '.elementor button span'), waardoor
   de tekst op één regel blijft en aan de rechterrand wordt afgekapt op mobiel.
   !important alleen wint hier NIET van, want die Elementor-selector is
   specifieker. Daarom hier de knop-context expliciet in de selector zelf
   meenemen voor hogere specificiteit, geankerd op .inr-pp-root. */
.inr-pp-root .inr-pp-optiekaart .inr-pp-optietekst,
.inr-pp-root button.inr-pp-optiekaart .inr-pp-optietekst,
.inr-pp-root .inr-pp-typekaart .inr-pp-typenaam,
.inr-pp-root .inr-pp-typekaart .inr-pp-typeuitleg,
.inr-pp-root .inr-pp-typekaart .inr-pp-typemeta,
.inr-pp-root button.inr-pp-typekaart .inr-pp-typenaam,
.inr-pp-root button.inr-pp-typekaart .inr-pp-typeuitleg,
.inr-pp-root button.inr-pp-typekaart .inr-pp-typemeta {
  white-space: normal !important; overflow-wrap: break-word !important; word-break: break-word !important; min-width: 0 !important;
}