/* =========================================================
   V7 MASTER Visual Design Lock 1.0
   Sole shared visual contract. Baseline: accepted DEV Home.
   Desktop and mobile visual values live in this file.
   ========================================================= */

:root {
  --v7-lock-sidebar-width: 218px;
  --v7-lock-green: #159455;
  --v7-lock-green-dark: #0b6b3a;
  --v7-lock-green-soft: #eef4ef;
  --v7-lock-line: #d7e3d8;
  --v7-lock-text: #263238;
  --v7-lock-surface: rgba(251,252,251,.96);
  --v7-lock-mobile-header-height: 58px;
  --v7-lock-mobile-drawer-width: min(86vw, 320px);
}

body.v7-visual-lock {
  background-color: #fff !important;
}

body.v7-visual-lock .main {
  position: relative;
  z-index: 1;
  margin-left: var(--v7-lock-sidebar-width);
  min-height: 100vh;
  background: #fff;
}

body.v7-visual-lock .main::before {
  content: "";
  position: fixed;
  inset: 0 0 0 var(--v7-lock-sidebar-width);
  pointer-events: none;
  z-index: 0;
  background: url('../assets/background/v7-master-background-1-0.webp') no-repeat right bottom / min(60vw,920px) auto;
  opacity: .45;
}

body.v7-visual-lock aside.v7-core-sidebar {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  width: var(--v7-lock-sidebar-width) !important;
  height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--v7-lock-surface) !important;
  border-right: 1px solid var(--v7-lock-line) !important;
  box-shadow: none !important;
  z-index: 1300 !important;
  overflow: hidden !important;
}

body.v7-visual-lock .v7-core-logo {
  height: auto !important;
  min-height: 92px !important;
  padding: 24px 20px 18px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border: 0 !important;
}

body.v7-visual-lock .v7-core-logo img {
  width: 154px !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 58px !important;
  object-fit: contain !important;
  display: block !important;
}

body.v7-visual-lock .v7-core-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 0 13px !important;
  margin: 6px 0 0 !important;
}

body.v7-visual-lock .v7-core-nav-item {
  min-height: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--v7-lock-text) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  transition: background .15s ease, color .15s ease !important;
}

body.v7-visual-lock .v7-core-nav-item:hover { background: #f1f6f3 !important; }
body.v7-visual-lock .v7-core-nav-item.active,
body.v7-visual-lock .v7-core-nav-item[aria-current='page'] {
  background: var(--v7-lock-green-soft) !important;
  color: var(--v7-lock-green-dark) !important;
  box-shadow: inset 3px 0 0 var(--v7-lock-green) !important;
}

body.v7-visual-lock .v7-core-nav-icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 18px !important;
  color: #20342e !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

body.v7-visual-lock .v7-core-nav-icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.v7-visual-lock .v7-core-nav-item.active .v7-core-nav-icon,
body.v7-visual-lock .v7-core-nav-item[aria-current='page'] .v7-core-nav-icon { color: var(--v7-lock-green-dark) !important; }
body.v7-visual-lock .v7-core-nav-label { display: block !important; min-width: 0 !important; }
body.v7-visual-lock .v7-core-sidebar-spacer { flex: 1 1 auto !important; min-height: 12px !important; }
body.v7-visual-lock .v7-core-sidebar-footer {
  margin: 0 13px !important;
  padding: 14px 0 24px !important;
  border-top: 1px solid var(--v7-lock-line) !important;
}
body.v7-visual-lock .v7-core-sidebar-footer .v7-core-nav-item {
  margin: 0 -10px !important;
  padding-left: 10px !important;
  width: calc(100% + 20px) !important;
}

body.v7-visual-lock .topbar {
  position: absolute;
  right: 34px;
  top: 34px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
}
body.v7-visual-lock .kb {
  height: 40px;
  padding: 0 22px;
  border: 1px solid var(--v7-lock-line);
  border-radius: 12px;
  background: rgba(255,255,255,.80);
  box-shadow: 0 18px 42px rgba(0,0,0,.055);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #0b6b3a;
}
body.v7-visual-lock .dot { width: 10px; height: 10px; border-radius: 50%; background: #129251; display: inline-block; }
body.v7-visual-lock .sun { font-size: 28px; color: #0f172a; font-weight: 200; }

body.v7-visual-lock .hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8vw 0 4vw;
  position: relative;
  z-index: 1;
}
body.v7-visual-lock .hero-inner { width: min(860px,70vw); transform: translateY(4px); text-align: center; }
body.v7-visual-lock .title {
  font-size: 28px !important;
  line-height: 1.05 !important;
  font-weight: 560 !important;
  letter-spacing: -.04em !important;
  margin: 0 0 9px;
  color: #111827;
}
body.v7-visual-lock .title .green { color: #007a3d; }
body.v7-visual-lock .subtitle { font-size: 13px; color: #6b7280; margin: 0 0 72px; font-weight: 400; }
body.v7-visual-lock .gates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin: 0 auto 58px;
  width: 760px;
  max-width: 100%;
  text-align: left;
}
body.v7-visual-lock .gate { position: relative; padding-left: 30px; min-height: 64px; display: flex; flex-direction: column; justify-content: center; }
body.v7-visual-lock .gate::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: #007a3d; border-radius: 999px; }
body.v7-visual-lock .gate h2 { font-size: 15px; line-height: 1.2; font-weight: 500; letter-spacing: -.015em; margin: 0 0 8px; color: #111827; }
body.v7-visual-lock .gate p { font-size: 13px; line-height: 1.3; color: #6b7280; margin: 0; font-weight: 400; }
body.v7-visual-lock .askbar {
  height: 50px;
  width: 720px;
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid #cfe0d5;
  border-radius: 13px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 24px 55px rgba(17,24,39,.06);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px 0 20px;
  color: #7a828e;
  font-size: 14px;
}
body.v7-visual-lock .askbar svg { width: 17px; height: 17px; color: #007a3d; stroke-width: 1.8; }
body.v7-visual-lock .askbar span { flex: 1; text-align: left; }

@media (min-width: 901px) {
  body.v7-visual-lock .v7-core-page-main { margin-left: var(--v7-lock-sidebar-width) !important; min-width: 0 !important; }
  body.v7-visual-lock .app,
  body.v7-visual-lock .app-shell { grid-template-columns: var(--v7-lock-sidebar-width) minmax(0,1fr) !important; }
  body.v7-visual-lock .app > .v7-core-page-main,
  body.v7-visual-lock .app-shell > .v7-core-page-main { grid-column: 2 !important; margin-left: 0 !important; }
}

@media (max-width: 900px) {
  html,
  body.v7-visual-lock {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
  }
  body.v7-visual-lock {
    margin: 0 !important;
    padding-top: calc(var(--v7-lock-mobile-header-height) + env(safe-area-inset-top)) !important;
  }
  body.v7-visual-lock .zb-mobile-shell-header {
    position: fixed !important;
    z-index: 2147483000 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(var(--v7-lock-mobile-header-height) + env(safe-area-inset-top)) !important;
    padding: env(safe-area-inset-top) 14px 0 !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,.98) !important;
    border-bottom: 1px solid #dce8df !important;
    box-shadow: 0 3px 14px rgba(18,49,32,.06) !important;
  }
  body.v7-visual-lock .zb-mobile-shell-button {
    position: absolute !important;
    left: 10px !important;
    bottom: 10px !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #cfe1d4 !important;
    border-radius: 10px !important;
    background: #fff !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    cursor: pointer !important;
  }
  body.v7-visual-lock .zb-mobile-shell-button span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    margin: 0 !important;
    background: #008744 !important;
    border-radius: 2px !important;
  }
  body.v7-visual-lock .zb-mobile-shell-brand {
    max-width: calc(100% - 110px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #17231c !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }
  body.v7-visual-lock .zb-mobile-shell-status {
    position: absolute !important;
    right: 16px !important;
    bottom: 25px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #16ad5c !important;
  }
  body.v7-visual-lock .zb-mobile-shell-overlay {
    position: fixed !important;
    z-index: 2147482990 !important;
    inset: calc(var(--v7-lock-mobile-header-height) + env(safe-area-inset-top)) 0 0 !important;
    background: rgba(18,31,24,.48) !important;
  }
  body.v7-visual-lock .zb-mobile-shell-drawer {
    position: fixed !important;
    z-index: 2147482999 !important;
    top: calc(var(--v7-lock-mobile-header-height) + env(safe-area-inset-top)) !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--v7-lock-mobile-drawer-width) !important;
    max-width: 320px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px 12px calc(16px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border-right: 1px solid #dce8df !important;
    box-shadow: 18px 0 45px rgba(17,24,39,.18) !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  body.v7-visual-lock .zb-mobile-shell-nav {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.v7-visual-lock .zb-mobile-shell-nav a {
    display: grid !important;
    grid-template-columns: 24px minmax(0,1fr) !important;
    align-items: center !important;
    column-gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #24342b !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
  }
  body.v7-visual-lock .zb-mobile-shell-nav a:hover,
  body.v7-visual-lock .zb-mobile-shell-nav a:focus-visible { background: #f3f8f4 !important; }
  body.v7-visual-lock .zb-mobile-shell-nav a.active {
    background: #eef6f0 !important;
    color: #008744 !important;
    border-color: #d8e8dc !important;
    box-shadow: inset 4px 0 0 #00934c !important;
  }
  body.v7-visual-lock .zb-nav-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.v7-visual-lock .zb-nav-icon svg {
    display: block !important;
    width: 21px !important;
    height: 21px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  body.v7-visual-lock .zb-nav-label {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    text-align: left !important;
  }
  body.v7-visual-lock .zb-mobile-shell-note {
    margin-top: auto !important;
    padding: 16px 10px 4px !important;
    border-top: 1px solid #e1ebe4 !important;
    color: #6a7b70 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
  }
  body.v7-visual-lock .zb-mobile-shell-note b { color: #269452 !important; }
  body.v7-visual-lock .app-shell,
  body.v7-visual-lock .app,
  body.v7-visual-lock .main,
  body.v7-visual-lock .content,
  body.v7-visual-lock .about-main,
  body.v7-visual-lock .contact-page {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  body.v7-visual-lock .hero { min-height: 100vh; padding: 0 8vw 0 4vw; }
  body.v7-visual-lock .hero-inner { width: 78vw; }
  body.v7-visual-lock .gates { gap: 40px; }
  body.v7-visual-lock .main::before {
    inset: 0 0 0 196px;
    background-size: min(60vw,920px) auto;
    opacity: .45;
  }
}

@media (max-width: 390px) {
  body.v7-visual-lock .zb-mobile-shell-drawer { width: min(90vw, 310px) !important; }
  body.v7-visual-lock .zb-mobile-shell-nav a {
    min-height: 46px !important;
    padding: 9px 10px !important;
    font-size: 13.5px !important;
  }
}

/* Global Header compatibility: the accepted header remains a separate layer. */
body.v7-visual-lock.v7-global-header-active .app-shell{display:grid!important}
body.v7-visual-lock.v7-global-header-active .v7-module-hero{min-height:520px;margin:0;padding:0 8vw 0 4vw}
body.v7-visual-lock.v7-global-header-active .v7-module-hero .hero-inner{width:min(860px,70vw);transform:none}
body.v7-visual-lock .expert-chat{position:fixed;z-index:80;left:calc(var(--v7-lock-sidebar-width) + 34px);right:34px;bottom:20px;width:720px;max-width:calc(100% - var(--v7-lock-sidebar-width) - 68px);margin:0 auto}
body.v7-visual-lock .chat-bar{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;width:720px;max-width:100%;height:50px;margin:0 auto;padding:4px;border:1px solid #cfe0d5;border-radius:13px;background:rgba(255,255,255,.78);box-shadow:0 24px 55px rgba(17,24,39,.06);font-size:14px}
body.v7-visual-lock .chat-bar input{min-width:0;height:40px;padding:0 10px;border:0;outline:0;background:transparent;color:#7a828e;font-size:14px}
body.v7-visual-lock .chat-bar .mic,body.v7-visual-lock .chat-bar .send{width:40px;height:40px;padding:0;border:0;border-radius:10px;background:transparent;color:#007a3d;display:grid;place-items:center;cursor:pointer}
body.v7-visual-lock .chat-bar .mic svg,body.v7-visual-lock .chat-bar .send svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
body.v7-visual-lock .chat-bar .mic.listening{background:#087a43;color:#fff}
@media(max-width:900px){body.v7-visual-lock.v7-global-header-active .v7-module-hero{min-height:420px;padding:0 8vw 0 4vw}body.v7-visual-lock.v7-global-header-active .v7-module-hero .hero-inner{width:78vw}body.v7-visual-lock .expert-chat{left:0;right:0;bottom:12px;width:78vw;max-width:none;margin:0 auto}}