/*
 * IBC public web UI v1
 *
 * Visual-only compatibility layer for the legacy CodeIgniter website.
 * The stylesheet is screen-only and intentionally does not redefine Bootstrap
 * rows, columns, ordering, or the Home page's structural positioning.
 */

@media screen {
:root {
  --ibc-primary: #123bc8;
  --ibc-primary-dark: #081b8b;
  --ibc-primary-soft: #edf2ff;
  --ibc-canvas: #f7f8ff;
  --ibc-surface: #ffffff;
  --ibc-text: #101b4d;
  --ibc-muted: #5b6480;
  --ibc-border: #dde2f2;
  --ibc-success: #22c55e;
  --ibc-warning: #f59e0b;
  --ibc-danger: #b30a17;
  --ibc-radius-sm: 12px;
  --ibc-radius-md: 16px;
  --ibc-radius-lg: 18px;
  --ibc-radius-xl: 24px;
  --ibc-shadow-sm: 0 6px 18px rgba(8, 27, 139, 0.045);
  --ibc-shadow: 0 14px 38px rgba(8, 27, 139, 0.09);
  --ibc-focus: 0 0 0 4px rgba(18, 59, 200, 0.14);
}

html {
  background: var(--ibc-canvas);
  color: var(--ibc-text);
}

body {
  background: var(--ibc-canvas) !important;
  background-image: none !important;
  color: var(--ibc-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif !important;
}

body,
button,
input,
select,
textarea {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ibc-text);
  font-weight: 800;
  letter-spacing: -0.025em;
}

p,
label,
small {
  color: var(--ibc-muted);
}

.text-muted {
  color: var(--ibc-muted) !important;
}

a {
  color: var(--ibc-primary);
  transition: color 160ms ease, background-color 160ms ease,
    border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

a:hover {
  color: var(--ibc-primary-dark);
}

::selection {
  background: rgba(18, 59, 200, 0.16);
  color: var(--ibc-text);
}

/* Navigation: same 80 px shell and same menu order as the legacy web. */
header,
header.background-header,
header[style] {
  height: 80px;
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid rgba(221, 226, 242, 0.92);
  box-shadow: 0 8px 28px rgba(8, 27, 139, 0.07);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
}

header .navbar,
header.background-header .navbar,
header .navbar.bg-light {
  min-height: 80px;
  padding: 0 !important;
  background: transparent !important;
}

header .navbar-brand {
  color: var(--ibc-text) !important;
}

header .navbar-brand h2,
header.background-header .navbar-brand h2,
header .navbar-brand h2.black {
  color: var(--ibc-text) !important;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

header .navbar-brand img {
  border-radius: 11px;
  box-shadow: 0 5px 14px rgba(8, 27, 139, 0.2);
  margin-right: 6px;
}

header .navbar-nav a.nav-link,
header .navbar-nav .nav-link > a.btn,
header .navbar-nav a.black,
header.background-header .navbar-nav a.nav-link {
  color: var(--ibc-text) !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 999px;
}

header .navbar-nav a.nav-link:hover,
header .navbar-nav a.nav-link:focus,
header .navbar-nav .nav-link > a.btn:hover,
header .navbar-nav .nav-link > a.btn:focus,
header.background-header .navbar-nav a.nav-link:hover,
header.background-header .navbar-nav a.nav-link:focus {
  color: var(--ibc-primary) !important;
  background: var(--ibc-primary-soft);
  box-shadow: none;
}

header .navbar-nav .active > .nav-link,
header .navbar-nav .nav-link.active,
header .navbar-nav .nav-link.show,
header .navbar-nav .show > .nav-link {
  color: var(--ibc-primary) !important;
}

header .navbar-toggler {
  height: 42px;
  width: 44px;
  border: 1px solid var(--ibc-border) !important;
  border-radius: 13px !important;
  background: var(--ibc-surface) !important;
  box-shadow: var(--ibc-shadow-sm);
}

header .navbar-toggler-icon::after {
  color: var(--ibc-primary) !important;
}

.dropdown-menu {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--ibc-border);
  border-radius: var(--ibc-radius-md);
  box-shadow: var(--ibc-shadow);
  padding: 8px;
}

.dropdown-item {
  color: var(--ibc-text);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 12px;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
  color: var(--ibc-primary);
  background: var(--ibc-primary-soft);
}

/* Shared surfaces. Specificity wins over legacy per-page border resets. */
body .card,
body .modal-content,
body .jumbotron,
body .list-group-item {
  background: var(--ibc-surface) !important;
  border: 1px solid var(--ibc-border) !important;
  border-radius: var(--ibc-radius-lg) !important;
  box-shadow: none;
}

body .card-header,
body .card-footer,
body .modal-header,
body .modal-footer {
  background: transparent;
  border-color: var(--ibc-border);
}

body .card-header:first-child {
  border-radius: var(--ibc-radius-lg) var(--ibc-radius-lg) 0 0;
}

body .modal-content {
  border-radius: var(--ibc-radius-xl) !important;
  box-shadow: 0 24px 70px rgba(8, 27, 139, 0.18);
}

body .modal-header {
  border-radius: var(--ibc-radius-xl) var(--ibc-radius-xl) 0 0;
}

body .close {
  color: var(--ibc-text);
  text-shadow: none;
}

/* Forms and actions mirror the current Flutter visual language. */
.form-control,
.custom-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
  color: var(--ibc-text);
  background-color: var(--ibc-surface);
  border: 1px solid var(--ibc-border);
  border-radius: var(--ibc-radius-md) !important;
  min-height: 46px;
  box-shadow: none;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: #9299b1;
  opacity: 1;
}

.form-control:focus,
.custom-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
input:focus,
textarea:focus,
select:focus {
  color: var(--ibc-text);
  background-color: var(--ibc-surface);
  border-color: var(--ibc-primary);
  box-shadow: var(--ibc-focus);
  outline: none;
}

.btn,
button,
input[type="button"],
input[type="submit"] {
  border-radius: var(--ibc-radius-md);
  font-weight: 750;
}

.btn:not(.btn-sm):not(.btn-link) {
  min-height: 44px;
  padding: 10px 18px;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(18, 59, 200, 0.34);
  outline-offset: 3px;
}

.btn-primary,
.btn-info,
button.btn-primary,
input.btn-primary[type="submit"] {
  color: #fff !important;
  background: linear-gradient(135deg, var(--ibc-primary), var(--ibc-primary-dark));
  border-color: transparent !important;
  box-shadow: 0 9px 22px rgba(18, 59, 200, 0.22);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus {
  color: #fff !important;
  background: linear-gradient(135deg, #1747e1, var(--ibc-primary-dark));
  box-shadow: 0 11px 26px rgba(18, 59, 200, 0.28);
}

.btn-outline-primary {
  color: var(--ibc-primary);
  border-color: var(--ibc-primary);
  background: var(--ibc-surface);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #fff;
  background: var(--ibc-primary);
  border-color: var(--ibc-primary);
}

.btn-success {
  background: var(--ibc-success);
  border-color: var(--ibc-success);
}

.btn-warning {
  background: var(--ibc-warning);
  border-color: var(--ibc-warning);
}

.btn-danger {
  background: var(--ibc-danger);
  border-color: var(--ibc-danger);
}

/* Tables, lists, status components, and pagination. */
.table {
  color: var(--ibc-text);
  background: var(--ibc-surface);
}

.table thead th {
  color: var(--ibc-muted);
  background: #f0f3ff;
  border-color: var(--ibc-border);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.table td,
.table th {
  border-color: var(--ibc-border);
}

.table-hover tbody tr:hover {
  color: var(--ibc-text);
  background: #f6f8ff;
}

.badge,
.label {
  border-radius: 999px !important;
  font-weight: 750;
  padding: 0.38rem 0.62rem;
}

.badge-primary,
.label-primary {
  background: var(--ibc-primary);
}

.badge-success,
.label-success {
  background: var(--ibc-success);
}

.badge-warning,
.label-warning {
  background: var(--ibc-warning);
}

.badge-danger,
.label-danger {
  background: var(--ibc-danger);
}

.alert {
  border: 1px solid var(--ibc-border);
  border-radius: var(--ibc-radius-md);
}

.alert-info,
.alert-primary {
  color: var(--ibc-primary-dark);
  background: var(--ibc-primary-soft);
  border-color: #cbd8ff;
}

.pagination .page-link {
  color: var(--ibc-primary);
  background: var(--ibc-surface);
  border-color: var(--ibc-border);
  border-radius: 11px !important;
  margin-left: 5px;
}

.pagination .page-link:hover,
.pagination .page-link:focus,
.pagination .page-item.active .page-link {
  color: #fff;
  background: var(--ibc-primary);
  border-color: var(--ibc-primary);
  box-shadow: none;
}

.page-heading .text-content h4,
.section-heading h4 {
  color: var(--ibc-primary);
}

.section-heading {
  border-color: var(--ibc-border);
}

.section-heading h2 {
  color: var(--ibc-text);
  font-weight: 850;
}

#preloader {
  background: var(--ibc-canvas) !important;
}

#preloader .jumper > div {
  background: var(--ibc-primary);
}

/* Standalone Login and Register pages use this same screen-only design skin. */
body.fix-menu .login.img-background {
  background: radial-gradient(
      circle at 50% 12%,
      rgba(18, 59, 200, 0.1),
      transparent 34%
    ),
    var(--ibc-canvas) !important;
}

body.fix-menu .login-card {
  opacity: 1;
}

body.fix-menu .login-card.auth-body {
  width: min(450px, calc(100vw - 32px));
}

body.fix-menu .login-card .auth-box {
  background: var(--ibc-surface);
  border: 1px solid var(--ibc-border);
  border-radius: var(--ibc-radius-xl);
  box-shadow: var(--ibc-shadow);
  padding: 30px;
}

body.fix-menu .login-card .auth-box h3,
body.fix-menu .login-card .auth-box .txt-primary {
  color: var(--ibc-text) !important;
  font-size: 28px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

body.fix-menu .login-card .auth-box hr {
  border-color: var(--ibc-border);
}

body.fix-menu .login-card .input-group-addon {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--ibc-surface) !important;
  border: 1px solid var(--ibc-border);
  border-left: 0;
  border-radius: 0 var(--ibc-radius-md) var(--ibc-radius-md) 0;
}

body.fix-menu .login-card #show_hide_password > .form-control {
  border-radius: var(--ibc-radius-md) 0 0 var(--ibc-radius-md) !important;
}

body.fix-menu .login-card #showpass,
body.fix-menu .login-card #forgot_pass {
  color: var(--ibc-primary);
  font-weight: 700;
}

.multi_step_form {
  background: var(--ibc-canvas) !important;
}

.multi_step_form #msform {
  background: transparent;
  opacity: 1;
}

.multi_step_form #msform .tittle p {
  color: var(--ibc-muted);
  font-family: inherit;
}

.multi_step_form #msform fieldset {
  background: var(--ibc-surface);
  border: 1px solid var(--ibc-border);
  border-radius: var(--ibc-radius-xl);
  box-shadow: none;
  margin-bottom: 24px;
}

.multi_step_form #msform fieldset h3 {
  color: var(--ibc-text);
  font-family: inherit;
  font-size: 22px;
  font-weight: 850;
}

.multi_step_form #msform fieldset h6,
.multi_step_form #msform fieldset label {
  color: var(--ibc-muted);
  font-family: inherit;
}

.multi_step_form #msform fieldset .form-control,
.multi_step_form #msform fieldset .product_select {
  min-height: 48px;
  padding: 12px 16px;
  color: var(--ibc-text);
  background: var(--ibc-surface);
  border: 1px solid var(--ibc-border);
  border-radius: var(--ibc-radius-md) !important;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.35;
}

.multi_step_form #msform fieldset .form-control:hover,
.multi_step_form #msform fieldset .form-control:focus,
.multi_step_form #msform fieldset .product_select:hover,
.multi_step_form #msform fieldset .product_select:focus {
  border-color: var(--ibc-primary);
  box-shadow: var(--ibc-focus);
}

.multi_step_form #msform #progressbar li {
  color: var(--ibc-muted);
  font-family: inherit;
  font-weight: 700;
}

.multi_step_form #msform #progressbar li::before,
.multi_step_form #msform #progressbar li::after {
  background: #e8ecf8;
}

.multi_step_form #msform #progressbar li.active {
  color: var(--ibc-primary);
}

.multi_step_form #msform #progressbar li.active::before,
.multi_step_form #msform #progressbar li.active::after {
  color: #fff;
  background: var(--ibc-primary);
}

.multi_step_form #msform .action-button {
  min-height: 44px;
  color: #fff;
  background: linear-gradient(135deg, var(--ibc-primary), var(--ibc-primary-dark));
  border: 1px solid transparent;
  border-radius: var(--ibc-radius-md);
  box-shadow: 0 9px 22px rgba(18, 59, 200, 0.2);
  font-family: inherit;
  font-weight: 800;
}

.multi_step_form #msform .action-button:hover,
.multi_step_form #msform .action-button:focus {
  color: #fff;
  background: linear-gradient(135deg, #1747e1, var(--ibc-primary-dark));
  border-color: transparent;
}

.multi_step_form #msform .previous_button {
  color: var(--ibc-primary);
  background: var(--ibc-surface);
  border-color: var(--ibc-primary);
  box-shadow: none;
}

/*
 * Home skin. Only paint, type, radius, and shadow are changed here. Its
 * Bootstrap column sizes, offsets, order, and inline placement remain intact.
 */
body #top_left,
body swiper-container.mySwiper,
body swiper-container.mySwiper swiper-slide,
body swiper-container.mySwiper img,
body img.below-right {
  border-radius: var(--ibc-radius-lg) !important;
}

body #top_left,
body swiper-container.mySwiper,
body img.below-right {
  background: var(--ibc-surface);
  border: 1px solid var(--ibc-border);
  box-shadow: var(--ibc-shadow-sm);
}

body swiper-container.mySwiper swiper-slide {
  background: var(--ibc-surface);
}

body .mySwiper .autoplay-progress {
  color: var(--ibc-primary);
}

body .mySwiper .autoplay-progress svg {
  stroke: var(--ibc-primary);
}

body .margin20 > .card,
body .offset-md-2 > .card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body .content > .row {
  background: var(--ibc-surface);
  border: 1px solid var(--ibc-border);
  border-radius: var(--ibc-radius-lg);
  box-shadow: 0 7px 20px rgba(8, 27, 139, 0.055);
  margin-right: 0;
  margin-bottom: 12px;
  margin-left: 0;
  padding: 12px !important;
}

body .content img.custom_width {
  background: #f1f3fb;
  border: 1px solid var(--ibc-border);
  border-radius: 14px !important;
}

body .content .font-title {
  color: var(--ibc-text);
  font-family: inherit;
  font-size: 19px;
  font-weight: 850;
  line-height: 1.28;
}

body .content .font-title:hover {
  color: var(--ibc-primary);
}

body .content .font-date {
  color: var(--ibc-primary) !important;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

body .content pre.body {
  color: var(--ibc-muted);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.65;
}

body .content hr,
body .kennels hr {
  border-color: var(--ibc-border);
}

body .kennels h4 {
  color: var(--ibc-text);
  font-size: 17px;
  font-weight: 850;
}

body .kennels .card-block a img[width="40"] {
  background: var(--ibc-primary-soft);
  border: 1px solid #d6e0ff;
  border-radius: 13px;
  padding: 7px;
}

body .kennels .list_kennel li {
  border-radius: 13px;
  transition: background-color 160ms ease;
}

body .kennels .list_kennel li:hover {
  background: var(--ibc-primary-soft);
}

body .kennels .list_kennel a {
  color: var(--ibc-text);
  font-size: 13px;
  font-weight: 750;
}

body .kennels .list_kennel a:hover {
  color: var(--ibc-primary);
}

body .kennels .img-logo {
  background: #f1f3fb;
  border: 1px solid var(--ibc-border);
  border-radius: 12px;
}

/*
 * Public blog depth v2.
 *
 * "5D-8D" is expressed as restrained, composited depth: canvas glow,
 * elevated surface, inset edge, cover frame, accent rail, soft shadow,
 * focus halo, and hover lift. The Home Bootstrap grid, offsets, order, and
 * article insertion point are deliberately left untouched.
 */
:root {
  --ibc-blog-ink: #0a1746;
  --ibc-blog-blue: #164bd8;
  --ibc-blog-blue-deep: #071a77;
  --ibc-blog-aqua: #59d8d0;
  --ibc-blog-gold: #d8a541;
  --ibc-blog-surface: rgba(255, 255, 255, 0.96);
  --ibc-blog-edge: rgba(158, 178, 235, 0.42);
  --ibc-blog-highlight: rgba(255, 255, 255, 0.9);
  --ibc-blog-shadow:
    0 1px 1px rgba(7, 26, 119, 0.035),
    0 4px 10px rgba(7, 26, 119, 0.045),
    0 12px 28px rgba(7, 26, 119, 0.07),
    0 28px 64px rgba(7, 26, 119, 0.075);
}

body .content > .row.ibc-blog-card {
  isolation: isolate;
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.99), rgba(246, 249, 255, 0.96))
    padding-box !important;
  border-color: var(--ibc-blog-edge) !important;
  box-shadow:
    inset 0 1px 0 var(--ibc-blog-highlight),
    inset 0 -1px 0 rgba(18, 59, 200, 0.035),
    var(--ibc-blog-shadow);
  cursor: pointer;
  transform: translateZ(0);
  transition: border-color 180ms ease, box-shadow 180ms ease,
    transform 180ms ease;
}

body .content > .row.ibc-blog-card::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42%;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 90% 8%, rgba(89, 216, 208, 0.13), transparent 43%),
    linear-gradient(150deg, transparent 28%, rgba(18, 59, 200, 0.045));
}

body .content > .row.ibc-blog-card::after {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 3px;
  content: "";
  background: linear-gradient(180deg, var(--ibc-blog-aqua), var(--ibc-blog-blue));
  border-radius: 0 99px 99px 0;
  box-shadow: 0 0 16px rgba(22, 75, 216, 0.24);
}

body .content > .row.ibc-blog-card:focus-visible,
body .content > .row.ibc-blog-card:focus-within {
  border-color: rgba(22, 75, 216, 0.65) !important;
  box-shadow:
    inset 0 1px 0 var(--ibc-blog-highlight),
    var(--ibc-focus),
    var(--ibc-blog-shadow);
  outline: none;
}

body .content > .row.ibc-blog-card > div:first-child {
  align-self: stretch;
}

body .content > .row.ibc-blog-card img.custom_width {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 125px;
  max-height: 164px;
  object-fit: cover;
  object-position: center;
  border-color: rgba(164, 181, 229, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 7px 18px rgba(7, 26, 119, 0.13);
  transition: filter 180ms ease, transform 220ms ease;
}

body .content > .row.ibc-blog-card .font-title {
  display: -webkit-box;
  overflow: hidden;
  margin: 2px 0 7px;
  color: var(--ibc-blog-ink);
  font-size: clamp(17px, 1.65vw, 21px);
  line-height: 1.3;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body .content > .row.ibc-blog-card .font-date {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 0 0 7px;
  padding: 3px 9px;
  color: var(--ibc-blog-blue-deep) !important;
  background: linear-gradient(135deg, #edf3ff, #f5fbff);
  border: 1px solid rgba(158, 178, 235, 0.38);
  border-radius: 999px;
  letter-spacing: 0.015em;
}

body .content > .row.ibc-blog-card pre.body,
body .content > .row.ibc-blog-card p.body {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #53607e;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.62;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

body .content > .row.ibc-blog-card hr.grey {
  display: none;
}

body .content > .row.ibc-blog-card .font-title[role="link"]:focus-visible,
body .content > .row.ibc-blog-card img[role="link"]:focus-visible {
  outline: 3px solid rgba(22, 75, 216, 0.32);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  body .content > .row.ibc-blog-card:hover {
    border-color: rgba(22, 75, 216, 0.44) !important;
    box-shadow:
      inset 0 1px 0 var(--ibc-blog-highlight),
      inset 0 -1px 0 rgba(18, 59, 200, 0.04),
      0 2px 2px rgba(7, 26, 119, 0.035),
      0 8px 18px rgba(7, 26, 119, 0.065),
      0 20px 42px rgba(7, 26, 119, 0.1),
      0 38px 76px rgba(7, 26, 119, 0.085);
    transform: translateY(-3px) translateZ(0);
  }

  body .content > .row.ibc-blog-card:hover img.custom_width {
    filter: saturate(1.05) contrast(1.02);
    transform: scale(1.025);
  }
}

/* Detail article: progressive classes are attached by public-blog-depth-v2.js. */
body.ibc-blog-detail-page {
  background:
    radial-gradient(circle at 10% 14%, rgba(89, 216, 208, 0.1), transparent 28rem),
    radial-gradient(circle at 92% 5%, rgba(22, 75, 216, 0.13), transparent 34rem),
    linear-gradient(180deg, #f4f7ff 0, #f8f9ff 38%, #f2f5fd 100%) !important;
  background-attachment: scroll !important;
}

body.ibc-blog-detail-page > div {
  opacity: 1;
}

body .ibc-blog-detail-shell {
  padding-bottom: clamp(36px, 7vw, 88px);
}

body .ibc-article-card {
  isolation: isolate;
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 255, 0.96))
    padding-box !important;
  border-color: rgba(158, 178, 235, 0.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(18, 59, 200, 0.04),
    0 2px 4px rgba(7, 26, 119, 0.035),
    0 10px 26px rgba(7, 26, 119, 0.07),
    0 30px 72px rgba(7, 26, 119, 0.105) !important;
}

body .ibc-article-card::before {
  position: absolute;
  z-index: -1;
  top: -130px;
  right: -90px;
  width: 330px;
  height: 330px;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle, rgba(89, 216, 208, 0.15), transparent 68%);
}

body .ibc-article-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 6px 16px;
  align-items: center;
  padding: clamp(20px, 4vw, 36px) clamp(18px, 5vw, 52px) !important;
  background:
    linear-gradient(125deg, rgba(237, 243, 255, 0.96), rgba(255, 255, 255, 0.88)) !important;
  border-bottom: 1px solid rgba(158, 178, 235, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

body .ibc-article-kicker {
  grid-column: 2;
  color: var(--ibc-blog-blue);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.15em;
  line-height: 1.3;
  text-transform: uppercase;
}

body .ibc-article-back {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--ibc-blog-blue-deep);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(158, 178, 235, 0.48);
  border-radius: 15px;
  box-shadow:
    inset 0 1px 0 #fff,
    0 7px 18px rgba(7, 26, 119, 0.09);
  transition: color 160ms ease, background-color 160ms ease,
    border-color 160ms ease, transform 160ms ease;
}

body .ibc-article-back:hover,
body .ibc-article-back:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, var(--ibc-blog-blue), var(--ibc-blog-blue-deep));
  border-color: transparent;
  outline: none;
  transform: translateX(-2px);
}

body .ibc-article-title {
  grid-column: 2;
  display: block !important;
  margin: 0;
  color: var(--ibc-blog-ink);
  font-size: clamp(24px, 3.3vw, 42px);
  font-weight: 900;
  line-height: 1.13;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

body .ibc-article-card > .card-block {
  padding: clamp(22px, 5vw, 58px);
}

body .ibc-article-content {
  max-width: 780px;
  margin: 0 auto;
  color: #34415f;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.82;
}

body .ibc-article-content > .row {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0 !important;
}

body .ibc-article-content > .row > .col-md-12 {
  padding: 0;
}

body .ibc-article-content > .row > div > div[style] {
  max-width: none !important;
  color: inherit !important;
  font-family: inherit !important;
}

body .ibc-article-content p {
  margin: 0 0 1.35em;
  color: #44516d !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

body .ibc-article-content > .row > div > div > p:first-child {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 18px;
  padding: 5px 11px;
  color: var(--ibc-blog-blue-deep) !important;
  background: linear-gradient(135deg, #eaf1ff, #f2fbff);
  border: 1px solid rgba(89, 216, 208, 0.42);
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.35 !important;
  text-transform: uppercase;
}

body .ibc-article-content h1,
body .ibc-article-content h2,
body .ibc-article-content h3,
body .ibc-article-content h4 {
  max-width: 24ch;
  margin: 1.5em 0 0.58em !important;
  color: var(--ibc-blog-ink) !important;
  font-family: inherit !important;
  font-weight: 880;
  line-height: 1.22;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

body .ibc-article-content h2 {
  position: relative;
  padding-left: 18px;
  font-size: clamp(22px, 2.4vw, 31px);
}

body .ibc-article-content h2::before {
  position: absolute;
  top: 0.12em;
  bottom: 0.12em;
  left: 0;
  width: 4px;
  content: "";
  background: linear-gradient(180deg, var(--ibc-blog-aqua), var(--ibc-blog-blue));
  border-radius: 99px;
  box-shadow: 0 0 14px rgba(22, 75, 216, 0.18);
}

body .ibc-article-content ul,
body .ibc-article-content ol {
  margin: 0 0 1.55em;
  padding: 18px 22px 18px 46px !important;
  background: linear-gradient(145deg, rgba(239, 244, 255, 0.92), rgba(250, 252, 255, 0.94));
  border: 1px solid rgba(158, 178, 235, 0.38);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 9px 24px rgba(7, 26, 119, 0.055);
}

body .ibc-article-content ul li,
body .ibc-article-content ol li,
body .ibc-article-content .content ul li {
  margin: 0.48em 0 0.48em 0;
  color: #3f4d6a;
}

body .ibc-article-content li::marker {
  color: var(--ibc-blog-blue);
  font-weight: 800;
}

body .ibc-article-content a {
  color: var(--ibc-blog-blue-deep);
  font-weight: 750;
  text-decoration-color: rgba(22, 75, 216, 0.35) !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px;
}

body .ibc-article-content a:hover,
body .ibc-article-content a:focus-visible {
  color: var(--ibc-blog-blue);
  text-decoration-color: currentColor !important;
}

body .ibc-article-content img,
body .ibc-article-content video,
body .ibc-article-content iframe {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 26px auto;
  background: #eef2fb;
  border: 1px solid rgba(158, 178, 235, 0.5);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 12px 30px rgba(7, 26, 119, 0.1),
    0 30px 64px rgba(7, 26, 119, 0.08);
}

body .ibc-article-content blockquote {
  margin: 1.6em 0;
  padding: 18px 22px;
  color: var(--ibc-blog-ink);
  background: linear-gradient(135deg, #edf3ff, #f5fbff);
  border: 1px solid rgba(158, 178, 235, 0.44);
  border-left: 4px solid var(--ibc-blog-blue);
  border-radius: 4px 18px 18px 4px;
  box-shadow: 0 10px 24px rgba(7, 26, 119, 0.06);
}

body .ibc-article-content table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  margin: 24px 0;
  border: 1px solid var(--ibc-border);
  border-radius: 16px;
  border-spacing: 0;
}

body .ibc-article-content th,
body .ibc-article-content td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ibc-border);
  text-align: left;
  vertical-align: top;
}

body .ibc-article-content th {
  color: var(--ibc-blog-ink);
  background: #eef3ff;
}

body .ibc-article-content code {
  overflow-wrap: anywhere;
  color: var(--ibc-blog-blue-deep);
  background: #edf2ff;
  border-radius: 7px;
  padding: 0.12em 0.34em;
}

body .ibc-article-content .ibc-article-reading-end {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(28px, 5vw, 52px);
  padding-top: 20px;
  color: #6a7390;
  border-top: 1px solid rgba(158, 178, 235, 0.38);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

body .ibc-article-content .ibc-article-reading-end::before {
  display: block;
  width: 34px;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--ibc-blog-aqua), var(--ibc-blog-blue));
  border-radius: 99px;
}

/*
 * Bootstrap expands .navbar-expand-lg at 992px, while the legacy template
 * still applies its collapsed-menu rules through 992px. Reset only that exact
 * overlap point; 991px keeps the drawer and 993px+ keeps the desktop layout.
 */
@media (min-width: 992px) and (max-width: 992px) {
  header .navbar .navbar-brand {
    position: static;
    top: auto;
    left: auto;
    width: auto;
  }

  header #navbarResponsive {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    background: transparent;
    box-shadow: none;
    text-align: center;
  }

  header .navbar .navbar-nav .nav-item {
    border-bottom: 0;
  }

  header .navbar .navbar-nav a.nav-link {
    padding: 0.5rem 1rem !important;
    text-align: center;
  }
}

/* Bootstrap's collapsed menu remains in its original place, with new skin. */
@media (max-width: 991.98px) {
  header .navbar-collapse {
    background: rgba(255, 255, 255, 0.99);
    border: 1px solid var(--ibc-border);
    border-radius: var(--ibc-radius-lg);
    box-shadow: var(--ibc-shadow);
    max-height: calc(100vh - 92px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
  }

  header .navbar .navbar-nav a.nav-link,
  header .navbar .navbar-nav .nav-link {
    border-radius: 11px;
  }

  header .navbar-nav .dropdown-menu {
    box-shadow: none;
    margin: 4px 0 8px;
  }
}

@media (max-width: 767.98px) {
  body .content > .row {
    border-radius: var(--ibc-radius-md);
  }

  body .content .font-title {
    font-size: 16px;
  }

  body .content pre.body {
    font-size: 13px;
    line-height: 1.5;
  }

  body .content > .row.ibc-blog-card {
    padding: 10px !important;
  }

  body .content > .row.ibc-blog-card::after {
    top: 12px;
    bottom: 12px;
  }

  body .content > .row.ibc-blog-card img.custom_width {
    width: 100%;
    min-height: 118px;
    max-height: 148px;
  }

  body .content > .row.ibc-blog-card .font-title {
    margin-top: 0;
    font-size: 16px;
    -webkit-line-clamp: 3;
  }

  body .content > .row.ibc-blog-card pre.body,
  body .content > .row.ibc-blog-card p.body {
    font-size: 13px;
    line-height: 1.5;
    -webkit-line-clamp: 2;
  }

  body .ibc-blog-detail-shell {
    padding-right: 12px;
    padding-bottom: 42px;
    padding-left: 12px;
  }

  body .ibc-article-card {
    border-radius: 22px !important;
  }

  body .ibc-article-header {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 5px 12px;
    padding: 18px 16px !important;
  }

  body .ibc-article-back {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  body .ibc-article-title {
    font-size: clamp(21px, 6.4vw, 29px);
    line-height: 1.18;
  }

  body .ibc-article-card > .card-block {
    padding: 22px 17px 28px;
  }

  body .ibc-article-content {
    font-size: 16px;
    line-height: 1.72;
  }

  body .ibc-article-content h2 {
    padding-left: 15px;
    font-size: 22px;
  }

  body .ibc-article-content ul,
  body .ibc-article-content ol {
    padding: 15px 16px 15px 38px !important;
    border-radius: 15px;
  }

  body .ibc-article-content img,
  body .ibc-article-content video,
  body .ibc-article-content iframe {
    margin: 21px auto;
    border-radius: 16px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  body .ibc-blog-detail-shell {
    padding-bottom: 28px;
  }

  body .ibc-article-header {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  body .ibc-article-card > .card-block {
    padding-top: 20px;
  }
}

@media (forced-colors: active) {
  body .content > .row.ibc-blog-card,
  body .ibc-article-card,
  body .ibc-article-back,
  body .ibc-article-content ul,
  body .ibc-article-content ol {
    border: 1px solid CanvasText !important;
    box-shadow: none !important;
  }

  body .content > .row.ibc-blog-card::after,
  body .ibc-article-content h2::before {
    background: Highlight;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Shared close control for form headers. Text action buttons that share
 * .close-form are intentionally excluded, preserving their original meaning. */
body .card-header .card-header-right > i.close-form,
body .card-header .row .card-header-right > i.close-form {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-height: 42px;
  margin: 0 !important;
  padding: 0 !important;
  color: #b30a17 !important;
  background: #fff !important;
  border: 1px solid #f3c9d0 !important;
  border-radius: 13px !important;
  box-shadow: 0 5px 14px rgba(179, 10, 23, 0.08) !important;
  cursor: pointer;
  font-size: 17px !important;
  line-height: 1 !important;
  transition: color 160ms ease, background-color 160ms ease,
    border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body .card-header .card-header-right > i.close-form:hover,
body .card-header .card-header-right > i.close-form:focus {
  color: #fff !important;
  background: #b30a17 !important;
  border-color: #b30a17 !important;
  box-shadow: 0 8px 18px rgba(179, 10, 23, 0.2) !important;
  outline: none;
  transform: translateY(-1px);
}

body .card-header .card-header-right > i.close-form:active {
  box-shadow: none !important;
  transform: translateY(0);
}

@media (max-width: 767.98px) {
  body .card-header .card-header-right > i.close-form,
  body .card-header .row .card-header-right > i.close-form {
    width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 12px !important;
  }
}
}