/*-----------------------------------------------------------
* AppShield+ ExitURL Demo
* i-Sprint corporate theme
* Reference: https://www.i-sprint.com/
*------------------------------------------------------------
* 设计说明：
*  - 深酒红渐变背景（#57192F -> #862633 -> #a00032），与官网品牌色一致
*  - 白色内容卡片悬浮于渐变之上，圆角 + 阴影，保留旧版层次过渡
*  - 侧边栏透明，白色 Logo 与品牌文字直接落在渐变上
 *------------------------------------------------------------
 */

:root {
  --isprint-red: #862633;
  --isprint-red-hover: #a00032;
  --isprint-deep: #57192f;
  --isprint-text: #333333;
  --isprint-muted: #747474;
  --isprint-border: #e5e5e5;
  --isprint-white: #ffffff;
  --isprint-font: "Roboto", "Segoe UI", Arial, sans-serif;
}

html,
body {
  font-family: var(--isprint-font);
  font-size: 17px;
  line-height: 1.8;
  color: var(--isprint-text);
}

body {
  background: var(--isprint-deep) !important;
  background: linear-gradient(150deg, #57192f 0%, #862633 52%, #a00032 100%) !important;
  background-attachment: fixed;
}

/* ---------- Sidebar ---------- */
.aside {
  background: transparent;
  border-right: none;
}

.sidebar-brand {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 34px 12px 0;
  text-align: center;
  z-index: 10;
}

.sidebar-brand img {
  width: 100%;
  max-width: 190px;
  height: auto;
  opacity: 0.95;
}

.nav-wrapper {
  position: relative;
}

.about-avatar img.appshield-sidebar-icon {
  width: 110px;
  height: 110px;
  object-fit: contain;
}

.about-avatar-details h1 {
  font-family: var(--isprint-font);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  color: #fff;
  text-transform: none;
  opacity: 1;
}

.about-avatar-details p,
.about-avatar-details .badge {
  display: inline-block;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: none;
  border-radius: 100px;
  padding: 4px 18px;
  margin-top: 10px;
}

/* ---------- Content card ---------- */
.page-wrapper {
  background: var(--isprint-white);
  border-top: none;
  border-radius: 20px 0 0 0;
  box-shadow: -10px 0 50px rgba(0, 0, 0, 0.28);
  float: none;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 40px);
}

.page-wrapper > section.section {
  flex: 1 0 auto;
}

.section {
  background: var(--isprint-white);
  padding: 60px 0;
}

.section .container {
  max-width: 1100px;
}

/* ---------- Section heading ---------- */
.section-head {
  margin-bottom: 40px;
}

.section-head span {
  color: var(--isprint-red);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.section-head span:before {
  background: var(--isprint-red);
  height: 2px;
}

.section-head h2 {
  font-family: var(--isprint-font);
  font-size: 40px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--isprint-text);
  text-transform: none;
}

/* ---------- Body copy ---------- */
.section p {
  color: var(--isprint-text);
  font-size: 17px;
  line-height: 1.8;
}

/* ---------- Device info ---------- */
.resume-panel h6 {
  color: var(--isprint-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.demo-opacity {
  color: var(--isprint-text);
  opacity: 1;
  font-size: 16px;
  margin-bottom: 0;
}

.demo-opacity > i {
  color: var(--isprint-muted);
}

.progress {
  height: 4px;
  background-color: #f0f0f0;
  border-radius: 4px;
}

.progress-bar {
  background-color: var(--isprint-red) !important;
  border-radius: 4px;
}

/* ---------- Threat details ---------- */
#threat-details {
  border-top: 1px solid var(--isprint-border);
  margin-top: 24px;
  padding-top: 24px;
}

/* Detail and device info items share markup/classes; long unbroken values
   (signatures, model strings) must wrap instead of overflowing the panel. */
.resume-panel p.demo-opacity {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--isprint-white);
  border-top: 1px solid var(--isprint-border);
  padding: 24px 0;
}

.footer .copyright {
  color: var(--isprint-muted);
  font-size: 13px;
  margin-bottom: 0;
}

.demo-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--isprint-muted);
  font-size: 12.5px;
  line-height: 1.6;
  margin-bottom: 8px;
  text-align: center;
}

.demo-notice-badge {
  display: inline-block;
  color: var(--isprint-red);
  border: 1px solid var(--isprint-red);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 2px 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Preloader ---------- */
.preloader {
  background: var(--isprint-deep);
  background: linear-gradient(150deg, #57192f 0%, #862633 52%, #a00032 100%);
}

.preloader .spinner-grow {
  color: #fff !important;
}

/* ---------- Mobile nav ---------- */
.navbar-toggler .line {
  stroke: #fff;
}

/* Hamburger is a real <button>: reset UA/Bootstrap defaults */
button.navbar-toggler {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

button.navbar-toggler:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 4px;
}

.mobile-topbar {
  display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  /* Mobile gradient top bar: hamburger + i-Sprint logo */
  .mobile-topbar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    height: calc(64px + env(safe-area-inset-top, 0px));
    padding: calc(env(safe-area-inset-top, 0px) + 17px) 64px 0;
    text-align: center;
    background: linear-gradient(150deg, #57192f 0%, #862633 52%, #a00032 100%);
  }

  .mobile-topbar img {
    height: 30px;
    width: auto;
  }

  /* Hamburger: proper tap target inside the top bar */
  .nav-wrapper .navbar-toggler {
    top: env(safe-area-inset-top, 0px);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-wrapper .navbar-toggler svg {
    width: 44px;
    height: 44px;
  }

  /* Drawer-style sidebar: overlay, never pushes content */
  .aside {
    width: min(80vw, 320px);
    min-width: 0;
    max-width: 320px;
    left: calc(-1 * min(80vw, 320px) - 40px);
    height: 100%;
    background: linear-gradient(160deg, #57192f 0%, #862633 52%, #a00032 100%);
  }

  body.aside-open .aside {
    left: 0;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.35);
  }

  /* Content card sits below the top bar, keeps the layered rounded look */
  .page-wrapper,
  body.aside-open .page-wrapper {
    margin-left: 0;
    margin-top: calc(64px + env(safe-area-inset-top, 0px) + 12px);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.25);
    min-height: calc(100vh - 76px - env(safe-area-inset-top, 0px));
  }

  /* Scrim: replace the decorative light bands with a full-screen dim */
  .page-overlay .overlay-1,
  .page-overlay .overlay-2 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 990;
  }

  .page-overlay .overlay-2 {
    display: none;
  }

  body.aside-open .page-overlay .overlay-1 {
    opacity: 1;
    pointer-events: auto;
  }

  .section {
    padding: 40px 0 50px;
  }

  .section-head {
    margin-bottom: 30px;
  }

  .section-head h2 {
    font-size: 30px;
  }

  .about-avatar img.appshield-sidebar-icon {
    width: 90px;
    height: 90px;
  }

  .sidebar-brand {
    padding-top: 84px;
  }

  .sidebar-brand img {
    max-width: 160px;
  }
}

@media (max-width: 575.98px) {
  html,
  body {
    font-size: 16px;
  }

  .section .container {
    padding: 0 18px;
  }

  .section-head h2 {
    font-size: 24px;
  }

  .section-head span {
    padding-left: 60px;
  }

  .section-head span:before {
    width: 40px;
  }

  .section-head span:after {
    left: 40px;
  }

  .section p {
    font-size: 15.5px;
  }

  .resume-panel {
    margin-top: 24px;
  }

  .resume-panel h6 {
    font-size: 11px;
  }

  #threat-details {
    margin-top: 16px;
    padding-top: 16px;
  }

  #threat-details p {
    word-break: break-word;
  }

  .footer {
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  }
}