/*
 * SLE download-box scene shell.
 *
 * Contract:
 * - DBO owns the component internals and responsive behavior.
 * - SLE only places the rendered box in the hero area and applies a dark theme through variables.
 */

.mbts-sle-hero-download,
.mbts-sle-independent-download-box,
.mobantu-independent-module-download-box {
  width: 100%;
  min-width: 0;
}

.mbts-sle-hero-download {
  --mbts-sle-download-text: rgb(248 250 252 / 94%);
  --mbts-sle-download-muted: rgb(203 213 225 / 82%);
  --mbts-sle-download-line: rgb(148 163 184 / 24%);
  --mbts-sle-download-panel: rgb(15 23 42 / 42%);
  --mbts-sle-download-panel-strong: rgb(15 23 42 / 58%);
  --mbts-sle-download-regular: var(--theme-color, #1972f5);
  --mbts-sle-download-promotion: var(--mbts-dbox-promotion-color, #a748ff);
  --mbts-sle-download-success: var(--mbts-dbox-success-color, #5cb85c);
}

.mbts-sle-hero-download .erphpdown-box {
  margin-block: 0 !important;
}

.mbts-sle-hero-download .erphpdown-box-modern {
  color: var(--mbts-sle-download-text);
  --dbox-semantic-regular: var(--mbts-sle-download-regular);
  --dbox-semantic-promotion: var(--mbts-sle-download-promotion);
  --dbox-semantic-success: var(--mbts-sle-download-success);
  --dbox-semantic-neutral: var(--mbts-sle-download-muted);
  --surface: var(--mbts-sle-download-panel);
  --panel-bg: var(--mbts-sle-download-panel-strong);
  --surface-muted: rgb(15 23 42 / 52%);
  --surface-emphasis: color-mix(in srgb, var(--dbox-semantic-regular) 14%, transparent);
  --surface-emphasis-promotion: color-mix(in srgb, var(--dbox-semantic-promotion) 15%, transparent);
  --surface-emphasis-success: color-mix(in srgb, var(--dbox-semantic-success) 14%, transparent);
  --surface-soft: rgb(15 23 42 / 42%);
  --surface-checkpan: rgb(15 23 42 / 48%);
  --border: var(--mbts-sle-download-line);
  --border-divider: rgb(148 163 184 / 22%);
  --box-shadow: 0 10px 24px rgb(15 23 42 / 18%), inset 0 1px 0 rgb(255 255 255 / 7%);
  --text-main: var(--mbts-sle-download-text);
  --text-subtle: var(--mbts-sle-download-muted);
  --muted: rgb(148 163 184 / 78%);
  --text-on-accent: #fff;
  --text-disabled: rgb(203 213 225 / 64%);
  --dbox-vip-bg: rgb(255 255 255 / 8%);
  --dbox-vip-title-color: var(--mbts-sle-download-text);
  --dbox-vip-icon-color: rgb(15 23 42 / 88%);
}

.mbts-sle-independent-download-box .erphpdown-box-modern,
.mobantu-independent-module-download-box .erphpdown-box-modern {
  --dbox-meta-surface: var(--mbts-sle-download-panel-strong, var(--dbox-night-surface, rgb(15 23 42 / 58%)));
}

.mbts-sle-acf-meta-position-download .mbts-sle-independent-download-box,
.mbts-sle-acf-meta-position-download .mobantu-independent-module-download-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  min-height: 100%;
}

.mbts-sle-acf-meta-position-download .mbts-sle-independent-download-box > .erphpdown-box-modern,
.mbts-sle-acf-meta-position-download .mobantu-independent-module-download-box > .erphpdown-box-modern {
  max-height: min(62vh, 520px);
  overflow: auto;
}

.mbts-sle-acf-meta-position-download .mbts-sle-independent-download-box > .article-custom-metas.mbts-dbox-meta-grid,
.mbts-sle-acf-meta-position-download .mobantu-independent-module-download-box > .article-custom-metas.mbts-dbox-meta-grid {
  flex: 0 0 auto;
  margin-top: 0;
}

body.night .mbts-sle-hero-download,
html.night body .mbts-sle-hero-download {
  --mbts-sle-download-text: rgb(226 232 240 / 86%);
  --mbts-sle-download-muted: rgb(203 213 225 / 78%);
  --mbts-sle-download-panel: rgb(2 6 23 / 48%);
  --mbts-sle-download-panel-strong: rgb(2 6 23 / 64%);
  --mbts-sle-download-line: rgb(148 163 184 / 22%);
  --dbox-night-surface: rgb(2 6 23 / 48%);
  --dbox-night-surface-muted: rgb(2 6 23 / 54%);
  --dbox-night-surface-soft: rgb(2 6 23 / 48%);
  --dbox-night-surface-checkpan: rgb(2 6 23 / 54%);
  --dbox-night-vit-bg: rgb(2 6 23 / 56%);
  --dbox-night-vip-bg: rgb(255 255 255 / 6%);
}

body.night .mbts-sle-hero-download .erphpdown-box-modern,
html.night body .mbts-sle-hero-download .erphpdown-box-modern {
  --text-on-accent: rgb(226 232 240 / 86%);
  --dbox-action-on: var(--text-on-accent);
}