/* =====================================================================
   lawskw PRO design system  (lx- prefix, isolated)
   Inspired by the reference analysis: ONE brand color used sparingly,
   neutral-first pages, one motion curve, brand-tinted soft shadows,
   a fixed radius scale. Loaded only on redesigned pages.
   ===================================================================== */
:root {
  /* Palette — identity kept: lawskw navy + gold, neutrals do the work */
  --lx-navy:        #0C4A6E;
  --lx-navy-deep:   #083A57;
  --lx-navy-soft:   #EAF2F7;   /* washed navy for chips/hover fills   */
  --lx-gold:        #C9A227;
  --lx-gold-soft:   #FBF6E7;
  --lx-ink:         #212329;   /* near-black text, easier than #000   */
  --lx-ink-2:       #5B6470;   /* secondary text                      */
  --lx-line:        #E7EAEE;   /* hairlines                           */
  --lx-bg:          #F6F7F9;   /* page wash                           */
  --lx-card:        #FFFFFF;
  --lx-green:       #1E8E5A;   /* status: ساري                        */
  --lx-red:         #C43D3D;   /* status: ملغي                        */

  /* System — one curve, one shadow family, one radius scale */
  --lx-ease:        cubic-bezier(0.23, 0.48, 0.26, 0.94);
  --lx-t:           all .3s var(--lx-ease);
  --lx-sh-1:        0 1px 2px rgba(12, 74, 110, .06);
  --lx-sh-2:        0 6px 18px rgba(12, 74, 110, .10);
  --lx-sh-3:        0 14px 34px rgba(12, 74, 110, .14);
  --lx-r-s:         8px;
  --lx-r-m:         12px;
  --lx-r-l:         18px;
}

/* ---------- primitives ---------- */
.lx-wrap        { font-family: 'Almarai', 'Segoe UI', Tahoma, sans-serif; color: var(--lx-ink); }
.lx-wrap *      { letter-spacing: 0; }
.lx-muted       { color: var(--lx-ink-2); }
.lx-card        { background: var(--lx-card); border: 1px solid var(--lx-line); border-radius: var(--lx-r-m);
                  box-shadow: var(--lx-sh-1); transition: var(--lx-t); }
.lx-card:hover  { box-shadow: var(--lx-sh-2); border-color: #D8DEE5; }

.lx-sec-title   { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.lx-sec-title h2{ font-size: 1.35rem; font-weight: 800; color: var(--lx-navy); margin: 0; }
.lx-sec-title::after { content: ''; flex: 1; height: 1px; background: var(--lx-line); }
.lx-sec-title .lx-more { font-size: .85rem; font-weight: 700; color: var(--lx-navy); text-decoration: none;
                  white-space: nowrap; transition: var(--lx-t); }
.lx-sec-title .lx-more:hover { color: var(--lx-gold); }

/* ---------- action bar (law page) ---------- */
.lx-actions     { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lx-act         { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
                  border-radius: 50%; border: 1px solid var(--lx-line); background: #fff; color: var(--lx-navy);
                  font-size: 1.05rem; cursor: pointer; text-decoration: none; transition: var(--lx-t); position: relative; }
.lx-act:hover   { background: var(--lx-navy); color: #fff; border-color: var(--lx-navy); box-shadow: var(--lx-sh-2); }
.lx-act.lx-on   { color: #C9A227; }
.lx-act[data-lx-tip]::after { content: attr(data-lx-tip); position: absolute; bottom: -34px; right: 50%;
                  transform: translateX(50%) translateY(-4px); background: var(--lx-ink); color: #fff; font-size: .72rem;
                  padding: 4px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none;
                  transition: var(--lx-t); z-index: 60; }
.lx-act:hover::after { opacity: 1; transform: translateX(50%) translateY(0); }

/* share popover */
.lx-share-pop   { position: absolute; top: 48px; left: 0; background: #fff; border: 1px solid var(--lx-line);
                  border-radius: var(--lx-r-m); box-shadow: var(--lx-sh-3); padding: 10px; display: none; z-index: 70; }
.lx-share-pop.lx-open { display: flex; gap: 8px; }
.lx-share-pop a { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center;
                  justify-content: center; color: var(--lx-navy); background: var(--lx-navy-soft); font-size: 1rem;
                  text-decoration: none; transition: var(--lx-t); }
.lx-share-pop a:hover { background: var(--lx-navy); color: #fff; }

/* ---------- trust line ---------- */
.lx-trust       { display: inline-flex; align-items: center; gap: 8px; background: var(--lx-gold-soft);
                  border: 1px solid #EFE3BC; color: #7A6215; border-radius: 999px; padding: 6px 14px;
                  font-size: .82rem; font-weight: 700; }
.lx-trust i     { color: var(--lx-gold); }

/* ---------- metadata cards ---------- */
.lx-meta        { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0 6px; }
.lx-meta .lx-m  { background: #fff; border: 1px solid var(--lx-line); border-radius: var(--lx-r-m); padding: 12px 14px;
                  transition: var(--lx-t); position: relative; overflow: hidden; }
.lx-meta .lx-m::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px;
                  background: var(--lx-navy); opacity: .85; }
.lx-meta .lx-m:hover { box-shadow: var(--lx-sh-2); transform: translateY(-2px); }
.lx-meta p      { margin: 0 0 4px; font-size: .74rem; font-weight: 700; color: var(--lx-ink-2); }
.lx-meta h4     { margin: 0; font-size: 1rem; font-weight: 800; color: var(--lx-ink); }
.lx-meta a      { text-decoration: none; color: inherit; display: block; }
.lx-meta .lx-m.lx-link h4 { color: var(--lx-navy); }
.lx-badge-live  { color: var(--lx-green) !important; }
.lx-badge-dead  { color: var(--lx-red) !important; }

/* ---------- two-pane reading layout ---------- */
.lx-read        { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 991px) { .lx-read { grid-template-columns: 1fr; } }

.lx-index       { position: sticky; top: 84px; max-height: calc(100vh - 104px); display: flex; flex-direction: column;
                  background: #fff; border: 1px solid var(--lx-line); border-radius: var(--lx-r-m); box-shadow: var(--lx-sh-1); }
.lx-index-head  { padding: 12px 14px; border-bottom: 1px solid var(--lx-line); font-weight: 800; color: var(--lx-navy);
                  display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.lx-index-search{ padding: 10px 12px; border-bottom: 1px solid var(--lx-line); display: flex; gap: 6px; }
.lx-index-search input { flex: 1; border: 1px solid var(--lx-line); border-radius: var(--lx-r-s); padding: 7px 10px;
                  font-size: .85rem; font-family: inherit; outline: none; transition: var(--lx-t); }
.lx-index-search input:focus { border-color: var(--lx-navy); box-shadow: 0 0 0 3px rgba(12,74,110,.10); }
.lx-index-search button { border: none; background: var(--lx-navy); color: #fff; border-radius: var(--lx-r-s);
                  width: 36px; cursor: pointer; transition: var(--lx-t); }
.lx-index-search button:hover { background: var(--lx-navy-deep); }
.lx-index-list  { overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: #C6CFD8 transparent; }
.lx-index-list a{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px;
                  border-radius: var(--lx-r-s); color: var(--lx-ink-2); text-decoration: none; font-size: .84rem;
                  font-weight: 700; transition: var(--lx-t); }
.lx-index-list a:hover { background: var(--lx-navy-soft); color: var(--lx-navy); }
.lx-index-list a.lx-cur { background: var(--lx-navy); color: #fff; }
.lx-index-list a.lx-hidden { display: none; }
.lx-index-count { padding: 8px 14px; border-top: 1px solid var(--lx-line); font-size: .75rem; color: var(--lx-ink-2); }
.lx-cite-badge  { min-width: 26px; padding: 1px 7px; border-radius: 999px; background: var(--lx-gold-soft);
                  color: #7A6215; font-size: .7rem; font-weight: 800; text-align: center; }
.lx-index-list a.lx-cur .lx-cite-badge { background: rgba(255,255,255,.22); color: #fff; }

/* law body */
.lx-body        { background: #fff; border: 1px solid var(--lx-line); border-radius: var(--lx-r-m);
                  box-shadow: var(--lx-sh-1); padding: 26px 28px; line-height: 2.05; font-size: 1rem; }
.lx-body p      { margin-bottom: .55rem; }
.lx-art         { scroll-margin-top: 96px; font-weight: 800; color: var(--lx-navy); background: var(--lx-navy-soft);
                  border-radius: var(--lx-r-s); padding: 6px 12px !important; margin-top: 1.1rem; }
mark.lx-hl      { background: #FCE9A9; color: inherit; padding: 0 2px; border-radius: 3px; }
.lx-nores       { display: none; padding: 14px; color: var(--lx-ink-2); font-size: .85rem; text-align: center; }

/* ---------- homepage: stats counters ---------- */
.lx-stats       { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.lx-stat        { background: #fff; border: 1px solid var(--lx-line); border-radius: var(--lx-r-m); padding: 18px;
                  text-align: center; transition: var(--lx-t); }
.lx-stat:hover  { box-shadow: var(--lx-sh-2); transform: translateY(-3px); }
.lx-stat .lx-n  { font-size: 1.9rem; font-weight: 800; color: var(--lx-navy); line-height: 1.2; }
.lx-stat .lx-l  { font-size: .85rem; font-weight: 700; color: var(--lx-ink-2); margin-top: 2px; }
.lx-stat i      { font-size: 1.4rem; color: var(--lx-gold); margin-bottom: 6px; display: block; }

/* ---------- homepage: category cards ---------- */
.lx-cats        { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.lx-cat         { position: relative; display: block; background: #fff; border: 1px solid var(--lx-line);
                  border-radius: var(--lx-r-m); padding: 18px 16px 16px; text-decoration: none; overflow: hidden;
                  transition: var(--lx-t); }
.lx-cat::after  { content: ''; position: absolute; inset-inline-start: 0; bottom: 0; height: 3px; width: 0;
                  background: var(--lx-gold); transition: var(--lx-t); }
.lx-cat:hover   { box-shadow: var(--lx-sh-2); transform: translateY(-3px); border-color: #D8DEE5; }
.lx-cat:hover::after { width: 100%; }
.lx-cat i       { font-size: 1.5rem; color: var(--lx-navy); background: var(--lx-navy-soft); width: 44px; height: 44px;
                  border-radius: var(--lx-r-s); display: inline-flex; align-items: center; justify-content: center; }
.lx-cat h3      { font-size: .98rem; font-weight: 800; color: var(--lx-ink); margin: 12px 0 4px; }
.lx-cat .lx-c   { font-size: .8rem; color: var(--lx-ink-2); font-weight: 700; }
.lx-cat .lx-c strong { color: var(--lx-navy); }

/* ---------- homepage: top-5 numbered lists ---------- */
.lx-top5s       { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.lx-top5        { background: #fff; border: 1px solid var(--lx-line); border-radius: var(--lx-r-m); overflow: hidden; }
.lx-top5 .lx-h  { padding: 13px 16px; font-weight: 800; color: #fff; background: var(--lx-navy); font-size: .95rem;
                  display: flex; align-items: center; gap: 8px; }
.lx-top5 .lx-h i{ color: var(--lx-gold); }
.lx-top5 ol     { list-style: none; margin: 0; padding: 6px 0; }
.lx-top5 li a   { display: flex; align-items: flex-start; gap: 12px; padding: 10px 16px; color: var(--lx-ink);
                  text-decoration: none; font-size: .88rem; line-height: 1.7; transition: var(--lx-t); }
.lx-top5 li + li a { border-top: 1px solid var(--lx-line); }
.lx-top5 li a:hover { background: var(--lx-navy-soft); }
.lx-top5 .lx-no { flex: 0 0 26px; height: 26px; border-radius: 8px; background: var(--lx-navy-soft); color: var(--lx-navy);
                  font-weight: 800; font-size: .82rem; display: inline-flex; align-items: center; justify-content: center;
                  margin-top: 2px; }
.lx-top5 li a:hover .lx-no { background: var(--lx-gold); color: #fff; }
.lx-top5 .lx-t  { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- footer trust strip ---------- */
.lx-truststrip  { background: #fff; border-top: 1px solid var(--lx-line); padding: 12px 0; font-size: .82rem; }
.lx-truststrip .lx-in { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap;
                  color: var(--lx-ink-2); font-weight: 700; }
.lx-truststrip strong { color: var(--lx-navy); }
.lx-truststrip i { color: var(--lx-gold); margin-inline-end: 4px; }

/* ---------- rulings side panel (article citations) ---------- */
.lx-panel       { position: fixed; top: 0; inset-inline-start: 0; height: 100vh; width: min(420px, 92vw); background: #fff;
                  z-index: 1200; box-shadow: var(--lx-sh-3); transform: translateX(-105%); transition: transform .35s var(--lx-ease);
                  display: flex; flex-direction: column; }
[dir="rtl"] .lx-panel { transform: translateX(-105%); }
.lx-panel.lx-open { transform: translateX(0); }
.lx-panel-head  { padding: 16px 18px; background: var(--lx-navy); color: #fff; font-weight: 800; display: flex;
                  align-items: center; justify-content: space-between; }
.lx-panel-head button { background: none; border: none; color: #fff; font-size: 1.3rem; cursor: pointer; }
.lx-panel-body  { overflow-y: auto; padding: 12px; }
.lx-panel-body a, .lx-panel-body .lx-item { display: block; padding: 11px 13px; border: 1px solid var(--lx-line); border-radius: var(--lx-r-s);
                  margin-bottom: 8px; color: var(--lx-ink); text-decoration: none; font-size: .85rem; line-height: 1.8;
                  transition: var(--lx-t); }
.lx-panel-body a:hover { border-color: var(--lx-navy); background: var(--lx-navy-soft); }
.lx-panel-body .lx-code { font-weight: 800; color: var(--lx-navy); display: block; font-size: .8rem; }
.lx-overlay     { position: fixed; inset: 0; background: rgba(12,74,110,.35); z-index: 1150; opacity: 0;
                  pointer-events: none; transition: var(--lx-t); }
.lx-overlay.lx-open { opacity: 1; pointer-events: auto; }

/* motion-reduce respect */
@media (prefers-reduced-motion: reduce) { .lx-wrap *, .lx-panel, .lx-overlay { transition: none !important; } }
.art-anchor { scroll-margin-top: 96px; }

/* ---------- homepage: hero ---------- */
.lx-hero        { background: linear-gradient(135deg, #06283D 0%, var(--lx-navy-deep) 45%, var(--lx-navy) 100%);
                  color: #fff; padding: 56px 0 64px; position: relative; overflow: hidden; }
.lx-hero::before{ content: ''; position: absolute; inset: 0; opacity: .05; pointer-events: none;
                  background: radial-gradient(circle at 15% 20%, #fff 0, transparent 42%),
                              radial-gradient(circle at 85% 80%, #fff 0, transparent 38%); }
.lx-hero .lx-in { position: relative; max-width: 760px; margin: 0 auto; text-align: center; padding: 0 16px; }
.lx-hero h1     { font-size: 1.85rem; font-weight: 800; color: #fff; margin: 0 0 10px; line-height: 1.6; }
.lx-hero .lx-sub{ color: #C8D8E4; font-size: .95rem; font-weight: 700; margin: 0 0 26px; }
.lx-hero-search { display: flex; background: #fff; border-radius: var(--lx-r-m); box-shadow: var(--lx-sh-3);
                  overflow: hidden; }
.lx-hero-search input { flex: 1; border: none; outline: none; padding: 16px 18px; font-size: .95rem;
                  font-family: inherit; color: var(--lx-ink); min-width: 0; }
.lx-hero-search button { border: none; background: var(--lx-gold); color: #fff; font-weight: 800; font-size: .92rem;
                  padding: 0 26px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
                  transition: var(--lx-t); }
.lx-hero-search button:hover { background: #B3901F; }
.lx-chips       { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.lx-chips a     { color: #E3EDF4; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
                  border-radius: 999px; padding: 5px 14px; font-size: .78rem; font-weight: 700; text-decoration: none;
                  transition: var(--lx-t); }
.lx-chips a:hover { background: #fff; color: var(--lx-navy); }

/* ---------- homepage: section rhythm + gazette strip ---------- */
.lx-home section { margin: 40px 0; }
.lx-home .lx-stats { margin-top: -36px; position: relative; z-index: 2; }
.lx-gaz         { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.lx-gaz a       { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--lx-line);
                  border-radius: var(--lx-r-m); padding: 16px; text-decoration: none; color: var(--lx-ink);
                  transition: var(--lx-t); }
.lx-gaz a:hover { box-shadow: var(--lx-sh-2); transform: translateY(-3px); }
.lx-gaz i       { font-size: 1.6rem; color: var(--lx-navy); background: var(--lx-navy-soft); width: 48px; height: 48px;
                  border-radius: var(--lx-r-s); display: inline-flex; align-items: center; justify-content: center;
                  flex: 0 0 48px; }
.lx-gaz h3      { font-size: .95rem; font-weight: 800; margin: 0 0 3px; color: var(--lx-navy); }
.lx-gaz p       { margin: 0; font-size: .78rem; color: var(--lx-ink-2); font-weight: 700; }

/* ---------- motion layer: pulsing icons + hero art ---------- */
@keyframes lx-pulse { 0% { box-shadow: 0 0 0 0 rgba(201,162,39,.32); }
                      70% { box-shadow: 0 0 0 14px rgba(201,162,39,0); }
                      100% { box-shadow: 0 0 0 0 rgba(201,162,39,0); } }
@keyframes lx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes lx-sway   { 0%, 100% { transform: rotate(2.4deg); } 50% { transform: rotate(-2.4deg); } }
@keyframes lx-sway-r { 0%, 100% { transform: rotate(-2.4deg); } 50% { transform: rotate(2.4deg); } }
@keyframes lx-drift  { from { transform: translate(0, 0); } to { transform: translate(42px, 26px); } }

/* stats: icon becomes a soft gold chip with a breathing pulse ring (staggered) */
.lx-stat i      { width: 52px; height: 52px; border-radius: 50%; background: var(--lx-gold-soft);
                  display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 8px;
                  animation: lx-pulse 3.4s var(--lx-ease) infinite; }
.lx-stat:nth-child(2) i { animation-delay: .45s; }
.lx-stat:nth-child(3) i { animation-delay: .9s; }
.lx-stat:nth-child(4) i { animation-delay: 1.35s; }

/* category / gazette icons: lively but restrained hover */
.lx-cat i, .lx-gaz i { transition: var(--lx-t); }
.lx-cat:hover i { transform: translateY(-4px) rotate(-8deg) scale(1.08); background: var(--lx-gold-soft); }
.lx-gaz a:hover i { transform: translateY(-3px) scale(1.06); background: var(--lx-gold-soft); }

/* hero: two-column grid (copy + animated art), art hidden on mobile */
.lx-hero-grid   { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 20px; display: grid;
                  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
.lx-hero-grid .lx-chips { justify-content: flex-start; }
.lx-hero-art    { position: relative; }
.lx-hero-art svg{ width: 100%; max-width: 350px; display: block; margin: 0 auto; }
@media (max-width: 991px) {
  .lx-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .lx-hero-grid .lx-chips { justify-content: center; }
  .lx-hero-art  { display: none; }
}

/* hero: slow drifting light orbs behind the content */
.lx-orb         { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .16; pointer-events: none; }
.lx-orb1        { width: 340px; height: 340px; background: #3FA0DB; top: -120px; inset-inline-start: -70px;
                  animation: lx-drift 16s ease-in-out infinite alternate; }
.lx-orb2        { width: 280px; height: 280px; background: var(--lx-gold); bottom: -150px; inset-inline-end: -50px;
                  animation: lx-drift 20s ease-in-out infinite alternate-reverse; }

/* scales-of-justice line art: beam sways, pans counter-rotate to stay level, docs float */
.lxs-beam       { transform-origin: 170px 70px; animation: lx-sway 7s ease-in-out infinite; }
.lxs-pan-l      { transform-origin: 70px 70px;  animation: lx-sway-r 7s ease-in-out infinite; }
.lxs-pan-r      { transform-origin: 270px 70px; animation: lx-sway-r 7s ease-in-out infinite; }
.lxs-doc1       { animation: lx-float 5.5s ease-in-out infinite; }
.lxs-doc2       { animation: lx-float 6.5s ease-in-out 1.2s infinite; }

@media (prefers-reduced-motion: reduce) {
  .lx-wrap *, .lx-panel, .lx-overlay { transition: none !important; animation: none !important; }
}

/* ---------- motion v2: sheen sweep, particles, parallax, scroll reveal ---------- */
@keyframes lx-sheen   { 0% { inset-inline-start: -18%; } 55%, 100% { inset-inline-start: 112%; } }
@keyframes lx-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .95; } }

/* a soft light band sweeps across the hero every ~9s */
.lx-hero::after { content: ''; position: absolute; top: -60%; bottom: -60%; width: 130px;
                  background: linear-gradient(105deg, transparent, rgba(255,255,255,.065), transparent);
                  transform: rotate(14deg); animation: lx-sheen 9s ease-in-out infinite; pointer-events: none; }

/* gold particles: independent float + twinkle rhythms */
.lxs-p          { animation: lx-float 6s ease-in-out infinite, lx-twinkle 5s ease-in-out infinite; }
.lxs-p2         { animation-delay: .8s, 1.6s; animation-duration: 7s, 4.4s; }
.lxs-p3         { animation-delay: 1.4s, .6s; animation-duration: 5.4s, 6s; }
.lxs-p4         { animation-delay: 2.1s, 2.4s; animation-duration: 6.6s, 5.2s; }
.lxs-p5         { animation-delay: .4s, 3s;   animation-duration: 7.4s, 4.8s; }

/* parallax layers follow the cursor (JS sets the transform; keep it smooth) */
.lx-hero-art [data-lx-depth] { transition: transform .35s var(--lx-ease); will-change: transform; }

/* refined pulse: slower, softer, warmer chip */
.lx-stat i      { background: linear-gradient(150deg, #FBF6E7, #F3E3AE); color: #8F721A;
                  animation-duration: 4s; }

/* scroll reveal: sections rise gently into view (JS adds .lx-in; no-JS stays visible) */
.lx-reveal      { opacity: 0; transform: translateY(20px);
                  transition: opacity .65s var(--lx-ease), transform .65s var(--lx-ease); }
.lx-reveal.lx-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lx-hero::after { animation: none !important; display: none; }
  .lx-reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- category tiles v3: gold chip + description + count footer ---------- */
.lx-cats        { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.lx-cat         { padding: 22px 20px 16px; }
.lx-cat-ic      { width: 54px; height: 54px; border-radius: 50%; font-size: 1.55rem; color: #8F721A;
                  background: linear-gradient(150deg, #FBF6E7, #F3E3AE); display: inline-flex;
                  align-items: center; justify-content: center; transition: var(--lx-t); }
.lx-cat:hover .lx-cat-ic { animation: lx-pulse 1.8s var(--lx-ease) infinite; transform: translateY(-3px); }
.lx-cat h3      { font-size: 1.02rem; color: var(--lx-navy); margin: 14px 0 5px; }
.lx-cat-d       { font-size: .8rem; color: var(--lx-ink-2); line-height: 1.75; margin: 0 0 14px; min-height: 2.9em; }
.lx-cat-f       { display: flex; justify-content: space-between; align-items: baseline;
                  border-top: 1px solid var(--lx-line); padding-top: 12px; }
.lx-cat-n       { font-weight: 800; font-size: 1.3rem; color: var(--lx-navy); }
.lx-cat-n small { font-size: .72rem; font-weight: 700; color: var(--lx-ink-2); }
.lx-go          { font-size: .78rem; font-weight: 800; color: var(--lx-navy); transition: var(--lx-t); }
.lx-cat:hover .lx-go { color: #B3901F; transform: translateX(-4px); }
.lx-cat:hover .lx-cat-n { color: #B3901F; }

/* ---------- trust strip v2: navy band echoing the hero ---------- */
.lx-truststrip  { background: var(--lx-navy-deep); border-top: none; padding: 20px 0; color: #C8D8E4; }
.lx-truststrip strong { color: #fff; }
.lx-truststrip i { color: var(--lx-gold); }
/* neutralize the v1 icon-hover rule inside the new chip */
.lx-cat .lx-cat-ic i, .lx-cat:hover .lx-cat-ic i { background: none; transform: none; }

/* ---------- emblem animation origins (lawskw logo geometry) ---------- */
.lxs-beam       { transform-origin: 180px 42px; }
.lxs-pan-l      { transform-origin: 86px 57px; }
.lxs-pan-r      { transform-origin: 274px 57px; }

/* ---------- section listing page (lx-l*) ---------- */
.lx-lhero       { background: linear-gradient(135deg, #06283D 0%, var(--lx-navy-deep) 45%, var(--lx-navy) 100%);
                  color: #fff; padding: 30px 0 34px; }
.lx-bc          { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: #9DB8CA;
                  margin-bottom: 14px; flex-wrap: wrap; }
.lx-bc a        { color: #C8D8E4; text-decoration: none; transition: var(--lx-t); }
.lx-bc a:hover  { color: #fff; }
.lx-bc-cur      { color: #fff; font-weight: 700; }
.lx-lhero-row   { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.lx-lhero h1    { font-size: 1.55rem; font-weight: 800; color: #fff; margin: 0 0 10px; }
.lx-lq          { color: #F0D27A; }
.lx-count-pill  { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12);
                  border: 1px solid rgba(255,255,255,.22); color: #E3EDF4; border-radius: 999px;
                  padding: 5px 14px; font-size: .8rem; font-weight: 700; }
.lx-count-pill i{ color: var(--lx-gold); }
.lx-lsearch     { display: flex; background: #fff; border-radius: var(--lx-r-m); overflow: hidden;
                  box-shadow: var(--lx-sh-2); min-width: min(380px, 100%); }
.lx-lsearch input { flex: 1; border: none; outline: none; padding: 12px 16px; font-size: .88rem;
                  font-family: inherit; color: var(--lx-ink); min-width: 0; }
.lx-lsearch button { border: none; background: var(--lx-gold); color: #fff; padding: 0 18px; font-size: 1.05rem;
                  cursor: pointer; transition: var(--lx-t); }
.lx-lsearch button:hover { background: #B3901F; }

.lx-lbody       { padding: 22px 15px 46px; }
.lx-fchips      { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.lx-fchips a    { background: #fff; border: 1px solid var(--lx-line); color: var(--lx-ink-2); border-radius: 999px;
                  padding: 6px 16px; font-size: .8rem; font-weight: 700; text-decoration: none; transition: var(--lx-t); }
.lx-fchips a:hover { border-color: var(--lx-navy); color: var(--lx-navy); }
.lx-fchips a.lx-on { background: var(--lx-navy); border-color: var(--lx-navy); color: #fff; }
.lx-fyears a    { padding: 4px 13px; font-size: .76rem; }
.lx-flabel      { font-size: .78rem; font-weight: 800; color: var(--lx-ink-2); display: inline-flex;
                  align-items: center; gap: 5px; }
.lx-flabel i    { color: var(--lx-gold); }

.lx-lrows       { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.lx-lrow        { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--lx-line);
                  border-radius: var(--lx-r-m); padding: 16px 18px; text-decoration: none; color: var(--lx-ink);
                  box-shadow: var(--lx-sh-1); transition: var(--lx-t); position: relative; overflow: hidden; }
.lx-lrow::before{ content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px;
                  background: var(--lx-navy); opacity: 0; transition: var(--lx-t); }
.lx-lrow:hover  { box-shadow: var(--lx-sh-2); border-color: #D8DEE5; transform: translateY(-2px); }
.lx-lrow:hover::before { opacity: .9; }
.lx-lrow-main   { flex: 1; min-width: 0; }
.lx-ltags       { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.lx-tbadge      { background: var(--lx-navy); color: #fff; border-radius: 6px; padding: 2px 10px;
                  font-size: .72rem; font-weight: 800; }
.lx-npill       { background: var(--lx-gold-soft); border: 1px solid #EFE3BC; color: #7A6215; border-radius: 999px;
                  padding: 2px 11px; font-size: .72rem; font-weight: 800; }
.lx-spill       { border-radius: 999px; padding: 2px 11px; font-size: .72rem; font-weight: 800; }
.lx-spill.lx-live { background: #E7F6EE; color: var(--lx-green); border: 1px solid #C9E9D8; }
.lx-spill.lx-dead { background: #FBEBEB; color: var(--lx-red); border: 1px solid #F2CFCF; }
.lx-cpill       { background: var(--lx-navy-soft); color: var(--lx-navy); border-radius: 999px; padding: 2px 11px;
                  font-size: .72rem; font-weight: 800; }
.lx-lrow h3     { font-size: 1.02rem; font-weight: 800; color: var(--lx-ink); margin: 0 0 6px; line-height: 1.8; }
.lx-lrow:hover h3 { color: var(--lx-navy); }
.lx-lmeta       { display: flex; align-items: center; gap: 16px; font-size: .76rem; color: var(--lx-ink-2);
                  font-weight: 700; }
.lx-lmeta i     { color: var(--lx-gold); margin-inline-end: 3px; }
.lx-lsnippet    { margin: 10px 0 0; font-size: .82rem; line-height: 1.9; color: var(--lx-ink-2);
                  border-top: 1px dashed var(--lx-line); padding-top: 10px; }
.lx-lgo         { flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--lx-navy-soft);
                  color: var(--lx-navy); display: inline-flex; align-items: center; justify-content: center;
                  font-size: 1.25rem; transition: var(--lx-t); }
.lx-lrow:hover .lx-lgo { background: var(--lx-navy); color: #fff; transform: translateX(-4px); }

.lx-lempty      { text-align: center; padding: 60px 20px; background: #fff; border: 1px dashed var(--lx-line);
                  border-radius: var(--lx-r-m); }
.lx-lempty i    { font-size: 3rem; color: var(--lx-navy); background: var(--lx-navy-soft); width: 84px; height: 84px;
                  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
                  margin-bottom: 16px; }
.lx-lempty h3   { font-size: 1.05rem; font-weight: 800; color: var(--lx-ink); margin: 0 0 6px; }
.lx-lempty p    { color: var(--lx-ink-2); font-size: .85rem; margin: 0; }

.lx-lpaging     { display: flex; justify-content: center; padding-top: 28px; }
.lx-lpaging .pagination { gap: 6px; }
.lx-lpaging .page-link { border: 1px solid var(--lx-line); color: var(--lx-navy); border-radius: var(--lx-r-s) !important;
                  font-weight: 700; padding: 8px 14px; transition: var(--lx-t); }
.lx-lpaging .page-link:hover { background: var(--lx-navy-soft); }
.lx-lpaging .page-item.active .page-link { background: var(--lx-navy); border-color: var(--lx-navy); color: #fff; }
.lx-lpaging .page-item.disabled .page-link { color: #B4BCC6; }

@media (max-width: 767px) {
  .lx-lhero-row { align-items: stretch; }
  .lx-lsearch   { min-width: 100%; }
  .lx-lrow      { padding: 14px; }
  .lx-lgo       { display: none; }
}
/* listing meta: legal-status coloring (green ساري / red ملغي) */
.lx-lmeta .lx-mlive { color: var(--lx-green); font-weight: 800; }
.lx-lmeta .lx-mlive i { color: var(--lx-green); }
.lx-lmeta .lx-mdead { color: var(--lx-red); font-weight: 800; }
.lx-lmeta .lx-mdead i { color: var(--lx-red); }

/* ---------- rules + magazine listing extras ---------- */
.lx-lhero-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.lx-fletters a  { min-width: 40px; text-align: center; padding: 5px 10px; }
.lx-lnote       { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--lx-line);
                  border-inline-start: 3px solid var(--lx-gold); border-radius: var(--lx-r-m); padding: 18px 20px;
                  margin-top: 10px; box-shadow: var(--lx-sh-1); }
.lx-lnote i     { font-size: 1.5rem; color: var(--lx-gold); }
.lx-lnote p     { margin: 0 0 4px; font-weight: 700; color: var(--lx-ink); line-height: 1.9; }
.lx-lnote small { color: var(--lx-ink-2); font-size: .8rem; }
.lx-lrow .lx-no { flex: 0 0 30px; height: 30px; border-radius: 9px; background: var(--lx-navy-soft); color: var(--lx-navy);
                  font-weight: 800; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; }
.lx-lrow:hover .lx-no { background: var(--lx-gold); color: #fff; }

.lx-ftoolbar    { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff;
                  border: 1px solid var(--lx-line); border-radius: var(--lx-r-m); box-shadow: var(--lx-sh-1);
                  padding: 12px 16px; margin-bottom: 16px; }
.lx-ftoolbar label { font-size: .8rem; font-weight: 800; color: var(--lx-ink-2); display: inline-flex;
                  align-items: center; gap: 5px; margin: 0; }
.lx-ftoolbar label i { color: var(--lx-gold); }
.lx-ftoolbar select, .lx-ftoolbar input { border: 1px solid var(--lx-line); border-radius: var(--lx-r-s);
                  padding: 8px 12px; font-size: .82rem; font-family: inherit; color: var(--lx-ink); outline: none;
                  background: #fff; transition: var(--lx-t); }
.lx-ftoolbar select:focus, .lx-ftoolbar input:focus { border-color: var(--lx-navy); box-shadow: 0 0 0 3px rgba(12,74,110,.10); }
.lx-ftoolbar button { border: none; background: var(--lx-navy); color: #fff; border-radius: var(--lx-r-s);
                  padding: 9px 18px; font-size: .82rem; font-weight: 800; cursor: pointer; display: inline-flex;
                  align-items: center; gap: 6px; transition: var(--lx-t); }
.lx-ftoolbar button:hover { background: var(--lx-navy-deep); }
.lx-freset      { font-size: .78rem; font-weight: 700; color: var(--lx-ink-2); text-decoration: none; transition: var(--lx-t); }
.lx-freset:hover { color: var(--lx-red); }

.lx-lrow-static { cursor: default; }
.lx-lacts       { display: flex; align-items: center; gap: 8px; }
.lx-btn         { display: inline-flex; align-items: center; gap: 7px; background: var(--lx-navy); color: #fff;
                  border-radius: var(--lx-r-s); padding: 9px 16px; font-size: .82rem; font-weight: 800;
                  text-decoration: none; transition: var(--lx-t); white-space: nowrap; }
.lx-btn:hover   { background: var(--lx-navy-deep); color: #fff; box-shadow: var(--lx-sh-2); }
.lx-fav-on      { color: var(--lx-red); }
@media (max-width: 767px) {
  .lx-lrow-static { flex-direction: column; align-items: stretch; }
  .lx-lacts { justify-content: flex-end; }
}
/* issue-viewer hero actions: light variants on the navy band */
.lx-act-hero    { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; }
.lx-act-hero:hover { background: #fff; color: var(--lx-navy); border-color: #fff; }
.lx-act-hero .lx-fav-on { color: #FF8A8A; }
.lx-btn-gold    { background: var(--lx-gold); }
.lx-btn-gold:hover { background: #B3901F; }

/* ---------- lx pagination: explicit numbers, all breakpoints ---------- */
.lx-pg          { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
                  padding-top: 26px; }
.lx-pg-btn      { border: 1px solid var(--lx-line); background: #fff; color: var(--lx-navy); border-radius: var(--lx-r-s);
                  padding: 8px 16px; font-size: .82rem; font-weight: 800; text-decoration: none; transition: var(--lx-t); }
.lx-pg-btn:hover { background: var(--lx-navy); color: #fff; border-color: var(--lx-navy); }
.lx-pg-btn.lx-off { opacity: .4; pointer-events: none; }
.lx-pg-nums     { display: flex; align-items: center; gap: 6px; }
.lx-pg-nums a, .lx-pg-cur { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
                  border-radius: var(--lx-r-s); font-size: .85rem; font-weight: 800; text-decoration: none; }
.lx-pg-nums a   { color: var(--lx-ink-2); border: 1px solid var(--lx-line); background: #fff; transition: var(--lx-t); }
.lx-pg-nums a:hover { border-color: var(--lx-navy); color: var(--lx-navy); }
.lx-pg-cur      { background: var(--lx-navy); color: #fff; }
.lx-pg-dots     { color: var(--lx-ink-2); font-weight: 800; padding: 0 2px; }
.lx-pg-info     { text-align: center; color: var(--lx-ink-2); font-size: .76rem; font-weight: 700; margin: 10px 0 0; }

/* =====================================================================
   global chrome: top utility bar + main nav + search panel + footer
   ===================================================================== */
.lx-topbar      { background: #06283D !important; font-size: .8rem; }
.lx-topbar .img-ticker b, .lx-topbar h6 { font-size: .78rem !important; }
.lx-topbar .img-ticker > b:first-child { background: rgba(255,255,255,.10) !important; border-radius: 999px;
                  padding: 3px 12px !important; font-weight: 700; }
.lx-topbar h6 b:last-child { color: #F0D27A; }

.lx-nav         { background: linear-gradient(135deg, #06283D 0%, var(--lx-navy-deep) 55%, var(--lx-navy) 100%) !important;
                  position: sticky; top: 0; z-index: 1030; box-shadow: 0 2px 14px rgba(4,20,36,.35); }
.lx-nav .navbar-nav .nav-link { color: #E3EDF4 !important; font-weight: 700; font-size: .92rem;
                  padding: 22px 14px !important; position: relative; transition: var(--lx-t); }
.lx-nav .navbar-nav .nav-link::after { content: ''; position: absolute; bottom: 12px; inset-inline: 14px;
                  height: 2px; border-radius: 2px; background: var(--lx-gold); transform: scaleX(0);
                  transform-origin: center; transition: var(--lx-t); }
.lx-nav .navbar-nav .nav-link:hover, .lx-nav .navbar-nav .nav-link.active { color: #fff !important; }
.lx-nav .navbar-nav .nav-link:hover::after, .lx-nav .navbar-nav .nav-link.active::after { transform: scaleX(1); }
.lx-nav .dropdown-menu { border: none; border-radius: var(--lx-r-m) !important; box-shadow: var(--lx-sh-3);
                  padding: 8px; margin-top: 0 !important; }
.lx-nav .dropdown-item { border-radius: var(--lx-r-s); padding: 9px 14px; font-size: .86rem; font-weight: 700;
                  color: var(--lx-ink); transition: var(--lx-t); }
.lx-nav .dropdown-item:hover, .lx-nav .dropdown-item.active { background: var(--lx-navy-soft); color: var(--lx-navy); }
.lx-nav .navbar-brand img { transition: var(--lx-t); }

.lx-searchpanel { background: #06283D !important; border-top: 1px solid rgba(255,255,255,.08); }

/* ---------- footer ---------- */
.lx-foot        { background: var(--lx-navy-deep); color: #C8D8E4; border-top: 3px solid var(--lx-gold);
                  font-size: .86rem; }
.lx-foot .lx-foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.1fr; gap: 34px; padding: 44px 0 30px; }
@media (max-width: 991px) { .lx-foot .lx-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .lx-foot .lx-foot-grid { grid-template-columns: 1fr; } }
.lx-foot h5     { color: #fff; font-size: .95rem; font-weight: 800; margin: 0 0 16px; position: relative;
                  padding-bottom: 10px; }
.lx-foot h5::after { content: ''; position: absolute; bottom: 0; inset-inline-start: 0; width: 34px; height: 2px;
                  border-radius: 2px; background: var(--lx-gold); }
.lx-foot ul     { list-style: none; margin: 0; padding: 0; }
.lx-foot ul li  { margin-bottom: 10px; }
.lx-foot ul a   { color: #C8D8E4; text-decoration: none; transition: var(--lx-t); }
.lx-foot ul a:hover { color: #F0D27A; padding-inline-start: 4px; }
.lx-foot-brand img { height: 84px; width: auto; object-fit: contain; margin-bottom: 12px; }
.lx-foot-brand p { line-height: 1.9; color: #9DB8CA; margin: 0 0 14px; }
.lx-foot-social { display: flex; gap: 8px; }
.lx-foot-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08);
                  border: 1px solid rgba(255,255,255,.14); color: #E3EDF4; display: inline-flex; align-items: center;
                  justify-content: center; font-size: 1.05rem; text-decoration: none; transition: var(--lx-t); }
.lx-foot-social a:hover { background: var(--lx-gold); border-color: var(--lx-gold); color: #fff; transform: translateY(-3px); }
.lx-foot-partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lx-foot-partners span { background: #fff; border-radius: var(--lx-r-s); padding: 8px; display: flex;
                  align-items: center; justify-content: center; transition: var(--lx-t); }
.lx-foot-partners span:hover { transform: translateY(-3px); box-shadow: var(--lx-sh-2); }
.lx-foot-partners img { width: 100%; height: 56px; object-fit: contain; }
.lx-foot-bottom { background: #06283D; padding: 14px 0; }
.lx-foot-bottom p { margin: 0; text-align: center; font-size: .78rem; color: #9DB8CA; }

/* ---------- nav dropdown: bulletproof against legacy style.css rules ---------- */
.lx-nav .dropdown-menu { background: #fff !important; border: none !important; min-width: 14rem;
                  padding: 8px !important; top: 100% !important; }
.lx-nav .dropdown-menu::before { display: none !important; } /* legacy triangle floats oddly on the borderless menu */
.lx-nav .dropdown-menu a, .lx-nav .dropdown-item { display: block; color: var(--lx-ink) !important;
                  background: transparent; border-radius: var(--lx-r-s); padding: 9px 14px !important;
                  font-size: .86rem; font-weight: 700; }
.lx-nav .dropdown-menu a:hover, .lx-nav .dropdown-item:hover,
.lx-nav .dropdown-menu a.active, .lx-nav .dropdown-item.active { background: var(--lx-navy-soft) !important;
                  color: var(--lx-navy) !important; }

/* ---------- topbar account dropdown: stack ABOVE the sticky nav + lx skin ---------- */
.lx-topbar      { position: relative; z-index: 1040; }
.lx-topbar .dropdown-menu { background: #fff !important; border: none !important;
                  border-radius: var(--lx-r-m) !important; box-shadow: var(--lx-sh-3);
                  padding: 8px !important; z-index: 2000; min-width: 12rem; }
.lx-topbar .dropdown-menu::before { display: none !important; }
.lx-topbar .dropdown-menu a { display: block; color: var(--lx-ink) !important;
                  border-radius: var(--lx-r-s); padding: 9px 14px !important;
                  font-size: .84rem; font-weight: 700; }
.lx-topbar .dropdown-menu a:hover, .lx-topbar .dropdown-menu a.active {
                  background: var(--lx-navy-soft) !important; color: var(--lx-navy) !important; }

/* top5 columns: equal heights — rows flex to fill so all three boxes align */
.lx-top5        { display: flex; flex-direction: column; }
.lx-top5 ol     { flex: 1; display: flex; flex-direction: column; }
.lx-top5 li     { flex: 1; display: flex; }
.lx-top5 li a   { flex: 1; align-items: center; }