/* styleOnboardPop.css -- shared "Before You Start" pop-up (4 Oct 2026). Markup menus/bsm_onboard_pop.php. */
.bsm-obp { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: var(--bsm3-space-lg); }
.bsm-obp.bsm-obp-hidden { display: none; }
.bsm-obp::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--bsm3-color-black-000000-use-on-bg-sleep); opacity: var(--bsm3-opacity-low); }
.bsm-obp p:not([class]) { display: contents; }
.bsm-obp br { display: none; }
.bsm-obp-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--bsm3-space-md); width: 100%; max-width: var(--bsm3-width-standard); padding: var(--bsm3-space-xl); background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); border: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); border-radius: var(--bsm3-radius-primary-cards); font-family: var(--bsm3-font-body); animation: bsm-obp-in 0.25s ease; }
@keyframes bsm-obp-in { from { opacity: 0; transform: translateY(var(--bsm3-space-md)); } to { opacity: 1; transform: translateY(0); } }
.bsm-obp-x { position: absolute; top: var(--bsm3-space-md); right: var(--bsm3-space-md); display: inline-flex; align-items: center; justify-content: center; width: var(--bsm3-icon-size-container); height: var(--bsm3-icon-size-container); padding: 0; border-radius: var(--bsm3-radius-pills); border: var(--bsm3-border-default) solid var(--bsm3-color-divider-lavender-gray-C8C6E0-use-on-dividers); background-color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); font-family: var(--bsm3-font-body); font-size: var(--bsm3-text-medium-14px-use-on-text); cursor: pointer; }
.bsm-obp-head { display: flex; align-items: center; gap: var(--bsm3-space-md); padding-right: var(--bsm3-space-xl); }
.bsm-obp-icon-box { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--bsm3-icon-size-container); height: var(--bsm3-icon-size-container); border-radius: var(--bsm3-radius-status-cards); background-color: var(--bsm3-color-sleep-light-lavender-EDE9FE-use-on-sleep-pillar-background); color: var(--bsm3-color-sleep-core-purple-7C3AED-use-on-sleep-pillar-accent-icon); }
.bsm-obp-icon { display: block; width: var(--bsm3-icon-size-card); height: var(--bsm3-icon-size-card); stroke-width: var(--bsm3-icon-stroke); }
.bsm-obp-title { margin: 0; font-family: var(--bsm3-font-heading); font-size: var(--bsm3-size-sub-section-title-18px-use-on-h3); font-weight: var(--bsm3-weight-semibold-600-use-on-h2-h3-h4); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); line-height: 1.3; }
.bsm-obp-text { margin: 0; font-size: var(--bsm3-text-body-use-on-reading-text); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); line-height: 1.55; }
.bsm-obp-btns { display: flex; flex-wrap: wrap; gap: var(--bsm3-space-sm); margin-top: var(--bsm3-space-sm); }
.bsm-obp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--bsm3-space-sm); max-width: var(--bsm3-dark-background-max-width); padding: var(--bsm3-space-sm) var(--bsm3-space-lg); border-radius: var(--bsm3-radius-pills); border: var(--bsm3-border-default) solid var(--bsm3-color-ink-navy-1E1B48-use-on-border); font-family: var(--bsm3-font-body); font-size: var(--bsm3-size-card-list-title-15px-use-on-h4); font-weight: var(--bsm3-weight-medium-500-use-on-buttons-links); line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.bsm-obp-btn-main { background-color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); }
.bsm-obp-btn-main:hover { background-color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); border-color: var(--bsm3-color-sleep-deep-violet-6D28D9-use-on-sleep-pillar-strong); color: var(--bsm3-color-white-FFFFFF-use-on-bg-day-general); }
.bsm-obp-btn-line { background-color: var(--bsm3-transparent); color: var(--bsm3-color-ink-navy-1E1B48-use-on-primary-text); }
.bsm-obp-btn-line:hover { background-color: var(--bsm3-color-surface-pale-lavender-F1F0F9-use-on-card-background); }
@media (prefers-reduced-motion: reduce) { .bsm-obp-card { animation: none; } }