/* ==========================================================================
   router-net.com — design refresh (loaded after the original CSS)
   Keeps the original colors (slate blue #4b6a8a, green #3e9a7d) and only
   polishes: typography, spacing, cards, buttons, tables, header/menu, footer,
   and fixes the mobile layout. Ad units (ins.adsbygoogle) are NOT styled.
   To switch the whole refresh off: remove the <link> to this file.
   ========================================================================== */

:root {
  --rn-primary: #4b6a8a;
  --rn-primary-dark: #3d5773;
  --rn-primary-soft: #eef3f8;
  --rn-green: #3e9a7d;
  --rn-green-dark: #33826a;
  --rn-orange: #f0a04b;
  --rn-orange-dark: #e08d34;
  --rn-info: #4fb3d4;
  --rn-info-dark: #3aa0c2;
  --rn-text: #3b4150;
  --rn-heading: #2c3e53;
  --rn-muted: #6b7280;
  --rn-bg: #f5f7fa;
  --rn-border: #e2e8f0;
  --rn-radius: 12px;
  --rn-radius-sm: 8px;
  --rn-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --rn-shadow-hover: 0 4px 12px rgba(16, 24, 40, .10);
  --rn-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ---------- Base typography ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--rn-font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--rn-text);
  background: var(--rn-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--rn-font); color: var(--rn-heading); line-height: 1.3; }
h1, .entry-title { font-size: clamp(23.2px, 17.6px + 1.4vw, 32.8px); font-weight: 700; letter-spacing: -.01em; margin: .4em 0 .7em; }
h2 { font-size: clamp(20px, 16.8px + .8vw, 25.6px); font-weight: 700; }
h3 { font-size: clamp(17.6px, 16px + .4vw, 20.8px); font-weight: 650; }
p { margin: 0 0 1em; }
a { color: var(--rn-green); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus { color: var(--rn-green-dark); text-decoration: underline; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid rgba(62, 154, 125, .45); outline-offset: 2px; }

.site-content { padding-top: 22px; padding-bottom: 12px; }

/* ---------- Header & menu ---------- */
header.header-web {
  background: linear-gradient(180deg, var(--rn-primary) 0%, var(--rn-primary-dark) 100%);
  box-shadow: 0 2px 10px rgba(16, 24, 40, .12);
  border: 0;
}
header.header-web .navbar { margin: 0; min-height: 64px; border: 0; background: transparent; }
header.header-web .navbar > .container { display: flex; align-items: center; flex-wrap: wrap; }
header.header-web .navbar-brand, header.header-web .logo-setting {
  color: #fff; font-weight: 800; font-size: 24.8px; letter-spacing: -.01em;
  padding: 14px 8px; height: auto; line-height: 1.2; order: 1;
}
header.header-web .header-web-img { order: 2; width: 42px; height: 42px; margin: 0 0 0 2px; }
header.header-web .navbar-collapse { order: 4; margin-left: auto; }
header.header-web .navbar-nav { display: flex; gap: 4px; margin: 0; float: none; }
header.header-web .navbar-nav > li { float: none; }
header.header-web .nav-link, header.header-web .navbar-nav > li > a {
  color: #fff; font-weight: 600; font-size: 15.7px;
  padding: 9px 14px; border-radius: 999px; line-height: 1.2;
  transition: background-color .15s ease;
}
header.header-web .nav-link:hover, header.header-web .nav-link:focus,
header.header-web .navbar-nav > li > a:hover { background: rgba(255, 255, 255, .15); color: #fff; text-decoration: none; }
header.header-web.top-fixed { box-shadow: 0 4px 16px rgba(16, 24, 40, .18); }

/* Hamburger drawn with CSS: works without the Font Awesome / Bootstrap icon files */
.navbar-toggler.mTogglerButton {
  order: 3; margin-left: auto; display: none;
  width: 46px; height: 40px; padding: 0; cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, .75); border-radius: 10px;
  background:
    linear-gradient(#fff, #fff) center calc(50% - 7px) / 20px 2px no-repeat,
    linear-gradient(#fff, #fff) center 50% / 20px 2px no-repeat,
    linear-gradient(#fff, #fff) center calc(50% + 7px) / 20px 2px no-repeat,
    transparent;
}
.navbar-toggler.mTogglerButton > * { display: none !important; }
.navbar-toggler.mTogglerButton:hover { background-color: rgba(255, 255, 255, .12); }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius);
  box-shadow: var(--rn-shadow);
  overflow: hidden;
  margin-bottom: 24px;
}
.card-header {
  background: var(--rn-primary);
  color: #fff;
  border: 0;
  padding: 14px 18px;
}
.card-header h1, .card-header h2, .card-header h3, .card-header h4,
.card-header .description-header, .description-header {
  color: #fff; margin: 0; font-size: 17.9px; font-weight: 700; line-height: 1.35;
}
.card-header .card-header { padding: 0; background: none; border: 0; }   /* h3.card-header inside div.card-header */
.card-body { padding: 16px 18px; }
.card-body > p:last-child { margin-bottom: 0; }

/* Coloured info boxes used on IP pages */
.card-green, .card-yellow, .card-blue, .card-logins { border-radius: var(--rn-radius-sm); }

/* ---------- Lists (default login details) ---------- */
#myUL { border-radius: var(--rn-radius-sm); overflow: hidden; border: 1px solid var(--rn-border); }
#myUL li a {
  background: #fff; border: 0; border-bottom: 1px solid var(--rn-border);
  padding: 11px 14px; color: var(--rn-text); margin: 0;
}
#myUL li:last-child a { border-bottom: 0; }
#myUL li a:hover:not(.header) { background: var(--rn-primary-soft); text-decoration: none; }

/* ---------- Buttons ---------- */
.btn, a.btn-lg, a.btn-success, a.btn-info, a.btn-warning {
  display: inline-block;
  border-radius: var(--rn-radius-sm);
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn { padding: 7px 14px; }
.btn-sm { padding: 5px 11px; font-size: 13.8px; }
a.btn-lg { padding: 10px 22px; font-size: 16px; }
.btn:hover, a.btn-lg:hover { text-decoration: none; box-shadow: var(--rn-shadow-hover); }
.btn:active, a.btn-lg:active { transform: translateY(1px); }
.btn-success, a.btn-success, .btn-green { background-color: var(--rn-green); border-color: var(--rn-green); color: #fff; }
.btn-success:hover, .btn-success:focus, a.btn-success:hover, .btn-green:hover { background-color: var(--rn-green-dark); border-color: var(--rn-green-dark); color: #fff; }
.btn-warning, a.btn-warning { background-color: var(--rn-orange); border-color: var(--rn-orange); color: #fff; }
.btn-warning:hover, .btn-warning:focus { background-color: var(--rn-orange-dark); border-color: var(--rn-orange-dark); color: #fff; }
.btn-info, a.btn-info { background-color: var(--rn-info); border-color: var(--rn-info); color: #fff; }
.btn-info:hover, .btn-info:focus { background-color: var(--rn-info-dark); border-color: var(--rn-info-dark); color: #fff; }
.btn-outline { background: #fff; border: 1px solid var(--rn-border); color: var(--rn-primary); }
.btn-outline:hover { border-color: var(--rn-primary); color: var(--rn-primary-dark); background: var(--rn-primary-soft); }

/* ---------- Tables ---------- */
.table { background: #fff; border-radius: var(--rn-radius-sm); }
.table > thead > tr > th, .table th {
  background: var(--rn-primary-soft); color: var(--rn-heading);
  font-weight: 700; border-bottom: 2px solid var(--rn-border);
}
.table > tbody > tr > td, .table td { border-top: 1px solid var(--rn-border); vertical-align: middle; }
.table > tbody > tr:hover > td { background: #fafbfd; }

/* ---------- Home page ---------- */
.alert, .home-intro { border-radius: var(--rn-radius); }
.bootstrap-select .dropdown-toggle { border-radius: var(--rn-radius-sm); }

/* ---------- Footer ---------- */
footer.footer-default {
  background: #2f3e50;
  color: rgba(255, 255, 255, .78);
  padding: 34px 0 18px;
  margin-top: 30px;
  font-size: 15.2px;
}
footer.footer-default p { margin: 0 0 4px; }
footer.footer-default a, footer.footer-default .nav-link { color: rgba(255, 255, 255, .82); padding: 3px 0; display: inline-block; }
footer.footer-default a:hover { color: #fff; text-decoration: underline; }

/* ---------- Tablet & phone ---------- */
@media (max-width: 991px) {
  .navbar-toggler.mTogglerButton { display: block; }
  header.header-web .navbar-collapse { flex-basis: 100%; margin: 0; padding: 0; border: 0; box-shadow: none; }
  header.header-web .navbar-collapse:not(.in):not(.show):not(.collapsing) { display: none !important; }
  header.header-web .navbar-collapse.in, header.header-web .navbar-collapse.show { display: block !important; }
  header.header-web .navbar-nav { flex-direction: column; gap: 2px; padding: 6px 0 12px; }
  header.header-web .nav-link, header.header-web .navbar-nav > li > a { display: block; border-radius: 8px; padding: 12px 14px; }
}

@media (max-width: 767px) {
  body { font-size: 15.5px; }
  .site-content { padding-top: 14px; }
  .container { padding-left: 15px; padding-right: 15px; }   /* must match Bootstrap rows (-15px) */
  header.header-web .navbar-brand, header.header-web .logo-setting { font-size: 21.6px; padding: 12px 4px; }
  header.header-web .header-web-img { width: 36px; height: 36px; }

  /* The two info boxes on model and IP pages were fixed at 45% width -> stack them on phones */
  .entry-content > div[style*="45%"], .entry-content div[style*="width:45%"], .entry-content div[style*="width: 45%"] {
    width: 100% !important; float: none !important; padding: 0 !important;
  }

  /* Wide tables scroll sideways instead of breaking the page */
  .table, table.table, .entry-content table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Home page IP list (rows with an IP + Login button): IP on the left, button on the right, one line */
  .row-2:has(> .set_font_bold) { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 6px 0; border-bottom: 1px solid var(--rn-border); }
  .row-2:has(> .set_font_bold) > [class*="col-"] { width: auto; float: none; padding: 0 4px; }
  .row-2 .set_font_bold { white-space: nowrap; flex: 1; text-align: left; padding-left: 10px; }
  .row-2:has(> .set_font_bold) > [class*="col-"]:last-child { padding-right: 10px; }

  /* Button groups (Popular brands / Popular IPs / Brands using this IP): one flowing area that wraps.
     The nested grid boxes (.row-2 / .col-md-4) are taken out of the layout so the buttons line up evenly. */
  .card-body > .col-md-12:has(.row-2 .btn):not(:has(.set_font_bold)) {
    display: flex; flex-wrap: wrap; gap: 8px; float: none; width: 100%; padding: 0;
  }
  .card-body > .col-md-12:has(.row-2 .btn):not(:has(.set_font_bold)) .row-2,
  .card-body > .col-md-12:has(.row-2 .btn):not(:has(.set_font_bold)) .row-2 [class*="col-"] { display: contents; }
  .card-body > .col-md-12:has(.row-2 .btn):not(:has(.set_font_bold)) .btn {
    margin: 0; font-size: 14px; padding: 6px 12px; white-space: normal; text-align: left;
  }
  /* Bootstrap's invisible clearfix boxes would otherwise take the first slot */
  .card-body > .col-md-12:has(.row-2 .btn):not(:has(.set_font_bold)) .row-2::before,
  .card-body > .col-md-12:has(.row-2 .btn):not(:has(.set_font_bold)) .row-2::after { display: none; }
  /* "More Router" / "More Ip Address" on its own line, centred */
  .card-body > .col-md-12:has(.row-2 .btn):not(:has(.set_font_bold)) .btn-more {
    flex-basis: 100%; text-align: center; margin-top: 8px !important; font-size: 16px; padding: 10px 14px;
  }

  .card-header { padding: 12px 14px; }
  .card-body { padding: 14px; }
  .card { margin-bottom: 18px; }

  footer.footer-default .col-md-4 { width: 50%; float: left; margin-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}