/* OOXOO service pages: photo background layer only. */
body[data-ooxoo-service-scene] {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  min-height: 100vh;
  --service-card: rgba(255, 255, 255, .105);
  --service-card-soft: rgba(255, 255, 255, .075);
  --service-card-strong: rgba(255, 255, 255, .145);
  --service-panel-dark: rgba(4, 18, 37, .63);
  --ev-card: rgba(255, 255, 255, .105);
  --ev-card-soft: rgba(255, 255, 255, .075);
  --ev-card-lite: rgba(255, 255, 255, .085);
  --ev-panel-dark: rgba(4, 18, 37, .63);
}

#ooxoo-service-scene-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--ooxoo-service-scene-height, 100vh);
  min-height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #061423;
}

#ooxoo-service-scene-bg .ooxoo-service-scene-image,
#ooxoo-service-scene-bg .ooxoo-service-scene-shade,
#ooxoo-service-scene-bg .ooxoo-service-scene-bottom {
  position: absolute;
  inset: 0;
}

#ooxoo-service-scene-bg .ooxoo-service-scene-image {
  bottom: auto;
  height: min(980px, 100vh);
  background-image: var(--ooxoo-service-scene-image);
  background-size: cover;
  background-position: var(--ooxoo-service-scene-position, center center);
  background-repeat: no-repeat;
  opacity: var(--ooxoo-service-scene-opacity, .76);
  transform: translateZ(0);
}

#ooxoo-service-scene-bg .ooxoo-service-scene-shade {
  background:
    radial-gradient(circle at 50% 6%, rgba(90, 168, 255, .10), transparent 38%),
    linear-gradient(180deg, rgba(3, 11, 21, .34) 0%, rgba(3, 11, 21, .50) 54%, rgba(3, 11, 21, .76) 100%),
    linear-gradient(90deg, rgba(3, 11, 21, .38) 0%, rgba(3, 11, 21, .10) 50%, rgba(3, 11, 21, .42) 100%);
}

#ooxoo-service-scene-bg .ooxoo-service-scene-bottom {
  top: min(700px, 58vh);
  background: linear-gradient(180deg, rgba(5, 15, 27, 0) 0%, rgba(5, 15, 27, .78) 34%, #05101d 100%);
}

body[data-ooxoo-service-scene] .ooxoo-page,
body[data-ooxoo-service-scene] .ooxoo-page-shell,
body[data-ooxoo-service-scene] .ooxoo-convenience-wrap,
body[data-ooxoo-service-scene] .ooxoo-ev-page-shell,
body[data-ooxoo-service-scene] .ooxoo-wrap,
body[data-ooxoo-service-scene] .site,
body[data-ooxoo-service-scene] .site-content,
body[data-ooxoo-service-scene] main,
body[data-ooxoo-service-scene] #ooxoo-footer,
body[data-ooxoo-service-scene] footer {
  position: relative;
  z-index: 1;
}

body.ooxoo-page-hospital,
body.ooxoo-pharmacy-page,
body.ooxoo-convenience-page,
body.ooxoo-page-parking,
body[data-ooxoo-service-scene="hospital"],
body[data-ooxoo-service-scene="pharmacy"],
body[data-ooxoo-service-scene="convenience"],
body[data-ooxoo-service-scene="parking"] {
  --service-card: rgba(16, 48, 78, .64);
  --service-card-soft: rgba(7, 28, 52, .68);
  --service-card-strong: rgba(18, 54, 88, .72);
  --service-card-border: rgba(220, 240, 255, .16);
  --service-panel-dark: rgba(8, 30, 54, .70);
  --service-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  --service-line: #3aa7ff;
  --service-line2: #78c7ff;
}

body.ooxoo-page-hospital #ooxoo-location-topbar,
body.ooxoo-page-hospital .ooxoo-dashboard-header,
body.ooxoo-page-hospital .ooxoo-beta-notice,
body.ooxoo-page-hospital .ooxoo-wrap,
body.ooxoo-page-hospital .head,
body.ooxoo-page-hospital .status,
body.ooxoo-pharmacy-page #ooxoo-location-topbar,
body.ooxoo-pharmacy-page .ooxoo-dashboard-header,
body.ooxoo-pharmacy-page .ooxoo-beta-notice,
body.ooxoo-pharmacy-page .ooxoo-wrap,
body.ooxoo-pharmacy-page .head,
body.ooxoo-pharmacy-page .status,
body.ooxoo-convenience-page #ooxoo-location-topbar,
body.ooxoo-convenience-page .ooxoo-convenience-top-header,
body.ooxoo-convenience-page .ooxoo-convenience-hero,
body.ooxoo-convenience-page .ooxoo-convenience-controls,
body.ooxoo-convenience-page .ooxoo-convenience-wrap,
body.ooxoo-page-parking #ooxoo-location-topbar,
body.ooxoo-page-parking .ooxoo-parking-top-header,
body.ooxoo-page-parking .ooxoo-beta-notice,
body.ooxoo-page-parking .ooxoo-wrap {
  background:
    linear-gradient(
      180deg,
      rgba(18, 54, 88, .68),
      rgba(8, 30, 54, .70)
    ) !important;
  border-color: rgba(220, 240, 255, .20) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(4px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.05) !important;
}

body.ooxoo-page-hospital #ooxoo-hospital-list > .ooxoo-card,
body.ooxoo-page-hospital #ooxoo-hospital-list > .ooxoo-standard-card,
body.ooxoo-page-hospital #ooxoo-hospital-list > .ooxoo-hospital-card,
body.ooxoo-pharmacy-page #pharmacy-list > .card,
body.ooxoo-pharmacy-page #pharmacy-list > .ooxoo-standard-card,
body.ooxoo-pharmacy-page #pharmacy-list > .ooxoo-pharmacy-card,
body.ooxoo-convenience-page #ooxoo-convenience-list > .ooxoo-convenience-card,
body.ooxoo-convenience-page #ooxoo-convenience-list > *,
body.ooxoo-convenience-page .ooxoo-convenience-card,
body.ooxoo-page-parking .ooxoo-card {
  background:
    linear-gradient(
      180deg,
      rgba(16, 48, 78, .64),
      rgba(7, 28, 52, .68)
    ) !important;
  border-color: rgba(220, 240, 255, .16) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(2px) saturate(1.03) !important;
  -webkit-backdrop-filter: blur(2px) saturate(1.03) !important;
}

body.ooxoo-convenience-page.ooxoo-convenience-service-ui #ooxoo-convenience-list > .ooxoo-convenience-card,
body.ooxoo-convenience-page[data-ooxoo-service-scene="convenience"] #ooxoo-convenience-list > .ooxoo-convenience-card,
body.ooxoo-convenience-page[data-ooxoo-service-scene="convenience"] .ooxoo-convenience-card {
  background:
    linear-gradient(
      180deg,
      rgba(16, 48, 78, .64),
      rgba(7, 28, 52, .68)
    ) !important;
  border-color: rgba(220, 240, 255, .16) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24) !important;
}

body[data-ooxoo-service-scene="hospital"] {
  --ooxoo-service-scene-position: center 42%;
  --ooxoo-service-scene-opacity: .74;
}

body[data-ooxoo-service-scene="pharmacy"] {
  --ooxoo-service-scene-position: center center;
  --ooxoo-service-scene-opacity: .72;
}

body[data-ooxoo-service-scene="convenience"] {
  --ooxoo-service-scene-position: center center;
  --ooxoo-service-scene-opacity: .72;
}

body[data-ooxoo-service-scene="ev"] {
  --ooxoo-service-scene-position: center center;
  --ooxoo-service-scene-opacity: .76;
}

body[data-ooxoo-service-scene="parking"] {
  --ooxoo-service-scene-position: center center;
  --ooxoo-service-scene-opacity: .80;
}

@media (max-width: 767px) {
  #ooxoo-service-scene-bg .ooxoo-service-scene-image {
    background-image: var(--ooxoo-service-scene-image-mobile, var(--ooxoo-service-scene-image));
    background-position: var(--ooxoo-service-scene-position-mobile, center center);
    opacity: var(--ooxoo-service-scene-opacity-mobile, var(--ooxoo-service-scene-opacity, .74));
  }

  #ooxoo-service-scene-bg .ooxoo-service-scene-bottom {
    top: 44vh;
  }

  body[data-ooxoo-service-scene="hospital"] {
    --ooxoo-service-scene-position-mobile: center top;
  }

  body[data-ooxoo-service-scene="convenience"] {
    --ooxoo-service-scene-position-mobile: center top;
  }

  body[data-ooxoo-service-scene="ev"] {
    --ooxoo-service-scene-position-mobile: center center;
  }

  body[data-ooxoo-service-scene="parking"] {
    --ooxoo-service-scene-position-mobile: center center;
  }
}