/* Webshop Kenmerk checklist (support.product_feature_checklist) — shop cards + product detail.
   Cards with a checklist have 4 sections (head / intro / list / actions). In a group where every card has a
   checklist (.shop-grid-feat) the cards share row tracks via subgrid from 768px: checklists start and CTAs/forms
   sit at the same height in each visual row. Fallback (no subgrid / mobile): flex column, list grows, actions
   at the bottom. */
.shop-feat-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .55rem;
  font-size: .875rem; line-height: 1.35rem; color: #d1d5db; }
.shop-feat-list li { display: flex; align-items: flex-start; gap: .55rem; }
.shop-feat-check { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .12rem; }
.shop-feat-val { color: #9ca3af; }
html.light .shop-feat-list { color: #334155; }
html.light .shop-feat-val { color: #475569; }
.shop-card-feat .shop-feat-list { flex: 1 1 auto; }
.shop-feat-list--detail { font-size: 1rem; line-height: 1.5rem; gap: .65rem; }
.shop-feat-list--detail .shop-feat-check { width: 1.25rem; height: 1.25rem; }
@media (min-width: 768px) {
  @supports (grid-template-rows: subgrid) {
    .shop-grid-feat > .shop-card-feat { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0;
      align-content: start; }
    .shop-grid-feat > .shop-card-feat .shop-feat-list { align-self: start; }
    .shop-grid-feat > .shop-card-feat .shop-card-actions { align-self: end; }
  }
}
/* Membership cards (logged in): current plan + member discount teaser (shop._attach_plan_rels / _attach_member_teaser) */
.shop-card-current { box-shadow: 0 0 0 2px #3b82f6; }
.shop-current-badge { display: inline-block; align-self: flex-start; margin-bottom: .5rem; padding: .1rem .6rem;
  border-radius: 999px; font-size: .75rem; font-weight: 600; color: #fff; background: #2563eb; border: 1px solid #1d4ed8; }
.shop-btn-current { display: block; font-weight: 600; cursor: default; color: #93c5fd; background: rgba(59,130,246,.12);
  border: 2px solid #3b82f6; }
.shop-member-teaser { margin: 0 0 .75rem; font-size: .875rem; font-weight: 600; color: #34d399; }
html.light .shop-btn-current { color: #1d4ed8; background: #dbeafe; }
html.light .shop-member-teaser { color: #047857; }
/* Membership tier badges (Mark 2026-10-04): metallic gradient disc + subtle glow around the plan icon, on the /shop
   membership cards (.gs-tier-card) and in 'Lidmaatschappen vergelijken' (.gs-sup-plan-icon.gs-tier-badge).
   Tier from the CMDB product key (partials/plan_tier.html); "Geen plan" gets no tier class and stays neutral.
   Static glow by default; the soft pulse only runs with prefers-reduced-motion: no-preference. */
.gs-tier-badge { --tier-bg: none; --tier-fg: #1e293b; --tier-ring: rgba(255,255,255,.35); --tier-glow: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.75rem; height: 2.75rem; border-radius: 999px; color: var(--tier-fg); background: var(--tier-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 2px rgba(0,0,0,.18), 0 0 0 1px var(--tier-ring),
    0 0 14px 2px var(--tier-glow); }
.gs-sup-plan-icon.gs-tier-badge { color: var(--tier-fg); }
.gs-tier-badge svg { position: relative; z-index: 1; width: 1.4rem; height: 1.4rem; }
.gs-sup-plan-icon.gs-tier-badge svg { width: 1.4rem; height: 1.4rem; }
.gs-tier-card { width: 3.5rem; height: 3.5rem; margin-bottom: .9rem; }
.gs-tier-card svg { width: 1.8rem; height: 1.8rem; }
.gs-tier-silver { --tier-bg: linear-gradient(135deg, #fafbfc 0%, #d9dde2 28%, #c0c0c0 50%, #9aa1a9 68%, #e4e7eb 100%);
  --tier-fg: #2b3440; --tier-ring: rgba(203,213,225,.55); --tier-glow: rgba(186,206,232,.45); }
.gs-tier-gold { --tier-bg: linear-gradient(135deg, #fff3c4 0%, #f0d27a 25%, #d4af37 50%, #b08a1e 70%, #f5dc8a 100%);
  --tier-fg: #4a3608; --tier-ring: rgba(240,210,122,.6); --tier-glow: rgba(232,180,60,.45); }
.gs-tier-platinum { --tier-bg: linear-gradient(135deg, #ffffff 0%, #e5e4e2 30%, #cfeffa 55%, #b9f2ff 75%, #f2fdff 100%);
  --tier-fg: #1d3b58; --tier-ring: rgba(185,242,255,.6); --tier-glow: rgba(165,236,255,.5); }
/* light theme: glows on white need a deeper tint and a visible ring (platinum is almost white) */
html.light .gs-tier-silver { --tier-ring: rgba(100,116,139,.45); --tier-glow: rgba(100,130,170,.35); }
html.light .gs-tier-gold { --tier-ring: rgba(161,123,20,.5); --tier-glow: rgba(212,160,40,.4); }
html.light .gs-tier-platinum { --tier-ring: rgba(56,160,200,.5); --tier-glow: rgba(56,189,248,.35); }
@media (prefers-reduced-motion: no-preference) {
  .gs-tier-badge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 22px 5px var(--tier-glow); opacity: 0; animation: gs-tier-glow 3.6s ease-in-out infinite; }
  .gs-tier-gold::after { animation-delay: -1.2s; }
  .gs-tier-platinum::after { animation-delay: -2.4s; }
}
@keyframes gs-tier-glow { 0%, 100% { opacity: 0; } 50% { opacity: .85; } }
/* keep the plan names on one line in the comparison header: the neutral "Geen plan" icon gets the badge's box height */
.gs-sup-plan-icon { min-height: 2.75rem; align-items: center; justify-content: center; }
/* Membership cards: thin tier-colored border + soft outer glow (tier from the product key, shop_product_card.html).
   .glass-panel sets border-color with !important in app.css, hence the !important here. Static, no animation. */
.shop-card-tier { --card-border: transparent; --card-glow: transparent; --card-ring: 0 0 #0000; }
.glass-panel.shop-card-tier { border-color: var(--card-border) !important;
  box-shadow: var(--card-ring), 0 0 0 1px var(--card-border), 0 0 26px -6px var(--card-glow), 0 10px 30px -18px var(--card-glow); }
.glass-panel.shop-card-tier.shop-card-current { --card-ring: 0 0 0 2px #3b82f6; }
.shop-card-tier-silver { --card-border: rgba(203,213,225,.45); --card-glow: rgba(186,206,232,.42); }
.shop-card-tier-gold { --card-border: rgba(232,196,96,.5); --card-glow: rgba(232,180,60,.4); }
.shop-card-tier-platinum { --card-border: rgba(185,242,255,.5); --card-glow: rgba(165,236,255,.45); }
html.light .shop-card-tier-silver { --card-border: rgba(148,163,184,.7); --card-glow: rgba(100,130,170,.3); }
html.light .shop-card-tier-gold { --card-border: rgba(196,154,40,.6); --card-glow: rgba(212,160,40,.3); }
html.light .shop-card-tier-platinum { --card-border: rgba(80,180,215,.6); --card-glow: rgba(56,189,248,.28); }
/* 'Lidmaatschap en support' section heading: tri-tone metallic badge (silver -> gold -> platinum), neutral glow */
.gs-tier-section { width: 2.25rem; height: 2.25rem; --tier-fg: #3a3424;
  --tier-bg: linear-gradient(135deg, #eef1f4 0%, #c0c0c0 22%, #f0d27a 45%, #d4af37 58%, #e5e4e2 78%, #b9f2ff 100%);
  --tier-ring: rgba(240,220,160,.45); --tier-glow: rgba(226,214,180,.35); }
.gs-tier-section svg { width: 1.2rem; height: 1.2rem; }
html.light .gs-tier-section { --tier-ring: rgba(150,130,70,.45); --tier-glow: rgba(180,160,100,.28); }
@media (prefers-reduced-motion: no-preference) { .gs-tier-section::after { animation-delay: -1.8s; } }