/*
 * INN Lebanon — modern theme layer.
 * Sits on top of Bootstrap 5 RTL. Loaded only by pages that have been
 * migrated to the new design (see header2.tpl / footer2.tpl). Prefixed
 * `ib-` throughout so it never collides with the legacy skeleton/custom
 * CSS still used by not-yet-migrated pages.
 */

/* The theme's original headline font ('inn') is kept for titles; body copy,
   nav, meta and UI chrome move to Cairo. Same font files the old theme
   already shipped — see css/fonts.css — just referenced from here too. */
@font-face{
  font-family:'inn';
  src:url('fonts/inn.ttf') format('truetype'),
      url('fonts/inn.eot') format('embedded-opentype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

:root{
  --ib-ink:#1c1613;
  --ib-ink-soft:#5b5250;
  --ib-ink-faint:#8a807d;
  --ib-paper:#fffdfb;
  --ib-paper-alt:#f6f1ee;
  --ib-line:#e8e0dc;
  --ib-brand:#d8271f;
  --ib-brand-dark:#a81b15;
  --ib-brand-soft:#fdeceb;
  --ib-font-body:'Cairo',Tahoma,Arial,sans-serif;
  --ib-font-title:'inn',Tahoma,Arial,sans-serif;
  --bs-body-font-family:'Cairo',Tahoma,Arial,sans-serif;
}

.ib-root{
  font-family:var(--ib-font-body);
  background:var(--ib-paper);
  color:var(--ib-ink);
}
/* Bare tag selector (not `.ib-root a`) is deliberate: it keeps this reset's
   specificity at (0,0,0,1) so any single-class component rule below —
   .ib-live-btn, .ib-seeall, .ib-nav-link, etc. — overrides it without
   needing !important or extra class-stacking. */
a{ color:inherit; text-decoration:none; }
.ib-root img{ max-width:100%; }
.ib-root h1, .ib-root h2, .ib-root h3,
.ib-card-title, .ib-section-title, .ib-vtitle{
  font-family:var(--ib-font-title);
}

/* ---------- Header ---------- */
.ib-topbar{ background:var(--ib-ink); color:#cfc7c3; font-size:12.5px; }
.ib-topbar .container{ padding-top:8px; padding-bottom:8px; }
.ib-topbar a{ color:#cfc7c3; }
.ib-topbar a:hover{ color:#fff; }
.ib-icon-btn{
  width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#cfc7c3;
}
.ib-icon-btn:hover{ color:#fff; }

.ib-mainbar{ background:var(--ib-paper); border-bottom:1px solid var(--ib-line); padding:16px 0; }
.ib-logo{ display:flex; align-items:center; gap:12px; }

.ib-search{
  display:flex; align-items:center; gap:8px; background:var(--ib-paper-alt);
  border:1px solid var(--ib-line); border-radius:999px; padding:8px 16px; flex:1; max-width:380px;
}
.ib-search input{
  border:0; background:transparent; flex:1; font-size:14px; color:var(--ib-ink);
  font-family:inherit; outline:0;
}
.ib-search input::placeholder{ color:var(--ib-ink-faint); }
.ib-search button{ border:0; background:transparent; color:var(--ib-ink-faint); display:flex; }

.ib-live-btn{
  display:flex; align-items:center; gap:8px; background:var(--ib-brand); color:#fff;
  padding:10px 20px; border-radius:999px; font-weight:700; font-size:14px; flex:none; border:0;
}
.ib-live-btn:hover{ color:#fff; background:var(--ib-brand-dark); }
@keyframes ib-pulse{ 0%{box-shadow:0 0 0 0 rgba(255,255,255,.55);} 70%{box-shadow:0 0 0 7px rgba(255,255,255,0);} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0);} }
.ib-live-dot{ width:8px; height:8px; border-radius:50%; background:#fff; animation:ib-pulse 1.8s infinite; flex:none; }

.ib-nav{ background:#f1f1f1; border-bottom:1px solid var(--ib-line); font-family:var(--ib-font-title); }
.ib-nav .container{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.ib-nav-link{
  position:relative; padding:14px 2px; font-size:18px; font-weight:700; color:var(--ib-ink);
  white-space:nowrap; border-bottom:3px solid transparent; display:inline-block;
  font-family:var(--ib-font-title);
}
.ib-nav-link:hover, .ib-nav-link.active{ color:var(--ib-brand); border-bottom-color:var(--ib-brand); }
/* the legacy getNewsCategoriesTree() model call emits raw <li><a>...</a>
   (+ nested <ul class="dropdown-menu sub-menu"> for children) — style it
   to match without needing a template rewrite of that HTML. Font-family is
   set explicitly everywhere here rather than relying on inherited from
   body, since this raw HTML block gets no class of its own to hang a
   scoped rule off other than these tag selectors. */
.ib-nav ul#nav{ list-style:none; display:flex; align-items:center; flex-wrap:wrap; gap:12px 26px; margin:0; padding:10px 0; font-family:var(--ib-font-title); }
.ib-nav ul#nav > li{ position:relative; }
.ib-nav ul#nav > li > a{
  position:relative; padding:14px 2px; font-size:18px; font-weight:700; color:var(--ib-ink);
  white-space:nowrap; display:inline-block; border-bottom:3px solid transparent;
  font-family:var(--ib-font-title);
}
.ib-nav ul#nav > li > a:hover, .ib-nav ul#nav > li.active > a{ color:var(--ib-brand); border-bottom-color:var(--ib-brand); }
/* Top-level dropdown (level 2). getNewsCategoriesTree()'s output nests
   arbitrarily deep — a level-3+ list is plain `<ul class=sub-menu>` (no
   "dropdown-menu" class, see NewsModel::getAllChildren()) — so every rule
   below targets the shared `.sub-menu` class, not `.dropdown-menu`, and
   `li.has-sub` (its own li wrapper class) triggers the flyout the same
   way `ul#nav > li` does for level 2. */
.ib-nav ul#nav .sub-menu{
  list-style:none; margin:0; padding:8px; position:absolute; top:100%; right:0; z-index:20;
  background:#fff; border:1px solid var(--ib-line); border-radius:10px; min-width:200px;
  box-shadow:0 16px 32px -16px rgba(28,22,19,.25); display:none; font-family:var(--ib-font-title);
}
.ib-nav ul#nav > li:hover > .sub-menu{ display:block; }
.ib-nav ul#nav .sub-menu li{ position:relative; }
.ib-nav ul#nav .sub-menu li.has-sub:hover > .sub-menu{ display:block; }
/* Level 3+ flyouts open to the side (right:100%) instead of stacking
   below, so a submenu doesn't run off past its parent's own dropdown. */
.ib-nav ul#nav .sub-menu .sub-menu{ top:-8px; right:100%; margin-inline-end:4px; }
.ib-nav ul#nav .sub-menu li a{ display:block; padding:8px 12px; border-radius:6px; font-size:16px; color:var(--ib-ink); font-family:var(--ib-font-title); white-space:nowrap; }
.ib-nav ul#nav .sub-menu li a:hover{ background:var(--ib-brand-soft); color:var(--ib-brand); }
.ib-nav ul#nav .sub-menu li.has-sub > a::after{
  content:'‹'; float:right; margin-inline-start:8px; color:var(--ib-ink-faint);
}
.ib-nav ul.dropdown-menu.sub-menu li a:hover{ background:var(--ib-brand-soft); color:var(--ib-brand); }
.ib-nav .caret{ display:none; } /* legacy bootstrap-3 caret span, not needed visually */

/* ---------- Mobile nav (hamburger + collapsed vertical menu) ----------
   Below 992px the horizontal, hover-driven menu above doesn't work: there's
   no room for it to wrap legibly and touch has no hover to reveal the
   `.sub-menu` flyouts. custom.js toggles `.ib-nav.is-open` from the button
   below, and adds `.open` on tap for level-3 `li.has-sub` (level-2 already
   toggles via Bootstrap's own `data-bs-toggle="dropdown"` + `.show`, wired
   server-side in NewsModel::viewTree()). */
.ib-nav-toggle{
  display:none; align-items:center; gap:10px; background:transparent; border:0;
  padding:14px 2px; font-size:16px; font-weight:700; color:var(--ib-ink); font-family:var(--ib-font-title);
}
.ib-nav-toggle-bars, .ib-nav-toggle-bars::before, .ib-nav-toggle-bars::after{
  display:block; width:22px; height:2px; background:var(--ib-ink); border-radius:2px; transition:transform .18s, opacity .18s;
}
.ib-nav-toggle-bars{ position:relative; }
.ib-nav-toggle-bars::before, .ib-nav-toggle-bars::after{ content:''; position:absolute; right:0; }
.ib-nav-toggle-bars::before{ top:-6px; }
.ib-nav-toggle-bars::after{ top:6px; }
.ib-nav.is-open .ib-nav-toggle-bars{ background:transparent; }
.ib-nav.is-open .ib-nav-toggle-bars::before{ top:0; transform:rotate(45deg); }
.ib-nav.is-open .ib-nav-toggle-bars::after{ top:0; transform:rotate(-45deg); }

@media (max-width:991.98px){
  .ib-nav-toggle{ display:flex; }

  .ib-nav ul#nav{
    display:none; flex-direction:column; align-items:stretch; gap:0;
    width:100%; padding:4px 0 14px; max-height:calc(100vh - 60px); overflow-y:auto;
  }
  .ib-nav.is-open ul#nav{ display:flex; }

  .ib-nav ul#nav > li{ width:100%; border-top:1px solid var(--ib-line); }
  /* flex + space-between pushes the expand icon to the row's far (left)
     edge instead of sitting right beside the title text. Bootstrap's own
     `.dropdown-toggle::after` triangle is reused as that icon — the
     `<span class="caret">` from the raw model markup stays hidden (see the
     unconditional `.ib-nav .caret{display:none}` above) so there's only
     ever one indicator, not two. */
  .ib-nav ul#nav > li > a{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    width:100%; padding:13px 2px; border-bottom:0;
  }
  .ib-nav ul#nav > li > a:hover, .ib-nav ul#nav > li.active > a{ border-bottom-color:transparent; }
  .ib-nav ul#nav > li > a.dropdown-toggle::after{ margin:0; transition:transform .15s; }
  .ib-nav ul#nav > li > a.dropdown-toggle[aria-expanded="true"]::after{ transform:rotate(180deg); }

  /* flyouts become static, full-width, tap-opened panels instead of
     absolutely-positioned hover popups. `!important` on `position`/etc. is
     required for the level-2 (Bootstrap-driven) menu: it gets a
     Popper-computed inline position/transform the moment
     data-bs-toggle="dropdown" opens it, which would otherwise override this
     plain stylesheet rule and float the panel off to the side again.
     `!important` on `display` is required too: mobile browsers commonly
     leave `:hover` "stuck" on the tapped `<li>` after a touch, and the
     hover-suppression rule just below happens to carry one more type
     selector (`li`) than a plain `.sub-menu.show` rule would — making it
     *more* specific and able to win the display tug-of-war on its own. */
  .ib-nav ul#nav .sub-menu{
    position:static !important; inset:auto !important; top:auto !important; right:auto !important;
    transform:none !important; box-shadow:none; border:0; border-radius:0;
    background:var(--ib-paper-alt); min-width:0; width:100%; padding:4px 0; margin:0 0 6px;
  }
  .ib-nav ul#nav > li:hover > .sub-menu,
  .ib-nav ul#nav .sub-menu li.has-sub:hover > .sub-menu{ display:none; } /* no real hover on touch */
  .ib-nav ul#nav .sub-menu.show,
  .ib-nav ul#nav .sub-menu li.has-sub.open > .sub-menu{ display:block !important; }
  .ib-nav ul#nav .sub-menu .sub-menu{ top:auto; right:auto; margin-inline-end:0; padding-inline-start:14px; }
  .ib-nav ul#nav .sub-menu li a{
    display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px;
  }
  .ib-nav ul#nav .sub-menu li.has-sub > a::after{ float:none; margin-inline-start:0; transition:transform .15s; }
  .ib-nav ul#nav .sub-menu li.has-sub.open > a::after{ transform:rotate(-90deg); }
}

.ib-ticker{ background:var(--ib-brand); color:#fff; }
.ib-ticker .container{ display:flex; align-items:center; gap:14px; padding:9px 0; }
.ib-ticker-badge{ background:#fff; color:var(--ib-brand); font-weight:800; font-size:12.5px; padding:3px 12px; border-radius:999px; flex:none; }
.ib-ticker marquee, .ib-ticker-track{ font-size:14px; font-weight:600; flex:1; }
.ib-ticker a{ color:#fff; }

/* ---------- Section heading ---------- */
.ib-section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; gap:12px; flex-wrap:wrap; }
.ib-section-title{ font-size:22px; font-weight:800; color:var(--ib-ink); margin:0; padding-right:14px; border-right:5px solid var(--ib-brand); }
.ib-section-title.ib-small{ font-size:15px; border-right-width:4px; padding-right:12px; }
.ib-seeall{ font-size:13.5px; font-weight:700; color:var(--ib-brand); }

/* ---------- Cards ---------- */
.ib-card{ display:block; transition:transform .18s, box-shadow .18s; }
.ib-card:hover{ transform:translateY(-3px); }
.ib-card:hover .ib-card-title{ color:var(--ib-brand); }
.ib-card-title{ color:var(--ib-ink); }
.ib-ph{ background:linear-gradient(135deg,#f0e9e5,#e2d7d1); display:flex; align-items:center; justify-content:center; }

.ib-card-lg{ position:relative; border-radius:14px; overflow:hidden; height:100%; min-height:420px; }
.ib-card-lg:hover{ box-shadow:0 16px 32px -16px rgba(28,22,19,.25); }
.ib-card-lg .ib-ph{ position:absolute; inset:0; }
.ib-card-lg .ib-scrim{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(15,10,8,.88) 0%,rgba(15,10,8,.35) 55%,rgba(15,10,8,0) 100%); }
.ib-card-lg .ib-body{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; }
.ib-card-lg .ib-card-title{ color:#fff; font-size:28px; line-height:1.4; font-weight:800; margin:0 0 12px; }
.ib-card-lg .ib-meta{ color:rgba(255,255,255,.75); font-size:13.5px; font-weight:500; }

/* ---------- Homepage hero: main (horizontal) + secondary (vertical) sliders ---------- */
.ib-hero-slide{ position:relative; border-radius:14px; overflow:hidden; display:block; height:100%; }
.ib-hero-main .carousel-item, .ib-hero-main .ib-hero-slide{ min-height:440px; }
.ib-hero-second{ flex:1; }
.ib-hero-second .carousel-item, .ib-hero-second .ib-hero-slide, .ib-hero-second .carousel-inner{ height:100%; min-height:200px; }
.ib-hero-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ib-hero-slide .ib-scrim{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(15,10,8,.88) 0%,rgba(15,10,8,.3) 55%,rgba(15,10,8,0) 100%); }
.ib-hero-slide .ib-body{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:24px; }
.ib-hero-main .ib-card-title{ color:#fff; font-size:26px; line-height:1.45; font-weight:800; margin:0 0 10px; }
.ib-hero-second .ib-card-title{ color:#fff; font-size:16px; line-height:1.5; font-weight:700; margin:0 0 6px; }
.ib-hero-main .carousel-indicators{ margin-bottom:0.75rem; }
.ib-hero-main .carousel-control-prev, .ib-hero-main .carousel-control-next{ width:44px; }
.ib-hero-main .carousel-control-prev-icon, .ib-hero-main .carousel-control-next-icon{ width:1.6rem; height:1.6rem; }
/* Bootstrap ships no vertical carousel — override the slide-transition
   transforms from translateX to translateY so .ib-hero-second slides
   top-to-bottom instead of side-to-side. */
.ib-hero-second.carousel-slide-vertical .carousel-item-next:not(.carousel-item-start),
.ib-hero-second.carousel-slide-vertical .active.carousel-item-end{
  transform:translateY(100%);
}
.ib-hero-second.carousel-slide-vertical .carousel-item-prev:not(.carousel-item-end),
.ib-hero-second.carousel-slide-vertical .active.carousel-item-start{
  transform:translateY(-100%);
}
.ib-hero-second.carousel-slide-vertical .carousel-item.active,
.ib-hero-second.carousel-slide-vertical .carousel-item-next,
.ib-hero-second.carousel-slide-vertical .carousel-item-prev{
  transform:translateX(0);
}

.ib-card-md{ display:block; background:#fff; border:1px solid var(--ib-line); border-radius:14px; overflow:hidden; height:100%; }
.ib-card-md:hover{ box-shadow:0 16px 32px -16px rgba(28,22,19,.25); }
.ib-card-md .ib-ph{ aspect-ratio:4/2.6; }
.ib-card-md .ib-body{ padding:18px; }
.ib-card-md .ib-card-title{ margin:0 0 10px; font-size:17px; line-height:1.55; font-weight:700; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ib-card-md .ib-meta{ color:var(--ib-ink-faint); font-size:12.5px; }

.ib-card-sm{ display:flex; align-items:flex-start; gap:14px; }
.ib-card-sm .ib-ph{ width:84px; height:84px; border-radius:10px; flex:none; }
.ib-card-sm .ib-body{ flex:1; padding-top:2px; }
.ib-card-sm .ib-card-title{ margin:6px 0 8px; font-size:14.5px; line-height:1.55; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ib-card-sm .ib-meta{ color:var(--ib-ink-faint); font-size:12px; }

.ib-badge-cat{
  display:inline-block; background:var(--ib-brand-soft); color:var(--ib-brand);
  font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px;
}
.ib-badge-cat.ib-on-image{ background:var(--ib-brand); color:#fff; font-size:12.5px; padding:5px 14px; }
.ib-badge-cat-sm{ color:var(--ib-brand); font-size:12px; font-weight:700; }

/* ---------- Grids ---------- */
.ib-grid{ display:grid; gap:22px; }
.ib-grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.ib-grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:991.98px){ .ib-grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .ib-grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:575.98px){ .ib-grid-4, .ib-grid-3{ grid-template-columns:1fr; } }

/* ---------- Video thumbs ---------- */
.ib-vcard{ position:relative; border-radius:12px; overflow:hidden; display:block; }
.ib-vph{ background:linear-gradient(135deg,#efe8e4,#ded2cb); display:flex; align-items:center; justify-content:center; }
.ib-vcard .ib-scrim-b{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(15,10,8,.7) 0%,rgba(15,10,8,0) 45%); }
.ib-play{
  position:absolute; top:50%; right:50%; transform:translate(50%,-50%);
  width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
}
.ib-vcard .ib-duration{ position:absolute; bottom:10px; left:10px; background:rgba(0,0,0,.65); color:#fff; font-size:11.5px; padding:2px 8px; border-radius:5px; }
.ib-vcard .ib-vtitle{ position:absolute; bottom:12px; right:14px; left:70px; color:#fff; font-size:14px; font-weight:700; line-height:1.4; }

/* ---------- Ad slots ---------- */
/* Ad slots are only ever rendered by the .tpl when the ad call returns
   something (an {if} wraps the whole block) — that's the reliable way to
   collapse an empty slot; whitespace/newlines in the template source mean
   a CSS :empty selector alone won't catch it. */
.ib-ad-slot{ text-align:center; margin:8px 0; }
.ib-ad-slot .ib-ad-label{ display:block; font-size:11px; color:var(--ib-ink-faint); margin-bottom:6px; letter-spacing:.5px; }

/* ---------- Newsletter band ---------- */
.ib-newsletter{ background:var(--ib-brand); }
.ib-newsletter .form-control{ min-width:240px; }

/* ---------- Footer ---------- */
.ib-footer{ background:var(--ib-ink); color:#cfc7c3; }
.ib-footer a{ color:#cfc7c3; }
.ib-footer a:hover{ color:#fff; }
.ib-fcol-title{ font-size:14px; font-weight:700; color:#fff; margin:0 0 16px; }
.ib-fbottom{ border-top:1px solid rgba(255,255,255,.1); font-size:12.5px; color:#a89f9b; }
.ib-fsocial{
  width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.08);
  display:inline-flex; align-items:center; justify-content:center; color:#cfc7c3;
}
.ib-fsocial:hover{ color:#fff; }
/* footer category list — same raw <li> HTML source as the nav (getNewsCategoriesTree).
   Bootstrap's .dropdown-menu is position:absolute/hidden-by-default, which is right
   for a hover popup in the nav but wrong here — the footer just wants a plain,
   always-visible nested list, so those rules are reset below. */
.ib-footer .ib-flist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ib-footer .ib-flist a{ font-size:14px; }
.ib-footer .ib-flist ul,
.ib-footer .ib-flist .dropdown-menu{
  list-style:none; margin:8px 0 0; padding-inline-start:16px; display:flex; flex-direction:column; gap:8px;
  position:static; inset:auto; transform:none; background:transparent; border:0; box-shadow:none; min-width:0;
}
.ib-footer .ib-flist .caret{ display:none; }
.ib-footer .ib-flist .dropdown-toggle::after{ vertical-align:middle; }

/* ---------- Sidebar column: stays in view while its taller neighbour scrolls ---------- */
.ib-sidebar-sticky{ position:sticky; top:20px; align-self:flex-start; }

/* ---------- Ticker marquee fallback niceties ---------- */
.ib-ticker marquee{ color:#fff; }
.ib-ticker marquee a:hover{ text-decoration:underline; }

/* ---------- Breadcrumb (wraps legacy raw <li> HTML from getCatPathWithLinks) ---------- */
.ib-crumb{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:0; margin:0 0 22px; font-size:13.5px; color:var(--ib-ink-faint); }
.ib-crumb li{ display:flex; align-items:center; gap:8px; }
.ib-crumb li:not(:last-child)::after{ content:'/'; margin-inline-start:8px; color:var(--ib-line); }
.ib-crumb a:hover{ color:var(--ib-brand); }
.ib-crumb li:last-child{ color:var(--ib-ink); }

/* ---------- Misc ---------- */
.ib-tag{ background:var(--ib-paper-alt); color:var(--ib-ink-soft); font-size:13px; font-weight:600; padding:6px 16px; border-radius:999px; display:inline-block; }
.ib-pullquote{ border-right:4px solid var(--ib-brand); background:var(--ib-paper-alt); padding:24px 28px; border-radius:0 12px 12px 0; margin:32px 0; font-size:21px; line-height:1.75; font-weight:700; color:var(--ib-ink); }
.ib-body p{ font-size:17.5px; line-height:2.05; color:#2c2622; }
.ib-chip{ padding:8px 20px; border-radius:999px; font-size:13.5px; font-weight:700; border:1px solid var(--ib-line); color:var(--ib-ink-soft); background:#fff; }
.ib-chip.active{ background:var(--ib-brand); color:#fff; border-color:var(--ib-brand); }
.ib-pagination{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.ib-pagination :where(a,span){ min-width:38px; height:38px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--ib-ink-soft); border:1px solid var(--ib-line); padding:0 4px; }
.ib-pagination :where(a):hover{ border-color:var(--ib-brand); color:var(--ib-brand); }
.ib-pagination .current, .ib-pagination span.current{ background:var(--ib-brand); color:#fff; border-color:var(--ib-brand); }
.ib-pagination .disabled{ opacity:.4; border-color:transparent; }