/* WebwinkelKeur Badge Styling */
    .webwinkelkeur-badge {
      position: fixed;
      bottom: 20px;
      left: 20px;
      z-index: 1000000;
      transition: transform 0.3s ease;
      display: block;
    }

    .webwinkelkeur-badge img {
      width: 120px;
      height: auto;
      display: block;
    }

    .webwinkelkeur-badge:hover {
      transform: scale(1.1);
    }

    @media (max-width: 768px) {
      .webwinkelkeur-badge {
        bottom: 70px;
        left: 15px;
      }

      .webwinkelkeur-badge img {
        width: 90px;
      }
    }

    /* Extra spacing below navbar */
    main {
      padding-top: 32px;
    }

    /* Generic content card (reused from /sim/activeren styling) */
    .act-step {
      background: #111;
      border: 1px solid #2a2a2a;
      border-left: 4px solid #165df5;
      border-radius: 12px;
      padding: 1.5rem 1.75rem;
      margin-bottom: 1.5rem;
    }

    .act-step h2 {
      font-size: 1.3rem;
      margin-bottom: 0.75rem;
    }

    .act-step p {
      margin-bottom: 0.75rem;
    }

    .act-step p:last-child {
      margin-bottom: 0;
    }

    /* Inline code chip for the APN value mentioned in running text */
    .apn-code {
      font-family: "Courier New", Courier, monospace;
      font-size: 0.9em;
      font-weight: 700;
      font-style: normal;
      color: #165df5;
      background: #0b0b0b;
      border: 1px solid #2a2a2a;
      border-radius: 5px;
      padding: 0.1em 0.4em;
      white-space: nowrap;
    }

    /* Service status banner */
    .status-banner {
      display: flex;
      align-items: flex-start;
      gap: 0.85rem;
      border-radius: 12px;
      padding: 1.1rem 1.35rem;
      border: 1px solid #2a2a2a;
    }

    .status-banner .status-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      flex: 0 0 auto;
      margin-top: 0.4rem;
    }

    .status-banner .status-title {
      font-size: 1.2rem;
      font-weight: 700;
    }

    .status-banner .status-message {
      margin-top: 0.25rem;
    }

    .status-banner .status-updated {
      margin-top: 0.45rem;
      font-size: 0.82rem;
      opacity: 0.7;
    }

    .status-operational {
      background: rgba(46, 125, 50, 0.12);
      border-color: #2e7d32;
    }

    .status-operational .status-dot {
      background: #2e7d32;
    }

    .status-maintenance {
      background: rgba(255, 160, 0, 0.12);
      border-color: #ffa000;
    }

    .status-maintenance .status-dot {
      background: #ffa000;
    }

    .status-outage {
      background: rgba(211, 47, 47, 0.14);
      border-color: #d32f2f;
    }

    .status-outage .status-dot {
      background: #d32f2f;
    }

    /* Troubleshooting checklist */
    .storing-list {
      list-style: none;
      counter-reset: step;
      padding-left: 0;
      margin-top: 1rem;
    }

    .storing-list li {
      position: relative;
      background: #111;
      border: 1px solid #2a2a2a;
      border-radius: 12px;
      padding: 1rem 1.25rem 1rem 3.5rem;
      margin-bottom: 1rem;
      line-height: 1.55;
    }

    .storing-list li::before {
      counter-increment: step;
      content: counter(step);
      position: absolute;
      left: 1rem;
      top: 0.9rem;
      width: 1.75rem;
      height: 1.75rem;
      background: #165df5;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.95rem;
    }

    .storing-list li a {
      color: #165df5;
      font-weight: 600;
    }