/* =============================================================
   Insty Connect 2027 — client area theme (child of Twenty-One)
   Look "B": the website's dark nav, page-top band and footer;
   light pages underneath so WHMCS forms, invoices and checkout
   stay readable. Tokens match the website (assets/css/styles.css)
   and _company/brand.md.
   Twenty-One loads this file last, so these rules win.
   ============================================================= */

:root {
  --ic-bg: #0b0d11;
  --ic-surface: #14181f;
  --ic-blue: #1689ff;
  --ic-blue-700: #0a5fb0;
  --ic-gold: #fdc054;
  --ic-green: #54d6a0;
  --ic-grad: linear-gradient(135deg, #1689ff 0%, #0a5fb0 100%);
  --ic-glow: radial-gradient(70% 140% at 82% -20%, rgba(22,137,255,.24), transparent 60%),
             radial-gradient(50% 110% at 0% 0%, rgba(10,95,176,.16), transparent 55%),
             #0b0d11;
  --ic-page: #f2f4f7;
  --ic-card: #fff;
  --ic-line: #e2e7ee;
  --ic-line-soft: #edf0f4;
  --ic-ink: #121821;
  --ic-ink-2: #3b4555;
  --ic-muted: #6b7686;
  --ic-on-dark: #f3f6fa;
  --ic-on-dark-2: #c2cad6;
  --ic-soft: #eef5ff;
  --ic-radius: 18px;
  --ic-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --ic-display: "Montserrat", system-ui, -apple-system, sans-serif;
  --ic-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Base ---------- */
body.ic27 {
  font-family: var(--ic-body);
  color: var(--ic-ink-2);
  background: var(--ic-page);
  -webkit-font-smoothing: antialiased;
}
.ic27.primary-bg-color { background-color: var(--ic-page); }
.ic27 h1, .ic27 h2, .ic27 h3, .ic27 h4, .ic27 h5, .ic27 .h1, .ic27 .h2, .ic27 .h3, .ic27 .h4 {
  font-family: var(--ic-display);
  color: var(--ic-ink);
  letter-spacing: -0.01em;
}
.ic27 a { color: var(--ic-blue); }
.ic27 a:hover { color: var(--ic-blue-700); }
.ic27 .text-muted { color: var(--ic-muted) !important; }

/* ---------- Header / nav ---------- */
.ic27 header.header.ic27-header { background: var(--ic-bg); border-bottom: 1px solid rgba(255,255,255,.08); }
.ic27-nav { padding: 0; min-height: 72px; }
/* Bootstrap drops this container's side padding below xl; keep the page gutter. */
.ic27-nav > .container { flex-wrap: wrap; align-items: center; padding-left: 15px !important; padding-right: 15px !important; }
.ic27-brand { padding: 10px 0; margin-right: 20px; }
.ic27 header.header .logo-img { max-height: 46px; width: auto; }
.ic27-toolbar { order: 2; margin-left: auto; flex-direction: row; align-items: center; gap: 8px; }
.ic27-collapse { order: 3; }
@media (min-width: 1200px) {
  .ic27-collapse { order: 1; }
  .ic27-toolbar { margin-left: 12px; }
}

/* Top-level menu links. Twenty-One moves items into "More" when #nav is 30px tall or
   more, so these stay at 28px. */
.ic27 header.header #nav { padding: 0; margin: 0; }
.ic27 header.header #nav > li > a,
.ic27 header.header .ic27-account > li > a {
  display: inline-flex; align-items: center;
  height: 28px; line-height: 20px; padding: 4px 13px !important;
  border-radius: 999px;
  font-family: var(--ic-body); font-weight: 600; font-size: .93rem;
  color: var(--ic-on-dark-2);
  transition: color .15s, background .15s;
}
.ic27 header.header #nav > li > a:hover,
.ic27 header.header #nav > li > a:focus,
.ic27 header.header #nav > li.show > a,
.ic27 header.header .ic27-account > li > a:hover,
.ic27 header.header .ic27-account > li.show > a {
  color: var(--ic-on-dark); background: rgba(255,255,255,.08); text-decoration: none;
}
.ic27 header.header #nav > li.active > a { color: var(--ic-on-dark); background: rgba(255,255,255,.1); }
.ic27 header.header .ic27-account > li > a { border: 1px solid rgba(255,255,255,.16); }

/* Dropdowns */
.ic27 header.header .dropdown-menu {
  border: 1px solid var(--ic-line); border-radius: 14px; padding: 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28); margin-top: 10px; min-width: 220px;
}
.ic27 header.header .dropdown-menu li.dropdown-item { padding: 0; background: none; }
.ic27 header.header .dropdown-menu a,
.ic27 header.header .dropdown-menu a.dropdown-item {
  display: block; color: var(--ic-ink) !important; font-size: .92rem; font-weight: 500;
  padding: 8px 12px !important; border-radius: 9px; line-height: 1.35;
}
.ic27 header.header .dropdown-menu a:hover { background: var(--ic-soft); color: var(--ic-blue-700) !important; text-decoration: none; }
.ic27 header.header .dropdown-menu i { color: var(--ic-muted); width: 18px; }
.ic27 header.header .dropdown-divider { margin: 6px 4px; border-color: var(--ic-line-soft); }

/* Toolbar: round icon buttons, admin return pill */
.ic27 header.header .ic27-toolbar .nav-item { margin: 0; }
.ic27 header.header .ic27-icon {
  width: 40px; height: 40px; padding: 0 !important; border-radius: 50% !important;
  display: grid; place-items: center; position: relative;
  border: 1px solid rgba(255,255,255,.16) !important; color: var(--ic-on-dark-2) !important;
  background: transparent; font-size: 1rem;
}
.ic27 header.header .ic27-icon:hover { color: var(--ic-on-dark) !important; border-color: var(--ic-blue) !important; background: rgba(255,255,255,.05); }
.ic27 header.header .ic27-icon .badge {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; line-height: 18px;
  padding: 0 5px; border-radius: 999px; font-size: 10px; opacity: 1;
  background: var(--ic-blue); color: #fff; border: 2px solid var(--ic-bg);
}
.ic27 header.header .ic27-admin {
  border-radius: 999px; background: var(--ic-gold); color: #1a1206 !important;
  font-family: var(--ic-display); font-weight: 700; font-size: .82rem; padding: 7px 14px;
}
.ic27 header.header .ic27-admin:hover { background: #ffd27a; }

/* Mobile menu */
@media (max-width: 1199.98px) {
  .ic27-collapse { flex-basis: 100%; }
  .ic27-collapse.show, .ic27-collapse.collapsing { padding: 6px 0 16px; border-top: 1px solid rgba(255,255,255,.08); }
  .ic27 header.header #nav > li > a, .ic27 header.header .ic27-account > li > a { height: auto; padding: 10px 12px !important; display: flex; }
  .ic27 header.header .ic27-account > li > a { border: 0; }
  .ic27 header.header .dropdown-menu { box-shadow: none; margin: 4px 0 8px; }
}

/* Notifications popover */
.popover-user-notifications { border-radius: 14px; border-color: var(--ic-line); box-shadow: 0 18px 40px rgba(0,0,0,.2); font-family: var(--ic-body); }

/* ---------- Page-top band ---------- */
.ic27-band { background: var(--ic-glow); color: var(--ic-on-dark); padding: 34px 0 34px; }
.ic27-band h1 { color: #fff; font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.12; margin: 0; }
.ic27-band .ic27-lead { color: var(--ic-on-dark-2); font-size: 1.05rem; margin: 10px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ic27-band .ic27-lead a { color: #7fbcff; font-weight: 600; }
.ic27-eyebrow {
  font-family: var(--ic-display); font-weight: 700; font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ic-blue); display: inline-flex; align-items: center; gap: .6em; margin: 0 0 12px;
}
.ic27-eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--ic-blue); }
.ic27-crumbs .breadcrumb { background: transparent; padding: 0; margin: 0 0 12px; font-size: .86rem; }
.ic27-crumbs .breadcrumb-item, .ic27-crumbs .breadcrumb-item.active { color: var(--ic-on-dark-2); }
.ic27-crumbs .breadcrumb-item a { color: var(--ic-on-dark-2); }
.ic27-crumbs .breadcrumb-item a:hover { color: #fff; text-decoration: none; }
.ic27-crumbs .breadcrumb-item.active { color: #fff; font-weight: 600; }
.ic27-crumbs .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.35); }
.ic27-band-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ic27-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.ic27-stat {
  min-width: 140px; padding: 14px 18px; border-radius: 16px; text-decoration: none !important;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: border-color .15s;
}
.ic27-stat:hover { border-color: var(--ic-blue); }
.ic27-stat b { display: block; font-family: var(--ic-display); font-weight: 800; font-size: 1.7rem; line-height: 1.1; color: #fff; }
.ic27-stat span { font-size: .84rem; color: var(--ic-on-dark-2); font-weight: 500; }
.ic27 .ic27-band .label.status { background: rgba(84,214,160,.15); color: var(--ic-green); }
.ic27 .ic27-band .label.status-suspended, .ic27 .ic27-band .label.status-cancelled, .ic27 .ic27-band .label.status-terminated, .ic27 .ic27-band .label.status-pending { background: rgba(253,192,84,.15); color: var(--ic-gold); }

/* The dashboard and login pull their first cards up into the band. Other pages start
   below it, because not every WHMCS page starts with a card. */
.ic27-band-home, .ic27-login .ic27-band, .ic27-password-reset-container .ic27-band { padding-bottom: 92px; }
.ic27 section#main-body { padding: 28px 0 64px; position: relative; }
.ic27-clientareahome section#main-body,
.ic27-login section#main-body,
.ic27-password-reset-container section#main-body { margin-top: -62px; padding-top: 0; }
.ic27-login .primary-content .card.mw-540, .ic27-password-reset-container .primary-content .card { margin-top: 0 !important; }

/* ---------- Cards, panels, sidebar ---------- */
.ic27 .card {
  background: var(--ic-card); border: 1px solid var(--ic-line); border-radius: var(--ic-radius);
  box-shadow: var(--ic-shadow);
}
.ic27 .card[class*="card-accent-"] { border-top: 1px solid var(--ic-line) !important; }
.ic27 .card-header {
  background: transparent; border-bottom: 1px solid var(--ic-line-soft);
  padding: 16px 20px; border-radius: var(--ic-radius) var(--ic-radius) 0 0 !important;
}
.ic27 .card-footer { background: transparent; border-top: 1px solid var(--ic-line-soft); border-radius: 0 0 var(--ic-radius) var(--ic-radius) !important; }
.ic27 .card-footer:empty { display: none; }
.ic27 .card-title, .ic27 .primary-content .card-title { font-family: var(--ic-display); font-weight: 800; font-size: 1.08rem; color: var(--ic-ink); }
.ic27 .primary-content .card { margin-bottom: 20px; }
.ic27 .list-group-item { border-color: var(--ic-line-soft); color: var(--ic-ink-2); }
.ic27 .card > .list-group:last-child .list-group-item:last-child { border-radius: 0 0 var(--ic-radius) var(--ic-radius); }
.ic27 .list-group-item-action:hover, .ic27 .list-group-item-action:focus { background: #f6f9fd; color: var(--ic-ink); }
.ic27 .list-group-item.active { background: var(--ic-soft); border-color: var(--ic-line-soft); color: var(--ic-blue-700); font-weight: 600; }
.ic27 .list-group-item.active .badge { background: var(--ic-blue); color: #fff; }
.ic27 .sidebar .card { margin-bottom: 20px; overflow: hidden; }
.ic27 .sidebar .card-title { font-size: .98rem; }
.ic27 .sidebar .list-group-item { padding: 10px 20px; font-size: .93rem; }
.ic27 .sidebar .list-group-item i { color: var(--ic-muted); }

/* ---------- Buttons ---------- */
.ic27 .btn {
  border-radius: 999px; font-family: var(--ic-display); font-weight: 700; letter-spacing: .005em;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.ic27 .btn-primary, .ic27 .btn-primary:not(:disabled):not(.disabled):active {
  background: var(--ic-grad); border-color: transparent; color: #fff;
  box-shadow: 0 8px 22px rgba(22,137,255,.28);
}
.ic27 .btn-primary:hover, .ic27 .btn-primary:focus { background: var(--ic-grad); border-color: transparent; color: #fff; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(22,137,255,.36); }
.ic27 .btn-default, .ic27 .btn-secondary, .ic27 .btn-outline-secondary {
  background: #fff; color: var(--ic-ink); border: 1px solid #d3dae4;
}
.ic27 .btn-default:hover, .ic27 .btn-secondary:hover, .ic27 .btn-outline-secondary:hover { background: #f6f9fd; color: var(--ic-ink); border-color: var(--ic-blue); }
.ic27 .btn-success { background: #1f9d68; border-color: #1f9d68; }
.ic27 .btn-success:hover { background: #17855a; border-color: #17855a; }
.ic27 .btn-danger { background: #fff; color: #b42318; border: 1px solid #f1b8b3; }
.ic27 .btn-danger:hover { background: #fef0ee; color: #912018; border-color: #e58a82; }
.ic27 .btn.disabled, .ic27 .btn:disabled { transform: none; box-shadow: none; }
.ic27 .btn-link { font-family: var(--ic-body); font-weight: 600; box-shadow: none; }
.ic27 .btn-sm, .ic27 .btn-xs { font-size: .8rem; }
.ic27 .input-group > .btn, .ic27 .input-group-append .btn, .ic27 .input-group-prepend .btn { border-radius: 0; }
.ic27 .input-group > .input-group-append:last-child > .btn { border-radius: 0 10px 10px 0; }
.ic27 .input-group > .input-group-prepend:first-child > .btn { border-radius: 10px 0 0 10px; }

/* ---------- Forms ---------- */
.ic27 .form-control, .ic27 .custom-select {
  border-radius: 10px; border-color: #d3dae4; color: var(--ic-ink); min-height: 42px;
}
.ic27 .form-control:focus, .ic27 .custom-select:focus { border-color: var(--ic-blue); box-shadow: 0 0 0 4px rgba(22,137,255,.15); }
.ic27 .input-group-text { border-radius: 10px; border-color: #d3dae4; background: #f6f8fb; color: var(--ic-muted); }
.ic27 .input-group > .form-control:not(:first-child), .ic27 .input-group > .input-group-append > .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ic27 .input-group > .form-control:not(:last-child), .ic27 .input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ic27 label, .ic27 .form-control-label { font-weight: 600; color: var(--ic-ink-2); }

/* ---------- Tables (services, invoices, tickets) ---------- */
.ic27 .table-container {
  background: #fff; border: 1px solid var(--ic-line); border-radius: var(--ic-radius);
  box-shadow: var(--ic-shadow); padding: 8px 16px 12px;
}
.ic27 .table-list thead th, .ic27 .table thead th {
  font-family: var(--ic-display); font-weight: 700; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ic-muted); background: transparent;
  border-top: 0; border-bottom: 1px solid var(--ic-line);
}
.ic27 .table td { border-top-color: var(--ic-line-soft); vertical-align: middle; }
.ic27 .table-list > tbody > tr { background: transparent; }
.ic27 .table-list > tbody > tr:hover > td { background: #f6f9fd; }
.ic27 .table-list > tbody > tr > td { border-color: var(--ic-line-soft); }
.ic27 .dataTables_wrapper .dataTables_info { color: var(--ic-muted); }
.ic27 .page-item .page-link { border-radius: 9px; margin: 0 2px; border-color: var(--ic-line); color: var(--ic-ink-2); }
.ic27 .page-item.active .page-link { background: var(--ic-blue); border-color: var(--ic-blue); color: #fff; }

/* ---------- Status pills ---------- */
.ic27 .label {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  font-family: var(--ic-display); font-weight: 700; font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 10px; line-height: 1.3;
}
.ic27 .label.status { background: #eef1f5; color: #5b6676; }
.ic27 .label.status-active, .ic27 .label.status-paid, .ic27 .label.status-completed,
.ic27 .label.status-open, .ic27 .label.status-answered, .ic27 .label.status-accepted,
.ic27 .label.status-delivered, .ic27 .label-success { background: #e6f7ef; color: #13734b; }
.ic27 .label.status-active::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ic27 .label.status-pending, .ic27 .label.status-unpaid, .ic27 .label.status-customer-reply,
.ic27 .label.status-payment-pending, .ic27 .label.status-onhold, .ic27 .label.status-inprogress { background: #fff6e0; color: #8a5a00; }
.ic27 .label.status-suspended, .ic27 .label.status-overdue, .ic27 .label.status-collections,
.ic27 .label.status-fraud, .ic27 .label-danger { background: #fdeeee; color: #a3261b; }
.ic27 .label.status-cancelled, .ic27 .label.status-terminated, .ic27 .label.status-closed,
.ic27 .label.status-refunded, .ic27 .label.status-expired { background: #eef1f5; color: #5b6676; }
.ic27 .label-placeholder { display: none; }

/* ---------- Alerts ---------- */
.ic27 .alert { border-radius: 14px; border-width: 1px; }
.ic27 .alert-info { background: #eef5ff; border-color: #b9d8ff; color: #0a3f75; }
.ic27 .alert-success { background: #ecfaf3; border-color: #a9e6c8; color: #14573a; }
.ic27 .alert-warning { background: #fff8e8; border-color: #f5d899; color: #5c4200; }
.ic27 .alert-danger { background: #fdeeee; border-color: #f3b9b9; color: #7a1c1c; }

/* ---------- Dashboard ---------- */
.ic27-card { padding: clamp(18px, 2.4vw, 28px); }
.ic27-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ic27-card-h h2 { font-size: 1.22rem; font-weight: 800; margin: 0; }
.ic27-link { font-weight: 600; font-size: .9rem; white-space: nowrap; }
.ic27-link i { font-size: .8em; margin-left: 3px; }
.ic27-svc {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 18px;
  border: 1px solid var(--ic-line-soft); border-radius: 16px; background: #fafbfd;
}
.ic27-svc + .ic27-svc { margin-top: 10px; }
.ic27-svc-ic {
  width: 50px; height: 50px; border-radius: 14px; flex: none; display: grid; place-items: center;
  background: var(--ic-soft); color: var(--ic-blue); font-size: 1.25rem;
}
.ic27-svc-info { flex: 1 1 260px; min-width: 0; }
.ic27-svc-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--ic-display); font-weight: 800; font-size: 1.04rem; color: var(--ic-ink); }
.ic27-svc-meta { color: var(--ic-muted); font-size: .9rem; margin: 4px 0 0; }
.ic27-svc-meta b { color: var(--ic-ink-2); font-weight: 600; }
.ic27-svc-act { display: flex; gap: 10px; flex-wrap: wrap; }
.ic27-svc-act .btn { padding: .6rem 1.25rem; }
.ic27-svc-act .btn i { font-size: .8em; margin-left: 4px; }
.ic27-empty { margin: 0 0 16px; color: var(--ic-ink-2); }

.ic27-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.ic27 .ic27-q { margin: 0 !important; padding: 20px; display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; transition: transform .15s, border-color .15s; }
.ic27 .ic27-q:hover { transform: translateY(-3px); border-color: rgba(22,137,255,.45); text-decoration: none; }
.ic27-q-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--ic-soft); color: var(--ic-blue); font-size: 1.05rem; }
.ic27-q h3 { font-size: 1rem; font-weight: 800; margin: 0; display: flex; align-items: center; justify-content: space-between; }
.ic27-q h3 i { font-size: .8rem; color: var(--ic-muted); }
.ic27-q p { font-size: .88rem; color: var(--ic-muted); margin: 0; }

.ic27-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.ic27-panels > .card { margin: 0 !important; overflow: hidden; }
.ic27-panels > .card.ic27-span { grid-column: 1 / -1; }
.ic27-panels .card-header .btn-xs { font-family: var(--ic-body); font-weight: 600; font-size: .78rem; border-radius: 999px; padding: 3px 10px; background: var(--ic-soft) !important; color: var(--ic-blue-700) !important; border: 0; }
.ic27-panels .card-title i { color: var(--ic-blue); }
.ic27-panels .list-group-item { padding: 12px 20px; }
.ic27-panels .card-danger, .ic27-panels .card-accent-red { border-color: #f3b9b9 !important; }

/* ---------- Product pages from our modules ---------- */
/* The band already shows the product name and SIM, so drop the repeat at the top. */
.ic27 .ss > h2, .ic27 .ss > .ss-sub { display: none; }
.ic27-clientareaproductdetails .primary-content > h2:first-child { display: none; }
/* The data plan page (instyonline) has no card of its own. */
.ic27-clientareaproductdetails .primary-content > h2:first-child + form {
  display: block; background: #fff; border: 1px solid var(--ic-line); border-radius: var(--ic-radius);
  box-shadow: var(--ic-shadow); padding: clamp(18px, 2.4vw, 28px);
}
.ic27-clientareaproductdetails .primary-content > h2:first-child + form h3 { font-size: 1.15rem; font-weight: 800; }
.ic27-clientareaproductdetails .primary-content > h2:first-child + form hr { border-color: var(--ic-line-soft); }
.ic27 .ss { max-width: none; }
.ic27 .ss-card { border-radius: var(--ic-radius); border-color: var(--ic-line); box-shadow: var(--ic-shadow); }
.ic27 .ss-go { border-radius: 999px; background: var(--ic-grad); font-family: var(--ic-display); box-shadow: 0 8px 22px rgba(22,137,255,.28); }
.ic27 .ss-go:disabled { background: #b9c4d2; box-shadow: none; }
.ic27 .ss-cancel { border-radius: 999px; font-family: var(--ic-display); }

/* ---------- Footer ---------- */
.ic27 footer.footer.ic27-footer { background: var(--ic-bg); color: var(--ic-on-dark-2); padding: 36px 0 30px; border-top: 1px solid rgba(255,255,255,.06); }
.ic27-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ic27-footer .logo-img { height: 40px; width: auto; }
.ic27-footer .ic27-brand { padding: 0; margin: 0; }
.ic27-foot-links { gap: 2px 18px; }
.ic27 footer.footer .ic27-foot-links .nav-link { color: var(--ic-on-dark-2); font-weight: 600; padding: 4px 0; }
.ic27 footer.footer .ic27-foot-links .nav-link:hover { color: #fff; }
.ic27-foot-bottom { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ic27 footer.footer .copyright { margin: 0; text-align: left; font-size: .85rem; color: var(--ic-on-dark-2); }
.ic27 footer.footer .btn { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--ic-on-dark-2); font-family: var(--ic-body); font-weight: 500; font-size: .85rem; line-height: 1.8rem; padding: 0 12px; }

/* ---------- Small screens ---------- */
@media (max-width: 991.98px) {
  .ic27-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ic27-panels { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .ic27-band { padding: 26px 0 28px; }
  .ic27-band-home, .ic27-login .ic27-band, .ic27-password-reset-container .ic27-band { padding-bottom: 84px; }
  .ic27-stats { width: 100%; }
  .ic27-stat { flex: 1; min-width: 0; padding: 12px 14px; }
  .ic27-stat b { font-size: 1.4rem; }
  .ic27-svc { padding: 14px; gap: 12px; }
  .ic27-svc-act, .ic27-svc-act .btn { width: 100%; }
  .ic27-foot-row, .ic27-foot-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .ic27-quick { grid-template-columns: 1fr; }
}