/**
 * @package     Joomla.Site
 * @subpackage  Templates.maror
 *
 * Maror template CSS - based on maror.nl design by Ontwerpwerk
 *
 * Color palette:
 * - wit    : #ffffff
 * - zwart  : #3e3e3e
 * - grijs  : #d7d7d7 (rand), #f5f5f5 (achter)
 * - bruin  : #653d35 (basis), #b29e9a (basis + 50% wit)
 * - blauw  : #0052a0 (basis), #80a9d0 (basis + 50% wit), #3486d3 (accent)
 * - geel   : #fffbe6, #ded5c3 (donker), #cec5c3 (rand)
 */

:root {
    --btn-primary-bg: #0052a0;
    --btn-primary-color: #ffffff;
    --body-bg: #ffffff;
    --calendar-bg: #ffffff;
    --calendar-week-bg: #f7f9fc;
    --calendar-disabled-color: #98a2b3;
    --calendar-disabled-bg: #f5f5f5;
}

/* ============================================================
   Reset & Base
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font: 1.125em/1.6 Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
    color: #ffffff;
    background: #653d35;
}

img {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   Typography
   ============================================================ */

h1 {
    font-size: 2.5556em;
    font-weight: bold;
    color: #653d35;
    margin: 0 0 0.5em;
    line-height: 1;
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
}

h2,
h3 {
    font-size: 0.8889em;
    font-weight: bold;
    color: #653d35;
    font-family: "Frutiger W04", Frutiger, "Frutiger Linotype", Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Tahoma, Helvetica, Arial, sans-serif;
}

h2 {
    text-transform: uppercase;
    margin: 2em 0 0.4em;
    font-weight: 800;
}

h3 {
    margin: 1em 0 0;
    font-weight: 700;
}

p {
    margin: 0 0 1em;
}

/* Links */
a {
    color: #0052a0;
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: #3486d3;
}

/* Blockquote */
blockquote {
    background: #fffbe6;
    border: 1px solid #cec5c3;
    margin: 1em 0;
    padding: 1em;
}

blockquote p:last-child {
    margin-bottom: 0;
}

/* Lists */
ul {
    padding-left: 1.5em;
}

/* ============================================================
   Font families
   ============================================================ */

table,
.kop,
.hals,
.staart,
.blauw,
.bruin,
.grijs,
.block-aanvragen,
h2,
.field-name-body h3,
.block-book,
.hoofdmenu,
.knop {
    font-family: "Frutiger W04", Frutiger, "Frutiger Linotype", Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Tahoma, Helvetica, Arial, sans-serif;
}

h2,
.block-book {
    font-weight: 800;
}

h3,
.knop {
    font-weight: 700;
}

.hoofdmenu {
    font-weight: 700;
}

/* ============================================================
   Layout skeleton
   ============================================================ */

.kop,
.staart {
    padding: 0 1em;
}

.kop > .buffer,
.lichaam > .buffer,
.staart > .buffer {
    max-width: 950px;
    margin: 0 auto;
}

.kop {
    padding-top: 2em;
}

.kop > .buffer {
    position: relative;
}

.lichaam {
    padding: 2em 1em 3em;
    color: #3e3e3e;
    background: #ffffff;
}

.lichaam::after {
    content: '';
    display: table;
    clear: both;
}

.front .lichaam {
    padding-top: 0;
}

.kolom {
    float: left;
    padding-bottom: 1em;
}

.kolom::after {
    content: '';
    display: table;
    clear: both;
}

.hals,
.drieluik {
    float: none;
    clear: both;
    overflow: hidden;
    zoom: 1;
    padding: 0;
    display: flex;
}

.hals {
    margin-bottom: 1.5em;
    color: #ffffff;
    background: #0052a0;
}

.zijkolom {
    float: left;
    width: 25%;
}

.hoofdkolom {
    float: right;
    width: 67%;
    padding: 0;
    margin-bottom: 1em;
}

.no-sidebars .hoofdkolom {
    float: none;
    width: auto;
}

.drieluik {
    margin-top: 1em;
}

.drieluik .block {
    float: left;
    width: 31.6%;
}

.drieluik .block + .block {
    margin-left: 2.6%;
}

.staart {
    overflow: hidden;
    zoom: 1;
    padding: 2em 1em;
    font-size: 0.8333em;
    font-family: "Frutiger W04", Frutiger, "Frutiger Linotype", Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Tahoma, Helvetica, Arial, sans-serif;
}

.staart h2 {
    font-size: 1.0667em;
    color: #ffffff;
}

.staart .tekst {
    color: #ffffff;
}

.staart .block {
    float: left;
    width: 28%;
    margin: 0 0 3em;
}

.staart .block + .block {
    margin-left: 6.2%;
}

.staart .block > h2 {
    margin-top: 0;
}

/* ============================================================
   Header (.kop)
   ============================================================ */

.kop {
    font-size: 0.8333em;
}

.kop a,
.staart a {
    color: #b29e9a;
}

.kop a:hover,
.kop a.active,
.kop a.active-trail,
.kop .active > a,
.kop .current > a,
.staart a:hover,
.staart a.active,
.staart a.active-trail,
.staart .active > a,
.staart .current > a {
    color: #ffffff;
}

.kop h2,
.staart h2 {
    color: #ffffff;
}

/* Logo */
.logo {
    display: inline-block;
    margin: 1em 0 2em -20px;
}

.logo img {
    width: 100%;
    max-width: 369px;
    height: auto;
}

/* Aanvragen link / User menu */
.block-bean-aanvragenlink {
    position: absolute;
    top: 0;
    right: 0;
}

.block-bean-aanvragenlink .mod-menu {
    display: flex;
    gap: 1em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.block-bean-aanvragenlink .nav-item {
    margin: 0;
    padding: 0;
}

/* Navigation */
.navigatie {
    position: absolute;
    right: 0;
    bottom: 0;
    text-align: right;
    font-size: 1.2667em;
}

.navigatie ul {
    display: flex;
    gap: 1.5em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigatie li {
    margin: 0;
    padding: 0;
}

.navigatie a {
    display: block;
    padding: 0 0 1.6em;
    border-bottom: 0.4em solid transparent;
}

.navigatie a.active,
.navigatie .current > a,
.navigatie .active > a {
    border-color: rgba(255, 255, 255, 0.5);
}

/* Hamburger toggle - hidden on desktop */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5em;
    position: absolute;
    right: 0;
    top: 1em;
    z-index: 10;
}

.menu-toggle__bar {
    display: block;
    width: 28px;
    height: 3px;
    background: #b29e9a;
    margin: 5px 0;
    transition: transform 0.3s, opacity 0.3s;
}

.menu-toggle:hover .menu-toggle__bar {
    background: #ffffff;
}

/* Hamburger animation when open */
.menu-toggle.is-active .menu-toggle__bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.menu-toggle.is-active .menu-toggle__bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-active .menu-toggle__bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

/* ============================================================
   Hero area (.hals) - homepage only
   ============================================================ */

.block-bean-carrousel {
    float: left;
    width: 68.4%;
}

.block-bean-carrousel img {
    vertical-align: bottom;
    width: 100%;
    height: auto;
}

.dias,
.dia {
    margin: 0;
    padding: 0;
}

.dia {
    list-style: none;
    position: relative;
}

.dia img {
    vertical-align: bottom;
    width: 100%;
    height: auto;
}

.bijschrift {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1em;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.6);
}

.block-bean-nieuws {
    float: right;
    width: 31.6%;
}

/* ============================================================
   Content area styling
   ============================================================ */

/* Content body link styling */
.field-name-body a,
.com-content-article a,
main a {
    text-decoration: underline #80a9d0 dotted;
}

.field-name-body a[href$=".pdf"]::after,
main a[href$=".pdf"]::after {
    content: "\1f4e5";
    text-decoration: underline solid #ffffff;
    margin-left: 0.2em;
    color: #80a9d0;
    position: relative;
    top: 0.05em;
}

/* Content headings */
.field-name-body h2,
.field-name-body h3,
.com-content-article__body h2,
.com-content-article__body h3,
main h2,
main h3 {
    font-size: 1em;
    color: #3486d3;
}

.field-name-body h2,
.com-content-article__body h2,
main h2 {
    text-transform: none;
    font-size: 1.3333em;
    font-weight: normal;
    line-height: 1.4;
}

/* ============================================================
   Block styles
   ============================================================ */

.block > h2 {
    margin-top: 0;
}

.lichaam .block-bean {
    font-size: 0.8333em;
}

.lichaam .block-bean h2 {
    font-size: 1.0667em;
}

.lichaam .block-bean > h2 {
    margin: 0;
    padding: 0.9375em 0.9375em 0;
}

.lichaam .block-bean .tekst {
    padding: 1em;
}

.block > img {
    width: 100%;
    height: auto;
}

.block img + .tekst {
    border-top: none;
}

.block .tekst > h2 {
    margin-top: 0;
}

/* Blue, Brown & Grey blocks */
.blauw,
.bruin,
.grijs {
    border-top: 2em solid transparent;
}

.blauw,
.bruin {
    color: #ffffff;
}

.blauw h2,
.bruin h2 {
    color: #ffffff;
}

.blauw {
    background: #0052a0;
    border-color: #80a9d0;
}

.blauw a {
    color: #80a9d0;
}

.bruin {
    background: #653d35;
    border-color: #b29e9a;
}

.bruin a {
    color: #b29e9a;
}

.grijs {
    background: #80a9d0;
    border-color: #0052a0;
    color: #ffffff;
}

.lichaam .grijs {
    font-size: 0.8889em;
}

.grijs img {
    vertical-align: bottom;
}

.lichaam .grijs h2 {
    font-size: 1em;
    color: #ffffff;
}

.grijs a {
    color: #edf2f8;
}

/* ============================================================
   Book navigation (sidebar)
   ============================================================ */

.block-book {
    font-size: 0.6111em;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 4em;
}

.block-book .menu,
.block-book .mod-menu {
    margin: 0;
    padding: 0;
}

.block-book .menu li,
.block-book .mod-menu .nav-item {
    list-style: none;
    margin: 0;
    padding: 0;
}

.block-book .menu a,
.block-book .mod-menu a {
    display: block;
    padding: 0.9em 1.4em 1em;
    color: #653d35;
}

.block-book .menu a:hover,
.block-book .mod-menu a:hover {
    color: #0052a0;
}

.block-book .menu a.active-trail,
.block-book .menu a.active,
.block-book .mod-menu .active > a,
.block-book .mod-menu .current > a {
    color: #ffffff;
    background: #0052a0;
}

/* Hide the submenu toggle button and always show submenus */
.block-book .mod-menu__toggle-sub {
    display: none;
}

.block-book .mod-menu__sub {
    display: block !important;
}

/* Submenu (2nd level) */
.block-book .menu .menu,
.block-book .mod-menu .mod-menu__sub {
    margin: 0;
    padding: 0;
    margin-left: 2em;
}

.block-book .menu .menu li,
.block-book .mod-menu .mod-menu__sub .nav-item {
    border: none;
}

.block-book .menu .menu a.active-trail,
.block-book .menu .menu a.active,
.block-book .mod-menu .mod-menu__sub .active > a,
.block-book .mod-menu .mod-menu__sub .current > a {
    color: #0052a0;
    background: transparent;
}

.block-book .menu li + li,
.block-book .mod-menu > .nav-item + .nav-item {
    border-top: 1px solid #b29e9a;
}

.block-book .menu li.active-trail,
.block-book .mod-menu > .nav-item.active {
    border-color: #0052a0;
}

/* ============================================================
   Tables
   ============================================================ */

.tablewrapper {
    padding: 2em;
    background: #fffbe6;
    border: 1px solid #b29e9a;
}

.item-page table,
.tablewrapper table {
    width: 100%;
    margin: 0 0 1em;
    font-size: 13px;
    font-family: "Frutiger W04", Frutiger, "Frutiger Linotype", Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Tahoma, Helvetica, Arial, sans-serif;
    border-collapse: collapse;
}

.item-page table:not(.table),
.tablewrapper table:not(.table) {
    text-transform: uppercase;
}

.item-page thead th,
.tablewrapper thead th {
    text-align: center;
}

.item-page tbody th,
.tablewrapper tbody th {
    text-align: left;
}

.item-page tbody th + th,
.tablewrapper tbody th + th {
    text-align: right;
}

.item-page th,
.item-page td,
.tablewrapper th,
.tablewrapper td {
    padding: 0.4em 0.8em;
}

.item-page table p,
.tablewrapper table p {
    margin: 0;
    padding: 0;
}

.item-page table tr:last-child th,
.tablewrapper table tr:last-child th {
    font-weight: bold;
}

.item-page table:not(.table) td,
.tablewrapper table:not(.table) td {
    background: #fffbe6;
    text-align: right;
    border: 1px dotted #b29e91;
}

.item-page table:not(.table) td:first-child,
.tablewrapper table:not(.table) td:first-child {
    background: #ded5c3;
    color: #653d35;
    text-align: left;
    border: none;
}

.item-page table:not(.table) tr:first-child td,
.tablewrapper table:not(.table) tr:first-child td,
.item-page table:not(.table) tr:last-child td,
.tablewrapper table:not(.table) tr:last-child td {
    background: #ded5c3;
    color: #653d35;
}

.item-page table:not(.table) tr:last-child strong,
.tablewrapper table:not(.table) tr:last-child strong {
    font-weight: normal;
}

.item-page table.table-bordered td,
.tablewrapper table.table-bordered td {
    background: transparent;
    border: 2px solid #fff;
    text-align: left;
    vertical-align: middle;
}

.item-page table.table-bordered td.rood,
.tablewrapper table.table-bordered td.rood {
    background: #c62d42;
    color: #fff;
}

.item-page table.table-bordered td.groen,
.tablewrapper table.table-bordered td.groen {
    background: #7fa650;
    color: #fff;
}

.item-page table.table-bordered td.rood a,
.tablewrapper table.table-bordered td.rood a,
.item-page table.table-bordered td.groen a,
.tablewrapper table.table-bordered td.groen a {
    color: #fff;
    text-decoration: underline;
}

.item-page table.begroting-uitleg,
.tablewrapper table.begroting-uitleg {
    border-collapse: collapse;
    border: 2px solid #cec5c3;
    margin-bottom: 1em;
}

.item-page table.begroting-uitleg td,
.tablewrapper table.begroting-uitleg td,
.item-page table.table-bordered.begroting-uitleg td,
.tablewrapper table.table-bordered.begroting-uitleg td {
    background: #fffbe6;
    border: 1px solid #cec5c3;
    color: #653d35;
    padding: 0.6em 0.9em;
    font-weight: bold;
    text-align: left;
    vertical-align: middle;
}

.item-page table th,
.tablewrapper table th {
    font-weight: normal;
    border-bottom: 0 solid #ccc;
    background: #ded5c3;
    color: #653d35;
}

/* ============================================================
   Aanvragen block
   ============================================================ */

.block-aanvragen,
.lichaam .block-bean-subsidie-aanvragen-alternatief {
    background: #fffbe6;
    border: 1px solid #cec5c3;
    padding: 2em;
    margin: 1em 0;
}

.block-aanvragen p {
    font-size: 0.8333em;
}

.block-aanvragen .form-submit,
a.knop,
button.knop {
    color: #ffffff;
    background: #0052a0;
    padding: 0.7em 1.4em;
    text-transform: uppercase;
    font-size: 0.77778em;
    letter-spacing: 0.1em;
    border: none;
    cursor: pointer;
    font-family: "Frutiger W04", Frutiger, "Frutiger Linotype", Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Tahoma, Helvetica, Arial, sans-serif;
    font-weight: 700;
    display: inline-block;
    text-decoration: none;
}

a.knop:hover,
button.knop:hover {
    color: #ffffff;
    background: #3486d3;
}

a.knop-groen {
    background: #00873e;
}

a.knop-groen:hover {
    background: #00a64d;
    color: #ffffff;
}

a.knop-rood {
    background: #c0392b;
}

a.knop-rood:hover {
    background: #e74c3c;
    color: #ffffff;
}

.block-aanvragen .form-submit:hover {
    background: #3486d3;
}

.block-aanvragen .diagram {
    margin: 2em 0 2em -11px;
}

.block-aanvragen .diagram object,
.block-aanvragen .diagram svg {
    width: 100% !important;
    height: auto !important;
}

.block-aanvragen .donker {
    background: #ded5c3;
    padding: 0.4em 1em;
}

.block-aanvragen .mobiel {
    display: none;
    margin-bottom: 2em;
}

.block-aanvragen .form-wrapper {
    margin: 2em 0 1em;
}

.block-aanvragen .container-inline .form-item {
    display: inline-block;
}

.block-aanvragen select {
    font-size: 0.7778em;
    padding: 0.69em;
    border: 1px solid #d7d7d7;
}

.block-aanvragen .form-submit {
    position: relative;
    top: -0.1em;
}

.block-aanvragen .melding {
    margin-top: 1em;
}

/* ============================================================
   Maror aanvragen overview tables
   ============================================================ */

#maroraanvragen h2 {
    margin-top: 1.5em;
}

#maroraanvragen h3 {
    margin-top: 1em;
    margin-bottom: 0.5em;
}

#maroraanvragen .table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
    font-size: 0.8889em;
}

#maroraanvragen .table th,
#maroraanvragen .table td {
    padding: 0.5em 0.7em;
    text-align: left;
    vertical-align: middle;
    border: 1px solid #d7d7d7;
}

#maroraanvragen .table thead th {
    background: #653d35;
    color: #ffffff;
    font-weight: 700;
}

#maroraanvragen .table-striped tbody tr:nth-child(odd) {
    background: #f9f5ec;
}

#maroraanvragen .table-striped tbody tr:nth-child(even) {
    background: #ffffff;
}

#maroraanvragen .table td.acties {
    white-space: nowrap;
}

#maroraanvragen .table td.acties .knop {
    font-size: 0.85em;
    padding: 0.4em 0.8em;
    margin: 0.15em 0;
}

/* Icon buttons */
a.knop-icoon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #0052a0;
    color: #ffffff;
    border: none;
    cursor: pointer;
    text-decoration: none;
    margin: 1px;
}

a.knop-icoon:hover {
    background: #3486d3;
    text-decoration: none;
}

a.knop-icoon svg {
    width: 16px;
    height: 16px;
    fill: #ffffff;
}

a.knop-icoon.knop-groen {
    background: #00873e;
}

a.knop-icoon.knop-groen:hover {
    background: #00a64d;
}

a.knop-icoon.knop-rood {
    background: #c0392b;
}

a.knop-icoon.knop-rood:hover {
    background: #e74c3c;
}

.btn.btn-primary {
    color: #ffffff;
    background: #0052a0;
    border-color: #0052a0;
    border-radius: 0;
    text-shadow: none;
    box-shadow: none;
    text-transform: uppercase;
    font-size: 0.77778em;
    letter-spacing: 0.1em;
    font-weight: 700;
    padding: 0.7em 1.4em;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
    color: #ffffff;
    background: #3486d3;
    border-color: #3486d3;
}

/* ============================================================
   Joomla system message overrides
   ============================================================ */

#system-message-container {
    margin-bottom: 1em;
}

.alert {
    padding: 1em;
    margin-bottom: 1em;
    border: 1px solid transparent;
}

.alert-success {
    background: #fffbe6;
    border-color: #cec5c3;
    color: #3e3e3e;
}

.alert-warning {
    background: #fffbe6;
    border-color: #cec5c3;
    color: #653d35;
}

.alert-danger,
.alert-error {
    background: #fffbe6;
    border-color: #b29e9a;
    color: #653d35;
}

.alert-info {
    background: #fffbe6;
    border-color: #80a9d0;
    color: #3e3e3e;
}

/* ============================================================
   Forms
   ============================================================ */

.form-control {
    display: block;
    width: 100%;
    padding: 0.69em;
    font-size: 0.8889em;
    border: 1px solid #d7d7d7;
    font-family: inherit;
    margin-bottom: 1em;
}

.form-control:focus {
    border-color: #0052a0;
    outline: none;
}

label {
    display: block;
    margin-bottom: 0.25em;
    font-weight: bold;
    font-size: 0.8889em;
}

fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

select {
    font-size: 0.7778em;
    padding: 0.69em;
    border: 1px solid #d7d7d7;
}

/* ============================================================
   Joomla user forms (registration, reset, remind, profile)
   ============================================================ */

.com-users-registration,
.com-users-reset,
.com-users-remind,
.com-users-profile {
    max-width: 520px;
}

.com-users-registration legend,
.com-users-reset legend,
.com-users-remind legend,
.com-users-profile legend {
    font-size: inherit;
    font-weight: normal;
    color: inherit;
    border: none;
    padding: 0;
    margin: 0 0 1em;
}

.com-users-registration .control-group,
.com-users-reset .control-group,
.com-users-remind .control-group,
.com-users-profile .control-group {
    margin-bottom: 1.2em;
}

.com-users-registration .control-group.field-spacer {
    margin-bottom: 0.8em;
    font-size: 0.8889em;
    color: #606060;
}

.com-users-registration .controls .form-control,
.com-users-reset .controls .form-control,
.com-users-remind .controls .form-control,
.com-users-profile .controls .form-control {
    margin-bottom: 0;
}

/* Password field with toggle button */
.input-group {
    display: flex;
}

.input-group .form-control {
    flex: 1;
    min-width: 0;
}

.input-group .input-password-toggle {
    background: #f5f5f5;
    border: 1px solid #d7d7d7;
    border-left: none;
    padding: 0 0.8em;
    cursor: pointer;
    color: #606060;
}

.input-group .input-password-toggle:hover {
    background: #e8e8e8;
    color: #333333;
}

/* Password toggle icon */
.input-password-toggle .icon-eye::before {
    content: "\1F441";
    font-style: normal;
}

.input-password-toggle .icon-eye-slash::before {
    content: "\1F441";
    font-style: normal;
    opacity: 0.4;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Password strength meter */
.com-users-registration .password-group meter,
.com-users-reset .password-group meter,
.com-users-profile .password-group meter {
    width: 100%;
    height: 6px;
    margin-top: 0.3em;
}

.hoofdkolom .small {
    font-size: 0.7778em;
}

.text-muted {
    color: #606060;
}

.com-users-registration .controls .text-muted,
.com-users-reset .controls .text-muted,
.com-users-profile .controls .text-muted {
    font-size: 0.7778em;
    color: #606060;
    margin-bottom: 0.4em;
}

/* Submit button spacing */
.com-users-registration__submit,
.com-users-reset__submit,
.com-users-remind__submit,
.com-users-login__submit {
    margin-top: 1.5em;
}

/* ============================================================
   Login form
   ============================================================ */

.com-users-login__form {
    max-width: 520px;
}

.com-users-login__form.well {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.com-users-login__form .control-group {
    margin-bottom: 1.2em;
}

.com-users-login__form .controls .form-control {
    margin-bottom: 0;
}

/* Remember me checkbox */
.com-users-login__remember {
    margin-bottom: 1em;
}

.com-users-login__remember .form-check {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.com-users-login__remember .form-check-input {
    margin: 0;
    width: 1em;
    height: 1em;
}

.com-users-login__remember .form-check-label {
    font-weight: normal;
    font-size: 0.8889em;
}

/* Passkey button */
.com-users-login__form .plg_system_webauthn_login_button {
    background: #f5f5f5;
    border: 1px solid #d7d7d7;
    color: #653d35;
    padding: 0.7em 1.4em;
    font-size: 0.77778em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.com-users-login__form .plg_system_webauthn_login_button:hover {
    background: #e8e8e8;
}

.com-users-login__form .plg_system_webauthn_login_button svg {
    width: 1.4em;
    height: 1.4em;
    fill: currentColor;
}

/* Validation feedback */
.form-control-feedback {
    display: block;
    font-size: 0.8889em;
    font-weight: normal;
    color: #ff0000;
    margin-top: 0.2em;
}

.form-control.invalid,
.form-control.form-control-danger {
    border-color: #ff0000;
}

/* Secondary button */
.btn.btn-secondary {
    background: #f5f5f5;
    border: 1px solid #d7d7d7;
    color: #653d35;
    border-radius: 0;
    text-shadow: none;
    box-shadow: none;
    padding: 0.7em 1.4em;
    font-size: 0.77778em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
    background: #e8e8e8;
    color: #653d35;
}

/* Utility */
.w-100 {
    width: 100%;
}

/* Login form links */
.com-users-login__options.list-group {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    margin-top: 1.5em;
}

/* ============================================================
   Breadcrumbs
   ============================================================ */

.mod-breadcrumbs {
    font-size: 0.7778em;
    margin-bottom: 1em;
    color: #b29e9a;
}

.mod-breadcrumbs a {
    color: #653d35;
    text-decoration: none;
}

.mod-breadcrumbs a:hover {
    color: #0052a0;
}

/* ============================================================
   Pagination
   ============================================================ */

.pagination {
    list-style: none;
    padding: 0;
    margin: 2em 0;
    display: flex;
    gap: 0.25em;
}

.pagination li {
    display: inline-block;
}

.pagination a,
.pagination span {
    display: block;
    padding: 0.5em 1em;
    border: 1px solid #d7d7d7;
    color: #0052a0;
    text-decoration: none;
    font-size: 0.8889em;
}

.pagination .active span {
    background: #0052a0;
    color: #ffffff;
    border-color: #0052a0;
}

.pagination a:hover {
    background: #f5f5f5;
}

/* ============================================================
   Offline page
   ============================================================ */

.offline-page .lichaam {
    padding: 3em 1em;
}

.offline-page .hoofdkolom {
    max-width: 500px;
    margin: 0 auto;
}

/* ============================================================
   Error page
   ============================================================ */

.error-page .lichaam {
    padding: 3em 1em;
}

/* ============================================================
   Responsive: Tablet (max-width: 768px)
   ============================================================ */

@media (max-width: 965px) {
    .navigatie ul {
        gap: 1em;
    }
}

@media (max-width: 840px) {
    .logo {
        margin: 2em -0.6em 6em;
    }
}

@media (max-width: 768px) {
    .navigatie ul {
        gap: 1em;
    }

    .zijkolom {
        width: 29%;
    }

    .dias {
        overflow: hidden;
    }

    .dia img {
        width: 140%;
        height: auto;
        margin: 0 -20%;
    }

    .block-aanvragen {
        padding-left: 2em;
    }

    .hoofdkolom + .drieluik {
        margin-top: -1em;
    }

    .tablewrapper {
        padding: 0;
        overflow-x: scroll;
    }
}

/* ============================================================
   Responsive: Mobile (max-width: 480px)
   ============================================================ */

@media (max-width: 480px) {
    h1 {
        font-size: 2em;
    }

    .kop {
        background: #0052a0;
        overflow: hidden;
        padding-top: 0;
    }

    .kop a {
        color: #80a9d0;
    }

    .kop a:hover,
    .kop a.active,
    .kop .active > a,
    .kop .current > a {
        color: #ffffff;
    }

    .logo {
        margin: 1em -0.6em;
    }

    /* Show hamburger, hide horizontal menu */
    .menu-toggle {
        display: block;
    }

    .navigatie {
        position: static;
        text-align: left;
        font-size: 1.2em;
        display: none;
    }

    .navigatie.is-open {
        display: block;
    }

    .navigatie ul {
        display: block;
        border-top: 1px solid #80a9d0;
        padding: 0.4em 0;
    }

    .navigatie li {
        padding: 0.4em 0;
    }

    .navigatie a {
        padding: 0;
        border-bottom: none;
        color: #80a9d0;
    }

    .navigatie a.active,
    .navigatie .current > a,
    .navigatie .active > a {
        color: #ffffff;
        border-color: transparent;
    }

    .block-bean-aanvragenlink {
        position: static;
        padding: 0.4em 0;
        border-top: 1px solid #80a9d0;
        margin-top: 0.4em;
    }

    .block-bean-aanvragenlink .mod-menu {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .block-bean-aanvragenlink .nav-item {
        padding: 0.4em 0;
    }

    .block-bean-aanvragenlink a {
        color: #80a9d0;
        text-decoration: none;
        padding: 0;
        border-bottom: none;
    }

    .hals {
        overflow: visible;
        display: block;
    }

    .hals .block-bean-carrousel {
        display: none;
    }

    .hals .block-bean-nieuws {
        float: none;
        width: auto;
        margin: 0 -1.2em;
        padding: 0 0.2em;
    }

    .lichaam {
        padding-bottom: 1em;
    }

    .zijkolom,
    .hoofdkolom {
        float: none;
        width: auto;
        overflow: visible;
    }

    .zijkolom {
        margin: 0 -1em;
    }

    .block-aanvragen,
    .lichaam .block-bean-subsidie-aanvragen-alternatief {
        margin: 1.5em -1em;
        padding: 1.5em 1em 2em;
        font-size: 1em;
    }

    .lichaam .block-bean-subsidie-aanvragen-alternatief {
        padding: 0;
    }

    .lichaam .block-bean-subsidie-aanvragen-alternatief > h2 {
        font-size: 0.8889em;
        padding: 1em 1em 0;
    }

    .lichaam .block-bean-subsidie-aanvragen-alternatief .tekst {
        padding-top: 0;
    }

    .block-aanvragen select {
        padding: 0.69em 0.1em;
    }

    .block-aanvragen .form-submit {
        padding: 0.7em;
    }

    .block-aanvragen .diagram {
        display: none;
    }

    .block-aanvragen .mobiel {
        display: block;
    }

    .drieluik {
        display: block;
        margin: 0 -1em;
    }

    .drieluik .block {
        float: none;
        width: auto;
        margin: 0 0 1.5em;
    }

    .drieluik .block + .block {
        margin-left: 0;
    }

    .staart .block {
        float: none;
        width: auto;
        margin: 0 0 3em;
    }

    .staart .block + .block {
        margin-left: 0;
    }
}

/* ============================================================
   Responsive: Forms (max-width: 768px)
   ============================================================ */

@media (max-width: 768px) {
    /* ---- Forms: mobile layout ---- */

    /* User forms (login, register, reset) */
    .com-users-registration,
    .com-users-reset,
    .com-users-remind,
    .com-users-profile,
    .com-users-login__form {
        max-width: 100%;
    }

    /* Forms: stack label above field */
    form.subsidie .control-group,
    form.autorisatie .control-group,
    form.meelezer .control-group {
        flex-direction: column;
    }

    .subsidie-edit form.subsidie .control-group .control-label,
    .organisatie-edit form.autorisatie .control-group .control-label,
    .meelezer-edit form.meelezer .control-group .control-label {
        width: 100%;
        min-width: 0;
        background: transparent;
        padding: 0;
    }

    .subsidie-edit form.subsidie .control-group .controls,
    .organisatie-edit form.autorisatie .control-group .controls,
    .meelezer-edit form.meelezer .control-group .controls {
        padding: 0.2em 0 0;
    }

    form.subsidie .control-group,
    form.autorisatie .control-group,
    form.meelezer .control-group {
        border-bottom: 1px solid #f0f2f5;
        padding: 0;
    }

    /* Sections: minimal padding on mobile */
    form.subsidie .subsidie-section,
    form.autorisatie .autorisatie-section {
        padding: 0.5em 0;
        border: none;
    }

    /* Clean look: no borders between fields */
    .subsidie-edit form.subsidie .control-group,
    .organisatie-edit form.autorisatie .control-group,
    .meelezer-edit form.autorisatie .control-group {
        border-bottom: none;
        padding: 0 0 1em;
    }

    form.subsidie h4,
    form.autorisatie h4,
    form.meelezer h4 {
        font-size: 0.8em;
        padding: 0.5em 0.6em;
    }

    form.subsidie h5,
    form.autorisatie h5 {
        font-size: 0.78em;
        padding: 0.4em 0.6em;
    }

    /* Radio/checkbox cards: full width */
    form.subsidie .radio .form-check,
    form.subsidie .checkboxes .form-check,
    form.autorisatie .radio .form-check,
    form.autorisatie .checkboxes .form-check {
        display: flex;
        margin-right: 0;
    }

    /* Selects: full width on mobile */
    form.subsidie .form-select,
    form.autorisatie .form-select {
        max-width: 100%;
    }

    /* Calendar: full width */
    form.subsidie .field-calendar .input-group,
    form.autorisatie .field-calendar .input-group {
        max-width: 100%;
    }

    /* Toelichting: compact on mobile */
    form.subsidie .toelichting,
    form.autorisatie .toelichting,
    form.meelezer .toelichting {
        font-size: 0.78em;
        padding: 0.5em 0.7em;
    }

    details.info-tooltip summary {
        font-size: 0.78em;
    }

    details.info-tooltip p {
        font-size: 0.85em;
    }

    /* Subform tables: card layout on mobile */
    form.subsidie .subform-repeatable-wrapper .table thead th,
    form.autorisatie .subform-repeatable-wrapper .table thead th {
        display: none;
    }

    form.subsidie .subform-repeatable-wrapper .table thead tr,
    form.autorisatie .subform-repeatable-wrapper .table thead tr {
        border: none;
        padding: 0;
        margin-bottom: 0.5em;
    }

    form.subsidie .subform-repeatable-wrapper .table thead td,
    form.autorisatie .subform-repeatable-wrapper .table thead td {
        display: block;
        border: none;
        padding: 0;
        width: 100% !important;
    }

    form.subsidie .subform-repeatable-wrapper .table thead .btn-group,
    form.autorisatie .subform-repeatable-wrapper .table thead .btn-group {
        display: flex;
        width: 100%;
    }

    form.subsidie .subform-repeatable-wrapper .table thead .group-add,
    form.autorisatie .subform-repeatable-wrapper .table thead .group-add {
        width: 100%;
        height: auto;
        padding: 0.6em;
        font-size: 0.9em;
        border-radius: 4px;
    }

    form.subsidie .subform-repeatable-wrapper .table,
    form.autorisatie .subform-repeatable-wrapper .table {
        border: none;
    }

    form.subsidie .subform-repeatable-wrapper .table tr,
    form.autorisatie .subform-repeatable-wrapper .table tr {
        display: block;
        border: 1px solid #e5e9ef;
        border-radius: 4px;
        padding: 0.5em;
        margin-bottom: 0.5em;
    }

    form.subsidie .subform-repeatable-wrapper .table td,
    form.autorisatie .subform-repeatable-wrapper .table td {
        display: block;
        padding: 0.3em 0;
        border: none;
    }

    form.subsidie .subform-repeatable-wrapper .table td[data-column]::before,
    form.autorisatie .subform-repeatable-wrapper .table td[data-column]::before {
        content: attr(data-column);
        display: block;
        font-weight: 600;
        font-size: 0.85em;
        color: #653d35;
        margin-bottom: 0.2em;
    }

    form.subsidie .subform-repeatable-wrapper .btn-group,
    form.autorisatie .subform-repeatable-wrapper .btn-group {
        justify-content: flex-start;
        padding-top: 0.4em;
        border-top: 1px solid #f0f2f5;
        margin-top: 0.3em;
    }

    /* Begroting column info: stack */
    form.subsidie .begroting-kolominfo {
        flex-direction: column;
    }

    /* Description hints: smaller */
    form.subsidie .form-text,
    form.autorisatie .form-text {
        font-size: 0.75em;
    }

    /* Overview tables: card layout on mobile */
    #maroraanvragen .table {
        border: none;
    }

    #maroraanvragen .table thead {
        display: none;
    }

    #maroraanvragen .table tbody tr {
        display: block;
        background: #ffffff;
        border: 1px solid #e5e9ef;
        border-radius: 4px;
        padding: 0.7em;
        margin-bottom: 0.6em;
    }

    #maroraanvragen .table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.2em 0;
        border: none;
        font-size: 0.8889em;
    }

    #maroraanvragen .table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #653d35;
        margin-right: 0.5em;
        flex-shrink: 0;
    }

    #maroraanvragen .table tbody td.acties {
        justify-content: flex-start;
        padding-top: 0.5em;
        border-top: 1px solid #f0f2f5;
        margin-top: 0.3em;
    }

    #maroraanvragen .table tbody td.acties::before {
        display: none;
    }

    /* Sticky toolbar: stack on mobile */
    .form-toolbar {
        flex-direction: column;
        gap: 0.5em;
        padding: 0.5em;
    }

    .form-toolbar-autosave {
        order: 2;
        font-size: 0.7em;
    }

    .form-toolbar-actions {
        order: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4em;
        width: 100%;
    }

    .form-toolbar .btn,
    .form-toolbar a.btn {
        flex: 1 1 0;
        text-align: center;
        min-width: 0;
        padding: 0.6em 0.4em;
        font-size: 0.65em;
    }

    .form-toolbar .btn.btn-primary {
        flex: 1 1 100%;
    }
}

/* ============================================================
   Organisatieform (autorisatie)
   ============================================================ */

/* Autorisatie form: use same styling as subsidie form */
form.autorisatie .autorisatie-section {
    padding: 1em 1em 0.5em;
    background: #ffffff;
    border: 1px solid #e5e9ef;
    border-top: none;
    margin-bottom: 0;
}

form.autorisatie .autorisatie-section + h4 {
    margin-top: 2em;
}

form.autorisatie .control-group {
    display: flex;
    align-items: stretch;
    margin-bottom: 0;
    border-bottom: 1px solid #f0f2f5;
}

form.autorisatie .control-group:last-child {
    border-bottom: none;
}

form.autorisatie .control-group .control-label {
    width: 320px;
    min-width: 320px;
    background: #fdf8ee;
    padding: 0.7em 1em;
    text-align: left;
    display: flex;
    align-items: flex-start;
}

form.autorisatie .control-group .control-label label {
    margin-bottom: 0;
    font-size: 0.8333em;
    font-weight: 600;
    line-height: 1.5;
    color: #344054;
}

form.autorisatie .control-group .controls {
    flex: 1;
    padding: 0.6em 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

form.autorisatie .control-group .controls input,
form.autorisatie .control-group .controls textarea,
form.autorisatie .control-group .controls select {
    border-radius: 4px;
    margin-bottom: 0;
    border: 1px solid #d0d5dd;
    transition: border-color 0.2s, box-shadow 0.2s;
}

form.autorisatie .control-group .controls input:focus,
form.autorisatie .control-group .controls textarea:focus,
form.autorisatie .control-group .controls select:focus {
    border-color: #0052a0;
    box-shadow: 0 0 0 3px rgba(0, 82, 160, 0.12);
    outline: none;
}

form.autorisatie .control-group .controls .form-control {
    margin-bottom: 0;
    padding: 0.55em 0.75em;
    font-size: 0.8889em;
}

form.autorisatie .charcount {
    display: block;
    font-size: 0.72em;
    color: #98a2b3;
    margin-top: 0.3em;
}

/* Radio/checkbox cards */
form.autorisatie .radio .form-check,
form.autorisatie .checkboxes .form-check {
    display: inline-flex;
    align-items: flex-start;
    margin-right: 0.5em;
    margin-bottom: 0.4em;
    padding: 0.5em 0.9em;
    background: #f9fafb;
    border: 1px solid #e5e9ef;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

form.autorisatie .radio .form-check:hover,
form.autorisatie .checkboxes .form-check:hover {
    background: #edf2f8;
    border-color: #0052a0;
}

form.autorisatie .radio .form-check:has(input:checked),
form.autorisatie .checkboxes .form-check:has(input:checked) {
    background: #edf2f8;
    border-color: #0052a0;
    box-shadow: 0 0 0 1px #0052a0;
}

form.autorisatie .form-check-input {
    margin-top: 0.25em;
    margin-right: 0.5em;
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    accent-color: #0052a0;
    cursor: pointer;
}

form.autorisatie .form-check-label {
    font-weight: normal;
    font-size: 0.8333em;
    line-height: 1.5;
    color: #344054;
    cursor: pointer;
    margin-bottom: 0;
}

/* Subform bestuur table */
form.autorisatie .subform-repeatable-wrapper {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e9ef;
}

form.autorisatie .subform-repeatable-wrapper .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8333em;
    margin-bottom: 0;
}

form.autorisatie .subform-repeatable-wrapper .table th,
form.autorisatie .subform-repeatable-wrapper .table thead td {
    background: #f0f4f8;
    padding: 0.6em 0.7em;
    border: none !important;
    border-bottom: 2px solid #d0d5dd !important;
    font-weight: 700;
    text-align: left;
    color: #344054;
}

form.autorisatie .subform-repeatable-wrapper .table td {
    padding: 0.5em 0.7em;
    border: none;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: top;
}

form.autorisatie .subform-repeatable-wrapper .control-group {
    display: block;
    margin-bottom: 0;
    border-bottom: none;
}

form.autorisatie .subform-repeatable-wrapper .control-group .control-label {
    width: auto;
    min-width: 0;
    background: none;
    padding: 0;
}

form.autorisatie .subform-repeatable-wrapper .control-group .controls {
    padding: 0;
}

/* Form text / descriptions */
form.autorisatie .form-text {
    font-size: 0.8em;
    margin-top: 0.3em;
}

form.autorisatie .form-select {
    font-size: 0.8333em;
    padding: 0.55em 0.75em;
    border: 1px solid #d0d5dd;
    border-radius: 4px;
    max-width: 250px;
}

/* Subform action buttons */
form.autorisatie .btn-group {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}

form.autorisatie .btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #e5e9ef;
    cursor: pointer;
    color: #475467;
    background: #f7f9fc;
    border-radius: 4px;
    transition: all 0.15s;
    font-size: 1em;
}

form.autorisatie .btn-sm:hover {
    border-color: #0052a0;
    color: #0052a0;
    background: #edf2f8;
}

form.autorisatie .btn-sm.btn-success {
    color: #12b76a;
}

form.autorisatie .btn-sm.btn-success:hover {
    color: #039855;
    background: #ecfdf3;
    border-color: #12b76a;
}

form.autorisatie .btn-sm.btn-danger {
    color: #f04438;
}

form.autorisatie .btn-sm.btn-danger:hover {
    color: #d92d20;
    background: #fef3f2;
    border-color: #f04438;
}

/** Showon */
.hidden, form.autorisatie .hidden,
form.autorisatie .control-group.hidden,
form.subsidie .hidden,
form.subsidie .control-group.hidden {
    display: none !important;
}
.invalid {
    border-color: #f04438 !important;
}

.field-error {
    color: #f04438;
    font-size: 0.8em;
    font-weight: 600;
    margin-top: 0.3em;
}

.field-error:empty {
    display: none;
}

/* ============================================================
   Subsidie form (and shared form styles)
   ============================================================ */

/* Section headers */
form.subsidie h4,
form.autorisatie h4 {
    color: #ffffff;
    text-transform: uppercase;
    background: #0052a0;
    border-top: 0.4em solid #80a9d0;
    padding: 0.6em 1em;
    font-size: 0.9em;
    font-weight: 700;
    font-family: "Frutiger W04", Frutiger, "Frutiger Linotype", Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Tahoma, Helvetica, Arial, sans-serif;
    letter-spacing: 0.08em;
    margin: 2em 0 0;
}

form.subsidie h5,
form.autorisatie h5 {
    color: #ffffff;
    background: #653d35;
    border-left: none;
    padding: 0.5em 1em;
    font-size: 0.8333em;
    font-weight: 700;
    font-family: "Frutiger W04", Frutiger, "Frutiger Linotype", Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Tahoma, Helvetica, Arial, sans-serif;
    margin: 0;
}

/* Sections */
form.subsidie .subsidie-section {
    padding: 1em 1em 0.5em;
    background: #ffffff;
    border: 1px solid #e5e9ef;
    border-top: none;
    margin-bottom: 0;
}

form.subsidie .subsidie-section + h4 {
    margin-top: 2em;
}

/* Save buttons bar */
/* Control groups - label/value layout */
form.subsidie .control-group {
    display: flex;
    align-items: stretch;
    margin-bottom: 0;
    border-bottom: 1px solid #f0f2f5;
}

form.subsidie .control-group:last-child {
    border-bottom: none;
}

form.subsidie .control-group .control-label {
    width: 320px;
    min-width: 320px;
    background: #fdf8ee;
    padding: 0.7em 1em;
    text-align: left;
    display: flex;
    align-items: flex-start;
}

form.subsidie .control-group .control-label label {
    margin-bottom: 0;
    font-size: 0.8333em;
    font-weight: 600;
    line-height: 1.5;
    color: #344054;
}

form.subsidie .control-group .controls {
    flex: 1;
    padding: 0.6em 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

form.subsidie .control-group .controls input,
form.subsidie .control-group .controls textarea,
form.subsidie .control-group .controls select {
    border-radius: 4px;
    margin-bottom: 0;
    border: 1px solid #d0d5dd;
    transition: border-color 0.2s, box-shadow 0.2s;
}

form.subsidie .control-group .controls input:focus,
form.subsidie .control-group .controls textarea:focus,
form.subsidie .control-group .controls select:focus {
    border-color: #0052a0;
    box-shadow: 0 0 0 3px rgba(0, 82, 160, 0.12);
    outline: none;
}

form.subsidie .control-group .controls .form-control {
    margin-bottom: 0;
    padding: 0.55em 0.75em;
    font-size: 0.8889em;
}

/* Charcount */
form.subsidie .charcount {
    display: block;
    font-size: 0.72em;
    color: #98a2b3;
    margin-top: 0.3em;
}

/* Radio buttons and checkboxes - inline */
form.subsidie .radio .form-check,
form.subsidie .checkboxes .form-check {
    display: inline-flex;
    align-items: flex-start;
    margin-right: 0.5em;
    margin-bottom: 0.4em;
    padding: 0.5em 0.9em;
    background: #f9fafb;
    border: 1px solid #e5e9ef;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

form.subsidie .radio .form-check:hover,
form.subsidie .checkboxes .form-check:hover {
    background: #edf2f8;
    border-color: #0052a0;
}

form.subsidie .radio .form-check:has(input:checked),
form.subsidie .checkboxes .form-check:has(input:checked) {
    background: #edf2f8;
    border-color: #0052a0;
    box-shadow: 0 0 0 1px #0052a0;
}

form.subsidie .form-check-input {
    margin-top: 0.25em;
    margin-right: 0.5em;
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    accent-color: #0052a0;
    cursor: pointer;
}

form.subsidie .form-check-label {
    font-weight: normal;
    font-size: 0.8333em;
    line-height: 1.5;
    color: #344054;
    cursor: pointer;
    margin-bottom: 0;
}

/* Long radio labels (declarations) - stack vertically */
form.subsidie #jform_finsituatie .form-check,
form.subsidie #jform_begrverkl .form-check,
form.subsidie .checkboxes .form-check {
    display: flex;
    margin-right: 0;
}

/* Calendar field */
form.subsidie .field-calendar .input-group {
    display: flex;
    max-width: 220px;
}

form.subsidie .field-calendar .input-group .form-control {
    flex: 1;
    border-radius: 4px 0 0 4px;
}

form.subsidie .field-calendar .input-group .btn {
    padding: 0 0.7em;
    background: #0052a0;
    border: 1px solid #0052a0;
    color: #ffffff;
    border-radius: 0 4px 4px 0;
    transition: background 0.2s;
}

form.subsidie .field-calendar .input-group .btn:hover {
    background: #3486d3;
}

/* Calendar icon */
form.subsidie .icon-calendar::before {
    content: "\1F4C5";
    font-style: normal;
}

/* Calendar popup */
.js-calendar {
    border-radius: 8px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #e5e9ef;
}

.calendar-container {
    background: #ffffff;
    border-radius: 8px;
    font-family: inherit;
    padding: 0.5em !important;
}

.calendar-container table {
    background: #ffffff;
    border-radius: 8px;
    max-width: 300px !important;
}

.calendar-container table th,
.calendar-container table td {
    border: none !important;
}

/* Month/year navigation */
.calendar-container .calendar-head-row td {
    color: #344054;
    font-size: 1em !important;
    padding: 6px 0 !important;
}

.calendar-container .calendar-head-row .nav {
    width: 36px;
}

.calendar-container .calendar-head-row .nav a,
.calendar-container .calendar-head-row .js-btn {
    color: #0052a0;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em !important;
    line-height: 1 !important;
    display: inline-block;
    width: 28px;
    height: 28px;
    text-align: center;
    border-radius: 4px;
    transition: background 0.15s;
}

.calendar-container .calendar-head-row .nav a:hover,
.calendar-container .calendar-head-row .js-btn:hover {
    background: #edf2f8;
}

.calendar-container .title span {
    font-weight: 700;
    color: #344054;
}

/* Day names */
.calendar-container .day-name {
    color: #667085;
    font-size: 0.75em !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 4px !important;
}

/* Days */
.calendar-container table tbody td.day {
    color: #344054;
    border-radius: 6px;
    font-size: 0.85em !important;
    padding: 7px 0 !important;
    transition: background 0.1s;
}

.calendar-container table tbody td.day:hover {
    color: #ffffff;
    background: #3486d3;
}

.calendar-container table tbody td.day.selected {
    color: #ffffff;
    background: #0052a0;
    font-weight: 700;
}

.calendar-container table tbody td.today {
    color: #0052a0;
    font-weight: 700;
}

.calendar-container table tbody td.today:after {
    background-color: #0052a0;
    bottom: 4px;
    left: 30%;
    right: 30%;
    height: 2px;
    border-radius: 1px;
}

.calendar-container table tbody td.today.selected:after {
    background-color: #ffffff;
}

.calendar-container table tbody td.day.disabled-date {
    color: #d0d5dd !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.calendar-container table tbody td.day.disabled-date:hover {
    background: transparent !important;
}

.calendar-container table tbody td.emptycell {
    visibility: hidden;
}

/* Bottom buttons */
.calendar-container .buttons-wrapper {
    display: flex;
    gap: 0.4em;
    padding: 0.5em 0 0.2em !important;
    border-top: 1px solid #f0f2f5;
    margin-top: 0.3em;
}

.calendar-container .buttons-wrapper .btn {
    flex: 1;
    color: #344054;
    background: #f7f9fc;
    border: 1px solid #e5e9ef;
    border-radius: 4px;
    font-size: 0.78em;
    padding: 0.45em 0.8em;
    box-shadow: none;
    cursor: pointer;
    text-align: center;
    font-weight: 600;
    transition: all 0.15s;
    line-height: 1.4 !important;
    min-width: 0 !important;
}

.calendar-container .buttons-wrapper .btn:hover {
    background: #edf2f8;
    border-color: #0052a0;
    color: #0052a0;
}

/* Select dropdowns */
form.subsidie .form-select {
    font-size: 0.8333em;
    padding: 0.55em 0.75em;
    border: 1px solid #d0d5dd;
    border-radius: 4px;
    max-width: 250px;
    transition: border-color 0.2s;
}

form.subsidie .form-select:focus {
    border-color: #0052a0;
    box-shadow: 0 0 0 3px rgba(0, 82, 160, 0.12);
    outline: none;
}

/* Subform tables (begroting, derden) */
form.subsidie .subform-repeatable-wrapper {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e9ef;
}

form.subsidie .subform-repeatable-wrapper .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8333em;
    margin-bottom: 0;
}

form.subsidie .subform-repeatable-wrapper .table th,
form.subsidie .subform-repeatable-wrapper .table thead td {
    background: #f0f4f8;
    padding: 0.6em 0.7em;
    border: none !important;
    border-bottom: 2px solid #d0d5dd !important;
    font-weight: 700;
    font-size: inherit;
    text-align: left;
    color: #344054;
}

form.subsidie .subform-repeatable-wrapper .table td {
    padding: 0.5em 0.7em;
    border: none;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: top;
}

form.subsidie .subform-repeatable-wrapper .table tr:last-child td {
    border-bottom: none;
}

form.subsidie .subform-repeatable-wrapper .control-group {
    display: block;
    margin-bottom: 0;
    border-bottom: none;
}

form.subsidie .subform-repeatable-wrapper .control-group .control-label {
    width: auto;
    min-width: 0;
    background: none;
    padding: 0;
}

form.subsidie .subform-repeatable-wrapper .control-group .controls {
    padding: 0;
}

/* Begroting subform: hide label row, full width repeatable */
form.subsidie .subform-begroting > .control-group {
    display: block;
}

/* Begroting column info tooltips */
form.subsidie .begroting-kolominfo {
    padding: 0.5em 0;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

form.subsidie .subform-begroting > .control-group > .control-label {
    display: none;
}

form.subsidie .subform-begroting > .control-group > .controls {
    padding: 0;
}

/* Hide original spec + offerte columns (moved to soort column by JS) */
form.subsidie .subform-begroting thead td .btn-group {
    display: none;
}

form.subsidie .subform-begroting thead th:nth-child(4),
form.subsidie .subform-begroting thead th:nth-child(5),
form.subsidie .subform-begroting .subform-repeatable-group td:nth-child(4),
form.subsidie .subform-begroting .subform-repeatable-group td:nth-child(5),
form.subsidie .subform-begroting template td:nth-child(4),
form.subsidie .subform-begroting template td:nth-child(5) {
    display: none !important;
}

/* Spec/offerte shown inline below the radio */
/* Begroting: radio Specificatie/Offerte naast elkaar */
form.subsidie .subform-begroting .radio .form-check {
    display: inline-flex;
    margin-right: 0.5em;
    margin-bottom: 0;
    padding: 0.3em 0.6em;
    white-space: nowrap;
}

form.subsidie .subform-begroting .spec-offerte-inline {
    margin-top: 0.5em;
}

form.subsidie .subform-begroting .spec-offerte-inline .control-group {
    display: block;
    border-bottom: none;
}

form.subsidie .subform-begroting .spec-offerte-inline .control-group .control-label {
    display: none;
}

form.subsidie .subform-begroting .spec-offerte-inline .control-group .controls {
    padding: 0;
}


/* Subform buttons (plus/minus/move) */
/* Subform row action buttons */
form.subsidie .btn-group {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}

form.subsidie .btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #e5e9ef;
    cursor: pointer;
    color: #475467;
    background: #f7f9fc;
    line-height: 1;
    border-radius: 4px;
    transition: all 0.15s;
    font-size: 1em;
}

form.subsidie .btn-sm:hover {
    border-color: #0052a0;
    color: #0052a0;
    background: #edf2f8;
}

form.subsidie .btn-sm.btn-success {
    color: #12b76a;
    background: #f7f9fc;
    border-color: #e5e9ef;
}

form.subsidie .btn-sm.btn-success:hover {
    color: #039855;
    background: #ecfdf3;
    border-color: #12b76a;
}

form.subsidie .btn-sm.btn-danger {
    color: #f04438;
    background: #f7f9fc;
    border-color: #e5e9ef;
}

form.subsidie .btn-sm.btn-danger:hover {
    color: #d92d20;
    background: #fef3f2;
    border-color: #f04438;
}

form.subsidie .btn-sm.btn-primary {
    color: #0052a0;
    background: #f7f9fc;
    border-color: #e5e9ef;
}

form.subsidie .btn-sm.btn-primary:hover {
    background: #edf2f8;
    border-color: #0052a0;
}

/* Header row add button */
form.subsidie .subform-repeatable-wrapper thead .btn-group {
    justify-content: center;
}

form.subsidie .subform-repeatable-wrapper thead .btn-sm {
    width: 28px;
    height: 28px;
}

/* Subform icons */
.icon-plus::before {
    content: "+";
    font-weight: bold;
    font-style: normal;
    font-size: 1.1em;
}

.icon-minus::before {
    content: "\2212";
    font-style: normal;
    font-size: 1.1em;
}

.icon-arrows-alt::before {
    content: "\2195";
    font-style: normal;
    font-size: 0.9em;
}

/* Error spans - hidden when empty */
form.subsidie #ierror,
form.subsidie #terror {
    display: none;
    color: #f04438;
    font-weight: 600;
    font-size: 0.8333em;
    margin: 0.6em 0;
    padding: 0.6em 0.8em;
    background: #fef3f2;
    border: 1px solid #fecdca;
    border-radius: 4px;
}

form.subsidie #ierror:not(:empty),
form.subsidie #terror:not(:empty) {
    display: block;
}

/* Read-only totals */
form.subsidie input[readonly] {
    background: #f9fafb;
    font-weight: 700;
    border-color: #e5e9ef;
    color: #101828;
}

/* Form description text */
form.subsidie .form-text {
    font-size: 0.8em;
    margin-top: 0.3em;
}

/* Toelichting info blocks */
form.subsidie .toelichting,
form.autorisatie .toelichting {
    background: #edf2f8;
    border-left: 3px solid #80a9d0;
    padding: 0.7em 1em;
    margin: 0.6em 0;
    font-size: 0.8333em;
    color: #344054;
    line-height: 1.6;
}

form.subsidie .toelichting p,
form.autorisatie .toelichting p {
    margin: 0 0 0.5em;
}

form.subsidie .toelichting p:last-child,
form.autorisatie .toelichting p:last-child {
    margin-bottom: 0;
}

/* Info tooltips (details/summary) */
details.info-tooltip {
    margin: 0.3em 0;
    font-size: 0.8333em;
}

details.info-tooltip summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    cursor: pointer;
    color: #0052a0;
    font-weight: 600;
    padding: 0.3em 0.6em;
    border-radius: 4px;
    transition: background 0.15s;
    list-style: none;
}

details.info-tooltip summary::-webkit-details-marker {
    display: none;
}

details.info-tooltip summary::before {
    content: "i";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    background: #0052a0;
    color: #ffffff;
    font-size: 0.85em;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
    flex-shrink: 0;
}

details.info-tooltip summary:hover {
    background: #edf2f8;
}

details.info-tooltip[open] summary {
    margin-bottom: 0.3em;
}

details.info-tooltip p {
    margin: 0 0 0.5em;
    padding: 0.6em 0.8em;
    background: #edf2f8;
    border-left: 3px solid #80a9d0;
    color: #344054;
    line-height: 1.6;
}

details.info-tooltip p:last-child {
    margin-bottom: 0;
}

/* Info tooltip inside toelichting block */
.toelichting details.info-tooltip {
    margin: 0.5em 0 0;
}

.toelichting details.info-tooltip p {
    background: #dbe8f4;
    border-left-color: #5a8fbf;
}

/* Missing required fields highlight */
form.subsidie .control-group.missing-field,
form.autorisatie .control-group.missing-field {
    background: #fef3f2;
    border-bottom-color: #fecdca;
}

form.subsidie .control-group.missing-field .control-label,
form.autorisatie .control-group.missing-field .control-label {
    background: #fef3f2;
}

.missing-fields-banner {
    background: #fffbeb;
    border: 1px solid #fec84b;
    border-radius: 4px;
    padding: 0.8em 1em;
    margin: 1.5em 0 1em;
    font-size: 0.8333em;
    color: #344054;
}

.missing-fields-banner ul {
    margin: 0.4em 0 0;
    padding-left: 0;
    list-style: none;
}

.missing-fields-banner li {
    padding: 0.15em 0;
}

.missing-fields-banner a {
    color: #0052a0;
    text-decoration: underline;
}

.missing-fields-banner a:hover {
    color: #3486d3;
}

/* Form view — no sidebar, full width content */

/* Auto-save indicator */
.form-toolbar-autosave.is-error {
    color: #f04438;
}

/* Introductie button spacing */
.subsidie-edit > p {
    margin-bottom: 0;
}

/* Paragraph text in sections */
form.subsidie .subsidie-section > p {
    font-size: 0.8333em;
    color: #475467;
    line-height: 1.6;
}

form.subsidie .subsidie-section > p em {
    color: #667085;
}

/* Sticky form toolbar */
.form-toolbar {
    position: sticky;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 0.7em 1em;
    margin: 2em 0 0;
    background: #ffffff;
    border-top: 2px solid #e5e9ef;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}

.form-toolbar-autosave {
    font-size: 0.75em;
    white-space: nowrap;
}

.form-toolbar-autosave.is-saving {
    color: #0052a0;
}

.form-toolbar-autosave.is-saved {
    color: #039855;
}

.form-toolbar-actions {
    display: flex;
    gap: 0.5em;
    flex-shrink: 0;
}

.form-toolbar .btn,
.form-toolbar a.btn {
    font-size: 0.72em;
    padding: 0.6em 1.2em;
    border: 1px solid #d0d5dd;
    background: #ffffff;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #344054;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.form-toolbar .btn:hover {
    background: #f0f4f8;
    border-color: #0052a0;
    color: #0052a0;
}

.form-toolbar .btn.btn-primary {
    color: #ffffff;
    background: #0052a0;
    border-color: #0052a0;
    padding: 0.6em 2em;
}

.form-toolbar .btn.btn-primary:hover {
    background: #3486d3;
    border-color: #3486d3;
    color: #ffffff;
}

.form-toolbar .btn.btn-primary.is-disabled {
    background: #98a2b3;
    border-color: #98a2b3;
    cursor: pointer;
    opacity: 0.7;
}

.form-toolbar .btn.btn-primary.is-disabled:hover {
    background: #8090a3;
    border-color: #8090a3;
}

.tooltip-popup {
    display: none;
    background: #3e3e3e;
    color: #ffffff;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 3px;
    max-width: 300px;
    z-index: 1000;
    pointer-events: none;
}

/* Hide frontend editing links */
.edit-icon,
.icons {
    display: none;
}
.visually-hidden {
    display: none;
}