.ds-bar { position: fixed; top:0; left:0; right:0; z-index:9999; background:#fff; border-bottom:1px solid #ddd; }
.ds-inner { max-width: 1400px; margin:0 auto; padding:10px 12px; display:flex; gap:16px; align-items:center; }
.ds-brand { display:flex; align-items:center; min-width: 140px; }
.ds-logo-text { font-weight:700; color:#111; text-decoration:none; }
.ds-logo-link { display:inline-flex; align-items:center; text-decoration:none; }
.ds-logo-img { height: 28px; width:auto; display:block; }

.ds-select { position: relative; }
.ds-select-btn {
  padding:8px 12px;
  min-width: 240px;
  border: 1px solid #cfd6e4;
  background: #515c70;
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
  border-radius: 3px;
}
.ds-select-btn:hover { filter: brightness(0.95); }
.ds-dropdown { position:absolute; top:110%; left:0; width:380px; max-height:70vh; overflow:auto; background:#fff; border:1px solid #ddd; box-shadow:0 10px 30px rgba(0,0,0,.12); z-index:10000; }
.ds-item { width:100%; text-align:left; padding:10px 12px; border:0; background:#fff; cursor:pointer; display:flex; gap:10px; align-items:center; justify-content:space-between; }
.ds-item:hover { background:#f5f7fb; }
.ds-item-name { font-weight:700; color:#1b2230; }
.ds-item-preview { width: 120px; height:auto; border-radius: 2px; box-shadow: 0 4px 12px rgba(0,0,0,.12); }

.ds-devices { margin-left:auto; display:flex; gap:8px; }
.ds-device {
  width:44px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  border: 1px solid #cfd6e4;
  background: #515c70;
  color:#fff;
  border-radius: 3px;
  cursor:pointer;
}
.ds-device:hover { filter: brightness(0.95); }
.ds-device.is-active { outline: 2px solid #000; outline-offset: 1px; }
.ds-device i { font-size: 16px; line-height: 1; }

#dsFrame { display:block; width:100%; border:0; margin:0; }
.ds-wrap { padding-top: 62px; }

@media (max-width: 900px) {
  .ds-inner { flex-wrap: wrap; }
  .ds-devices { margin-left: 0; }
  .ds-dropdown { width: min(92vw, 380px); }
  .ds-select-btn { min-width: 200px; }
}


/* --- DemoSwitcher: fullscreen integration --- */
body.ds-fullscreen {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Try to hide common template containers (Joomla51 and others) */
body.ds-fullscreen #container_header,
body.ds-fullscreen header,
body.ds-fullscreen #header,
body.ds-fullscreen .header,
body.ds-fullscreen #container_footer,
body.ds-fullscreen footer,
body.ds-fullscreen #footer,
body.ds-fullscreen .footer,
body.ds-fullscreen #back-to-top,
body.ds-fullscreen .back-to-top,
body.ds-fullscreen .body_bg,
body.ds-fullscreen .outside_header,
body.ds-fullscreen .unsupported,
body.ds-fullscreen .unsupported-browser {
  display: none !important;
}

/* Make the main component area fill the viewport */
body.ds-fullscreen #container_main,
body.ds-fullscreen #main,
body.ds-fullscreen #content_full,
body.ds-fullscreen .component_block,
body.ds-fullscreen .wrapper960,
body.ds-fullscreen .maincontent,
body.ds-fullscreen .side_margins,
body.ds-fullscreen .content_full {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure our iframe uses the entire screen minus the switcher bar */
body.ds-fullscreen .ds-wrap {
  position: fixed;
  inset: 0;
  z-index: 99999; /* above template chrome */
}

body.ds-fullscreen #dsFrame {
  height: calc(100vh - var(--ds-bar-height, 56px));
}


/* --- DemoSwitcher: fullscreen default (covers template chrome) --- */
.ds-wrap {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #fff;
}

.ds-wrap.ds-embed {
  position: relative;
  inset: auto;
  z-index: auto;
  background: transparent;
}

.ds-bar {
  position: relative;
  z-index: 2;
}

#dsFrame {
  display: block;
  width: 100%;
  height: calc(100vh - var(--ds-bar-height, 56px));
  border: 0;
}

.ds-wrap.ds-embed #dsFrame {
  height: 80vh;
}

/* Avoid scrollbars in fullscreen */
html, body {
  height: 100%;
}
body.ds-no-scroll {
  overflow: hidden !important;
}

.ds-select { display:flex; align-items:center; gap:10px; }
.ds-select-label{ color:#111; font-weight:600; font-size:14px; white-space:nowrap; }

@media (max-width: 767px){ .ds-devices{ display:none !important; } }