/* ═══════════════════════════════════════════════════════════════════
   OWLMARK STUDIO — NETWORK AND UPDATE NOTICES
   Companion stylesheet to owlmark-offline.js.
   A strip, never a dialog: being offline is a state, not a question.
   ═══════════════════════════════════════════════════════════════════ */

.om-netbar{
  position:fixed;z-index:16800;
  inset-inline:auto;inset-inline-end:18px;bottom:18px;
  max-width:min(420px, calc(100vw - 28px));
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:14px;
  background:linear-gradient(180deg,#1B2A47,#101A2D);
  border:1px solid rgba(232,201,120,.34);
  box-shadow:0 16px 40px rgba(0,0,0,.34);
  color:#FAF7EF;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.82rem;line-height:1.45;
  opacity:0;transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease;
}
.om-netbar.open{opacity:1;transform:none}
.om-netbar > span{flex:1 1 auto;min-width:0}

.om-netbar button{
  flex:0 0 auto;min-height:40px;padding:8px 13px;
  border-radius:10px;cursor:pointer;
  border:1px solid #A87C2A;
  background:linear-gradient(180deg,#D8B15C,#B8862F);
  color:#1A1207;font:inherit;font-weight:700;
}
.om-netbar button:hover{background:linear-gradient(180deg,#E2BE72,#C4923A)}
.om-netbar .om-netbar-x{
  min-height:36px;min-width:36px;padding:0;
  border:1px solid rgba(250,247,239,.2);
  background:rgba(250,247,239,.08);color:#FAF7EF;
  font-size:.8rem;
}
.om-netbar .om-netbar-x:hover{background:rgba(250,247,239,.16)}
.om-netbar button:focus-visible{outline:2px solid #E8C978;outline-offset:2px}

body.lang-ar .om-netbar{font-family:'Cairo',system-ui,sans-serif}

/* Clear of the phone task bar and the recovery strip. */
body.om-mobile .om-netbar{
  inset-inline:12px;
  bottom:calc(var(--om-bar-h, 60px) + env(safe-area-inset-bottom, 0px) + 12px);
  max-width:none;flex-wrap:wrap;
}
@media (max-width: 520px){
  .om-netbar{inset-inline:12px;max-width:none;flex-wrap:wrap}
  .om-netbar > span{flex:1 1 100%}
  .om-netbar button{flex:1 1 0;min-height:44px;text-align:center}
  .om-netbar .om-netbar-x{flex:0 0 44px;min-width:44px}
}

@media (prefers-reduced-motion: reduce){.om-netbar{transition:none}}
@media print{.om-netbar{display:none !important}}