/* Keep controls at their actual touch size on the shop setup screens. */
@media (max-width: 768px) {
    .page:has(.shop-setup-surface) { transform: none !important; width: 100% !important; }
    .content:has(.shop-setup-surface) { padding: 1rem .75rem 100px !important; }
    .shop-setup-surface input, .shop-setup-surface select, .shop-setup-surface textarea { font-size: 16px; max-width: 100%; }
    .shop-setup-surface .btn { min-height: 44px; }
}
/* Een lichte ondergrond onder de hele stap, zodat de witte kaartjes eruit springen. Eerder
   stonden witte kaartjes met een lichte rand op een wit scherm, en dan moet je rand voor rand
   zoeken waar een kaartje ophoudt. Alleen op de inrichtschermen: de rest van het beheer houdt
   zijn eigen witte achtergrond. */
main:has(.shop-setup-surface) { background: #f2f5f9; }
.shop-setup-surface { min-width: 0; color: #26394e; }
.shop-setup-surface :focus-visible { outline: 3px solid #508dd2; outline-offset: 3px; }
.shop-setup-surface [id] { scroll-margin-top: 5.5rem; }
@media (max-width: 768px) { .shop-setup-surface [id] { scroll-margin-top: 1rem; } }

/* De drie stappen van het inrichten delen één omhulsel, zodat de kopbalk op dezelfde
   plek blijft staan als je van stap wisselt. Stap 1 zat eerder in een Bootstrap
   .container (extra .75rem binnenmarge) en stap 2 en 3 hadden elk een eigen
   max-breedte (1440px en 1250px), waardoor de titel verschoof bij elke stap. */
.event-setup-page { max-width: 1440px; margin-inline: auto; min-width: 0; padding-bottom: 2rem; }

/* Kaartjes en het tweekolomsraster van het inrichten. Stonden in Edit.razor.css, maar sinds de
   schakelaars en Start kaartverkoop naar de Shop-pagina zijn verhuisd heeft ook die ze nodig, en
   scoped css reikt niet tot een ander component. */
.event-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin:1rem 0; }
@media (max-width:900px) { .event-options { grid-template-columns:minmax(0,1fr); } }
.event-action { display:flex; align-items:center; justify-content:space-between; gap:1.25rem; min-height:80px; height:100%; padding:1rem 1.1rem; border:1px solid #dce4ed; border-radius:.8rem; background:#fff; }
.event-action-text { display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.event-action-title { font-size:.95rem; font-weight:600; line-height:1.4; color:#26394e; }
.event-action-description { font-size:.85rem; font-weight:400; line-height:1.45; color:#64748b; }
.event-action .event-action-code { margin-top:.2rem; max-width:16rem; }
.event-action .btn { display:inline-flex; align-items:center; gap:.45rem; flex:none; white-space:nowrap; min-height:44px; }
.event-action-wide { grid-column:1 / -1; }
.event-action .event-action-input { flex:none; width:auto; min-width:14rem; max-width:20rem; min-height:44px; }
@media (max-width:575px) { .event-action { flex-direction:column; align-items:stretch; gap:.75rem; } .event-action .event-action-input { max-width:none; width:100%; } }