/* ============================================================
   IJAR — Indian Journal of Applied Research
   Premium Academic Journal · Blue + Gold · Poppins
   Design system per client-confirmed style guide.
   ============================================================ */
:root{
  --navy:#002B7F;        /* primary navy (sampled from design) */
  --dark:#001A4D;        /* dark blue (design) */
  --navy-bg:#001A4D;     /* navy background */
  --royal:#0056D6;       /* royal blue (design) */
  --royal-2:#1361BB;     /* royal accent (sampled) */
  --gold:#FAC121;        /* golden yellow (sampled from design) */
  --gold-2:#E6A90C;      /* gold hover */
  --gold-soft:#FFF6D6;
  --white:#ffffff;
  --light:#F7F8F9;       /* light background (design) */
  --border:#E6E8ED;      /* border (design) */
  --heading:#002B7F;
  --text:#1F2937;        /* primary text (design) */
  --text-2:#6B7280;
  --ltext:#D9E3F0;       /* light text on navy */
  --success:#16A34A;
  --ff:'Poppins',system-ui,'Segoe UI',sans-serif;
  --shadow:0 8px 30px rgba(0,0,0,.08);
  --shadow-hover:0 12px 40px rgba(0,0,0,.12);
  --shadow-sm:0 4px 14px rgba(0,0,0,.06);
  /* Fixed-width like the live site (worldwidejournals IJAR): viewport is width=1400,
     content container 1170px centered — page scales/zooms on mobile, no reflow. */
  --wrap:1170px;
  --wrap-lg:1170px;
}
*,*::before,*::after{box-sizing:border-box}*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--ff);color:var(--text);background:var(--white);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
button{font:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4,h5{color:var(--heading);font-weight:700;line-height:1.25}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px}

.wrap{width:min(100% - 30px,var(--wrap));margin-inline:auto}
.wrap-lg{width:min(100% - 30px,var(--wrap-lg));margin-inline:auto}
.sec{padding:34px 0}
.sec-sm{padding:28px 0}
.bg-light{background:var(--light)}
.center{text-align:center}

/* section headings */
.sec-head{text-align:center;max-width:760px;margin:0 auto 26px}
.sec-head.left{text-align:left;margin-left:0}
.eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2);margin-bottom:12px}
.sec-head h2{font-size:38px;color:var(--heading);letter-spacing:-.01em}
.sec-head p{margin-top:14px;font-size:16px;color:var(--text)}
.sec-head .bar{width:70px;height:4px;background:var(--gold);border-radius:4px;margin:16px auto 0}
.sec-head.left .bar{margin-left:0}
@media(max-width:768px){.sec-head h2{font-size:28px}.sec{padding:40px 0}}
@media(max-width:480px){.sec{padding:28px 0}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff);font-weight:600;font-size:15px;
  padding:14px 28px;border-radius:8px;transition:.25s ease;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em;min-height:50px;max-width:100%}
.btn i{font-size:.95em}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-2);transform:translateY(-2px);box-shadow:0 8px 22px -8px rgba(245,180,0,.6)}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-navy:hover{background:var(--dark);transform:translateY(-2px)}
.btn-royal{background:var(--royal);color:var(--white)}
.btn-royal:hover{background:var(--royal-2);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.85)}
.btn-outline:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn-outline-navy{background:transparent;color:var(--navy);border:1px solid var(--navy)}
.btn-outline-navy:hover{background:var(--navy);color:#fff}
.btn-lg{padding:13px 34px;font-size:15px}
.btn-block{width:100%;justify-content:center}
@media(max-width:480px){
  .btn{font-size:13px;padding:12px 20px;min-height:44px;gap:7px}
  .btn-lg{padding:12px 24px}
}

/* ===================== TOP BAR ===================== */
.topbar{background:var(--dark);color:#cdd8ee;font-size:13px;font-weight:500}
.topbar .wrap-lg{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:40px;flex-wrap:wrap}
.topbar .tb-l{display:flex;align-items:center;gap:14px}
.topbar .tb-r{display:flex;align-items:center;gap:16px}
.topbar .tb-sep{color:rgba(255,255,255,.32);font-weight:300}
.topbar a{color:#cdd8ee}.topbar a:hover{color:var(--gold)}
.topbar i{color:var(--gold);margin-right:6px}
.topbar .tb-r>a[href^="mailto"] i{color:#fff}
.topbar .socials{display:flex;gap:13px;margin-left:16px}
.topbar .socials a{width:26px;height:26px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;font-size:12px}
.topbar .socials a:hover{background:var(--gold);color:var(--dark)}
.topbar .socials i{color:inherit;margin:0}
@media(max-width:768px){
  .topbar .tb-l span:first-child{display:none}
  .topbar .wrap-lg{gap:6px;padding:4px 0}
  .topbar .tb-r{gap:10px;font-size:12px}
  .topbar .socials{margin-left:8px;gap:9px}
}
@media(max-width:480px){
  .topbar .socials{display:none}
  .topbar .tb-r .tb-sep{display:none}
  .topbar .tb-r{flex-wrap:wrap;gap:4px 8px;justify-content:flex-end}
  .topbar .tb-l{font-size:11px}
  .topbar .wrap-lg{min-height:0;padding:6px 0}
  .topbar .tb-r a{font-size:11px}
}
@media(max-width:360px){
  .topbar .tb-l{display:none}
}

/* ===================== LOGO BAR ===================== */
.logobar{background:#fff;border-bottom:1px solid var(--border)}
.logobar .wrap-lg{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;min-height:210px}
.brand{display:flex;align-items:center;gap:14px}
.brand .seal-wrap{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0}
.brand .seal-img{width:175px;height:175px;display:block}
.brand .jtag{font-size:12px;font-weight:500;background:var(--navy);color:#fff;padding:5px 18px;border-radius:20px;white-space:nowrap;letter-spacing:.01em;text-transform:capitalize}
.brand .bk{display:flex;flex-direction:column}
.brand .bk .ij-img{width:245px;height:auto;display:block;margin-bottom:9px}
.brand .bk .full{font-size:23px;font-weight:700;color:var(--navy);letter-spacing:.005em;margin-top:4px;display:block}
.brand .bk .meta{font-size:16px;color:var(--text-2);line-height:1.9;font-weight:500}
.brand .bk .meta:first-of-type{margin-top:8px}
@media(max-width:760px){.brand .jtag{display:none}}
.logo-right{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.lr-badges{display:flex;gap:10px;justify-content:flex-end}
.logo-right .btn{justify-content:center;min-height:46px;padding:12px 34px;align-self:flex-end;font-weight:700}
.lr-box{flex:0 0 205px;display:flex;align-items:center;gap:11px;border:1px solid var(--border);border-radius:10px;padding:14px 14px;background:#fff}
.lr-box i{width:38px;height:38px;border-radius:50%;background:#eaf0fb;color:var(--royal);display:grid;place-items:center;font-size:16px;flex-shrink:0}
.lr-box .t{font-size:15px;font-weight:700;color:var(--navy);line-height:1.2;letter-spacing:.01em;white-space:nowrap}
.lr-box .v{font-size:11.5px;font-weight:400;color:var(--text-2);line-height:1.25;white-space:nowrap;margin-top:4px}
@media(max-width:992px){.logo-right .lr-box{display:none}}
@media(max-width:768px){
  .logobar .wrap-lg{flex-wrap:wrap;justify-content:center;min-height:0;gap:14px;padding:14px 0}
  .logo-right{align-items:center;width:100%}
  .lr-badges{justify-content:center}
  .logo-right .btn{align-self:center;width:100%;max-width:320px}
  .brand{flex-wrap:wrap;justify-content:center;text-align:center}
  .brand .bk{align-items:center}
  .brand .bk .ij-img{width:200px}
  .brand .bk .full{font-size:18px;text-align:center}
  .brand .seal-img{width:130px;height:130px}
}
@media(max-width:480px){
  .brand .seal-img{width:100px;height:100px}
  .brand .bk .ij-img{width:160px}
  .brand .bk .full{font-size:15px}
  .brand .bk .meta{font-size:13px}
}

/* ===================== MAIN NAV ===================== */
.mainnav{background:linear-gradient(90deg,var(--dark),var(--navy));position:sticky;top:0;z-index:60;box-shadow:0 3px 14px rgba(0,0,0,.18)}
.mainnav .wrap-lg{display:flex;align-items:center;gap:4px}
.nav-home{width:54px;align-self:stretch;background:transparent;color:#fff;display:grid;place-items:center;font-size:18px;flex-shrink:0;transition:.2s}
.nav-home:hover{background:rgba(255,255,255,.08)}
.nav-home.active{background:var(--gold);color:var(--dark)}
.nav-home.active:hover{background:var(--gold-2)}
.menu{display:flex;align-items:stretch;flex:1}
.menu>li>a{display:flex;align-items:center;gap:7px;padding:0 14px;height:50px;color:#eaf0fb;font-size:15px;font-weight:500;letter-spacing:.01em;position:relative;transition:.2s}
.menu>li>a:hover{color:#fff;background:rgba(255,255,255,.07)}
.menu>li>a.active{color:var(--dark);background:var(--gold);font-weight:600}
.menu>li>a:hover::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--gold);border-radius:3px}
.nav-search{margin-left:auto;display:flex;align-items:center}
.nav-search a{width:46px;align-self:stretch;color:#eaf0fb;display:grid;place-items:center;font-size:15px}
.nav-search a:hover{color:var(--gold)}
.nav-toggle{display:none;color:#fff;font-size:20px;padding:0 16px;margin-left:auto}
@media(max-width:992px){
  .nav-toggle{display:block}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--navy);box-shadow:var(--shadow);max-height:calc(100dvh - 50px);overflow-y:auto;z-index:59}
  .mainnav.open .menu{display:flex}
  .menu>li>a{padding:14px 20px;border-top:1px solid rgba(255,255,255,.08);min-height:50px}
  .menu>li>a.active::after,.menu>li>a:hover::after{display:none}
  .nav-search{display:none}
  .mainnav .wrap-lg{flex-wrap:wrap}
}

/* ===================== HOME HERO ===================== */
.hero{
  /* ───── GLOBE CONTROLS — tweak these two values ─────────────────
     --globe-size : on-screen globe size.  LOWER = smaller globe.
     --globe-x    : horizontal position (0% = left … 100% = right). */
  --globe-size:350px;
  --globe-x:53%;
  --globe-y:center;
  /* per-page hero image — overridden inline via data-bg (see hero.js);
     defaults to the globe (hero-bg.png) */
  --hero-img:url("hero-bg.png");
  /* fill MUST equal the image's edge colour so it blends with no seam;
     overridable per-page via data-bgcolor */
  --hero-bg:#000e28;
  --hero-fill:none;            /* optional gradient behind the image (matches both edges) */
  --hero-size:auto var(--globe-size);
  position:relative;overflow:hidden;color:#fff;font-family:var(--ff);
  background-color:var(--hero-bg);
  background-image:var(--hero-img),var(--hero-fill);
  background-position:var(--globe-x) var(--globe-y),0 0;
  background-size:var(--hero-size),cover;
  background-repeat:no-repeat,no-repeat}
.hero .btn{font-family:inherit}
.hero .globe{display:none}
.hero .wrap-lg{position:relative;z-index:2;display:grid;grid-template-columns:1.22fr 1fr;gap:40px;align-items:center;padding:18px 12px;min-height:348px}
.hero-feats{margin-left:auto;width:max-content}
.hero .welcome{color:#fff;font-weight:600;font-size:18px;margin-bottom:8px}
.hero h1{color:#fff;font-size:48px;line-height:1.1;font-weight:700;letter-spacing:-.01em;font-family:var(--ff)}
.hero p.lead{color:#d7e2f5;font-size:17px;line-height:1.6;margin:12px 0 18px;max-width:46ch}
.hero-bar{display:block;width:64px;height:4px;background:var(--gold);border-radius:2px;margin:16px 0 16px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-cta .btn{padding:11px 16px;font-size:13px;min-height:42px;gap:7px;letter-spacing:.02em}
.hero-cta .btn i{font-size:.92em}
.hero-feats{display:flex;flex-direction:column;gap:8px}
.hf{display:flex;align-items:center;gap:13px;background:none;border:0;padding:2px 0}
.hf .ic{width:44px;height:44px;border-radius:50%;background:rgba(245,180,0,.08);border:2px solid var(--gold);color:var(--gold);
  display:grid;place-items:center;font-size:17px;flex-shrink:0;box-shadow:0 0 18px rgba(245,180,0,.22)}
.hf .ic i{font-size:18px;color:var(--gold)}
.hf b{display:block;color:#fff;font-size:15px;font-weight:600;line-height:1.25}
.hf span{font-size:12.5px;color:#aeb8c8}
@media(max-width:992px){.hero{--globe-size:220px;--globe-x:50%}.hero .wrap-lg{grid-template-columns:1fr;gap:28px;min-height:0;padding:40px 12px}.hero h1{font-size:40px}.hero .globe{opacity:.16;left:auto;right:-22%;width:520px}.hero::before{left:auto;right:-12%}.hero-feats{margin-left:0;width:100%}}
@media(max-width:768px){
  .hero h1{font-size:32px}
  .hero p.lead{font-size:15px}
  .hero .wrap-lg{padding:32px 12px}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
}
@media(max-width:480px){
  .hero h1{font-size:26px;letter-spacing:0}
  .hero .welcome{font-size:15px}
  .hero .wrap-lg{padding:24px 12px}
  .hero-cta{flex-direction:column;gap:10px}
  .hero-cta .btn{width:100%}
  .hf b{font-size:13px}
  .hf span{font-size:12px}
}

/* Inner-page hero illustration: full image shown on the RIGHT side, sized to
   the hero height and anchored to the right edge so it renders identically on
   every screen (per client "all images right side, follow sample theme"). */
.hero--inner{background-image:none}
/* anchor the illustration to the CONTENT CONTAINER (wrap-lg), not the full-bleed
   viewport, so its right edge lines up with the page's right content edge. */
.hero--inner .hero-copy{position:relative;z-index:2}
.hero--inner .wrap-lg::after{
  content:"";position:absolute;top:-18px;right:0;bottom:-18px;width:46%;
  background:var(--hero-img) right center/contain no-repeat;
  z-index:1;pointer-events:none;
}
@media(max-width:992px){
  /* on narrow screens the illustration would overlap the text — hide it */
  .hero--inner .wrap-lg::after{display:none}
}

/* ===================== INNER PAGE HERO ===================== */
.phero{position:relative;overflow:hidden;background:#0a1f47 url("hero-bg.png") right center/auto 100% no-repeat;color:#fff;text-align:left}
.phero::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 105% at 80% 50%,rgba(46,98,208,.30),transparent 70%);pointer-events:none}
.phero .wrap{position:relative;z-index:2;padding:50px 12px;display:flex;flex-direction:column;align-items:flex-start}
.phero .crumb{order:-1;justify-content:flex-start;margin:0 0 14px}
.phero h1{color:#fff;font-size:42px;font-weight:800;letter-spacing:-.01em;line-height:1.12}
.phero p{color:#d7e2f5;font-size:17px;max-width:48ch;margin:14px 0 0}
.crumb{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#cdd8ee;margin-top:18px}
.crumb a:hover{color:var(--gold)}.crumb i{font-size:10px;opacity:.7}
.crumb .here{color:#fff;font-weight:600}
.hero .crumb{margin:0 0 16px}
@media(max-width:768px){.phero h1{font-size:30px}.phero .wrap{padding:36px 12px}.phero p{font-size:15px}}
@media(max-width:480px){.phero h1{font-size:24px}.phero .wrap{padding:26px 12px}}

/* ===================== CARDS ===================== */
.card{background:#fff;border-radius:12px;box-shadow:var(--shadow);transition:.3s ease}
.card-b{border:1px solid var(--border)}
.hov:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.icard{padding:30px;text-align:center}
.icard .circle{width:70px;height:70px;border-radius:50%;background:#eef3fc;color:var(--navy);display:grid;place-items:center;font-size:26px;margin:0 auto 18px}
.icard.gold .circle{background:var(--gold-soft);color:var(--gold-2)}
.icard h3{font-size:18px;color:var(--heading);margin-bottom:8px}
.icard p{font-size:14px;color:var(--text)}

.grid{display:grid;gap:30px}
@media(max-width:768px){.grid{gap:18px}}
@media(max-width:480px){.grid{gap:14px}}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g6{grid-template-columns:repeat(6,1fr)}
@media(max-width:992px){.g4,.g6{grid-template-columns:repeat(3,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.g2,.g3,.g4,.g6{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.g2,.g3,.g4,.g6{grid-template-columns:1fr}}

/* ===================== HOME — SCOPE OF JOURNAL ===================== */
.scope-sec{padding:14px 0 6px}
.scope-intro{font-size:14.5px;color:var(--text-2);margin:0 0 14px;max-width:880px;line-height:1.6}
.scope-scroll{max-height:336px;overflow-y:auto;border:1px solid var(--border);border-radius:12px;padding:18px;background:#fff;box-shadow:0 2px 12px rgba(0,26,77,.06)}
.scope-scroll::-webkit-scrollbar{width:10px}
.scope-scroll::-webkit-scrollbar-track{background:#eef2f8;border-radius:8px}
.scope-scroll::-webkit-scrollbar-thumb{background:#b9c6dd;border-radius:8px;border:2px solid #eef2f8}
.scope-scroll::-webkit-scrollbar-thumb:hover{background:var(--royal)}
.scope-scroll{scrollbar-width:thin;scrollbar-color:#b9c6dd #eef2f8}
.scope-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:9px}
.scope-chip{display:flex;align-items:center;gap:9px;background:#f6f8fc;border:1px solid var(--border);border-radius:7px;padding:0 12px;height:42px;transition:.18s;cursor:default}
.scope-chip:hover{background:#eaf1fb;border-color:#cdd9ee}
.scope-chip i{color:var(--gold-2);font-size:12px;flex-shrink:0}
.scope-chip span{font-size:13px;font-weight:500;color:var(--navy);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.scope-count{font-size:13px;color:var(--text-2);margin:14px 0 0;text-align:center}
.scope-count b{color:var(--navy)}
@media(max-width:520px){.scope-grid{grid-template-columns:1fr 1fr}}
@media(max-width:380px){.scope-grid{grid-template-columns:1fr}}

/* ===================== UPDATES MARQUEE ===================== */
.updates-bar{padding:14px 0 0}
.ub-inner{display:flex;align-items:stretch;background:#eef1f5;border:1px solid var(--border);border-radius:8px;overflow:hidden;min-height:44px}
.ub-label{position:relative;display:flex;align-items:center;background:var(--navy);color:#fff;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:0 30px 0 20px;white-space:nowrap;flex-shrink:0;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.ub-track{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center;padding-left:6px}
.ub-marquee{display:inline-flex;align-items:center;gap:46px;white-space:nowrap;will-change:transform;animation:ub-scroll 38s linear infinite}
.ub-marquee:hover{animation-play-state:paused}
.ub-marquee span{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--navy);letter-spacing:.02em}
.ub-marquee span i{font-size:5px;color:var(--gold-2)}
@keyframes ub-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ub-marquee{animation:none}}
@media(max-width:480px){
  .ub-label{font-size:11px;padding:0 22px 0 12px}
  .ub-marquee{gap:28px}
  .ub-marquee span{font-size:12px}
}

/* ===================== STATS STRIP ===================== */
/* ===================== IMPACT / STAT BOXES ===================== */
.home-sec{padding:14px 0}
.statbox{padding:14px 0}
@media(max-width:480px){
  .home-sec,.statbox,.art-section,.eb-section,.scope-sec,.idx-sec{padding-top:10px;padding-bottom:10px}
}
.statbox .wrap-lg{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.sb-left{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;gap:18px}
.sb-right{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:18px}
.sb-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:16px 20px}
.sb-ic{width:50px;height:50px;border-radius:50%;background:#e9f0fc;color:var(--navy);display:grid;place-items:center;font-size:21px;flex-shrink:0}
.sb-tx b{display:block;font-size:24px;font-weight:700;color:var(--navy);line-height:1.1}
.sb-tx span{font-size:13px;color:var(--text-2);font-weight:500}
.sb-feature{min-height:96px;justify-content:center;padding:12px}
.sb-feature img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.sb-right .sb-card{background:var(--navy);border-color:var(--navy)}
.sb-right .sb-ic{background:rgba(255,255,255,.14);color:#fff}
.sb-right .sb-tx b{color:#fff}
.sb-right .sb-tx span{color:#bccbea}
@media(max-width:768px){.statbox .wrap-lg{grid-template-columns:1fr}.sb-left,.sb-right{grid-template-columns:1fr 1fr}.sb-right{grid-template-rows:auto auto}}
@media(max-width:480px){
  .sb-tx b{font-size:20px}
  .sb-card{padding:14px 14px}
  .sb-ic{width:42px;height:42px;font-size:18px}
}
@media(max-width:360px){
  .sb-left,.sb-right{grid-template-columns:1fr}
}

/* ===================== CTA SECTION ===================== */
.cta{background:linear-gradient(135deg,var(--dark),var(--navy));color:#fff;text-align:center}
.cta .wrap{padding:60px 12px}
.cta h2{color:#fff;font-size:34px}
.cta p{color:var(--ltext);max-width:60ch;margin:14px auto 26px;font-size:16px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media(max-width:768px){
  .cta .wrap{padding:40px 12px}
  .cta h2{font-size:26px}
}
@media(max-width:480px){
  .cta .wrap{padding:30px 12px}
  .cta h2{font-size:22px}
  .cta-actions .btn{width:100%;justify-content:center}
  .cta-actions{flex-direction:column;align-items:stretch}
}

/* ===================== FOOTER ===================== */
.footer{background:var(--dark);color:var(--ltext);padding-top:28px}
.footer .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:22px}
.footer h4{color:#fff;font-size:16px;margin-bottom:18px;position:relative;padding-bottom:10px}
.footer h4::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:3px;background:var(--gold);border-radius:3px}
.footer .fabout p{font-size:14px;color:#aebfdb;margin:0 0 18px;max-width:36ch}
.footer .fbrand{display:flex;align-items:center;gap:12px}
.footer .fbrand .seal{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#103a92,#02102e);border:2px solid var(--gold);color:#fff;display:grid;place-items:center;font-size:17px}
.footer .fbrand b{color:#fff;font-size:20px;font-weight:800;letter-spacing:.05em}
.footer .fsoc{display:flex;gap:10px}
.footer .fsoc a{width:34px;height:34px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:14px;color:#fff}
.footer .fsoc a:hover{background:var(--gold);color:var(--dark)}
.footer .flinks a{display:block;padding:4px 0;font-size:14px;color:#bccadf;transition:.2s}
.footer .flinks a:hover{color:var(--gold);padding-left:6px}
.footer .flinks a i{font-size:10px;margin-right:8px;color:var(--gold)}
.footer .fcontact li{display:flex;gap:12px;font-size:14px;color:#bccadf;margin-bottom:8px}
.footer .fcontact i{color:var(--gold);margin-top:4px}
.fbot{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:#8ea3c8}
@media(max-width:860px){.footer .fgrid{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){.footer .fgrid{grid-template-columns:1fr}}
@media(max-width:480px){
  .fbot{flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 0}
  .footer .fsoc a{width:38px;height:38px}
}

/* scroll top */
.totop{position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;background:var(--royal);color:#fff;
  display:grid;place-items:center;font-size:18px;box-shadow:0 8px 22px -6px rgba(18,70,160,.6);opacity:0;visibility:hidden;transition:.3s;z-index:80}
.totop.show{opacity:1;visibility:visible}
.totop:hover{background:var(--navy)}

/* home section headings — client spec 28px */
.home .sec-head h2{font-size:24px}
@media(max-width:480px){
  .sec-head h2{font-size:22px}
  .art-head h2{font-size:17px}
  .idx-head{font-size:17px}
  .home .sec-head h2{font-size:20px}
}
.idx-sec{padding:14px 0}
/* indexing logos paginated carousel */
.idx-head{color:var(--royal);font-size:20px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-bottom:22px}
.idx-carousel{position:relative}
.idx-viewport{overflow:hidden}
.idx-track{display:flex;transition:transform .55s ease}
.idx-item{flex:0 0 16.6667%;padding:0 9px;box-sizing:border-box;flex-shrink:0}
.idx-box{background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-sm);height:104px;display:grid;place-items:center;padding:0 20px}
.idx-box img{max-width:100%;max-height:60px;width:auto;height:auto;display:block}
.idx-dots{display:flex;justify-content:center;gap:9px;margin-top:24px}
.idx-dots button{position:relative;width:10px;height:10px;padding:0;border:0;border-radius:50%;background:#cfd8e8;cursor:pointer;transition:.25s}
/* keep the 10px visual dot but expand the tap target to ~34px for touch */
.idx-dots button::after{content:"";position:absolute;inset:-12px}
.idx-dots button:hover{background:#aebcd6}
.idx-dots button.active{background:var(--royal)}
@media(max-width:992px){.idx-item{flex-basis:33.3333%}}
@media(max-width:600px){.idx-item{flex-basis:50%}}
/* footer seal image */
.footer .fbrand .fseal{width:42px;height:42px;border-radius:50%;display:block;flex-shrink:0}

/* reveal */
[data-aos]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
[data-aos].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-aos]{opacity:1;transform:none}*{scroll-behavior:auto}}

/* ===================== HOME: current issue ===================== */
.curissue{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:24px;align-items:stretch}
.ci-right{display:flex;flex-direction:column;gap:14px;min-width:0}
.ci-right .quick{margin-top:auto}
.ci-head{color:var(--royal);font-size:16px;line-height:1;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin:0 0 12px}
.ci-btn{align-self:flex-start;margin-top:auto;padding:11px 26px;min-height:46px;font-size:14px}
.ci-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:13px 22px 17px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px}
.ci-top{display:flex;gap:16px;align-items:stretch}
.ci-cover{width:120px;flex-shrink:0;aspect-ratio:2/3;border-radius:12px;background:linear-gradient(168deg,#1c3d70 0%,#0a1f47 65%,#071736 100%);
  color:#fff;display:flex;flex-direction:column;padding:13px 11px 11px;text-align:left;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow-sm)}
.ci-cover .cc-brand{display:block;border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:7px}
.ci-cover .cc-logo-img{width:86px;height:auto;display:block}
.ci-cover .cc-caps{font-size:4px;letter-spacing:.06em;color:#b9c8e6;display:block;margin-top:3px;font-weight:600}
.ci-cover .cc-body{margin:auto 0;display:block}
.ci-cover .cc-name{font-size:11px;font-weight:600;line-height:1.28;display:block}
.ci-cover .cc-jms{font-size:7.5px;color:#c2cee6;font-style:italic;display:block;margin-top:7px}
.ci-cover .cc-issn{font-size:6px;color:#9fb2d8;letter-spacing:.05em;display:block}
.ci-info{display:flex;flex-direction:column;justify-content:flex-start}
.ci-info .ci-month{font-size:13px;font-weight:600;color:var(--text-2)}
.ci-info h3{font-size:18px;color:var(--navy);margin:5px 0 10px}
.ci-info p{font-size:13.5px;color:var(--text);margin-bottom:5px}
.ci-info p b{color:var(--navy);font-weight:600}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ql{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--border);border-radius:7px;padding:14px 16px;min-height:90px;box-shadow:var(--shadow);transition:.25s}
.ql:hover{border-color:var(--navy);transform:translateY(-4px);box-shadow:var(--shadow)}
.ql i{width:44px;height:44px;border-radius:15px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:17px;flex-shrink:0}
.ql b{display:block;font-size:14px;color:var(--navy);font-weight:600;line-height:1.2}
.ql span{font-size:12px;color:var(--text-2)}
/* While .curissue is still 2-col (collapses at 992) the narrow .ci-right can't
   hold 3 quick-links once a scrollbar steals width in the 993–1080 band — go 2-up early. */
@media(max-width:1080px){.quick{grid-template-columns:1fr 1fr}}
@media(max-width:992px){.curissue{grid-template-columns:1fr}.quick{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.quick{grid-template-columns:1fr}}
@media(max-width:480px){
  .ci-card{padding:12px 14px}
  .ci-top{flex-direction:column;align-items:flex-start}
  .ci-cover{width:100%;max-width:160px;aspect-ratio:auto;flex-direction:row;padding:10px 12px;gap:12px}
  .ci-btn{width:100%;justify-content:center}
  .quick{grid-template-columns:1fr}
  .ql{min-height:72px}
}

/* article cards */
.art-section{padding:14px 0}
.art-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.art-head h2{color:var(--royal);font-size:20px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.btn-viewall{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #c7d6ef;color:var(--royal);font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;padding:11px 20px;border-radius:7px;transition:.25s}
.btn-viewall:hover{background:var(--royal);color:#fff;border-color:var(--royal)}
.acard{background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-sm);padding:22px 22px 24px;transition:.3s;display:flex;flex-direction:column}
.acard:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.acard-bar{width:28px;height:4px;border-radius:3px;background:var(--gold);margin-bottom:16px}
.acard h3{font-size:16.5px;color:var(--heading);line-height:1.4;font-weight:700;margin-bottom:14px}
@media(min-width:769px){.acard h3{min-height:46px}}
.acard-vol{font-size:13px;color:var(--text-2);margin-bottom:10px}
.acard-auth{font-size:13px;color:var(--text-2);margin-bottom:12px}
.acard-auth b{color:var(--navy);font-weight:700}
.acard-more{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;border:1px solid #c7d6ef;color:var(--royal);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:9px 16px;border-radius:6px;transition:.25s}
.acard-more:hover{background:var(--royal);color:#fff;border-color:var(--royal)}

/* indexing logos */
.idx-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;align-items:center}
.idx-logo{background:#fff;border:1px solid var(--border);border-radius:12px;height:96px;display:grid;place-items:center;padding:16px;box-shadow:var(--shadow-sm);transition:.25s}
.idx-logo:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.idx-logo b{font-weight:700;color:var(--navy);font-size:15px;text-align:center}
.idx-logo .g{color:#4285F4}
@media(max-width:992px){.idx-logos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.idx-logos{grid-template-columns:1fr 1fr}}

/* member cards */
.member{background:#fff;border:1px solid var(--border);border-radius:12px;padding:26px 20px;text-align:center;box-shadow:var(--shadow);transition:.3s}
.member:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.member .pic{width:96px;height:96px;border-radius:50%;margin:0 auto 16px;object-fit:cover;border:3px solid #eef3fc;background:#eef3fc;color:var(--navy);display:grid;place-items:center;font-size:30px}
img.pic{display:block!important}
/* homepage editorial-board teaser cards (horizontal) */
.eb-section{padding:14px 0}
.eb-section .grid{gap:12px}
.ebcard{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:18px 20px;min-height:96px;box-shadow:var(--shadow-sm);transition:.3s}
.ebcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.ebcard .eb-pic{width:58px;height:58px;border-radius:50%;background:#eef1f7;color:var(--navy);display:grid;place-items:center;font-size:26px;flex-shrink:0}
.ebcard .eb-text h3{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:4px;line-height:1.3}
.ebcard .eb-text .role{font-size:13px;font-weight:500;color:var(--text-2)}
@media(max-width:480px){
  .ebcard{padding:14px 14px;gap:12px}
  .ebcard .eb-pic{width:48px;height:48px;font-size:22px}
  .ebcard .eb-text h3{font-size:14px}
}

/* demo form success panel */
.form-success{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-left:5px solid var(--success);border-radius:12px;padding:28px;box-shadow:var(--shadow);animation:fadeUp .4s ease}
.form-success i{width:56px;height:56px;border-radius:50%;background:#e7f6ed;color:var(--success);display:grid;place-items:center;font-size:26px;flex-shrink:0}
.form-success b{font-size:20px;color:var(--heading);display:block;margin-bottom:6px}
.form-success p{font-size:15px;color:var(--text)}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.note-demo{font-size:12.5px;color:var(--text-2);background:var(--gold-soft);border:1px solid var(--gold);border-radius:8px;padding:8px 12px;margin-bottom:16px;display:flex;gap:8px;align-items:center}
.note-demo i{color:var(--gold-2)}
.member h3{font-size:18px;color:var(--heading);margin-bottom:4px}
.member .role{font-size:13px;font-weight:600;color:var(--text-2)}
.member .inst{font-size:12.5px;color:var(--text-2);margin-top:4px}

/* generic content / sidebar layout */
.cwrap{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}
.cwrap.rev{grid-template-columns:340px 1fr}
@media(max-width:992px){.cwrap,.cwrap.rev{grid-template-columns:1fr}}
.prose h2{font-size:30px;color:var(--heading);margin:0 0 18px}
.prose h3{font-size:22px;color:var(--heading);margin:28px 0 12px}
.prose p{font-size:16px;color:var(--text);margin-bottom:16px}
.prose ul.bullets{margin:0 0 18px}
.prose ul.bullets li{position:relative;padding-left:30px;margin-bottom:12px;font-size:16px;color:var(--text)}
.prose ul.bullets li i{position:absolute;left:0;top:4px;color:var(--gold)}
.block{background:#fff;border:1px solid var(--border);border-radius:12px;padding:26px;box-shadow:var(--shadow);margin-bottom:24px}
.block .bh{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.block .bh .bi{width:50px;height:50px;border-radius:8px;background:#eef3fc;color:var(--navy);display:grid;place-items:center;font-size:20px;flex-shrink:0}
.block .bh h3{margin:0;font-size:22px}
.sidebox{background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:24px}
.sidebox .sh{background:var(--navy);color:#fff;padding:16px 22px;font-size:16px;font-weight:600}
.sidebox .sb{padding:22px}
.sidebox.gold .sh{background:var(--gold);color:var(--dark)}
.sidebox .sb li{display:flex;gap:10px;font-size:14px;color:var(--text);padding:8px 0;border-bottom:1px solid var(--border)}
.sidebox .sb li:last-child{border-bottom:0}
.sidebox .sb li i{color:var(--gold);margin-top:4px}

/* forms */
.form-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:34px;box-shadow:var(--shadow)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:600;color:var(--navy);margin-bottom:7px}
.field .req{color:#dc2626}
.field input,.field select,.field textarea{width:100%;font-family:var(--ff);font-size:15px;color:var(--text);
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:13px 15px;transition:.2s}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,44,115,.1)}
.field input::placeholder,.field textarea::placeholder{color:#9CA3AF}
@media(max-width:600px){.frow{grid-template-columns:1fr}}
@media(max-width:480px){
  .form-card{padding:20px 16px}
  .prose h2{font-size:24px}
  .prose h3{font-size:18px}
  .block{padding:18px 14px}
  .sidebox .sb{padding:16px}
}

/* contact info cards */
.cinfo{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:12px;padding:26px;box-shadow:var(--shadow);transition:.3s}
.cinfo:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.cinfo .ci{width:64px;height:64px;border-radius:14px;background:#eef3fc;color:var(--navy);display:grid;place-items:center;font-size:24px;flex-shrink:0}
.cinfo h3{font-size:18px;color:var(--heading);margin-bottom:6px}
.cinfo p,.cinfo a{font-size:14px;color:var(--text);display:block}
.cinfo a:hover{color:var(--navy)}

/* faq accordion */
.faq{max-width:860px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:14px;box-shadow:var(--shadow-sm);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:600;color:var(--heading);font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{display:flex;gap:12px;align-items:center}
.faq summary .q i{color:var(--gold)}
.faq summary::after{content:"\f067";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--navy);font-size:13px;transition:.25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{background:var(--light)}
.faq .fa-body{padding:0 24px 22px;color:var(--text);font-size:15px}

/* badges/list rows */
.expertise{display:flex;flex-wrap:wrap;gap:12px}
.exp{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 18px;font-size:14px;color:var(--navy);font-weight:500}
.exp i{color:var(--navy)}
.country{display:inline-flex;align-items:center;gap:8px;background:var(--royal);color:#fff;border-radius:30px;padding:9px 18px;font-size:14px;font-weight:500}

/* process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.pstep{text-align:center;position:relative}
.pstep .pc{width:84px;height:84px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:30px;margin:0 auto 18px;position:relative;z-index:2;box-shadow:0 8px 22px -8px rgba(10,44,115,.5)}
.pstep .pn{position:absolute;top:-6px;right:calc(50% - 52px);width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--dark);font-size:13px;font-weight:700;display:grid;place-items:center;z-index:3}
.pstep h3{font-size:18px;margin-bottom:8px}
.pstep p{font-size:14px;color:var(--text)}
.steps::before{content:"";position:absolute;top:42px;left:12%;right:12%;height:2px;background:var(--border);z-index:1}
@media(max-width:768px){.steps{grid-template-columns:1fr 1fr}.steps::before{display:none}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}

/* archive year cards */
.yearcard{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:26px 30px;box-shadow:var(--shadow);transition:.3s;flex-wrap:wrap}
.yearcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.yearcard .yl{display:flex;align-items:center;gap:20px}
.yearcard .yc{width:70px;height:70px;border-radius:12px;background:#eef3fc;color:var(--navy);display:grid;place-items:center;font-size:26px}
.yearcard .yr{font-size:34px;font-weight:700;color:var(--navy);line-height:1}
.yearcard .ymeta{font-size:14px;color:var(--text)}
.yearcard .ymeta b{color:var(--navy)}
@media(max-width:480px){
  .yearcard{padding:18px 16px;gap:12px}
  .yearcard .yr{font-size:26px}
  .yearcard .yc{width:52px;height:52px;font-size:20px}
}

/* result list */
.result{background:#fff;border:1px solid var(--border);border-radius:12px;padding:24px;box-shadow:var(--shadow-sm);margin-bottom:18px;transition:.2s}
.result:hover{box-shadow:var(--shadow);border-color:#cdd8ee}
.result .tag{display:inline-block;font-size:11px;font-weight:600;color:var(--royal);background:#eef3fc;padding:3px 10px;border-radius:5px;margin-bottom:10px}
.result h3{font-size:19px;color:var(--heading);margin-bottom:8px}
.result h3:hover{color:var(--royal)}
.result .ra{font-size:13px;color:var(--text-2);margin-bottom:10px}
.result p{font-size:14px;color:var(--text);margin-bottom:10px}
.result .rmeta{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--text-2)}
.result .rmeta b{color:var(--navy)}

/* pricing/payment */
.price-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:34px;box-shadow:var(--shadow);text-align:center;overflow:hidden}
.price-card.feat{border:2px solid var(--gold);position:relative}
.price-card.feat::before{content:"POPULAR";position:absolute;top:16px;right:-32px;transform:rotate(45deg);background:var(--gold);color:var(--dark);font-size:11px;font-weight:700;padding:4px 40px}
@media(max-width:480px){
  .price-card{padding:22px 18px}
  .price-card .price{font-size:34px}
  .faq summary{padding:16px 18px;font-size:15px}
  .faq .fa-body{padding:0 18px 18px}
  .cinfo{padding:18px 16px}
  .cinfo .ci{width:50px;height:50px;font-size:20px}
}
.price-card h3{font-size:20px;color:var(--heading)}
.price-card .price{font-size:42px;font-weight:800;color:var(--navy);margin:14px 0}
.price-card .price span{font-size:15px;color:var(--text-2);font-weight:500}
.price-card ul{margin:18px 0;text-align:left}
.price-card ul li{display:flex;gap:10px;padding:8px 0;font-size:14px;color:var(--text);border-bottom:1px solid var(--border)}
.price-card ul li i{color:var(--success)}

/* ── Country-code dropdown (flag + name + dial code) ── */
.sa-cc{position:relative}
.sa-cc-btn{width:100%;display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:5px;
  background:#fff;padding:10px 12px;font-family:var(--ff);font-size:14px;color:var(--text);cursor:pointer;text-align:left}
.sa-cc-btn:focus{outline:none;border-color:var(--royal)}
.sa-cc-flag{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}
.sa-cc-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5}
.sa-cc-dial{color:var(--text-2);font-weight:600;flex-shrink:0}
.sa-cc-caret{font-size:11px;color:var(--text-2);flex-shrink:0}
.sa-cc-panel{position:absolute;z-index:30;top:46px;left:0;right:0;background:#fff;border:1px solid var(--border);
  border-radius:6px;box-shadow:0 12px 30px rgba(0,26,77,.16);overflow:hidden}
.sa-cc-search{width:100%;border:0;border-bottom:1px solid var(--border);padding:10px 14px;
  font-family:var(--ff);font-size:13.5px;color:var(--text);outline:none}
.sa-cc-list{max-height:238px;overflow-y:auto}
.sa-cc-item{width:100%;display:flex;align-items:center;gap:10px;padding:8px 14px;border:0;background:#fff;
  font-family:var(--ff);font-size:13.5px;color:var(--text);cursor:pointer;text-align:left}
.sa-cc-item:hover{background:#eef3fb}
.sa-cc-item.sel{background:#f5f8ff}
.sa-cc-item img{width:20px;height:15px;object-fit:cover;border-radius:2px;flex-shrink:0}
.sa-cc-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-cc-item b{color:var(--text-2);font-weight:600;flex-shrink:0}
/* compact variant: flag + dial code only (country name hidden) — used where the
   code selector sits beside the number input in ONE cell (subscription form) */
.sa-cc-row{display:flex;gap:8px}
.sa-cc-row .sa-cc{flex:0 0 auto;width:118px}
.sa-cc-row input[type="tel"]{flex:1;min-width:0}
.sa-cc--compact .sa-cc-name{display:none}
.sa-cc--compact .sa-cc-panel{width:320px;right:auto}