/* ==========================================================================
   PLAKATER — PRODUKT-SPECIFIK CSS-OVERRIDE
   IMPORTANT (plakater/style.css): Denne fil eksisterer KUN for at style de
   Plakater-specifikke elementer, der ikke findes på nogen anden printvare:

     - .plk-quality-notice / .plk-quality-notice::before
     - .plk-quality-icon
     - .plk-quality-content (+ strong, + span)
     - @keyframes plk-quality-shine

   Alle fælles komponenter (fl-shell, fl-hero, fl-panel, fl-fieldset,
   fl-tile-option/fl-paper-option, fl-upload-slot, fl-price-box,
   fl-preview-modal m.fl.) hører hjemme i print_shared/style.css og må
   IKKE dubleres eller overstyres her. Denne fil skal loades EFTER
   print_shared/style.css (se plakater/index.html), så den kun tilføjer det,
   der reelt er unikt for Plakater.

   Trin 3 af planen "Ensartet printvare-designsystem" — se
   docs/PRINTVARER_DESIGNSYSTEM.md. Reduceret 2026-07-24 fra 208 til 7
   regler efter fuld selector-/deklarationsdiff mod print_shared/style.css.
   ========================================================================== */

.plk-quality-notice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--eg-print-space-5, 12px);
  overflow: hidden;
  margin: 0 0 var(--eg-print-space-7, 16px);
  padding: 13px 15px;
  border: 1px solid rgba(var(--eg-print-accent-rgb, 255, 235, 167), 0.78);
  border-radius: var(--eg-print-radius-lg, 14px);
  background:
    linear-gradient(145deg, rgba(125, 94, 12, 0.58), rgba(39, 28, 4, 0.84) 50%, rgba(13, 50, 33, 0.7));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -3px 0 rgba(var(--eg-print-black-rgb, 0, 0, 0), 0.28),
    0 7px 0 rgba(5, 7, 12, 0.74),
    0 12px 24px rgba(var(--eg-print-black-rgb, 0, 0, 0), 0.28);
}

.plk-quality-notice::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 12px;
  background: linear-gradient(110deg, transparent 8%, rgba(255, 255, 255, 0.18) 47%, transparent 72%);
  transform: translateX(-120%);
  animation: plk-quality-shine 5.5s ease-in-out infinite;
  pointer-events: none;
}

.plk-quality-icon {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 10px;
  background: linear-gradient(135deg, #fbbf24, var(--eg-print-color-success-deep, #16a34a));
  color: var(--eg-print-color-white, #fff);
  font-size: 1.2rem;
  text-shadow: 0 1px 3px rgba(var(--eg-print-black-rgb, 0, 0, 0), 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 3px 7px rgba(var(--eg-print-black-rgb, 0, 0, 0), 0.34);
}

.plk-quality-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  min-width: 0;
}

.plk-quality-content strong {
  color: #fff4b8;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.plk-quality-content span {
  color: rgba(241, 245, 249, 0.92);
  font-size: 0.79rem;
  line-height: 1.35;
}

@keyframes plk-quality-shine {
  28%, 100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .plk-quality-notice::before {
    animation: none;
  }
}