/* ==========================================================================
   Traffez — Modern skin (2025)
   Loaded AFTER main.css / custom.css. Overrides visuals only; Bootstrap grid,
   markup and all JS stay untouched, so functionality is preserved.
   Goal: cleaner, lighter, more contemporary SaaS look.
   ========================================================================== */

:root {
  --m-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --m-font-head: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --m-bg: #f6f8fb;
  --m-surface: #ffffff;
  --m-ink: #0f172a;
  --m-ink-soft: #475569;
  --m-muted: #64748b;
  --m-border: #e6eaf0;
  --m-border-strong: #d7dee8;

  --m-radius: 16px;
  --m-radius-sm: 12px;
  --m-radius-pill: 999px;

  --m-shadow-xs: 0 1px 2px rgba(16, 24, 40, .06);
  --m-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --m-shadow-md: 0 10px 28px -14px rgba(16, 24, 40, .22);

  --m-primary: hsl(var(--base));
  --m-primary-soft: hsl(var(--base) / .10);
  --m-header-h: 72px;
}

/* ------------------------------- Base ---------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--m-font-body) !important;
  background: var(--m-bg) !important;
  color: var(--m-ink-soft) !important;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--m-font-head) !important;
  color: var(--m-ink) !important;
  letter-spacing: -.02em;
  font-weight: 700;
}

::selection { background: hsl(var(--base) / .18); }

a { text-decoration: none; }

/* ------------------------------ Buttons -------------------------------- */
.btn {
  font-family: var(--m-font-body) !important;
  font-weight: 600 !important;
  border-radius: var(--m-radius-sm) !important;
  padding: 12px 22px !important;
  border: 1px solid transparent !important;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, filter .15s ease !important;
}

.btn--base,
.btn--primary {
  background: var(--m-primary) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -10px hsl(var(--base) / .65) !important;
}
.btn--base:hover,
.btn--primary:hover { transform: translateY(-1px); filter: brightness(1.04); color: #fff !important; }

.btn-outline--dark {
  background: #fff !important;
  color: var(--m-ink) !important;
  border-color: var(--m-border-strong) !important;
}
.btn-outline--dark:hover { background: #f1f5f9 !important; color: var(--m-ink) !important; }

/* ------------------------------- Header -------------------------------- */
.header {
  background: rgba(255, 255, 255, .82) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--m-border) !important;
  box-shadow: none !important;
}
.header::before { display: none !important; }

.header .navbar { min-height: var(--m-header-h); padding-top: 0; padding-bottom: 0; }

.navbar-brand.logo img { max-height: 38px !important; width: auto !important; height: auto !important; }

.nav-menu .nav-link {
  color: var(--m-ink-soft) !important;
  font-weight: 600 !important;
  font-size: .95rem !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.nav-menu .nav-link:hover,
.nav-menu .nav-link.active {
  color: var(--m-ink) !important;
  background: var(--m-primary-soft) !important;
}

.dropdown--lang .dropdown-toggle { border-radius: 10px !important; }

/* ------------------------------- Hero ---------------------------------- */
.banner-section {
  background:
    radial-gradient(1100px 520px at 8% -20%, hsl(var(--base) / .38), transparent 62%),
    radial-gradient(900px 520px at 100% 0%, #312e81 0%, transparent 55%),
    #0b1220 !important;
  padding: 84px 0 24px !important;
  overflow: hidden;
}
.banner-section__bg,
.banner-section__overlay { display: none !important; }

.banner-content__title {
  color: #fff !important;
  font-size: clamp(2rem, 4vw, 3.35rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.03em !important;
  margin-bottom: 18px !important;
}
.banner-content__title span { color: hsl(var(--base)) !important; }

.banner-content__desc {
  color: rgba(255, 255, 255, .78) !important;
  font-size: 1.05rem !important;
  max-width: 560px;
}

.banner-content__buttons {
  display: flex !important;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.banner-thumb img {
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .7) !important;
}

/* Remove the template's huge hero paddings (100px top / 200px bottom = the
   dark empty strip under the content) and flatten the search card. */
.banner-content { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Search inside the hero */
.banner-content .seo-tool-search {
  margin-top: 22px !important;
  max-width: 540px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.banner-content .seo-tool-search__title {
  color: #fff !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  margin-bottom: 10px !important;
  opacity: .9;
}
.banner-content .seo-tool-search__input { background: rgba(255, 255, 255, .98) !important; }

/* Small icons in the top menu */
.nav-menu .nav-link i { font-size: .95rem; margin-right: 6px; opacity: .85; }

/* Hero "tool output" window */
.hero-window {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .7);
}
.hero-window__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.hero-window__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.hero-window__title { margin-left: 10px; color: rgba(255, 255, 255, .6); font-size: .78rem; }
.hero-window__body { padding: 16px; display: grid; gap: 10px; }
.hero-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
}
.hero-row__label { display: flex; align-items: center; gap: 10px; color: #e2e8f0; font-size: .86rem; font-weight: 600; }
.hero-row__icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: .9rem; color: #fff; }
.hero-row__value { color: #94a3b8; font-size: .8rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ------------------------------ Sections ------------------------------- */
.page-section { background: transparent !important; }
.py-120 { padding-top: 44px !important; padding-bottom: 76px !important; }

.ad-wrapper { background: #fff !important; border-color: var(--m-border) !important; }

/* ------------------------------- Search -------------------------------- */
.seo-tool-search { z-index: 5; }
.seo-tool-search__title {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem) !important;
  margin-bottom: 16px !important;
}
.seo-tool-search__input {
  height: 58px !important;
  border-radius: var(--m-radius-pill) !important;
  border: 1px solid var(--m-border) !important;
  background: #fff !important;
  padding: 0 24px 0 56px !important;
  font-size: 1rem !important;
  color: var(--m-ink) !important;
  box-shadow: var(--m-shadow-sm) !important;
}
.seo-tool-search__input::placeholder { color: var(--m-muted); }
.seo-tool-search__input:focus {
  outline: none !important;
  border-color: hsl(var(--base)) !important;
  box-shadow: 0 0 0 4px hsl(var(--base) / .15) !important;
}
.seo-tool-search__btn {
  border-radius: var(--m-radius-pill) !important;
  color: var(--m-muted) !important;
}
.seo-tool-search-list {
  border-radius: 14px !important;
  border: 1px solid var(--m-border) !important;
  box-shadow: var(--m-shadow-md) !important;
  overflow: hidden;
}

/* ---------------------------- Tool cards ------------------------------- */
.seo-tool-wrap { display: block; }

.seo-tool-block {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.category-section {
  background: var(--m-surface) !important;
  border: 1px solid var(--m-border) !important;
  border-radius: var(--m-radius) !important;
  padding: 28px !important;
  box-shadow: var(--m-shadow-xs) !important;
  margin-bottom: 22px !important;
}

.seo-tool-block__heading .icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 16px !important;
  object-fit: cover;
  margin-bottom: 14px !important;
}
.seo-tool-block__heading .title {
  font-size: 1.35rem !important;
  margin: 0 0 6px !important;
}
.seo-tool-block__heading .description {
  color: var(--m-muted) !important;
  font-size: .95rem !important;
  margin: 0 !important;
}

.seo-tool-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
  gap: 12px !important;
}

.seo-tool-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: auto !important;
  padding: 18px 10px !important;
  background: #fff !important;
  border: 1px solid var(--m-border) !important;
  border-radius: 14px !important;
  text-align: center;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
.seo-tool-card:hover {
  transform: translateY(-3px);
  border-color: hsl(var(--base) / .5) !important;
  box-shadow: var(--m-shadow-md) !important;
}
.seo-tool-card::before { display: none !important; }
.seo-tool-card__thumb {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  object-fit: contain;
}

/* SVG icon tile used instead of uploaded PNG tool icons */
.tool-tile {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: hsl(var(--base) / .10);
  color: hsl(var(--base));
  flex-shrink: 0;
}
.tool-tile .tool-icon-svg { width: 22px; height: 22px; }
.seo-tool-card__name {
  font-size: .86rem !important;
  font-weight: 600 !important;
  color: var(--m-ink) !important;
  line-height: 1.3;
}
.seo-tool-card-btn {
  background: var(--m-primary-soft) !important;
  border-color: transparent !important;
  color: hsl(var(--base)) !important;
}
.seo-tool-card-btn .txt { font-weight: 600; }

/* ------------------------------ Sidebar -------------------------------- */
.ad-sidebar { border-radius: var(--m-radius); overflow: hidden; }

/* Ad rows between category blocks: the template uses a 120px margin, too airy. */
.ad-section { margin: 24px auto !important; }

/* ------------------------------ Footer --------------------------------- */
/* Keep the original template footer: dark→green gradient, green/white
   typography and the subtle .footer__bg image. We only tighten spacing. */
.footer.pt-120 { padding-top: 84px !important; }
.footer-top.pb-120 { padding-bottom: 56px !important; }

/* ------------------------------ Forms ---------------------------------- */
.form-control, .form-select {
  border-radius: var(--m-radius-sm) !important;
  border-color: var(--m-border) !important;
  background-color: #fff !important;
  color: var(--m-ink) !important;
}
.form-control:focus, .form-select:focus {
  border-color: hsl(var(--base)) !important;
  box-shadow: 0 0 0 4px hsl(var(--base) / .15) !important;
}

/* ---------------------------- Breadcrumb ------------------------------- */
.breadcrumb, .breadcrumb-item, .breadcrumb-item a { color: var(--m-muted) !important; }
.breadcrumb-item.active { color: var(--m-ink) !important; }

/* --------------------------- Responsive -------------------------------- */
@media (max-width: 991.98px) {
  .banner-section { padding: 64px 0 56px !important; }
  .banner-content__buttons .btn { flex: 1 1 auto; justify-content: center; }
  .header .navbar-collapse {
    background: #fff;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    padding: 12px;
    margin-top: 10px;
    box-shadow: var(--m-shadow-md);
  }
}

@media (max-width: 767.98px) {
  .py-120 { padding-top: 44px !important; padding-bottom: 44px !important; }
  .category-section { padding: 20px !important; }
  .seo-tool-cards { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important; }
  .seo-tool-search__input { height: 52px !important; }
}

/* ------------------- Preloader / misc (lighter) ------------------------ */
.preloader { background: var(--m-bg) !important; }
.scroll-top { border-radius: 12px !important; }