/* =========================================================
   KCI — MOBILE TOP BAR (≤ 991.98px)
   ========================================================= */
@media (max-width: 991.98px){
  /* brand (left) + hamburger (right) on the same line */
  .kci-authbar .container-xxl{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; position:relative;
  }
  .kci-authbar .navbar-brand{
    order:1; margin:0; flex:1 1 auto; display:flex; align-items:center;
  }
  .kci-authbar .navbar-toggler{
    order:2; width:auto !important; min-height:auto;
    padding:.35rem .55rem; background:#fff;
    border:1px solid #e5e7eb; border-radius:10px;
  }
  .kci-authbar .navbar-toggler .navbar-toggler-icon{ filter:invert(35%) }

  /* floating glass menu under bar */
  .kci-authbar .navbar-collapse{
    position:absolute; left:12px; right:12px; top:calc(100% + 8px);
    width:auto; z-index:1019;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px) saturate(1.1);
    border:1px solid #e8eef6; border-radius:14px; padding:12px;
    box-shadow:0 12px 28px rgba(15,23,42,.16), 0 2px 8px rgba(15,23,42,.08);
  }
  .kci-authbar .navbar-collapse.collapse:not(.show){ display:none }

  /* full width items inside panel */
  .kci-authbar .kci-pill,
  .kci-authbar .dropdown-toggle{ width:100%; min-height:46px }

  .kci-authbar .dropdown-menu{
    width:100%;
    border-radius:12px; border:1px solid #e8eef6;
    background:rgba(255,255,255,.98);
    box-shadow:0 8px 24px rgba(15,23,42,.16);
  }
}

/* slightly slimmer mobile controls */
@media (max-width: 991.98px){
  .kci-authbar .navbar-collapse .kci-pill,
  .kci-authbar .navbar-collapse .dropdown-toggle,
  .kci-authbar .navbar-collapse .btn{
    min-height:42px; padding:.52rem .7rem; font-size:.96rem; border-radius:10px;
  }
}

/* desktop guardrail so buttons don’t stretch */
@media (min-width: 992px){
  .btn,button,.button{ width:auto; min-height:40px }
}

/* =========================================================
   KCI — POLISHED LOGIN (shared base)
   ========================================================= */
.login-card h2{ font-weight:800; letter-spacing:-.2px; margin-bottom:.75rem }
.login-card .form-label{ font-weight:700; margin-bottom:.35rem }

.login-card .input-group{
  border:1px solid #e6ebf2; border-radius:12px; background:#fff; overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.login-card .input-group:focus-within{
  border-color:#93c5fd; box-shadow:0 0 0 4px rgba(37,99,235,.14);
}
.login-card .input-group-text{
  background:#f7f9fc; border:0; border-right:1px solid #edf2f7; color:#0f172a;
}
.login-card .form-control{ border:0; box-shadow:none!important; padding:.7rem .85rem; font-size:1rem }
.login-card .input-group .btn{ border:0; border-left:1px solid #edf2f7; background:#fff; padding:.55rem .7rem }
.login-card .input-group .btn:hover{ background:#f7f9fc }

.login-card .d-flex.justify-content-between.align-items-center.mb-3{ gap:.75rem }
.login-card .d-flex.justify-content-between.align-items-center.mb-3 a{
  display:inline-flex; align-items:center; gap:.35rem; text-underline-offset:2px;
}
.login-card .d-flex.justify-content-between.align-items-center.mb-3 a::before{ content:"🔑"; font-size:.95rem }

.login-card .text-center.mt-3{ margin-top:.9rem!important }
.login-card .text-center.mt-3 a{ font-weight:600 }

.login-card .alert{
  border-radius:12px; border:1px solid #e6ebf2; box-shadow:0 8px 18px rgba(15,23,42,.06);
}
.login-card .row.g-2.mt-1 .d-flex.align-items-center{
  background:#fff; border:1px solid #e6ebf2; border-radius:10px; padding:.5rem .6rem;
  box-shadow:0 4px 12px rgba(15,23,42,.04);
}

/* =========================================================
   KCI — DESKTOP TOP BAR (≥ 992px)
   ========================================================= */
@media (min-width: 992px){

  .kci-authbar{
    height:66px; min-height:66px;
    background:rgba(255,255,255,.88);
    backdrop-filter:saturate(1.15) blur(6px);
    border-bottom:1px solid rgba(12,20,33,.06);
    box-shadow:0 2px 24px rgba(12,20,33,.05);
  }
  .kci-authbar .container-xxl{ gap:14px }

  .kci-authbar .navbar-brand.brandmark{
    gap:10px; margin:0; padding:0; color:var(--text); transition:opacity .15s ease;
  }
  .kci-authbar .navbar-brand.brandmark:hover{ opacity:.92 }
  .kci-authbar .brand-logo{
    width:34px; height:34px; border-radius:10px;
    background:linear-gradient(135deg, var(--brand), var(--brand-2));
    display:grid; place-items:center; color:#fff; font-size:16px;
    box-shadow:0 2px 10px rgba(37,99,235,.18);
  }

  /* inline ribbon on the right — do not stretch */
  .kci-authbar .navbar-collapse{
    position:static !important; display:flex !important; align-items:center;
    flex-wrap:nowrap !important; justify-content:flex-end !important; gap:10px;
    background:transparent; border:0; padding:0; box-shadow:none;
    flex:0 0 auto !important; width:auto !important;
  }
  .kci-authbar .navbar-collapse > .ms-lg-3{
    display:inline-flex !important; align-items:center !important; gap:10px !important;
    flex:0 0 auto !important; width:auto !important; max-width:max-content !important;
    white-space:nowrap !important; margin:0 0 0 12px !important;
  }

  /* compact equal-sized pills */
  .kci-authbar .navbar-collapse .btn,
  .kci-authbar .navbar-collapse .dropdown-toggle,
  .kci-authbar .navbar-collapse .kci-pill{
    min-height:34px !important; height:34px !important;
    padding:.28rem .56rem !important; font-size:.92rem !important; line-height:1.05 !important;
    font-weight:700; border-radius:10px !important; border-width:2px !important;
    width:auto !important; white-space:nowrap;
  }
  .kci-authbar .navbar-collapse .btn i,
  .kci-authbar .navbar-collapse .dropdown-toggle i{ margin-right:.35rem; vertical-align:-1px }

  .kci-authbar .navbar-collapse .w-100,
  .kci-authbar .navbar-collapse .flex-fill{ width:auto !important; flex:0 0 auto !important }
  .kci-authbar .d-flex.align-items-stretch.flex-lg-row > *{ flex:0 0 auto !important }

  .kci-authbar .btn-outline-secondary{ border-color:#d8dee6; color:var(--text); background:#fff }
  .kci-authbar .btn-outline-secondary:hover{ border-color:#cfd6df; background:#f7f9fc }
  .kci-authbar .btn-outline-success{ border-color:#b7f0ca }
  .kci-authbar .btn-outline-success:hover{ background:#ecfdf5; border-color:#86efac }
  .kci-authbar .btn-outline-warning{ border-color:#fde68a }
  .kci-authbar .btn-outline-warning:hover{ background:#fff7ed; border-color:#facc15 }
  .kci-authbar .btn-dark{ border-color:#0b1220 }

  .kci-authbar .dropdown-menu{
    min-width:220px; width:auto; border:1px solid #e6ebf2; border-radius:12px; background:#fff;
    box-shadow:0 16px 34px rgba(12,20,33,.12);
  }
  .kci-authbar .dropdown-item{ padding:.55rem .8rem; border-radius:8px }
  .kci-authbar .dropdown-item:hover{ background:#f6f8fc }

  .kci-authbar .navbar-toggler{ display:none !important }
}

/* =========================================================
   KCI — FULL PAGE MOBILE POLISH (≤ 991.98px)
   (feature pane + login + spacing; desktop unchanged)
   ========================================================= */
@media (max-width: 991.98px){

  .page{ padding-top:10px; padding-bottom:18px }
  .container-xxl{ padding-left:14px; padding-right:14px }
  .row.g-4{ --bs-gutter-x:1rem; --bs-gutter-y:1rem }

  /* feature pane */
  .feature-pane{
    background:#fff; border:1px solid #eef2f7; border-radius:16px;
    padding:16px 14px; box-shadow:0 12px 32px rgba(15,23,42,.06);
  }
  .feature-content{ gap:10px }

  .chip-row{ display:flex; flex-wrap:wrap; gap:8px }
  .badge-chip{
    display:inline-flex; align-items:center; gap:.45rem;
    background:#f7f9fc; color:#0f172a; border:1px solid #e7edf5; border-radius:999px;
    padding:.38rem .6rem; font-size:.9rem; font-weight:700;
  }
  .badge-chip i{ opacity:.8 }

  .feature-pane h1.h3{ font-size:1.25rem; line-height:1.25; letter-spacing:-.15px; font-weight:800; margin-bottom:8px }
  .small-muted{ color:#6b7280 }
  .feature-pane ul{ margin-bottom:12px }
  .feature-pane li{ font-size:.98rem }

  .avatar-stack{ display:flex }
  .avatar-stack img{
    width:32px; height:32px; border-radius:50%; border:2px solid #fff; margin-left:-8px;
    box-shadow:0 2px 8px rgba(15,23,42,.12);
  }
  .avatar-stack img:first-child{ margin-left:0 }
  .stat{ display:block; margin-top:6px; font-size:.95rem }

  .illus img{ width:100%; height:auto; display:block; border-radius:12px }
  .illus + .d-flex img{ height:48px !important }

  .quote-card{
    background:#f8fafc; border:1px solid #eaf0f6; border-radius:14px; padding:.7rem .8rem;
  }
  .quote-card i{ color:#334155 }
  .feature-pane .w-100.small-muted{ font-size:.96rem }

  /* login card */
  .login-card{
    background:#fff; border:1px solid #eef2f7; border-radius:16px;
    padding:16px 14px; box-shadow:0 12px 32px rgba(15,23,42,.06);
  }
  .login-card h2{ font-size:1.22rem; line-height:1.25; margin-bottom:10px; font-weight:800; letter-spacing:-.2px }
  .login-card .form-label{ font-size:.95rem; margin-bottom:.35rem; font-weight:700 }
  .login-card .small-muted{ font-size:.94rem }

  .login-card .input-group{ border-radius:14px; overflow:hidden; border:1px solid #e7edf5; background:#fff }
  .login-card .input-group:focus-within{ border-color:#93c5fd; box-shadow:0 0 0 6px rgba(37,99,235,.12) }
  .login-card .input-group-text{ padding:.7rem .8rem; background:#f7f9fc; border-right:1px solid #edf2f7 }
  .login-card .form-control{ padding:.9rem .95rem; font-size:1rem }
  .login-card .input-group .btn{ padding:.7rem .85rem; background:#fff }

  .login-card .d-flex.justify-content-between.align-items-center.mb-3{
    flex-direction:column; align-items:flex-start; gap:.6rem; margin-top:.25rem;
  }
  .login-card .form-check-input{ width:1.05rem; height:1.05rem }
  .login-card .form-check-label{ font-size:.95rem }
  .login-card .d-flex.justify-content-between.align-items-center.mb-3 a{
    font-size:.96rem; display:inline-flex; align-items:center; gap:.4rem;
  }
  .login-card .d-flex.justify-content-between.align-items-center.mb-3 a::before{ content:"🔑"; font-size:1rem }

  /* MOBILE primary action — remains prominent */
  .login-card .d-grid{ position:sticky; bottom:8px; z-index:1 }
  .login-card .btn.btn-brand{
    width:100%; padding:1rem 1.05rem; border-radius:14px;
    font-size:1.02rem; font-weight:800; letter-spacing:.2px;
    box-shadow:0 10px 26px rgba(37,99,235,.22);
    background-image:linear-gradient(180deg,#2563eb,#1e40af) !important;
    background-color:transparent !important;
    color:#fff !important; border:0 !important;
  }

  .login-card .text-center.mt-3{ margin-top:.75rem!important }
  .login-card .text-center.mt-3 a{ font-weight:700 }

  .login-card .alert{ border-radius:12px; padding:.65rem .75rem; font-size:.96rem }

  .login-card .row.g-2.mt-1 .col-6{ flex:0 0 50%; max-width:50% }
  .login-card .row.g-2.mt-1 .d-flex.align-items-center{
    border:1px solid #eaf0f6; border-radius:12px; background:#fff; padding:.6rem .55rem; gap:.45rem;
    box-shadow:0 6px 16px rgba(15,23,42,.05);
  }
  .login-card .row.g-2.mt-1 i{ font-size:1.05rem }

  .btn, button{ min-height:46px }
  .input-group .btn, .input-group .input-group-text{ min-height:44px }
}

/* ultra small phones */
@media (max-width: 360px){
  .container-xxl{ padding-left:10px; padding-right:10px }
  .feature-pane, .login-card{ padding:14px 12px }
  .feature-pane h1.h3{ font-size:1.18rem }
  .login-card .form-control{ font-size:.98rem }
  .login-card .btn.btn-brand{ padding:.9rem }
}

/* small tablets polish */
@media (min-width: 992px) and (max-width: 1199.98px){
  .feature-pane, .login-card{ border-radius:16px; padding:22px 20px }
  .login-card .btn.btn-brand{ padding:.95rem 1.1rem; border-radius:12px }
}

/* =========================================================
   DESKTOP-ONLY: make the LOGIN button smaller & lighter
   (mobile stays bold and prominent)
   ========================================================= */
@media (min-width: 992px){
  /* Use .btn.btn-brand and force background-image so Bootstrap can't override */
  .login-card .btn.btn-brand{
    background-image:linear-gradient(180deg,#93c5fd,#60a5fa) !important;
    background-color:transparent !important;
    color:#0f172a !important;
    padding:.60rem .90rem;           /* smaller than mobile */
    font-size:.95rem;
    border:1px solid #dbeafe !important;
    box-shadow:0 6px 16px rgba(37,99,235,.18);
  }
  .login-card .btn.btn-brand:hover{
    filter:brightness(1.02);
    box-shadow:0 8px 18px rgba(30,64,175,.22);
  }
}

/* =========================================================
   LANGUAGE DROPDOWN ALWAYS ON TOP
   ========================================================= */

/* Header forms a new stacking context, above page content */
.kci-authbar{
  position: relative;        /* or sticky below */
  z-index: 1100;
  isolation: isolate;        /* guarantees its z-index layer is respected */
}

/* Dropdown above everything near it (even if parent has transform) */
.kci-authbar .dropdown-menu{
  position: absolute;
  z-index: 2000 !important;
}

/* Safety: if any ancestor clips it */
.kci-authbar, .kci-authbar .container-xxl, .kci-authbar .navbar{
  overflow: visible !important;
  transform: none !important;   /* avoid creating a lower stacking context */
}

/* If you want sticky header on desktop */
@media (min-width: 992px){
  .kci-authbar{ position: sticky; top:0; z-index:1100 }
}

/* --- Top bar stacking so dropdown opens above content --- */
.kci-authbar{ position: sticky; top: 0; z-index: 1100; isolation: isolate }
.kci-authbar, .kci-authbar .container-xxl, .kci-authbar .navbar{ overflow: visible !important }
.kci-authbar .dropdown-menu{ z-index: 2000 !important }

/* --- Login button: lighter & smaller on DESKTOP --- */
@media (min-width: 992px){
  .login-card .btn-brand{
    background: linear-gradient(180deg, #93c5fd, #60a5fa);
    color: #0f172a;
    padding: .60rem .90rem;
    font-size: .95rem;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(37,99,235,.18);
  }
  .login-card .btn-brand:hover{
    filter: brightness(1.02);
    box-shadow: 0 8px 18px rgba(30,64,175,.22);
  }
}

/* --- Mobile keeps prominent button --- */
@media (max-width: 991.98px){
  .login-card .btn-brand{
    background: linear-gradient(180deg, #60a5fa, #3b82f6);
    color: #0f172a;
    border: 1px solid #dbeafe;
    padding: 1rem 1.05rem;
    border-radius: 14px;
    font-weight: 800;
  }
}

/* ===== Notices + Ads (Homepage) ===== */
.kci-ribbon{
  background: rgba(13,110,253,.04);
}
.kci-dot{
  width:10px;height:10px;border-radius:999px;
  background:#0d6efd; box-shadow: 0 0 0 4px rgba(13,110,253,.12);
  display:inline-block;
}

.kci-notice-ads{
  background: linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,0));
}

.kci-panel{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:16px;
  padding:18px;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.kci-panel-footer{
  border-top:1px dashed rgba(148,163,184,.6);
  padding-top:12px;
}

.kci-chip{
  width:36px;height:36px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background: rgba(13,110,253,.10);
  color:#0d6efd;
}
.kci-chip-warn{
  background: rgba(255,193,7,.18);
  color:#a16207;
}

.kci-empty{
  background: rgba(241,245,249,.7);
  border:1px dashed rgba(148,163,184,.6);
  border-radius:14px;
  padding:14px;
}
.kci-empty-ico{
  width:38px;height:38px;border-radius:12px;
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  display:flex;align-items:center;justify-content:center;
  color:#334155;
}

.kci-mini-card{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:14px;
  padding:12px;
}

.kci-ad{
  border-radius:16px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.kci-ad:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
}

.kci-ad-banner{
  background: linear-gradient(135deg, rgba(13,110,253,.10), rgba(255,193,7,.10));
  border:1px dashed rgba(148,163,184,.6);
  border-radius:16px;
  padding:14px;
}
.kci-ad-icon{
  width:44px;height:44px;border-radius:16px;
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  display:flex;align-items:center;justify-content:center;
  color:#0f172a;
}

.kci-dot{
  width:10px;height:10px;border-radius:999px;
  background:#0d6efd; box-shadow:0 0 0 4px rgba(13,110,253,.12);
  display:inline-block;
}
.kci-panel{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:16px;
  padding:18px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.kci-panel-footer{
  border-top:1px dashed rgba(148,163,184,.6);
  padding-top:12px;
}
.kci-chip{
  width:36px;height:36px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(13,110,253,.10);
  color:#0d6efd;
}
.kci-chip-warn{ background:rgba(255,193,7,.18); color:#a16207; }
.kci-empty{
  background:rgba(241,245,249,.7);
  border:1px dashed rgba(148,163,184,.6);
  border-radius:14px;
  padding:14px;
}
.kci-empty-ico{
  width:38px;height:38px;border-radius:12px;
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  display:flex;align-items:center;justify-content:center;
  color:#334155;
}
.kci-mini-card{
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:14px;
  padding:12px;
}
.kci-ad{ border-radius:16px; transition:transform .15s ease, box-shadow .15s ease; }
.kci-ad:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(15,23,42,.10); }
.kci-ad-banner{
  background:linear-gradient(135deg, rgba(13,110,253,.10), rgba(255,193,7,.10));
  border:1px dashed rgba(148,163,184,.6);
  border-radius:16px;
  padding:14px;
}
.kci-ad-icon{
  width:44px;height:44px;border-radius:16px;
  background:#fff;border:1px solid rgba(226,232,240,.9);
  display:flex;align-items:center;justify-content:center;
  color:#0f172a;
}
.brand-logo-img{
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
  border-radius: 10px;   /* keep rounded square look */
  background: #fff;      /* helps if icon has transparency */
  padding: 2px;
}
/* HERO: fixed, clean height + image cover */
#hero.kci-hero .carousel-inner,
#hero.kci-hero .carousel-item {
  height: clamp(220px, 40vh, 520px);
}

#hero.kci-hero .hero-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* Caption always readable */
#hero.kci-hero .carousel-caption {
  left: 0;
  right: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  bottom: 18%;
  text-align: center;
}

@media (max-width: 576px) {
  #hero.kci-hero .carousel-caption {
    bottom: 14%;
  }

  #hero.kci-hero .carousel-caption h1 {
    font-size: 1.6rem;      /* prevents overflow */
    line-height: 1.15;
  }

  #hero.kci-hero .carousel-caption p {
    font-size: 1rem;
    line-height: 1.25;
    margin-bottom: 0;
  }
}
/* Footer: make links look clean on mobile */
footer .footer-links{
  justify-content: flex-end;      /* desktop right side */
  align-items: center;
}

@media (max-width: 767.98px){
  footer .container{
    justify-content: center !important;  /* stack centered */
    text-align: center;
  }

  footer .footer-links{
    justify-content: center;      /* center links on mobile */
    gap: .5rem 1rem !important;   /* neat wrap rows */
  }

  footer .footer-links a{
    white-space: nowrap;          /* prevents breaking words */
  }
}