/* ═══════════════════════════════════════════════════════════════════
   OWLMARK CERTIFICATE STUDIO — DETAILS FORM
   Companion stylesheet to certificate-details.js.
   ═══════════════════════════════════════════════════════════════════ */

/* ── The brand row ───────────────────────────────────────────────────
   It sits above the fields because that is the order of the decision:
   pull the school in, then write the award. Gold, so it reads as an
   offer rather than the warning banner directly below it. */
#okdBrandBar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 15px;margin:0 0 16px;
  border-radius:14px;
  background:linear-gradient(170deg,#FFFBF0,#FCF3DF);
  border:1px solid rgba(201,154,61,.38);
  box-shadow:inset 0 1px 0 #fff;
}
#okdBrandBar.empty{
  background:linear-gradient(170deg,#FBFAFF,#F4F2FB);
  border-color:var(--ok-line,rgba(43,39,64,.14));
}

#okdBrandBar .okdb-txt{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:3px}
#okdBrandBar .okdb-txt b{
  font-size:13.5px;font-weight:900;color:#6A5320;letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#okdBrandBar.empty .okdb-txt b{color:var(--ok-ink,#2b2740)}
#okdBrandBar .okdb-status{
  display:none;font-size:12px;font-weight:700;line-height:1.45;color:#7A6027;
}
#okdBrandBar .okdb-status.on{display:block}
#okdBrandBar.empty .okdb-status{color:var(--ok-ink-soft,#5a5470)}

#okdBrandBar .okdb-btns{display:flex;gap:8px;flex:0 0 auto;flex-wrap:wrap}
#okdBrandBar .okdb-btn{
  min-height:38px;padding:9px 14px;border-radius:11px;cursor:pointer;
  font-family:var(--cs-font,inherit);font-size:12.5px;font-weight:800;
  background:#fff;color:var(--ok-ink,#2b2740);
  border:1.5px solid rgba(201,154,61,.42);
  box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(201,154,61,.28);
  transition:filter .15s ease,transform .12s ease;
}
#okdBrandBar .okdb-btn.primary{
  background:linear-gradient(180deg,#F0D68C,#D9A532);
  border-color:#C1902A;color:#3A2C08;
}
#okdBrandBar .okdb-btn:hover{filter:brightness(1.04)}
#okdBrandBar .okdb-btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff}
#okdBrandBar .okdb-btn:focus-visible{outline:2px solid #B8862F;outline-offset:2px}
#okdBrandBar .okdb-btn[hidden]{display:none}

body.lang-ar #okdBrandBar{direction:rtl}
body.lang-ar #okdBrandBar .okdb-txt b,
body.lang-ar #okdBrandBar .okdb-status,
body.lang-ar #okdBrandBar .okdb-btn{font-family:'Cairo',system-ui,sans-serif}

/* ── Refusing to close ───────────────────────────────────────────────
   A dialog that simply ignores a click looks broken too. The card gives
   a short, small movement — enough to say "I heard you, and I am not
   throwing your work away" — and the brand row carries the words. */
@keyframes okdHold{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-5px)}
  46%{transform:translateX(4px)}
  70%{transform:translateX(-2px)}
}
#okDetailsCard.okd-hold{animation:okdHold .42s cubic-bezier(.36,.07,.19,.97)}
#okDetailsCard.okd-hold{box-shadow:0 34px 80px rgba(43,39,64,.34),0 0 0 3px rgba(201,154,61,.45)}

@media (prefers-reduced-motion: reduce){
  #okDetailsCard.okd-hold{animation:none}
}

@media (max-width:560px){
  #okdBrandBar{flex-direction:column;align-items:stretch}
  #okdBrandBar .okdb-btns{justify-content:stretch}
  #okdBrandBar .okdb-btn{flex:1 1 auto}
}

@media print{
  #okdBrandBar{display:none !important}
}