/* ============================================================
   DocProTools — Mega Menu, Search Bar, Ad Banner
   Drop-in layer on top of styles.css / nav-polish.css
   ============================================================ */
:root{
  --mm-accent:#e5322d;
  --mm-accent-dark:#c9221d;
  --mm-ink:#0f172a;
  --mm-muted:#64748b;
  --mm-border:#e6e9f0;
}

/* ---------- Ad banner strip (sits above the nav) ---------- */
.ad-banner-strip{
  width:100%;
  background:#0f172a;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  min-height:48px;
  overflow:hidden;
}
.ad-banner-strip .ad-banner-inner{
  width:100%;
  max-width:728px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
}
.ad-banner-label{
  position:absolute;
  font-size:9px;
  letter-spacing:.08em;
  color:#94a3b8;
  text-transform:uppercase;
  top:2px;
  left:50%;
  transform:translateX(-50%);
}
.ad-banner-strip{position:relative;}

/* ---------- Top utility bar (above main nav row) ---------- */
.mm-topbar{
  background:#0f172a;
  color:#cbd5e1;
  font-size:12.5px;
  font-weight:600;
}
.mm-topbar-inner{
  max-width:1280px;
  margin:0 auto;
  padding:6px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.mm-topbar a{color:#cbd5e1;}
.mm-topbar a:hover{color:#fff;}

/* ---------- Main header / nav shell ---------- */
.mm-header{
  position:sticky;
  top:0;
  z-index:500;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--mm-border);
  box-shadow:0 6px 20px rgba(15,23,42,.05);
  backdrop-filter:saturate(160%) blur(10px);
}
.mm-nav-row{
  max-width:1280px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:18px;
  padding:12px 22px;
}
.mm-brand{
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:900;
  font-size:19px;
  letter-spacing:-.02em;
  color:var(--mm-ink);
  text-decoration:none;
  flex:0 0 auto;
}
.mm-brand img{width:36px;height:36px;object-fit:contain;display:block;}
.mm-brand span.accent{color:var(--mm-accent);}

/* search bar, centered, like iLovePDF top search */
.mm-search{
  flex:1 1 auto;
  max-width:520px;
  position:relative;
}
.mm-search input{
  width:100%;
  padding:11px 16px 11px 40px;
  border:1.5px solid var(--mm-border);
  border-radius:999px;
  background:#f6f8fb;
  font-size:14px;
  outline:none;
  transition:.2s ease;
}
.mm-search input:focus{
  border-color:var(--mm-accent);
  background:#fff;
  box-shadow:0 0 0 4px rgba(229,50,45,.08);
}
.mm-search svg{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:16px;
  height:16px;
  color:#94a3b8;
  pointer-events:none;
}
.mm-search-results{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  background:#fff;
  border:1px solid var(--mm-border);
  border-radius:14px;
  box-shadow:0 20px 45px rgba(15,23,42,.16);
  max-height:380px;
  overflow-y:auto;
  z-index:600;
  display:none;
  padding:8px;
}
.mm-search-results.show{display:block;}
.mm-search-results a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:10px;
  color:var(--mm-ink);
  font-size:13.5px;
  font-weight:700;
}
.mm-search-results a:hover{background:#fff1f2;color:var(--mm-accent);}
.mm-search-results .mm-sr-icon{font-size:16px;width:22px;text-align:center;flex:0 0 22px;}
.mm-search-results .mm-sr-empty{padding:14px;color:var(--mm-muted);font-size:13px;text-align:center;}

/* nav link group + CTA */
.mm-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.mm-actions a.mm-link{
  border-radius:999px;
  padding:9px 13px;
  font-weight:700;
  font-size:13.5px;
  color:var(--mm-ink);
  white-space:nowrap;
}
.mm-actions a.mm-link:hover{background:#fff1f2;color:var(--mm-accent);}
.mm-actions a.mm-cta{
  background:linear-gradient(135deg,var(--mm-accent),#ff6b5b);
  color:#fff;
  border-radius:999px;
  padding:10px 18px;
  font-weight:800;
  font-size:13.5px;
  box-shadow:0 10px 22px rgba(229,50,45,.2);
  white-space:nowrap;
}
.mm-actions a.mm-cta:hover{color:#fff;transform:translateY(-1px);}

/* ---------- Language switcher ---------- */
.mm-lang{position:relative;flex:0 0 auto;}
.mm-lang-trigger{
  display:flex;align-items:center;gap:5px;
  padding:9px 11px;
  border-radius:999px;
  border:1px solid var(--mm-border);
  background:#fff;
  font-size:13px;font-weight:700;
  color:var(--mm-ink);
  cursor:pointer;
  white-space:nowrap;
}
.mm-lang-trigger:hover{border-color:var(--mm-accent);color:var(--mm-accent);}
.mm-lang-trigger svg{width:10px;height:10px;}
.mm-lang-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:200px;
  max-height:320px;
  overflow-y:auto;
  background:#fff;
  border:1px solid var(--mm-border);
  border-radius:14px;
  box-shadow:0 20px 45px rgba(15,23,42,.16);
  padding:8px;
  display:none;
  z-index:600;
}
.mm-lang.open .mm-lang-menu{display:block;}
.mm-lang-menu button{
  display:flex;align-items:center;gap:10px;
  width:100%;
  padding:9px 10px;
  border:0;background:none;
  border-radius:10px;
  font-size:13.5px;font-weight:600;
  color:var(--mm-ink);
  cursor:pointer;
  text-align:left;
  font-family:inherit;
}
.mm-lang-menu button:hover{background:#fff1f2;color:var(--mm-accent);}
.mm-lang-menu button.active{background:#f1f5f9;color:var(--mm-accent);}
/* Hide Google's default floating banner/iframe chrome so only our trigger shows */
.goog-te-banner-frame, .skiptranslate > iframe.skiptranslate{display:none !important;}
body{top:0 !important;}
#google_translate_element{position:absolute;width:0;height:0;overflow:hidden;opacity:0;pointer-events:none;}
@media (max-width:980px){
  .mm-lang-trigger span.mm-lang-label{display:none;}
}

/* hamburger for mobile */
.mm-burger{
  display:none;
  flex:0 0 auto;
  width:38px;height:38px;
  border-radius:10px;
  border:1px solid var(--mm-border);
  background:#fff;
  align-items:center;justify-content:center;
  cursor:pointer;
}
.mm-burger span{display:block;width:18px;height:2px;background:var(--mm-ink);position:relative;}
.mm-burger span:before,.mm-burger span:after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--mm-ink);}
.mm-burger span:before{top:-6px;}
.mm-burger span:after{top:6px;}

/* ---------- Category row (the pill tabs under the title bar) ---------- */
.mm-catrow{
  border-top:1px solid var(--mm-border);
  background:#fff;
}
.mm-catrow-inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 22px;
  display:flex;
  align-items:center;
  gap:4px;
}
.mm-cat-item{position:relative;flex:0 0 auto;}
.mm-cat-trigger{
  display:flex;
  align-items:center;
  gap:5px;
  padding:13px 14px;
  font-size:13.5px;
  font-weight:800;
  color:#374151;
  white-space:nowrap;
  cursor:pointer;
  border:0;
  background:none;
  font-family:inherit;
}
.mm-cat-trigger svg{width:11px;height:11px;transition:.2s ease;}
.mm-cat-item:hover .mm-cat-trigger,.mm-cat-item.open .mm-cat-trigger{color:var(--mm-accent);}
.mm-cat-item:hover .mm-cat-trigger svg,.mm-cat-item.open .mm-cat-trigger svg{transform:rotate(180deg);}
.mm-cat-item:hover .mm-cat-trigger:after,.mm-cat-item.open .mm-cat-trigger:after{opacity:1;}
.mm-cat-trigger:after{
  content:'';
  position:absolute;
  left:14px;right:14px;bottom:0;
  height:2px;
  background:var(--mm-accent);
  opacity:0;
}

/* ---------- Mega dropdown panel ---------- */
.mm-panel{
  position:absolute;
  top:100%;
  left:0;
  min-width:680px;
  background:#fff;
  border:1px solid var(--mm-border);
  border-radius:16px;
  box-shadow:0 26px 60px rgba(15,23,42,.16);
  padding:20px;
  display:none;
  z-index:700;
  margin-top:6px;
}
.mm-cat-item:hover .mm-panel,.mm-cat-item.open .mm-panel{display:block;}
.mm-panel-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px 18px;
}
.mm-panel-group h4{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#94a3b8;
  font-weight:800;
  margin:14px 0 6px;
}
.mm-panel-group:first-child h4{margin-top:0;}
.mm-panel-link{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:8px 8px;
  border-radius:10px;
  text-decoration:none;
}
.mm-panel-link:hover{background:#f8fafc;}
.mm-panel-link .mm-ic{
  width:34px;height:34px;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  flex:0 0 34px;
  background:#f1f5f9;
}
.mm-panel-link .mm-ic.red{background:#fff1f2;color:#e5322d;}
.mm-panel-link .mm-ic.blue{background:#eff6ff;color:#2563eb;}
.mm-panel-link .mm-ic.green{background:#ecfdf5;color:#16a34a;}
.mm-panel-link .mm-ic.purple{background:#f5f3ff;color:#7c3aed;}
.mm-panel-link .mm-ic.orange{background:#fff7ed;color:#f97316;}
.mm-panel-link .mm-ic.pink{background:#fdf2f8;color:#db2777;}
.mm-panel-link .mm-tx b{
  display:block;
  font-size:13.5px;
  font-weight:800;
  color:var(--mm-ink);
  line-height:1.3;
}
.mm-panel-link .mm-tx span{
  display:block;
  font-size:11.5px;
  color:var(--mm-muted);
  line-height:1.4;
  margin-top:1px;
}
.mm-panel-link:hover .mm-tx b{color:var(--mm-accent);}
.mm-soon-tag{
  display:inline-block;
  font-size:9px;
  font-weight:800;
  background:#fef3c7;
  color:#92400e;
  border-radius:5px;
  padding:1px 5px;
  margin-left:6px;
  vertical-align:middle;
  text-transform:uppercase;
}
.mm-new-tag{
  display:inline-block;
  font-size:9px;
  font-weight:800;
  background:#dcfce7;
  color:#166534;
  border-radius:5px;
  padding:1px 5px;
  margin-left:6px;
  vertical-align:middle;
  text-transform:uppercase;
}

/* ---------- Mobile drawer ---------- */
.mm-drawer-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.5);
  z-index:900;display:none;
}
.mm-drawer-overlay.show{display:block;}
.mm-drawer{
  position:fixed;top:0;left:0;bottom:0;
  width:min(86vw,360px);
  background:#fff;
  z-index:901;
  transform:translateX(-100%);
  transition:transform .25s ease;
  overflow-y:auto;
  padding:18px;
  box-shadow:0 0 40px rgba(0,0,0,.2);
}
.mm-drawer.show{transform:translateX(0);}
.mm-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.mm-drawer-close{width:34px;height:34px;border-radius:999px;background:#f1f5f9;border:0;font-size:20px;cursor:pointer;}
.mm-drawer details{border-bottom:1px solid #f1f5f9;padding:6px 0;}
.mm-drawer summary{font-weight:800;padding:10px 4px;cursor:pointer;list-style:none;font-size:14.5px;color:var(--mm-ink);}
.mm-drawer summary::-webkit-details-marker{display:none;}
.mm-drawer .mm-drawer-links{display:flex;flex-direction:column;gap:2px;padding:4px 4px 10px 10px;}
.mm-drawer .mm-drawer-links a{padding:8px 6px;font-size:13.5px;font-weight:600;color:#374151;border-radius:8px;}
.mm-drawer .mm-drawer-links a:hover{background:#fff1f2;color:var(--mm-accent);}
.mm-drawer-foot{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.mm-drawer-foot a{padding:10px;border-radius:10px;font-weight:700;font-size:13.5px;text-align:center;border:1px solid var(--mm-border);color:var(--mm-ink);}
.mm-drawer-foot a.mm-cta{background:linear-gradient(135deg,var(--mm-accent),#ff6b5b);color:#fff;border:0;}

@media (max-width:980px){
  .mm-search{display:none;}
  .mm-actions a.mm-link{display:none;}
  .mm-catrow{display:none;}
  .mm-burger{display:flex;}
}
@media (max-width:560px){
  .mm-nav-row{padding:10px 14px;}
  .mm-brand{font-size:16px;}
  .mm-brand img{width:30px;height:30px;}
  .ad-banner-strip{min-height:auto;padding:6px 8px;}
}

/* ---------- RTL support (Urdu, Arabic) ---------- */
html[dir="rtl"] .mm-topbar-inner,
html[dir="rtl"] .mm-nav-row,
html[dir="rtl"] .mm-actions,
html[dir="rtl"] .card-actions,
html[dir="rtl"] .mm-search-results a,
html[dir="rtl"] .mm-panel-link,
html[dir="rtl"] .mm-lang-menu button{
  flex-direction:row-reverse;
}
html[dir="rtl"] .mm-search input{padding:11px 40px 11px 16px;}
html[dir="rtl"] .mm-search svg{left:auto;right:14px;}
html[dir="rtl"] .mm-lang-menu{right:auto;left:0;}
html[dir="rtl"] .mm-panel{left:auto;right:0;}
html[dir="rtl"] .guide-modal-close{right:auto;left:16px;}
html[dir="rtl"] .guide-modal h3{padding-right:0;padding-left:30px;}
html[dir="rtl"] .guide-modal-steps li:before{order:1;}
html[dir="rtl"] .mm-drawer{left:auto;right:0;transform:translateX(100%);}
html[dir="rtl"] .mm-drawer.show{transform:translateX(0);}
html[dir="rtl"] .mm-burger{order:2;}
html[dir="rtl"] .mm-brand{order:1;}

/* ---------- Tool guide modal (replaces native alert()) ---------- */
.guide-modal-overlay{
  position:fixed;inset:0;
  background:rgba(15,23,42,.55);
  z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.guide-modal{
  background:#fff;
  border-radius:18px;
  max-width:480px;
  width:100%;
  max-height:80vh;
  overflow-y:auto;
  padding:28px 26px 24px;
  position:relative;
  box-shadow:0 30px 70px rgba(15,23,42,.3);
}
.guide-modal h3{
  font-size:18px;
  font-weight:800;
  color:var(--mm-ink);
  margin:0 0 16px;
  padding-right:30px;
}
.guide-modal-steps{
  list-style:none;
  counter-reset:guide-step;
  padding:0;margin:0;
  display:flex;flex-direction:column;gap:12px;
}
.guide-modal-steps li{
  counter-increment:guide-step;
  display:flex;gap:12px;
  font-size:14.5px;
  line-height:1.5;
  color:#374151;
}
.guide-modal-steps li:before{
  content:counter(guide-step);
  flex:0 0 26px;height:26px;
  border-radius:999px;
  background:var(--mm-accent);
  color:#fff;
  font-weight:800;font-size:12.5px;
  display:flex;align-items:center;justify-content:center;
}
.guide-modal-close{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;
  border-radius:999px;
  border:0;background:#f1f5f9;
  font-size:20px;line-height:1;
  cursor:pointer;color:#475569;
}
.guide-modal-close:hover{background:#e2e8f0;}