/* ===== Butik (/butik/): tilføjelser til style.css ===== */

/* style.css har ingen regel for hidden; uden den vises vilkårs-vinduet med det samme. */
[hidden]{display:none !important}

/* Før du støtter: fire kort i to kolonner, øverst på siden */
.info-grid{max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.info-grid .rule-card h3 span{display:inline-block;width:1.4em;text-align:center}
@media(max-width:640px){.info-grid{grid-template-columns:1fr}}

/* Bidrag: navnefeltet foldes ud i rækken, når man trykker "Støt" */
.options{display:flex;flex-direction:column;gap:1rem}
.option__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.option__top h3{margin:0}
.option__form{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.option__form label{display:block;font-weight:600;margin-bottom:.5rem}
.name-row{display:flex;gap:.5rem;max-width:420px;margin-bottom:.5rem}
.name-row input{flex:1;min-width:0}
.option__form input,.option__form select{
  height:42px;padding:0 .75rem;
  background:var(--bg);color:var(--text);
  border:1px solid var(--border);border-radius:8px;
  font:inherit;font-size:.95rem;
}
.option__form input:focus,.option__form select:focus{outline:none;border-color:var(--accent)}
.option__form input[aria-invalid="true"]{border-color:var(--accent)}
.option__actions{display:flex;align-items:center;gap:1.25rem;margin-top:1rem}
.msg{margin-top:.75rem !important;color:#ff6b7f !important}
.msg.is-info{color:var(--text-muted) !important}

.btn-support{
  background:var(--accent);color:#fff;border:0;border-radius:8px;
  padding:.55rem 1.4rem;font:inherit;font-weight:600;font-size:.95rem;
  cursor:pointer;transition:box-shadow .25s,opacity .2s;
}
.btn-support:hover{box-shadow:0 0 20px var(--accent-glow)}
.btn-support[disabled]{opacity:.6;cursor:wait}
.option__top h3 .eur{font-weight:400;font-size:.85rem;color:var(--text-muted);margin-left:.35rem}
.price-note{font-size:.85rem;color:var(--text-muted);text-align:center;margin-top:.25rem}
.thanks{font-size:.9rem;color:var(--text-muted);text-align:center;margin-top:.5rem}
.demo-banner{margin:0 auto 1.5rem}
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer}
.link-btn:hover{opacity:.85}

/* ===== V.I.P-menuen (Minecraft-GUI) ===== */
.vip-menu{
  --mc-font:"Jersey 15",ui-monospace,Consolas,monospace;
  --px:3px;
  --panel:#c6c6c6;--panel-hi:#ffffff;--panel-lo:#555555;--panel-text:#3f3f3f;
  --slot:#8b8b8b;--slot-hi:#ffffff;--slot-lo:#373737;
  text-align:center;
}
.mc-panel,.mc-slot,.hotbar{
  clip-path:polygon(
    0 var(--px),var(--px) var(--px),var(--px) 0,
    calc(100% - var(--px)) 0,calc(100% - var(--px)) var(--px),100% var(--px),
    100% calc(100% - var(--px)),calc(100% - var(--px)) calc(100% - var(--px)),calc(100% - var(--px)) 100%,
    var(--px) 100%,var(--px) calc(100% - var(--px)),0 calc(100% - var(--px)));
}
.mc-panel{
  background:var(--panel);color:var(--panel-text);
  border:var(--px) solid #000;
  box-shadow:inset var(--px) var(--px) 0 var(--panel-hi),inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--panel-lo);
}
.inventory{display:inline-block;max-width:100%;padding:12px 16px 16px;font-family:var(--mc-font);text-align:left}
.inventory__title{font-weight:400;font-size:1.3rem;color:var(--panel-text);margin-bottom:8px}
.perk-grid{--s:60px;display:grid;grid-template-columns:repeat(7,var(--s));gap:4px}
.mc-slot{
  position:relative;width:var(--s,60px);height:var(--s,60px);
  display:grid;place-items:center;
  background:var(--slot);border:0;padding:0;
  box-shadow:inset var(--px) var(--px) 0 var(--slot-lo),inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--slot-hi);
}
.mc-slot img,.slot-icon,.slot-icon img{width:calc(var(--s,60px) * .66);height:calc(var(--s,60px) * .66);image-rendering:pixelated}
.slot-icon{display:block;position:relative}
button.mc-slot{cursor:pointer}
button.mc-slot:hover::before,button.mc-slot[aria-pressed="true"]::before{
  content:"";position:absolute;inset:var(--px);background:rgba(255,255,255,.45);pointer-events:none;z-index:2
}
button.mc-slot[aria-pressed="true"]{box-shadow:inset 0 0 0 var(--px) #fff}
.slot-count{position:absolute;right:5px;bottom:-1px;z-index:3;font-family:"Jersey 15",ui-monospace,monospace;font-size:1.35rem;color:#fff;text-shadow:2px 2px 0 #3f3f3f;pointer-events:none}
.mc-tooltip,.perk-info{
  background:rgba(16,0,16,.95);color:#fff;
  border:3px solid transparent;border-image:linear-gradient(#5000ff,#28007f) 1;
  font-family:"Jersey 15",ui-monospace,Consolas,monospace;font-size:1.25rem;line-height:1.25;
  text-shadow:2px 2px 0 rgba(0,0,0,.6);text-align:left;
}
.mc-tooltip{padding:8px 12px;box-shadow:0 0 0 3px rgba(16,0,16,.95)}
.perk-info{margin-top:12px;min-height:104px;padding:8px 14px}
.perk-info h4{font-weight:400;font-size:1.4rem;color:#ffd84a}
.perk-info p{color:#dcdcdc;margin:0}
.tt-name--ench{color:#55ffff}
.tt-ench,.tt-line{color:#aaaaaa}
.floating-tooltip{position:fixed;z-index:400;pointer-events:none;max-width:320px}
.glint::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 0 35%,rgba(200,140,255,.85) 45%,rgba(140,70,255,.55) 52%,transparent 62% 100%);
  background-size:300% 300%;
  animation:glint 3.2s linear infinite;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;
  mix-blend-mode:screen;
}
@keyframes glint{from{background-position:100% 0}to{background-position:-100% 0}}
.kit__title{color:var(--text-muted);font-size:.9rem;margin:1.5rem 0 .5rem}
/* Lige så mange felter som ting i kittet (--cols sættes af butik.js), så der ikke står tomme felter. */
.hotbar{--s:60px;display:inline-grid;grid-template-columns:repeat(var(--cols,9),var(--s));padding:var(--px);background:rgba(0,0,0,.55);border:var(--px) solid #000}
.hotbar .mc-slot{background:rgba(139,139,139,.35);box-shadow:inset 0 0 0 var(--px) rgba(255,255,255,.25)}

@media(max-width:600px){
  .inventory{display:block;padding:10px 12px 14px}
  .perk-grid{--s:min(60px,calc((100vw - 2.5rem - 30px - 12px) / 5));grid-template-columns:repeat(5,var(--s))}
  .hotbar{--s:min(56px,calc((100vw - 2.5rem - 12px) / 5));grid-template-columns:repeat(var(--cols-small,5),var(--s))}
}
@media(prefers-reduced-motion:reduce){
  .glint::after{animation:none}
}