/* =================================================================
 * Dian site chrome — shared across public body.normal pages
 *
 * White background, gradient navbar, redesigned site-footer.
 * Loaded from dian/templates/fragments/layout.html (Dian brand only).
 * Does not target body.wizard / navbar-wizard or portals.
 * ================================================================= */

:root {
  --dian-blue: #4169e1;
  --dian-blue-dark: #3155dd;
  --dian-blue-light: #50b3ea;
  --dian-blue-pale: #eaf1ff;
  --color-bg-dark: #1e293b;
  --chrome-t-fast: 150ms ease;
  --chrome-container-max: 1200px;
}

/* ---- Page background (replaces blue photo on body.normal) ---- */
body.normal {
  background-image: none !important;
  background-color: #ffffff !important;
  background-attachment: scroll !important;
  /* style.shared.css padding-bottom was for the old fixed footer; causes white gap under site-footer */
  padding-bottom: 0 !important;
}

/* ---- Navbar gradient (navbar was transparent over the old blue body fill) ---- */
body.normal > .navbar-normal,
body.normal > nav.navbar-normal,
body.normal nav.navbar.navbar-normal {
  background-color: #4169e1 !important;
  background-image: linear-gradient(90deg, #4169e1 0%, #50b3ea 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border-color: transparent !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  min-height: 70px;
  /* Above #home-overlay (99998) and .hero.search-focus (99999) so nav menus aren't clipped */
  position: relative;
  z-index: 100000;
}

/* Mockup-aligned bar: 70px, ~1200px content width, 16px links, brand ~24px */
body.normal .navbar-normal > .container {
  height: 70px !important;
  max-width: var(--chrome-container-max);
  width: 100% !important;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: clamp(16px, 3vw, 32px) !important;
  padding-right: clamp(16px, 3vw, 32px) !important;
}
body.normal .navbar-normal .navbar-header {
  height: 70px;
  margin: 0;
  display: flex;
  align-items: center;
}
body.normal .navbar-normal .navbar-brand {
  height: auto;
  padding: 0;
  margin: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
/*
 * Pixel compare vs mockup (dian.local):
 *   mockup .brand-fallback "DIANins": 24px / 700 / letter-spacing 0.5px → ~96.6×37.2 box
 *   live logo.png natural 119×24 → was displaying ~119×24 (≈23% wider than mockup text)
 * Scale width to mockup text width so the wordmark matches optically.
 */
body.normal .navbar-normal .navbar-brand img.hidden-xs {
  width: 97px !important;
  height: auto !important;
  max-height: none;
}
body.normal .navbar-normal .navbar-brand img.visible-xs {
  width: 46px !important;
  height: auto !important;
}
/* Drop legacy 40px spacer between primary links and Login/Register */
body.normal .navbar-normal .navbar-nav > li.hidden-xs[style*="margin-right"] {
  display: none !important;
}
/*
 * Mockup nav links: system UI 16px / weight 500 → "Insurance Plans" measureText ≈ 112.4px
 * Source Sans Pro has no distinct 500 face here (400 measure === 500 measure ≈ 105.1px).
 * Weight 600 measures ≈ 108.1px — closest available match; antialiased like mockup body.
 */
body.normal .navbar-normal .navbar-nav > li > a {
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  line-height: 1.25 !important;
  color: #fff !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.normal .navbar-normal .navbar-nav > li.dian-menu-small > a {
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 768px) {
  body.normal .navbar-normal > .container {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }
  body.normal .navbar-normal .navbar-header {
    float: none;
  }
  body.normal .navbar-normal .navbar-brand {
    float: none;
  }
  body.normal .navbar-normal #navbar {
    float: none;
    margin-left: auto;
  }
  body.normal .navbar-normal .navbar-nav.navbar-right {
    float: none !important;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
  }
  body.normal .navbar-normal .navbar-nav {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* Mockup-style outlined Log In control */
body.normal .navbar-normal .navbar-nav > li.dian-menu-small > a[href*="login"],
body.normal .navbar-normal .navbar-nav > li.dian-menu-small > a[href*="Login"] {
  border: 1px solid #fff !important;
  border-radius: 6px !important;
  padding: 10px 16px !important;
  margin-left: 0.25rem;
  line-height: 1.25 !important;
  background: transparent !important;
}
body.normal .navbar-normal .navbar-nav > li.dian-menu-small > a[href*="login"]:hover,
body.normal .navbar-normal .navbar-nav > li.dian-menu-small > a[href*="login"]:focus,
body.normal .navbar-normal .navbar-nav > li.dian-menu-small > a[href*="Login"]:hover,
body.normal .navbar-normal .navbar-nav > li.dian-menu-small > a[href*="Login"]:focus {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}

/* Language switcher */
body.normal .navbar-normal .lang-switcher > a {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35em;
  white-space: nowrap;
}
body.normal .navbar-normal .lang-switcher > a .fa-globe {
  font-size: 1em;
}
body.normal .navbar-normal .lang-switcher > a .fa-caret-down {
  font-size: 0.75em;
  margin-left: 0.15em;
}
body.normal .navbar-normal .lang-switcher > .dropdown-menu-language {
  left: auto !important;
  right: 0 !important;
  min-width: 140px !important;
  padding: 0.5em !important;
  margin-top: 0 !important;
  background-color: #4169e1 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
body.normal .navbar-normal .lang-switcher > .dropdown-menu-language > li > a {
  color: #fff !important;
  padding: 0.5em 0.75em !important;
  white-space: nowrap;
  border-radius: 4px;
  background: transparent !important;
}
body.normal .navbar-normal .lang-switcher > .dropdown-menu-language > li > a:hover,
body.normal .navbar-normal .lang-switcher > .dropdown-menu-language > li > a:focus {
  background: #eaf1ff !important;
  color: #4169e1 !important;
}

/* Hover-open dropdowns (Bootstrap click via .open still works) */
@media (min-width: 768px) {
  body.normal .navbar-normal .lang-switcher:hover > .dropdown-menu-language,
  body.normal .navbar-normal .lang-switcher:focus-within > .dropdown-menu-language,
  body.normal .navbar-normal .navbar-nav > li.dropdown:hover > .dropdown-menu,
  body.normal .navbar-normal .navbar-nav > li.dropdown:focus-within > .dropdown-menu {
    display: block !important;
  }
}

/* Top-nav dropdown panels */
body.normal .navbar-normal .navbar-nav > li.dropdown > .dropdown-menu {
  min-width: 220px !important;
  padding: 0.5em !important;
  margin-top: 0 !important;
  background-color: #4169e1 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
body.normal .navbar-normal .navbar-nav > li.dropdown > .dropdown-menu > li > a {
  color: #fff !important;
  padding: 0.5em 0.75em !important;
  white-space: nowrap;
  border-radius: 4px;
  background: transparent !important;
  font-size: 1.4rem !important;
}
body.normal .navbar-normal .navbar-nav > li.dropdown > .dropdown-menu > li > a:hover,
body.normal .navbar-normal .navbar-nav > li.dropdown > .dropdown-menu > li > a:focus {
  background: #eaf1ff !important;
  color: #4169e1 !important;
}

/* ---- Site footer (replaces legacy .footer fragment) ---- */
.site-footer {
  background: var(--color-bg-dark);
  color: #cbd5e1;
  padding: clamp(2.5em, 5vw, 4em) 0 0;
  font-size: 15px; /* site html is 10px; match homepage .site-footer ~0.9375em of 16px */
  overflow: visible;
  box-sizing: border-box;
}
.site-footer *,
.site-footer *::before,
.site-footer *::after {
  box-sizing: border-box;
}
.site-footer .container {
  width: 100%;
  max-width: var(--chrome-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 3vw, 32px);
  padding-right: clamp(16px, 3vw, 32px);
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em;
  list-style: none;
}
.site-footer .footer-grid::before,
.site-footer .footer-grid::after {
  content: none !important;
  display: none !important;
}
@media (min-width: 600px) {
  .site-footer .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .site-footer .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
}

.site-footer .footer-col h4 {
  color: #fff;
  font-size: 1em;
  margin: 0 0 1em;
  font-weight: 600;
}
.site-footer .footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .footer-col ul li { margin-bottom: 0.5em; }
.site-footer a,
body#home .site-footer a {
  color: #cbd5e1;
  text-decoration: none;
  transition: color var(--chrome-t-fast);
}
.site-footer a:hover,
body#home .site-footer a:hover {
  color: #fff;
}

.site-footer .footer-brand .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  font-size: 1.5em;
  color: #fff;
}
.site-footer .footer-brand img { height: 36px; width: auto; margin-bottom: 1em; display: block; }
.site-footer .footer-brand .brand-fallback {
  display: none;
  letter-spacing: 0.5px;
}
.site-footer .footer-brand img[style*="display: none"] + .brand-fallback,
.site-footer .footer-brand img[style*="display:none"] + .brand-fallback {
  display: inline-block;
}
.site-footer .footer-brand p { color: #94a3b8; max-width: 320px; margin: 0 0 0.75em; }

.site-footer .footer-brand-links {
  list-style: none;
  margin: 0.75em 0 0;
  padding: 0;
}
.site-footer .footer-brand-links li { margin-bottom: 0.4em; }
.site-footer .footer-brand-links a { font-weight: 500; }

.site-footer .footer-social {
  display: flex;
  gap: 0.75em;
  margin-top: 1em;
}
.site-footer .footer-social a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  color: #cbd5e1;
  font-size: 1em;
  position: relative;
}
.site-footer .footer-social a:hover {
  background: var(--dian-blue);
  color: #fff;
}

/* Disable legacy fixed QR via :after content:url(...) */
.site-footer .footer-social a.wechat:hover:after,
.site-footer .footer-social a.wechat.tap:after,
.site-footer .footer-social a.wechat-qr:hover:after,
.site-footer .footer-social a.wechat-qr.tap:after {
  content: none !important;
  display: none !important;
}
.site-footer .footer-social a.wechat-qr .wechat-qr-popup {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
  width: 220px;
  padding: 12px;
  background: #fff;
  color: #1f2937 !important;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  text-align: center;
  z-index: 2000;
}
.site-footer .footer-social a.wechat-qr .wechat-qr-popup::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #fff;
}
.site-footer .footer-social a.wechat-qr:hover .wechat-qr-popup,
.site-footer .footer-social a.wechat-qr:focus .wechat-qr-popup,
.site-footer .footer-social a.wechat-qr.tap .wechat-qr-popup {
  display: block;
}
.site-footer .footer-social a.wechat-qr .wechat-qr-caption {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 8px;
  color: #1f2937 !important;
}
.site-footer .footer-social a.wechat-qr .wechat-qr-popup img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.site-footer .footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  color: #cbd5e1;
  margin-bottom: 0.85em;
}
.site-footer .footer-contact i {
  color: var(--dian-blue-light);
  width: 14px;
  margin-top: 0.2em;
  flex: 0 0 auto;
}
.site-footer .footer-contact-text {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  min-width: 0;
}
.site-footer .footer-contact-line {
  color: #e2e8f0;
  line-height: 1.35;
  font-size: 0.875em;
  white-space: nowrap;
}
.site-footer .footer-contact-line strong {
  color: #fff;
  font-weight: 600;
  margin-right: 0.25em;
}
.site-footer .footer-contact-hours {
  display: block;
  font-size: 0.75em;
  color: #94a3b8;
  line-height: 1.35;
}

.site-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 3em;
  padding: 1.25em 0;
  font-size: 0.8125em;
}
.site-footer .footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75em;
  color: #94a3b8;
}
.site-footer .footer-bottom-inner::before,
.site-footer .footer-bottom-inner::after {
  content: none !important;
  display: none !important;
}
@media (min-width: 700px) {
  .site-footer .footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.site-footer .footer-bottom-inner p { margin: 0; }
.site-footer .footer-bottom-inner ul {
  display: flex;
  gap: 1.5em;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .footer-bottom a,
body#home .site-footer .footer-bottom a {
  color: #94a3b8 !important;
}
.site-footer .footer-bottom a:hover,
body#home .site-footer .footer-bottom a:hover {
  color: #fff !important;
}

/* ---- Plan list pages (#plansByVisitType) — Dian-only light theme ----
 * Shared template keeps content-container-black for ISA/FPS.
 * These overrides only load from Dian layout (site-chrome.css).
 * Keep .content-container width as in style.shared.css; fill edge gutters
 * via body background so plan cards stay at their original size.
 */
body#plansByVisitType.normal {
  background-color: #f7f9fc !important;
}
#plansByVisitType .content-container-black {
  padding-bottom: 50px;
  color: #1f2937 !important;
  /* Match homepage "Why Choose Dian" (.bg-soft / --color-bg-soft) */
  background-color: #f7f9fc !important;
}
#plansByVisitType .content-container-black > .page-header > h1 {
  color: #1f2937 !important;
}
#plansByVisitType #plan-container > .col-sm-4 > .panel {
  background-color: #f7f9fc;
  border-color: #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
#plansByVisitType #plan-container > .plan-white > .panel > .panel-heading > a.btn-plan-type,
#plansByVisitType #plan-container > .plan-sky100 > .panel > .panel-heading > a.btn-plan-type,
#plansByVisitType #plan-container > .plan-oceanplus > .panel > .panel-heading > a.btn-plan-type,
#plansByVisitType #plan-container > .plan-skyplus > .panel > .panel-heading > a.btn-plan-type {
  border: 1px solid #e5e7eb;
}
#plansByVisitType #plan-container .panel > .panel-body > ul > li {
  color: #374151;
}
#plansByVisitType #plan-container .panel > .panel-body > ul > li.important {
  color: #4169e1;
}
#plansByVisitType #plan-container .panel > .panel-body > .button-bar > a.btn-link > .svg-details,
#plansByVisitType #plan-container .panel > .panel-body > .button-bar > a.btn-link > .svg-buy {
  fill: #4169e1;
}
#plansByVisitType #plan-container .panel > .panel-body > .button-bar > a.btn-link > .svg-details:hover,
#plansByVisitType #plan-container .panel > .panel-body > .button-bar > a.btn-link > .svg-buy:hover {
  fill: #3155dd;
}

/* ---- Login page — light theme like plan list pages ---- */
body#login.normal {
  background-color: #f7f9fc !important;
}
#login .page-header > h1 {
  color: #1f2937 !important;
}
#login #login-container {
  background-color: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  color: #1f2937;
}
#login #login-container a {
  color: #4169e1 !important;
}
#login #login-container .form-control {
  background-color: #fff !important;
  color: #1f2937 !important;
  border-color: #e5e7eb !important;
  border-radius: 6px !important;
  border-width: 1px !important;
}
#login #login-container .form-control::placeholder {
  color: #9ca3af;
}
#login #login-container input[type=submit] {
  background-color: #4169e1 !important;
  border-color: #4169e1 !important;
  border-radius: 6px !important;
  border-width: 0 !important;
}