/*
 * iPear Custom Studio — Fullscreen App Shell (F6 → F7 mobile-reliability)
 *
 * Every rule is scoped under `body.ipear-studio-fullscreen` so it cannot
 * leak outside the Studio page. The theme header/footer is never called
 * on this route, so we don't need to hide anything with global tags.
 *
 * F7 scrolling architecture (measured on ipear.gr/custom-case/ 2026-09-02):
 *   - The whole viewport is one 100dvh flex column.
 *   - The document body does NOT scroll.
 *   - `.ipear-studio-main` is the SINGLE scroll container.
 *   - The existing `.ipear-v3-bar` (position:sticky in the shortcode
 *     template) is promoted to `position:fixed` at the shell's bottom
 *     so it stays visible at any scroll offset and any list length. No
 *     DOM/JS change — element identity, class name, event bindings and
 *     price/label updates continue to work.
 *   - `.ipear-studio-main` reserves matching padding-bottom so the last
 *     device row is never hidden behind the fixed footer.
 *
 * Design tokens: iPear brand lime + Custom Studio ink/paper.
 */

body.ipear-studio-fullscreen {
  --ipear-fs-brand:      #8AE900;
  --ipear-fs-ink:        #0a0a0a;
  --ipear-fs-paper:      #ffffff;
  --ipear-fs-border:     #e5e5e5;
  --ipear-fs-muted:      #6b7280;
  --ipear-fs-appbar-h-d: 68px;
  --ipear-fs-appbar-h-m: 60px;
  --ipear-fs-appbar-h:   var(--ipear-fs-appbar-h-d);
  --ipear-fs-admin-off:  0px;
  /* Approximate default footer height; JS may set this precisely at runtime. */
  --ipear-fs-bar-h:      96px;

  margin: 0;
  padding: 0;
  background: var(--ipear-fs-paper);
  color: var(--ipear-fs-ink);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overflow-x: hidden;
}
html:has(body.ipear-studio-fullscreen) { height: 100vh; height: 100dvh; overflow: hidden; }

/* Match core WP admin-bar offsets (32px desktop / 46px small screens).
 * Scoped to this body so no other page is affected. */
body.ipear-studio-fullscreen.admin-bar { --ipear-fs-admin-off: 32px; }
@media screen and (max-width: 782px) {
  body.ipear-studio-fullscreen.admin-bar { --ipear-fs-admin-off: 46px; }
}

/* ── Shell ─────────────────────────────────────────────────────── */
body.ipear-studio-fullscreen .ipear-studio-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100vh  - var(--ipear-fs-admin-off));
  height: calc(100dvh - var(--ipear-fs-admin-off));
  min-height: 0;
  background: var(--ipear-fs-paper);
}

/* ── App bar ───────────────────────────────────────────────────── */
body.ipear-studio-fullscreen .ipear-studio-appbar {
  flex: 0 0 auto;
  position: sticky;
  top: var(--ipear-fs-admin-off);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* F7: safe-area applied ONCE via padding-top. Height stays the base
   * value; content sits inside the safe area on notched devices. */
  min-height: var(--ipear-fs-appbar-h);
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  background: var(--ipear-fs-paper);
  border-bottom: 1px solid var(--ipear-fs-border);
}
@media (max-width: 768px) {
  body.ipear-studio-fullscreen { --ipear-fs-appbar-h: var(--ipear-fs-appbar-h-m); }
}

/* Exit control — left, above the centered brand */
body.ipear-studio-fullscreen .ipear-studio-exit {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ipear-fs-border);
  background: var(--ipear-fs-paper);
  color: var(--ipear-fs-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
body.ipear-studio-fullscreen .ipear-studio-exit:hover,
body.ipear-studio-fullscreen .ipear-studio-exit:focus-visible {
  background: #f5f5f5;
  border-color: #d4d4d4;
  outline: none;
}
body.ipear-studio-fullscreen .ipear-studio-exit:focus-visible {
  box-shadow: 0 0 0 3px rgba(138, 233, 0, 0.45);
}
body.ipear-studio-fullscreen .ipear-studio-exit:active { transform: scale(0.96); }
body.ipear-studio-fullscreen .ipear-studio-exit svg { display: block; }

body.ipear-studio-fullscreen .ipear-studio-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Brand — absolutely viewport-centered, independent of exit width */
body.ipear-studio-fullscreen .ipear-studio-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* F7: parent already applies safe-area via padding-top. Do NOT re-apply here. */
  z-index: 1;
  display: flex;
  align-items: center;
  pointer-events: none;
}
body.ipear-studio-fullscreen .ipear-studio-logo {
  display: block;
  height: 36px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}
@media (max-width: 768px) {
  body.ipear-studio-fullscreen .ipear-studio-logo { height: 30px; max-width: 140px; }
}
body.ipear-studio-fullscreen .ipear-studio-wordmark {
  font: 600 15px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ipear-fs-ink);
  letter-spacing: 0.2px;
}

/* ── Main — single scroll container ────────────────────────────── */
body.ipear-studio-fullscreen .ipear-studio-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-left:  env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  /* Reserve room for the fixed footer + iOS home-indicator safe area. */
  padding-bottom: calc(var(--ipear-fs-bar-h) + env(safe-area-inset-bottom, 0px));
  background: var(--ipear-fs-paper);
}

/* F6.2: descendant selector — Elementor wraps the_content() in
 * `.elementor-widget-container` etc. `.ipear-v3` is a few levels deep. */
body.ipear-studio-fullscreen .ipear-studio-main .ipear-v3 {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* ── Fixed action bar (F7 → F7.1) ──────────────────────────────
 * F7.1: the template's inline `style="position:sticky"` was removed
 * at source (templates/configurator-mobile.php), so no !important
 * is needed here — this scoped class selector (0,2,1) cleanly
 * beats the mobile-CSS default (0,1,0). The element identity,
 * classes, `data-*` and JS bindings stay unchanged; only the
 * visual positioning is promoted to fixed at the shell viewport
 * bottom. `.ipear-v3-panel`'s existing padding-bottom
 *   calc(var(--ipear-bar-min, 88px) + 24px + env(safe-area-inset-bottom, 0))
 * already reserves matching space, so the last row is never
 * hidden behind the bar. */
/* F7.5: `!important` is a defensive belt-and-braces after removing the
 * template's inline `style="position:sticky"` — should any cached HTML
 * still ship the inline attribute (specificity 1000), these rules win. */
body.ipear-studio-fullscreen .ipear-v3-bar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 30 !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  background: var(--ipear-fs-paper) !important;
  border-top: 1px solid var(--ipear-fs-border) !important;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.05) !important;
  margin-top: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
 * F7.6 — Mobile UI polish (measured on ipear.gr 2026-09-04).
 * Every rule is additive + scoped to `body.ipear-studio-fullscreen`.
 * Purely visual: no positioning, no JS, no template changes.
 * Rollback = delete this block.
 * ─────────────────────────────────────────────────────────────
 */

/* 1) Disabled CTA text — was #6b6b6b on #efefef (4.0:1, below AA).
 *    Bump to #525252 (~5.5:1) so «Συνέχεια» stays readable when disabled. */
body.ipear-studio-fullscreen .ipear-v3-bar-cta:disabled,
body.ipear-studio-fullscreen .ipear-v3-bar-cta[disabled] {
  color: #525252 !important;
}

/* 2) Section labels — soften from #1a5c00 green to muted grey so titles win. */
body.ipear-studio-fullscreen .ipear-v3-section-label,
body.ipear-studio-fullscreen .ipear-v3-panel [class*="section-label"],
body.ipear-studio-fullscreen .ipear-v3-panel [class*="v3-label"] {
  color: #6b7280 !important;
  letter-spacing: 0.06em !important;
}

/* 3) Print-type cards align visual weight with case-type cards (100 → 80). */
body.ipear-studio-fullscreen .ipear-v3-print-card {
  min-height: 80px !important;
}

/* 4) Bar internal breathing — 12px sides → 16px so back / CTA aren't
 *    hugging the viewport edges on notched devices. */
body.ipear-studio-fullscreen .ipear-v3-bar {
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 12px !important;
}

/* 5) Stage badge readability — 11px → 12px + a hair more padding. */
body.ipear-studio-fullscreen [data-role="stage-badge"] {
  font-size: 12px !important;
  padding: 5px 12px !important;
}

/* ─────────────────────────────────────────────────────────────
 * F7.7 — Desktop 2-column layout (Mobilfox-style).
 * ≥1024px: mockup left / options right / bar full-width bottom.
 * Mobile <1024px: no change — single-column stack as before.
 * All rules scoped to `body.ipear-studio-fullscreen`. Additive only.
 * ─────────────────────────────────────────────────────────────
 */

@media (min-width: 1024px) {
  body.ipear-studio-fullscreen .ipear-v3 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 440px !important;
    grid-template-areas:
      "progress progress"
      "stage    panel"
      "editrow  panel"
      "bar      bar" !important;
    align-items: start !important;
    column-gap: 32px !important;
    padding: 24px 32px 0 !important;
    max-width: 1360px !important;
    margin: 0 auto !important;
  }
  body.ipear-studio-fullscreen .ipear-v3 > .ipear-v3-progress { grid-area: progress; }

  /* F7.9: consolidated stage block — merges F7.7 grid placement + F7.8 flex
   * centering. Removes the F7.7 max-height that F7.8 overrode. Single source
   * of truth for the desktop stage layout. */
  body.ipear-studio-fullscreen .ipear-v3 > [data-role="stage"] {
    grid-area: stage;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 32px !important;
    min-height: 600px !important;
    max-height: calc(100dvh - 260px) !important;
    overflow: hidden !important;
    position: sticky !important;
    top: 24px !important;
    align-self: start !important;
  }
  body.ipear-studio-fullscreen .ipear-v3 > [data-role="stage"] .ipear-v3-mockup {
    max-height: 100% !important;
  }

  body.ipear-studio-fullscreen .ipear-v3 > [data-role="editmode-row"] { grid-area: editrow; }
  body.ipear-studio-fullscreen .ipear-v3 > .ipear-v3-panel {
    grid-area: panel;
    padding: 0 !important;
  }
  body.ipear-studio-fullscreen .ipear-v3 > .ipear-v3-bar { grid-area: bar; }
}