/* TwistyMoto: themakiezer stap 17 in het childthema. */
/* Vaste plaats in het bestaande navigatiemenu. */
      #twm-thema-kiezer {
        position: relative;
        font-family: inherit;
        font-size: 15px;
        line-height: 1.45;
      }
      /* De menuoptie is direct aanwezig in header.php. */
      .tm-nav-list > .tm-nav-theme {
        list-style: none;
        position: relative;
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        z-index: 20;
      }
      #twm-thema-kiezer *,
      #twm-thema-kiezer *::before,
      #twm-thema-kiezer *::after { box-sizing: border-box; }
      #twm-thema-kiezer button { font: inherit; cursor: pointer; }
      #twm-thema-kiezer .twm-thema-open {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 40px;
        padding: 7px 11px;
        border: 1px solid var(--tm-btn-secondary-border, #777777);
        border-radius: 999px;
        background: var(--tm-btn-secondary-bg, #4A4A4A);
        color: var(--tm-btn-secondary-text, #F5F5F5);
        font-weight: 700;
        box-shadow: 0 2px 8px rgba(0,0,0,0.14);
      }
      #twm-thema-kiezer .twm-thema-icoon { font-size: 19px; line-height: 1; }
      /* Desktop: compact tandwiel; de volledige naam blijft beschikbaar voor schermlezers. */
      #twm-thema-kiezer .twm-thema-label { display: none; }
      #twm-thema-kiezer .twm-thema-open {
        min-width: 40px;
        justify-content: center;
        padding: 7px 9px;
      }
      #twm-thema-kiezer .twm-thema-open:hover {
        filter: brightness(0.95);
      }
      #twm-thema-kiezer button:focus-visible,
      #twm-thema-kiezer input:focus-visible {
        outline: 3px solid var(--tm-accent, #1FAEFF) !important;
        outline-offset: 3px;
      }
      #twm-thema-kiezer .twm-thema-paneel {
        position: absolute;
        right: 0;
        top: calc(100% + 10px);
        width: min(350px, calc(100vw - 24px));
        max-height: min(75vh, 660px);
        overflow-y: auto;
        padding: 18px;
        border: 1px solid var(--tm-border, #777777);
        border-radius: 14px;
        background: var(--tm-surface-2, #242A32);
        color: var(--tm-text, #E0E0E0);
        box-shadow: 0 16px 50px rgba(0,0,0,0.35);
      }
      #twm-thema-kiezer .twm-thema-paneel[hidden] { display: none !important; }
      #twm-thema-kiezer .twm-thema-kop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
      }
      #twm-thema-kiezer h2 {
        color: var(--tm-text-bright, #FFFFFF);
        font: inherit;
        font-weight: 700;
        font-size: 1.08rem;
        line-height: 1.3;
        margin: 0;
      }
      #twm-thema-kiezer .twm-thema-sluiten {
        display: grid;
        place-items: center;
        padding: 0;
        width: 36px;
        height: 36px;
        background: transparent;
        color: var(--tm-text, #E0E0E0);
        border: 1px solid var(--tm-border, #777777);
        border-radius: 8px;
        font-size: 24px;
      }
      #twm-thema-kiezer fieldset {
        display: grid;
        gap: 7px;
        min-width: 0;
        margin: 0 0 15px;
        padding: 0;
        border: 0;
      }
      #twm-thema-kiezer legend {
        display: block;
        width: 100%;
        margin-bottom: 7px;
        padding: 0;
        color: var(--tm-text-bright, #FFFFFF);
        font-size: 0.92rem;
        font-weight: 700;
      }
      #twm-thema-kiezer label {
        display: flex;
        align-items: center;
        gap: 9px;
        min-height: 40px;
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--tm-border, #777777);
        border-radius: 9px;
        background: var(--tm-surface-3, #303840);
        color: var(--tm-text, #E0E0E0);
        cursor: pointer;
        font-size: 0.94rem;
        font-weight: 500;
      }
      #twm-thema-kiezer label:has(input:checked) {
        border-color: var(--tm-accent, #1FAEFF);
        box-shadow: inset 0 0 0 1px var(--tm-accent, #1FAEFF);
      }
      #twm-thema-kiezer input[type="radio"] {
        appearance: auto;
        width: 16px;
        height: 16px;
        margin: 0;
        flex: 0 0 auto;
        accent-color: var(--tm-accent, #1FAEFF);
      }
      #twm-thema-kiezer .twm-thema-stip {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
        border: 1px solid rgba(0,0,0,0.24);
        border-radius: 50%;
      }
      #twm-thema-kiezer .twm-thema-stip--blue { background: #1FAEFF; }
      #twm-thema-kiezer .twm-thema-stip--green { background: #64C86A; }
      #twm-thema-kiezer .twm-thema-stip--orange { background: #FF982E; }
      #twm-thema-kiezer .twm-thema-stip--purple { background: #B16AFF; }
      #twm-thema-kiezer .twm-thema-status {
        min-height: 1em;
        margin: 0 0 9px;
        color: var(--tm-accent, #1FAEFF);
        font-size: 0.86rem;
        font-weight: 600;
      }
      #twm-thema-kiezer .twm-thema-uitleg {
        margin: 0 0 12px;
        color: var(--tm-text-muted, #AAB8C6);
        font-size: 0.82rem;
      }
      #twm-thema-kiezer .twm-thema-herstellen {
        display: block;
        width: 100%;
        min-height: 40px;
        padding: 8px 11px;
        background: var(--tm-btn-secondary-bg, #4A4A4A);
        color: var(--tm-btn-secondary-text, #F5F5F5);
        border: 1px solid var(--tm-btn-secondary-border, #777777);
        border-radius: 8px;
        font-size: 0.87rem;
        font-weight: 600;
      }
      /* De bestaande desktopheader is bij net-boven-tabletformaten behoorlijk vol.
         We geven de navigatie iets meer ruimte, zonder functies te verbergen. */
      @media (min-width: 921px) and (max-width: 1000px) {
        .tm-site-header .tm-header-inner { gap: 8px; padding-inline: 10px; }
        .tm-site-header .tm-wordmark { font-size: 1.55rem; letter-spacing: 0.04em; margin-left: 8px; }
        .tm-site-header .tm-nav-list { gap: 4px; }
        .tm-site-header .tm-nav-list .tm-nav-link { font-size: 0.82rem; padding: 5px 5px; }
        .tm-site-header .tm-header-right { gap: 6px; font-size: 0.75rem; }
        .tm-site-header .tm-header-right .tm-login-status { max-width: 125px; }
        .tm-site-header .tm-header-right .tm-btn-small { padding: 7px 9px; font-size: 0.72rem; }
      }
      @media (max-width: 920px) {
        /* In het hamburgermenu staat Thema als gewone, volledige menuoptie. */
        .tm-main-nav .tm-nav-list > .tm-nav-theme {
          align-self: stretch;
          width: 100%;
          display: block;
        }
        #twm-thema-kiezer { width: 100%; }
        #twm-thema-kiezer .twm-thema-label { display: inline; }
        #twm-thema-kiezer .twm-thema-open {
          width: 100%;
          justify-content: flex-start;
          min-height: 44px;
          padding: 8px 12px;
        }
        #twm-thema-kiezer .twm-thema-paneel {
          position: static;
          width: 100%;
          max-width: 100%;
          margin-top: 8px;
          max-height: min(65dvh, 600px);
          overflow-y: auto;
        }
      }
      @media (max-width: 480px) {
          #twm-thema-kiezer .twm-thema-paneel { padding: 14px; }
      }