/**
 * demo.refactored.css — structural refactor of demo.css
 *
 * Rollback: point index.php stylesheet href back to demo.css.
 *
 * SGAI — standalone visual styles
 *
 * Extracted from:
 * - dbio_theoplayer_sgai_block.css (device frames, crops, laptop base)
 * - blocks_elements.css (.dbio-default-button + outlined-alt helpers)
 * - GeneratePress img defaults (max-width / height:auto) scoped here only
 *
 * Does not load GeneratePress, GenerateBlocks, ACF, or WPCode stylesheets.
 * All rules scoped under .optiview-demo-app / .dbio_sgai_container.
 */

/* --------------------------------------------------------------------------
   Fonts
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "avenir-next-medium";
  src:
    url("/wp-content/themes/generatepress_child/fonts/6149672/9548fa3a-05c3-47ef-a6d5-f2f6fef54f84.woff2") format("woff2"),
    url("/wp-content/themes/generatepress_child/fonts/6149672/7667f1c1-c3ca-4520-aead-66f9d93d55a0.woff") format("woff");
  font-display: swap;
}

/*---------------------------------------------------------------------------
  Variable Declarations
  ---------------------------------------------------------------------------*/
:root {
  /* Colors */
  --demo-bg: #14141a;
  --demo-text: #fff;
  --demo-warning-bg: #3b1d4a;
  --demo-warning-border: #b924ff;
  --demo-focus-outline: #aa33ff;
  --demo-outlined-border: #aa33ff;
  --demo-button-border-hover: #3e49f4;

  /* Typography */
  --demo-font-body: "Noto Sans", system-ui, sans-serif;
  --demo-font-button: "avenir-next-medium", "Noto Sans", system-ui, sans-serif;
  --demo-font-size-base: 15px;
  --demo-font-size-warning: 14px;
  --demo-letter-spacing-button: 0.1em;
  --demo-line-height-button: 150%;

  /* Layout */
  --demo-max-width: 960px;
  --demo-padding-block-start: 16px;
  --demo-padding-inline: 20px;
  --demo-padding-block-end: 40px;
  --demo-devices-max-width: 820px;
  --demo-devices-gap: 40px;
  --demo-devices-margin-bottom: 50px;
  --demo-tv-max-width: 819px;
  --demo-illustration-size: 80px;
  --demo-illustration-margin-top: 12px;

  /* Surfaces & effects */
  --demo-button-radius: 26px;
  --demo-warning-radius: 8px;
  --demo-button-gradient: linear-gradient(99.69deg, #3e44fe -10.66%, #bb5cff 114.64%);
  --demo-button-hover-bg: linear-gradient(0deg, rgba(62, 68, 254, 0.6), rgba(62, 68, 254, 0.6));
  --demo-outlined-gradient: linear-gradient(150deg, hsla(337, 100%, 84%, 1) 0%, hsla(262, 100%, 60%, 1) 68.75%);
  --demo-button-shadow: 0 2px 4px 0 #6161612e;
  --demo-button-hover-shadow: 0 8px 14px rgb(62 68 254 / 26%);
  --demo-transition-button: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  --demo-transition-opacity: opacity 0.3s ease;
}

/* --------------------------------------------------------------------------
   Embed shell
   -------------------------------------------------------------------------- */

html,
body.optiview-demo-embed {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--demo-bg);
}

/* --------------------------------------------------------------------------
   Demo app root + design tokens
   -------------------------------------------------------------------------- */

.optiview-demo-app {
  position: relative;
  z-index: 0;
  isolation: isolate;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: var(--demo-padding-block-start) var(--demo-padding-inline) var(--demo-padding-block-end);
  max-width: var(--demo-max-width);
  background: var(--demo-bg);
  color: var(--demo-text);
  font-family: var(--demo-font-body);
  -webkit-font-smoothing: antialiased;
}

:is(html, body).optiview-demo-embedded .optiview-demo-app {
  min-height: 0;
}

.optiview-demo-app *,
.optiview-demo-app *::before,
.optiview-demo-app *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Config warning
   -------------------------------------------------------------------------- */

.optiview-demo-app .optiview-config-warning {
  background: var(--demo-warning-bg);
  border: 1px solid var(--demo-warning-border);
  padding: 12px 16px;
  border-radius: var(--demo-warning-radius);
  margin-bottom: 16px;
  font-size: var(--demo-font-size-warning);
  color: var(--demo-text);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   SGAI container & images
   -------------------------------------------------------------------------- */

.optiview-demo-app .dbio_sgai_container img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}

.optiview-demo-app .dbio_sgai_container,
.dbio_sgai_container {
  background-color: transparent;
}

.optiview-demo-app .dbio_sgai_container .sgai_block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Device layout
   -------------------------------------------------------------------------- */

.optiview-demo-app .dbio_sgai_container .sgai_demo_devices_wrapper {
  max-width: var(--demo-devices-max-width);
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto var(--demo-devices-margin-bottom) auto;
  align-items: center;
  flex: 0 1 auto;
  gap: var(--demo-devices-gap);
  justify-content: space-between;
  justify-content: center;
}

.optiview-demo-app .dbio_sgai_container .sgai_demo_devices_wrapper .sgai_demo_device {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
}

.optiview-demo-app .dbio_sgai_container .sgai_demo_devices_wrapper .sgai_demo_device.tv {
  position: relative;
  display: block;
  height: 100%;
  max-width: var(--demo-tv-max-width);
  width: 100%;
  margin: auto;
}

.optiview-demo-app .dbio_sgai_container .sgai_demo_devices_wrapper .sgai_demo_device.mobile {
  width: 25%;
  order: 1;
}

.optiview-demo-app .dbio_sgai_container .sgai_demo_devices_wrapper .sgai_demo_device.laptop {
  width: 40%;
  order: 2;
}

/* --------------------------------------------------------------------------
   Device frames & player containers
   -------------------------------------------------------------------------- */

.optiview-demo-app .dbio_sgai_container .sgai_demo_device .sgai_device_frame {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.optiview-demo-app .dbio_sgai_container .sgai_demo_device .theoplayer-container {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.optiview-demo-app .dbio_sgai_container .sgai_demo_device .sgai_demo_player_container {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  clip-path: inset(0% 0% 0% 0% round 2%);
  z-index: 0;
}

.optiview-demo-app .dbio_sgai_container .sgai_demo_device.tv .sgai_demo_player_container {
  width: 100%;
  height: 90%;
}

.optiview-demo-app .dbio_sgai_container .sgai_demo_device.mobile .sgai_demo_player_container {
  top: 1px;
  left: 0;
  width: 100%;
  height: 98%;
  border-radius: 10%;
}

.optiview-demo-app .dbio_sgai_container .sgai_demo_device.laptop .sgai_demo_player_container {
  top: -5px;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 6% 6% 0 0;
}

.optiview-demo-app .dbio_sgai_container .sgai_demo_devices_wrapper .sgai_demo_device.laptop::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -2%;
  width: calc(100% + 4%);
  height: 100%;
  background: url("../img/frame-laptop-sgai-dolby-base.png") no-repeat;
  background-size: contain;
  background-position: bottom center;
  pointer-events: none;
  z-index: 2;
}

.optiview-demo-app .dbio_sgai_container .sgai_demo_device .theoplayer-container :is(video, canvas) {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  display: block;
}

.optiview-demo-app .dbio_sgai_container .sgai_demo_device .theoplayer-container :is(.vjs-tech, .theo-primary-color) {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Device layout — small screens
   -------------------------------------------------------------------------- */

@media screen and (max-width: 479.98px) {
  .optiview-demo-app .dbio_sgai_container .sgai_demo_device.mobile .sgai_demo_player_container {
    top: 1px;
    left: 0;
    width: 100%;
    height: 98%;
    border-radius: 10%;
  }

  .optiview-demo-app .dbio_sgai_container .sgai_demo_device.laptop .sgai_demo_player_container {
    top: -1px;
  }
}

/* --------------------------------------------------------------------------
   Inline status — ad / stream failures

   Every ad failure mode used to leave the device mockups blank with no
   feedback. demo.js unhides this line instead.
   -------------------------------------------------------------------------- */

.optiview-demo-app .dbio_sgai_container .sgai_demo_status {
  max-width: var(--demo-devices-max-width);
  margin: 0 auto var(--demo-devices-margin-bottom) auto;
  padding: 12px 16px;
  border: 1px solid var(--demo-warning-border);
  border-radius: 6px;
  background: var(--demo-warning-bg);
  color: var(--demo-text);
  font-family: var(--demo-font-body);
  font-size: var(--demo-font-size-warning);
  text-align: center;
}

.optiview-demo-app .dbio_sgai_container .sgai_demo_status[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Button wrapper
   -------------------------------------------------------------------------- */

.optiview-demo-app .dbio_sgai_container .sgai_demo_button_wrapper {
  text-align: center;
  margin: 0;
  padding: 0;
}

.optiview-demo-app .dbio_sgai_container .sgai_demo_button_wrapper .dbio-default-button-container {
  text-align: center;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Default button
   -------------------------------------------------------------------------- */

.optiview-demo-app :is(.dbio_sgai_container a.dbio-default-button, a.dbio-default-button.sgai_demo_button_trigger) {
  display: inline-block;
  position: relative;
  width: auto;
  max-width: 100%;
  background: var(--demo-button-gradient);
  border-radius: var(--demo-button-radius);
  outline: none;
  padding: 0.8333333333em 1.6em;
  border: 1.5px solid transparent;
  font-weight: bold;
  font-size: var(--demo-font-size-base);
  line-height: var(--demo-line-height-button);
  letter-spacing: var(--demo-letter-spacing-button);
  text-transform: uppercase;
  font-family: var(--demo-font-button);
  color: var(--demo-text);
  text-decoration: none;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 126% 126%;
  box-shadow: var(--demo-button-shadow);
  -webkit-transition: var(--demo-transition-button);
  -o-transition: var(--demo-transition-button);
  transition: var(--demo-transition-button);
  overflow: visible;
}

.optiview-demo-app :is(.dbio_sgai_container a.dbio-default-button, a.dbio-default-button.sgai_demo_button_trigger):focus {
  color: var(--demo-text);
  outline: 2px solid var(--demo-focus-outline);
  outline-offset: 3px;
}

.optiview-demo-app :is(.dbio_sgai_container a.dbio-default-button, a.dbio-default-button.sgai_demo_button_trigger):hover {
  background: var(--demo-button-hover-bg);
  border-color: var(--demo-button-border-hover);
  box-sizing: border-box;
  box-shadow: var(--demo-button-hover-shadow);
  color: var(--demo-text);
}

/* CTA while it waits for the players to become schedulable. */
.optiview-demo-app :is(.dbio_sgai_container a.dbio-default-button, a.dbio-default-button.sgai_demo_button_trigger).is-busy {
  opacity: 0.6;
  cursor: progress;
}

/* --------------------------------------------------------------------------
   Outlined-alt button
   -------------------------------------------------------------------------- */

.optiview-demo-app .dbio_sgai_container .outlined_alt_hover_effect {
  background: var(--demo-outlined-gradient);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--demo-button-radius);
  padding: inherit;
  border-color: transparent;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  -webkit-transition: var(--demo-transition-opacity);
  -o-transition: var(--demo-transition-opacity);
  transition: var(--demo-transition-opacity);
}

.optiview-demo-app .dbio_sgai_container a.dbio-default-button.dbio-outlined-alt-button {
  position: relative;
  border-color: var(--demo-outlined-border);
  background: var(--demo-outlined-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.optiview-demo-app .dbio_sgai_container a.dbio-default-button.dbio-outlined-alt-button:hover {
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
}

.optiview-demo-app .dbio_sgai_container a.dbio-default-button.dbio-outlined-alt-button:hover .outlined_alt_hover_effect {
  opacity: 1;
}

.optiview-demo-app .dbio_sgai_container a.dbio-default-button.dbio-outlined-alt-button::before,
.optiview-demo-app .dbio_sgai_container a.dbio-default-button.dbio-outlined-alt-button::after {
  content: "";
  position: absolute;
  border-radius: var(--demo-button-radius);
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  box-sizing: content-box;
  overflow: hidden;
  z-index: -1;
  background: var(--demo-bg);
}

.optiview-demo-app .dbio_sgai_container a.dbio-default-button.dbio-outlined-alt-button::after {
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  z-index: -2;
  -webkit-transition: var(--demo-transition-opacity);
  -o-transition: var(--demo-transition-opacity);
  transition: var(--demo-transition-opacity);
  background: var(--demo-outlined-gradient);
}

.optiview-demo-app .dbio_sgai_container a.dbio-default-button.dbio-outlined-alt-button:hover::before,
.optiview-demo-app .dbio_sgai_container a.dbio-default-button.dbio-outlined-alt-button:hover::after {
  display: none;
}

/* --------------------------------------------------------------------------
   Illustrations
   -------------------------------------------------------------------------- */

.optiview-demo-app .dbio_sgai_container .sgai_demo_button_wrapper .dbio_illustrations_wrapper {
  display: block;
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.optiview-demo-app .dbio_sgai_container .sgai_demo_button_wrapper .dbio_illustrations_wrapper :is(img, img.dbio_illustration) {
  display: block;
  margin: var(--demo-illustration-margin-top) auto 0 auto;
  width: var(--demo-illustration-size);
  max-width: var(--demo-illustration-size);
  height: auto;
  pointer-events: none;
  user-select: none;
}