/* 自定义样式：医疗深蓝主题 + iOS 风格 Banner 背景 */

/* ====== 全局主色调（覆盖 Bootstrap 主色） ====== */
:root {
  /* 医疗感深蓝色（主色） */
  --hj-primary: #1a5ca7;
  --hj-primary-rgb: 11, 60, 115;

  /* 覆盖 Bootstrap 变量 */
  --bs-primary: var(--hj-primary);
  --bs-primary-rgb: var(--hj-primary-rgb);

  /* 辅助蓝绿色，用于渐变点缀 */
  --hj-accent: #19a0c8;
}

/* 全局字体与背景 */
body {
  background-color: #f5f7fb;
  color: #1f2933;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
  "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 链接默认色 */
a {
  color: var(--hj-primary);
  text-decoration: none;
}
a:hover {
  color: #06408a;
  text-decoration: underline;
}

/* ====== 导航栏 ====== */

.hj-navbar {
  background: #f5f5f5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.hj-navbar .navbar-brand span {
  color: #2f2f30 !important;
}

.hj-navbar .navbar-brand img {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));
}

.hj-navbar .nav-link {
  font-weight: 500;
  color: #373737 !important;
  padding-inline: 1rem;
  position: relative;
  transition: color 0.2s ease, transform 0.2s ease;
}

.hj-navbar .nav-link:hover {
  color: #1f4798 !important;
  transform: translateY(-1px);
}

.hj-navbar .nav-link.active {
  color: #1f4798 !important;
}

.hj-navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.15rem;
  transform: translateX(-50%);
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: #1f4798;
}

#navUserArea .btn {
  font-size: 0.85rem;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
}
#navUserArea span.small {
  color: #edf5ff;
}

/* ====== 按钮 / 颜色（适配医疗深蓝） ====== */

.btn-primary {
  background-color: var(--hj-primary);
  border-color: var(--hj-primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #0a3160;
  border-color: #0a3160;
}

.btn-outline-primary {
  color: var(--hj-primary);
  border-color: rgba(11, 60, 115, 0.45);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #ffffff;
  background-color: var(--hj-primary);
  border-color: var(--hj-primary);
}

.text-primary {
  color: var(--hj-primary) !important;
}
.bg-primary {
  background-color: var(--hj-primary) !important;
}

/* ====== iOS 风格医疗 Banner 背景 ======
   首页第一块 section 建议使用 .hj-hero 类：
   <section class="py-5 hj-hero">...</section>
================================================ */

/* ====== iOS 风格医疗 Banner 背景 ======
   首页第一块 section 建议使用 .hj-hero：
   <section class="hj-hero d-flex align-items-center">...</section>
================================================ */
/* ====== iOS 风格医疗 Banner 背景 ======
   首页第一块 section 使用：
   <section class="hj-hero d-flex align-items-center hero-bg">...</section>
================================================ */
.hero-bg {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  color: #ffffff;

  /* 底层是医疗图片，上面叠一层深蓝渐变，让画面更“医疗” */
  background-image:
    linear-gradient(
      135deg,
      rgba(3, 16, 31, 0.78) 0%,
      rgba(7, 28, 51, 0.82) 40%,
      rgba(11, 60, 115, 0.88) 100%
    ),
    url("../img/banner-medical.png");  /* ★ 关键：相对于 assets/css/style.css */

  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/*.hj-hero,*/
/*main > section:first-of-type {*/
/*  position: relative;*/
/*  overflow: hidden;*/
/*  padding-top: 4.5rem;*/
/*  padding-bottom: 4.5rem;*/
/*  border-radius: 0 0 32px 32px;*/

/*  !* 先放你的医疗图片，再叠加半透明深蓝渐变和光晕 *!*/
/*  background-image:*/
/*    !* 顶部与右侧淡蓝光晕（半透明） *!*/
/*    radial-gradient(circle at 15% 10%, rgba(25, 104, 200, 0.65), transparent 60%),*/
/*    radial-gradient(circle at 80% 0%, rgba(87, 148, 255, 0.35), transparent 55%),*/
/*    radial-gradient(circle at 0% 80%, rgba(38, 198, 218, 0.25), transparent 60%),*/
/*      !* 半透明深蓝蒙版，让图片整体偏医疗深蓝 *!*/
/*    linear-gradient(135deg, rgba(3, 16, 31, 0.78) 0%, rgba(7, 28, 51, 0.82) 40%, rgba(11, 60, 115, 0.88) 100%),*/
/*      !* 最底层为你的医疗图片（路径按实际调整） *!*/
/*    url("/banner-medical.png");*/
/*  background-size: cover;*/
/*  background-position: center right;*/
/*  background-repeat: no-repeat;*/
/*  color: #e5f0ff;*/
/*}*/


/* iOS 风玻璃卡片效果（左侧文字区域） */
.hj-hero .container > .row > .col-lg-6:first-child {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
  border-radius: 24px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.16),
    rgba(183, 222, 255, 0.08)
  );
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Banner 右侧图片区域（如果还放 img 的话）加柔和光晕 */
.hj-hero .col-lg-6.text-center {
  position: relative;
  z-index: 1;
}
/*.hj-hero .col-lg-6.text-center::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  inset: 12% 10% 0 10%;*/
/*  border-radius: 36px;*/
/*  background: radial-gradient(*/
/*    circle at 20% 0%,*/
/*    rgba(172, 232, 255, 0.45),*/
/*    transparent 55%*/
/*  ),*/
/*  radial-gradient(*/
/*    circle at 80% 80%,*/
/*    rgba(25, 104, 200, 0.9),*/
/*    transparent 60%*/
/*  );*/
/*  opacity: 0.9;*/
/*  z-index: -2;*/
/*}*/
.hj-hero img {
  position: relative;
  z-index: 2;
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
}

/* Banner 背景里的医疗 + 科技感线条 */
.hj-hero::before {
  content: "";
  position: absolute;
  inset: -40%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.06) 1px,
    transparent 1px
  ),
  linear-gradient(
    210deg,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px
  );
  background-size: 80px 80px, 100px 100px;
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}

/* 几个圆形「药片 / 晶体」点缀 */
/*.hj-hero::after {*/
/*  content: "";*/
/*  position: absolute;*/
/*  width: 260px;*/
/*  height: 260px;*/
/*  right: -60px;*/
/*  top: 40%;*/
/*  background: radial-gradient(*/
/*    circle at 30% 30%,*/
/*    rgba(255, 255, 255, 0.85),*/
/*    rgba(225, 244, 255, 0.1) 55%,*/
/*    transparent 70%*/
/*  );*/
/*  opacity: 0.55;*/
/*  filter: blur(1px);*/
/*  z-index: 0;*/
/*  border-radius: 50%;*/
/*  pointer-events: none;*/
/*}*/

/* Banner 内文字配色微调 */
.hj-hero h1,
main > section:first-of-type h1 {
  color: #ffffff;
}
.hj-hero p.lead,
main > section:first-of-type p.lead {
  color: #d5e7ff;
}
.hj-hero .btn-primary {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

/* ====== 通用卡片样式（药品卡片等） ====== */

.card {
  border-radius: 18px;
}

.card.border-0.shadow-sm {
  box-shadow: 0 8px 20px rgba(15, 35, 52, 0.08) !important;
}

.hj-drug-card img {
  object-fit: cover;
  height: 300px;
  border-radius: 18px 18px 0 0;
}

.hj-drug-card .card-body {
  font-size: 0.88rem;
}

/* 药品列表页顶部说明文字 */
#drugList p.text-muted {
  font-size: 0.9rem;
}

/* ====== 黑色 Footer ====== */

.hj-footer {
  background-color: #353535;
  color: #b5b5b5;
  font-size: 0.9rem;
}

.hj-footer h6,
.hj-footer .fw-bold {
  color: #ffffff;
}

.hj-footer a {
  color: #e0e0e0;
  text-decoration: none;
}
.hj-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.hj-footer .text-muted {
  color: #8a8a8a !important;
}

/* 验证码容器的整体布局 */
.captcha-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

/* 验证码图片样式 */
.captcha-img {
  display: inline-block;
  width: 100px;
  height: 40px;
  margin-left: 10px; /* 与输入框保持间距 */
}

/* 验证码输入框扩展 */
#captcha {
  flex: 1; /* 输入框占据剩余空间 */
}




/* ====== 响应式微调 ====== */

@media (max-width: 992px) {
  .hj-hero,
  main > section:first-of-type {
    border-radius: 0 0 24px 24px;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .hj-hero .container > .row > .col-lg-6:first-child {
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }

  .hj-hero::after {
    width: 200px;
    height: 200px;
    right: -40px;
  }
}

@media (max-width: 576px) {
  .hj-navbar .navbar-brand span {
    font-size: 1rem;
  }
  .hj-hero,
  main > section:first-of-type {
    border-radius: 0 0 18px 18px;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}