/* ══════════════════════════════════════════════════════════════════════
   OWLMARK — THE LIGHT LUXE SKIN
   By Mourad Mekki

   My first attempt at this was deep navy. It looked premium on its own and
   wrong in the app: OwlMark is a cheerful, light studio, and a black window
   in the middle of it reads as an error, not as luxury. That was my
   misjudgement, and this is the correction.

   The richness now comes from warm ivory paper, saturated gold rules and
   navy ink — the palette of an actual printed certificate — not from
   darkness. Nothing here is pale: the gold is rich, the ink is near-black
   navy, and every surface carries a hairline gold inlay the way a real
   certificate has a rule inside its border.

   PALETTE
     paper   #fffdf8 -> #f7f0e0        warm ivory, never flat white
     gold    #a97f2c -> #e6cd8f        the frame and the rules
     ink     #14263f                   navy, for every word
   ══════════════════════════════════════════════════════════════════════ */

.om-lux {
  --lux-paper-0: #fffdf8;
  --lux-paper-1: #fdf8ec;
  --lux-paper-2: #f7f0e0;
  --lux-gold-0:  #a97f2c;
  --lux-gold-1:  #c9973d;
  --lux-gold-2:  #e6cd8f;
  --lux-gold-3:  #f3e3b8;
  --lux-ink:     #14263f;
  --lux-ink-2:   #3d5170;
  --lux-ink-3:   #6b7c96;
  --lux-rule:    rgba(169, 127, 44, .30);
}

/* ── the panel ─────────────────────────────────────────────────────── */
.om-lux,
#creditsModal.om-lux {
  position: relative;
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, #fffdf8, transparent 60%),
    linear-gradient(180deg, var(--lux-paper-0), var(--lux-paper-2)) !important;
  border: 1px solid var(--lux-gold-1) !important;
  color: var(--lux-ink) !important;
  box-shadow:
    0 24px 70px rgba(20, 38, 63, .22),
    0 2px 10px rgba(20, 38, 63, .08),
    inset 0 1px 0 #fff !important;
}

/* A hairline gold inlay, the way a real certificate has a rule inside the
   frame. This is the detail that stops it reading as "a dark dialog". */
.om-lux::before {
  content: '';
  position: absolute; inset: 5px;
  border: 1px solid var(--lux-rule);
  border-radius: inherit;
  pointer-events: none;
}

/* ── type ──────────────────────────────────────────────────────────── */
.om-lux .om-dlg-title,
.om-lux h2,
.om-lux h3 {
  color: var(--lux-ink) !important;            /* 13.9:1 on ivory */
  text-shadow: none;
}
.om-lux .om-dlg-body,
.om-lux p,
.om-lux li,
.om-lux span { color: var(--lux-ink-2) !important; }   /* 7.4:1 */
.om-lux strong,
.om-lux b { color: var(--lux-ink) !important; font-weight: 800; }
.om-lux em { color: var(--lux-gold-0) !important; font-style: normal; font-weight: 700; }
.om-lux code {
  background: #fff !important;
  border: 1px solid var(--lux-rule) !important;
  color: var(--lux-gold-0) !important;
}

/* ── the emblem ────────────────────────────────────────────────────── */
.om-lux .om-dlg-emblem,
.om-lux .om-help-owl,
.om-lux .om-phone-owl {
  background: radial-gradient(circle at 34% 28%, #fff6dc, var(--lux-gold-1)) !important;
  border: 1px solid var(--lux-gold-0) !important;
  color: var(--lux-ink) !important;
  box-shadow:
    0 4px 14px rgba(169, 127, 44, .28),
    inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

/* ── rules and rows ────────────────────────────────────────────────── */
.om-lux .om-first-steps li,
.om-lux .om-help-topic,
.om-lux .om-dlg-actions,
.om-lux .om-tips li { border-color: var(--lux-rule) !important; }

.om-lux .om-first-n {
  background: linear-gradient(160deg, #fff6dc, var(--lux-gold-1)) !important;
  border: 1px solid var(--lux-gold-0) !important;
  color: var(--lux-ink) !important;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(169, 127, 44, .25);
}

.om-lux .om-help-i {
  background: #fff !important;
  border: 1px solid var(--lux-rule) !important;
  color: var(--lux-gold-0) !important;
}
.om-lux .om-help-topic[open] > summary .om-help-i {
  background: linear-gradient(160deg, #fff6dc, var(--lux-gold-1)) !important;
  border-color: var(--lux-gold-0) !important;
  color: var(--lux-ink) !important;
}
.om-lux .om-help-topic > summary { color: var(--lux-ink) !important; font-weight: 700; }
.om-lux .om-help-topic > summary:hover { color: var(--lux-gold-0) !important; }
.om-lux .om-help-topic[open] > summary { color: var(--lux-gold-0) !important; }

/* ── inputs ────────────────────────────────────────────────────────── */
.om-lux .om-help-search,
.om-lux input[type="search"],
.om-lux input[type="text"] {
  background: #fff !important;
  border: 1px solid var(--lux-rule) !important;
  color: var(--lux-ink) !important;
}
.om-lux .om-help-search::placeholder,
.om-lux input::placeholder { color: var(--lux-ink-3) !important; }
.om-lux .om-help-search:focus,
.om-lux input:focus {
  border-color: var(--lux-gold-1) !important;
  box-shadow: 0 0 0 3px rgba(201, 151, 61, .18) !important;
  outline: none;
}

/* ── buttons ───────────────────────────────────────────────────────── */
.om-lux .om-btn-gold {
  background: linear-gradient(180deg, var(--lux-gold-2), var(--lux-gold-1)) !important;
  border: 1px solid var(--lux-gold-0) !important;
  color: var(--lux-ink) !important;              /* 6.0:1 on gold */
  font-weight: 800 !important;
  box-shadow: 0 3px 12px rgba(169, 127, 44, .3),
              inset 0 1px 0 rgba(255, 255, 255, .6) !important;
}
.om-lux .om-btn-gold:hover { filter: brightness(1.06); }

.om-lux .om-btn-quiet,
.om-lux .om-btn {
  background: #fff !important;
  border: 1px solid var(--lux-rule) !important;
  color: var(--lux-ink) !important;
  font-weight: 700 !important;
}
.om-lux .om-btn-quiet:hover,
.om-lux .om-btn:hover {
  background: #fdf6e6 !important;
  border-color: var(--lux-gold-1) !important;
}
.om-lux .om-btn-ghost {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--lux-ink-3) !important;
}
.om-lux .om-btn-ghost:hover {
  background: #fff !important;
  color: var(--lux-ink) !important;
}

.om-lux .om-help-x {
  background: #fff !important;
  border: 1px solid var(--lux-rule) !important;
  color: var(--lux-ink-2) !important;
}
.om-lux .om-help-x:hover {
  background: #fdf6e6 !important;
  border-color: var(--lux-gold-1) !important;
  color: var(--lux-ink) !important;
}

.om-lux .om-dlg-check { color: var(--lux-ink-2) !important; }
.om-lux .om-dlg-check input { accent-color: var(--lux-gold-1); }

.om-lux .om-dlg-note,
.om-lux .om-help-empty {
  background: #fff !important;
  border: 1px solid var(--lux-rule) !important;
  color: var(--lux-ink-2) !important;
}

/* ── the guide drawer ──────────────────────────────────────────────── */
.om-help.om-lux {
  border-left: 2px solid var(--lux-gold-1) !important;
  border-radius: 0;
}
.om-help.om-lux::before { display: none; }
.om-help.om-lux .om-help-head {
  border-bottom: 1px solid var(--lux-rule) !important;
  background: linear-gradient(180deg, #fffdf8, transparent) !important;
}
.om-help.om-lux .om-help-head p { color: var(--lux-gold-0) !important; font-weight: 700; }

/* The drawer's own scroll bar, in gold. */
.om-help.om-lux .om-help-body::-webkit-scrollbar { width: 5px; }
.om-help.om-lux .om-help-body::-webkit-scrollbar-track { background: transparent; }
.om-help.om-lux .om-help-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--lux-gold-2), var(--lux-gold-1));
  border-radius: 3px;
}

/* ── THE CREDITS WINDOW ────────────────────────────────────────────────
   Rebuilt, not patched.

   The original markup is entirely inline-styled for a dark theme, and it
   contains an absolutely-positioned hairline-border <div> at inset:5px.
   My first attempt blanket-styled `#creditsModal > div`, which turned that
   overlay into a white sheet covering the whole window — that is why the
   credits went blank.

   So owlmark-help.js now REPLACES the contents with markup we own, and
   this styles it. No fighting inline styles, no accidents.
   ──────────────────────────────────────────────────────────────────── */
#creditsOverlay.om-lux-scrim {
  background: rgba(20, 38, 63, .38) !important;
  backdrop-filter: blur(5px) !important;
}

#creditsModal.om-lux {
  width: min(440px, 92vw) !important;
  padding: 0 !important;
  border-radius: 20px !important;
  border: 1px solid var(--lux-gold-1) !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse 130% 60% at 50% 0%, #fffefb, transparent 62%),
    linear-gradient(180deg, var(--lux-paper-0), var(--lux-paper-2)) !important;
  box-shadow:
    0 0 0 5px rgba(201, 151, 61, .10),
    0 34px 90px rgba(20, 38, 63, .28) !important;
}
#creditsModal.om-lux::before { display: none; }   /* we draw our own rule */

/* the crest sits on a soft gold wash, like a seal on paper */
.omc-crown {
  position: relative;
  padding: 30px 24px 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(201, 151, 61, .10), transparent);
  border-bottom: 1px solid var(--lux-rule);
}
.omc-crown img {
  width: min(190px, 62%);
  height: auto;
  filter: drop-shadow(0 10px 26px rgba(20, 38, 63, .22));
}

/* a real engraved rule — three marks, the way a certificate is ruled */
.omc-rule {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 16px auto 0;
  color: var(--lux-gold-1);
}
.omc-rule i {
  display: block; height: 1px; width: 54px;
  background: linear-gradient(90deg, transparent, var(--lux-gold-1));
}
.omc-rule i + i { background: linear-gradient(90deg, var(--lux-gold-1), transparent); }
.omc-rule b { font-size: 9px; letter-spacing: 3px; font-style: normal; }

.omc-body { padding: 22px 26px 26px; }

.omc-card {
  border: 1px solid var(--lux-rule);
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 1px 0 #fff, 0 2px 10px rgba(20, 38, 63, .05);
  padding: 22px 20px;
  text-align: center;
}
.omc-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--lux-gold-0);
  margin-bottom: 10px;
}
.omc-name {
  font-family: 'Playfair Display', 'Cinzel', serif;
  font-size: 25px; font-weight: 800; letter-spacing: .3px;
  color: var(--lux-ink);
  line-height: 1.2;
}
.omc-role {
  font-size: 13px; font-style: italic;
  color: var(--lux-gold-0);
  margin-top: 3px;
}
.omc-div {
  height: 1px; margin: 16px auto;
  width: 70%;
  background: linear-gradient(90deg, transparent, var(--lux-rule), transparent);
}
.omc-name-ar {
  font-family: 'Amiri', serif;
  font-size: 23px; font-weight: 700;
  direction: rtl;
  color: var(--lux-ink);
}
.omc-role-ar {
  font-family: 'Amiri', serif;
  font-size: 13.5px; font-style: italic;
  direction: rtl;
  color: var(--lux-gold-0);
  margin-top: 2px;
}
.omc-foot {
  margin: 16px 0 0;
  text-align: center;
  font-size: 11px; letter-spacing: .4px;
  color: var(--lux-ink-3);
}
.omc-foot a { color: var(--lux-gold-0); text-decoration: none; font-weight: 700; }
.omc-foot a:hover { text-decoration: underline; }

#creditsModal.om-lux .omc-x {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 999px; cursor: pointer;
  background: #fff;
  border: 1px solid var(--lux-rule);
  color: var(--lux-ink-2);
  font-size: 13px; line-height: 1;
  z-index: 2;
}
#creditsModal.om-lux .omc-x:hover {
  background: #fdf6e6;
  border-color: var(--lux-gold-1);
  color: var(--lux-ink);
}
#creditsModal.om-lux .omc-x:focus-visible {
  outline: 2px solid var(--lux-gold-1); outline-offset: 2px;
}

/* The scrim stays LIGHT. A dark curtain is what made this feel heavy. */
.om-dlg-scrim:has(.om-lux),
.om-help-scrim:has(.om-lux) {
  background: rgba(20, 38, 63, .30);
  backdrop-filter: blur(3px);
}

@media print {
  .om-lux { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .om-lux .om-btn-gold:hover { filter: none; }
}