/*
 * Kodepanelet bruker Ratatosks postkasses originale CSS-filer direkte.
 * Denne filen inneholder bare layouten som er unik for lag/dato/kode og
 * riktig/feil-tilbakemelding.
 */

.opk-codepanel {
  --orp-forest: var(--ok-forest-green, #2f4e3b);
  --orp-forest-dark: #233b2d;
  --orp-moss: var(--ok-moss-green, #6a8a5b);
  --orp-paper: var(--ok-parchment, #e6d7b8);
  --orp-paper-deep: var(--ok-cream-beige, #f2e8d6);
  --orp-ink: var(--ok-dark-shadow, #2b241c);
  --orp-gold: var(--ok-bronze-gold, #b88d2c);
  --orp-orange: var(--ok-ratatosk-orange, #d8732b);
  --orp-orange-dark: #a95322;
  --orp-red: var(--ok-rust-red, #9c4a3a);
}

.opk-codepanel .opk-code-form { display:grid; gap:1.15rem; }
.opk-codepanel .opk-team-fieldset { min-width:0; margin:0; padding:0; border:0; }
.opk-codepanel .opk-team-fieldset legend,
.opk-codepanel .opk-field > span { display:block; margin:0 0 .45rem; color:var(--ok-bark-brown, #4a3624); font-family:var(--ok-font-body, "Source Sans 3", "Segoe UI", Arial, sans-serif); font-weight:900; }
.opk-codepanel .opk-team-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.7rem; }
.opk-codepanel .opk-team-option { position:relative; gap:.55rem; width:100%; min-width:0; min-height:52px; padding:.7rem .8rem; user-select:none; }
.opk-codepanel .opk-team-option input { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.opk-codepanel .opk-team-option:has(input:checked) { border-color:var(--orp-orange); background:rgba(216,115,43,.12); box-shadow:0 0 0 3px rgba(216,115,43,.13); }
.opk-codepanel .opk-team-option:focus-within { outline:3px solid rgba(216,115,43,.55); outline-offset:2px; }
.opk-codepanel .opk-team-dot { width:.92rem; height:.92rem; flex:0 0 auto; border:2px solid rgba(43,36,28,.2); border-radius:50%; box-shadow:inset 0 0 0 2px rgba(255,255,255,.44); }
.opk-codepanel .opk-team--felles .opk-team-dot { background:var(--orp-gold); }
.opk-codepanel .opk-team--gronn .opk-team-dot { background:var(--ok-signal-green, #4e7c5a); }
.opk-codepanel .opk-team--bla .opk-team-dot { background:var(--ok-signal-blue, #4a6f8e); }
.opk-codepanel .opk-team--rod .opk-team-dot { background:var(--ok-rust-red, #9c4a3a); }
.opk-codepanel .opk-team--hvit .opk-team-dot { background:#f7f3e9; }

.opk-codepanel .opk-field-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:.75rem; }
.opk-codepanel .opk-field input { min-height:54px; width:100%; border:2px solid rgba(24,59,43,.3); border-radius:13px; color:var(--orp-ink); background:#fff; font-family:var(--ok-font-body, "Source Sans 3", "Segoe UI", Arial, sans-serif); font-size:1.1rem; font-weight:850; padding:.75rem .9rem; }
.opk-codepanel .opk-field input[name="code"] { letter-spacing:.09em; text-transform:uppercase; }
.opk-codepanel .opk-field input:focus-visible { outline:3px solid rgba(216,115,43,.55); outline-offset:2px; }

.opk-codepanel .opk-actions { display:flex; flex-wrap:wrap; gap:.7rem; }
.opk-codepanel .opk-check-button { flex:1 1 230px; }
.opk-codepanel .opk-contact-snurr { flex:0 1 auto; }

.opk-codepanel .opk-feedback { max-width:760px; margin:1.5rem auto 0; }
.opk-codepanel .opk-feedback[hidden] { display:none !important; }
.opk-codepanel .opk-feedback__paper { padding:clamp(1.25rem,4vw,2.2rem); animation:opk-paper-in .46s cubic-bezier(.2,.8,.23,1) both; }
.opk-codepanel .opk-feedback__header { padding-right:4.8rem; }
.opk-codepanel .opk-feedback__title { margin-bottom:1rem; font-size:clamp(1.55rem,4vw,2.25rem); }
.opk-codepanel .opk-feedback__content p { margin:0; white-space:pre-line; }
.opk-codepanel .opk-feedback__resources { display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.25rem; }
.opk-codepanel .opk-feedback__resources[hidden] { display:none !important; }
.opk-codepanel .opk-feedback__resource { flex:1 1 180px; min-width:0; text-align:center; text-decoration:none; }
.opk-codepanel .opk-feedback__media { flex:1 1 100%; width:100%; margin:0; }
.opk-codepanel .opk-feedback__media img,
.opk-codepanel .opk-feedback__media video,
.opk-codepanel .opk-feedback__media iframe { display:block; width:100%; max-width:100%; border:0; border-radius:14px; background:#111; box-shadow:0 8px 24px rgba(43,36,28,.18); }
.opk-codepanel .opk-feedback__media img { height:auto; object-fit:contain; background:transparent; }
.opk-codepanel .opk-feedback__media video { max-height:520px; }
.opk-codepanel .opk-feedback__media iframe { aspect-ratio:16/9; min-height:240px; }
.opk-codepanel .opk-feedback__media-caption { margin-top:.5rem; color:var(--orp-ink); font-size:.95rem; font-weight:700; text-align:center; }
.opk-codepanel .opk-feedback__footer { margin-top:1.35rem; }

.opk-codepanel.is-correct .opk-feedback__paper { box-shadow:0 20px 50px rgba(54,38,20,.24),0 0 0 3px rgba(78,124,90,.16); }
.opk-codepanel.is-correct .opk-feedback__seal { background-color:var(--ok-signal-green, #4e7c5a); }
.opk-codepanel.is-wrong .opk-feedback__paper { animation:opk-wrong-in .44s ease both; box-shadow:0 20px 50px rgba(54,38,20,.24),0 0 0 3px rgba(156,74,58,.14); }
.opk-codepanel.is-wrong .opk-feedback__seal { background-color:var(--ok-rust-red, #9c4a3a); }
.opk-codepanel.is-wrong .opk-feedback__seal span,
.opk-codepanel.is-correct .opk-feedback__seal span { font-family:var(--ok-font-emphasis, "Archivo Black", "Arial Black", Arial, sans-serif); font-size:1.35rem; }

@keyframes opk-paper-in { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes opk-wrong-in { 0% { opacity:0; transform:translateY(12px); } 35% { opacity:1; transform:translateX(-5px); } 55% { transform:translateX(4px); } 75% { transform:translateX(-2px); } 100% { transform:translateX(0); } }

body:not(.wp-admin) .opk-codepanel .orp-postkasse__shell { min-height:0; }

@media (max-width:800px) { .opk-codepanel .opk-team-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:650px) {
  .opk-codepanel .opk-field-grid { grid-template-columns:1fr; }
  .opk-codepanel .opk-actions .orp-button { width:100%; flex-basis:100%; }
  .opk-codepanel .opk-feedback__header { padding-right:0; }
  .opk-codepanel .opk-feedback__resource { flex-basis:100%; width:100%; }
  .opk-codepanel .opk-feedback__media iframe { min-height:190px; }
}
@media (prefers-reduced-motion:reduce) { .opk-codepanel .opk-feedback__paper, .opk-codepanel.is-wrong .opk-feedback__paper { animation:none; } }