/* OPA 13th Reunion 2026 - commemorative member badge (4 x 6 in).
   Shared across web, WordPress and desktop. Fonts declared by each surface:
   'OPA Fraktur' (UnifrakturMaguntia) and 'OPA Condensed' (Oswald). */
.opa-badge{--navy:#2c2e5a;--navy-d:#1f2147;--gold:#c8902f;--gold-l:#f3c873;--gold-d:#8a5a17;--pill:#fcc875;
  position:relative;width:384px;height:576px;border-radius:22px;overflow:hidden;
  background:linear-gradient(135deg,#a8701f 0%,#f2cd7a 22%,#b77d25 45%,#f6d891 68%,#9a6418 100%);
  font-family:'OPA Condensed','Arial Narrow',sans-serif;color:#151630;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;box-shadow:0 18px 40px -12px rgba(31,33,71,.45)}
.opa-badge *{box-sizing:border-box}
.opa-badge__inner{position:absolute;inset:7px 7px 0 7px;border-radius:17px 17px 0 0;background:#fbfaf6;overflow:hidden}
.opa-badge__wm{position:absolute;left:0;right:0;top:150px;bottom:40px;background-size:cover;background-position:center;opacity:.33;filter:saturate(.7)}
.opa-badge__wm::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fbfaf6 0%,rgba(251,250,246,.2) 25%,rgba(251,250,246,.15) 75%,#fbfaf6 100%)}
.opa-badge__photo{position:absolute;left:21px;top:27px;width:116px;height:148px;padding:3px;
  background:linear-gradient(160deg,#f2cd7a,#a8701f 50%,#f2cd7a);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.opa-badge__photo-in{width:100%;height:100%;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center}
.opa-badge__photo-in img{width:100%;height:100%;object-fit:cover;display:block}
.opa-badge__nophoto{color:#9a9bb0;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;text-align:center}
.opa-badge__logo{position:absolute;right:14px;top:22px;width:150px;height:150px;border-radius:50%;object-fit:contain;mix-blend-mode:multiply}
.opa-badge__ribbon{position:absolute;left:11px;right:11px;top:190px;height:42px;background:var(--navy);
  border:3px solid var(--gold);box-shadow:inset 0 0 0 1px var(--gold-l),0 3px 6px rgba(0,0,0,.2);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);
  display:flex;align-items:center;justify-content:center;padding:0 18px}
.opa-badge__name{color:#fff;font-weight:700;font-size:23px;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1}
.opa-badge__name.is-long{font-size:18px}.opa-badge__name.is-xlong{font-size:15px}
.opa-badge__rows{position:absolute;left:17px;right:12px;top:242px}
.opa-badge__row{position:relative;height:34px;display:flex;align-items:center}
.opa-badge__row::after{content:"";position:absolute;left:44px;right:0;bottom:3px;height:1.5px;background:linear-gradient(90deg,var(--gold-d),var(--gold-l) 60%,rgba(200,144,47,.2))}
.opa-badge__lbl{position:relative;height:25px;width:150px;flex-shrink:0;border-radius:0 9px 9px 0;background:var(--pill);
  margin-left:20px;padding-left:28px;display:flex;align-items:center;font-family:Arial,sans-serif;font-weight:700;font-size:12.5px;color:#171717;letter-spacing:.2px}
.opa-badge__ico{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:1;width:42px;height:28px;border-radius:8px;
  background:var(--navy);border:2.5px solid var(--gold);display:flex;align-items:center;justify-content:center}
.opa-badge__ico svg{width:18px;height:18px;fill:#fff}
.opa-badge__val{flex:1;min-width:0;padding-left:10px;font-weight:600;font-size:15px;color:var(--navy-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.3px}
.opa-badge__qr{position:absolute;left:30px;top:424px;width:76px;height:76px;background:#fff;padding:3px}
.opa-badge__qr svg{display:block;width:100%!important;height:100%!important}
.opa-badge__qrid{position:absolute;left:30px;top:502px;width:76px;text-align:center;font-size:9px;letter-spacing:1px;color:var(--navy);font-weight:600}
.opa-badge__mark{position:absolute;left:50%;top:418px;width:78px;height:78px;transform:translateX(-50%);object-fit:contain}
.opa-badge__foot{position:absolute;left:0;right:0;bottom:0;height:62px;background:var(--gold);border-radius:50% 50% 0 0/26px 26px 0 0;padding-top:4px}
.opa-badge__foot-in{height:100%;background:var(--navy);border-radius:50% 50% 0 0/24px 24px 0 0;display:flex;align-items:center;justify-content:center;padding-top:4px}
.opa-badge__foot-in span{font-family:'OPA Fraktur','Old English Text MT',serif;color:#fff;font-size:24px;letter-spacing:.5px}
.opa-badge__qr-err{font-size:8px;color:#999;display:flex;height:100%;align-items:center;justify-content:center;text-align:center}
@media print{
  @page{size:4in 6in;margin:0}
  html,body{margin:0!important;padding:0!important;background:#fff!important;width:4in;height:6in;overflow:hidden}
  .no-print,.opa-loading{display:none!important}
  .opa-print-stage{padding:0!important;margin:0!important;min-height:0!important;background:none!important;display:block!important}
  .opa-badge{width:4in;height:6in;box-shadow:none;margin:0!important;page-break-inside:avoid;break-inside:avoid}
}
/* Screen chrome around the badge */
.opa-print-stage{min-height:100dvh;background:radial-gradient(ellipse at top,#e9e3d3,#d6d2c6);padding:24px 16px 40px;display:flex;flex-direction:column;align-items:center;font-family:'OPA Condensed','Arial Narrow',sans-serif}
.opa-toolbar{width:384px;max-width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.opa-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:8px;border:1px solid transparent;font:600 13px/1 'OPA Condensed','Arial Narrow',sans-serif;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;text-decoration:none}
.opa-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.opa-btn--ghost{background:transparent;color:#2c2e5a;border-color:rgba(44,46,90,.3)}
.opa-btn--ghost:hover{background:rgba(44,46,90,.07)}
.opa-btn--primary{background:#2c2e5a;color:#f6d891;border-color:#c8902f}
.opa-btn--primary:hover{background:#1f2147}
.opa-loading{width:384px;height:576px;border-radius:22px;background:linear-gradient(110deg,#ece6d6 30%,#f7f3e8 50%,#ece6d6 70%);background-size:200% 100%;animation:opaShimmer 1.3s linear infinite}
.opa-error{width:384px;max-width:100%;padding:36px 28px;border-radius:18px;background:#fbfaf6;border:2px solid #c8902f;text-align:center;color:#2c2e5a}
.opa-error h2{font-size:24px;margin:0 0 8px}.opa-error p{font-family:Arial,sans-serif;font-size:13px;color:#5b5d7a;margin:0 0 18px}
@keyframes opaShimmer{to{background-position:-200% 0}}