/* BolMol shared light interface layer. Loaded after page CSS by design. */
:root {
    --bm-bg: #f4f7fb;
    --bm-surface: #fff;
    --bm-surface-2: #f8faff;
    --bm-surface-hover: #eef3fb;
    --bm-border: #d9e1ed;
    --bm-border-soft: #e6ebf3;
    --bm-border-faint: #edf1f6;
    --bm-text: #17253b;
    --bm-text-soft: #64748b;
    --bm-text-faint: #8290a5;
    --bm-text-inverse: #fff;
    --bm-primary: #2369df;
    --bm-primary-hover: #1959c6;
    --bm-primary-soft: rgba(35, 105, 223, .12);
    --bm-success: #138a63;
    --bm-success-soft: rgba(19, 138, 99, .11);
    --bm-danger: #d44252;
    --bm-danger-hover: #bd3444;
    --bm-danger-soft: rgba(212, 66, 82, .11);
    --bm-warning: #a96912;
    --bm-warning-soft: rgba(232, 163, 49, .16);
    --bm-radius-sm: 8px;
    --bm-radius: 12px;
    --bm-radius-lg: 18px;
    --bm-shadow-sm: 0 1px 3px rgba(24, 39, 63, .06);
    --bm-shadow: 0 5px 18px rgba(24, 39, 63, .07);
    --bm-shadow-lg: 0 16px 44px rgba(24, 39, 63, .14);
    --bm-transition: 160ms ease;
    --bs-primary: var(--bm-primary);
    --bs-primary-rgb: 35, 105, 223;
    --bs-link-color: var(--bm-primary);
    --bs-link-hover-color: var(--bm-primary-hover);
    --bs-body-color: var(--bm-text);
    --bs-body-bg: var(--bm-bg);
    --bs-border-color: var(--bm-border-soft);
}

html { color-scheme: light; }
body,
button,
input,
select,
textarea { font-family: var(--bm-font, system-ui, -apple-system, "Segoe UI", sans-serif); }
body.bm-body { color: var(--bm-text); background: var(--bm-bg); }
a { text-underline-offset: .16em; }
a:hover { text-decoration-thickness: 1.5px; }
:focus-visible { outline-color: var(--bm-primary); }

/* One shared page shell keeps content aligned with the global header/footer. */
:root { --bm-page-width: 1320px; --bm-page-gutter: 16px; }
.bm-page-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-areas: "recommendations content";
    gap: 24px;
    align-items: start;
    width: min(var(--bm-page-width), calc(100% - 2 * var(--bm-page-gutter)));
    margin-inline: auto;
    padding-block: 20px 48px;
    direction: ltr;
}
.bm-page-main { grid-area: content; min-width: 0; direction: inherit; }
.bm-page-shell--wide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "content"; }
.bm-page-recommendations {
    grid-area: recommendations;
    position: sticky;
    top: 84px;
    display: grid;
    gap: 14px;
    min-width: 0;
    direction: inherit;
}
.bm-page-recommendation-card {
    overflow: hidden;
    padding: 16px;
    border: 1px solid var(--bm-border-soft);
    border-radius: var(--bm-radius-lg);
    background: var(--bm-surface);
    box-shadow: var(--bm-shadow-sm);
}
.bm-page-recommendation-card h2 {
    margin: 0 0 10px;
    color: var(--bm-text);
    font-size: .98rem;
    font-weight: 750;
    line-height: 1.35;
}
.bm-page-recommendation-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bm-page-recommendation-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px;
    border-radius: 10px;
    color: var(--bm-text);
    text-decoration: none;
}
.bm-page-recommendation-link:hover { color: var(--bm-primary-hover); background: var(--bm-surface-2); }
.bm-page-recommendation-link img { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px; object-fit: cover; background: var(--bm-surface-2); }
.bm-page-recommendation-link--user img { border-radius: 50%; }
.bm-page-recommendation-meta { display: grid; min-width: 0; gap: 2px; }
.bm-page-recommendation-meta strong, .bm-page-recommendation-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-page-recommendation-meta strong { font-size: .87rem; font-weight: 680; }
.bm-page-recommendation-meta span { color: var(--bm-text-soft); font-size: .76rem; }

/* The page-specific content roots share the same outer width as the shell. */
.bm-welcome { --bm-wl-container-max: var(--bm-page-width); }
.bm-stores.container-xl, .bm-stores-page, .bm-store-page, .bm-product-page,
.bm-profile, .bm-page-main .bm-post-wrap {
    width: 100%;
    max-width: var(--bm-page-width);
    margin-inline: auto;
}
.bm-page-main .bm-post-wrap { padding-inline: 0; }
.bm-page-main .bm-profile { margin-inline: 0; }
.bm-page-main .bm-store-page, .bm-page-main .bm-product-page { padding-inline: 0; }
.bm-page-recommendation-placeholder { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 10px; color: var(--bm-text-faint); background: var(--bm-surface-2); }
html[dir="rtl"] .bm-page-main, html[dir="rtl"] .bm-page-recommendations { direction: rtl; }

@media (max-width: 900px) {
    .bm-page-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "content" "recommendations";
        gap: 16px;
        padding-block: 14px 36px;
    }
    .bm-page-recommendations { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    :root { --bm-page-gutter: 12px; }
    .bm-page-recommendations { grid-template-columns: minmax(0, 1fr); }
}

.btn {
    min-height: 40px;
    border-radius: 10px;
    font-weight: 650;
    letter-spacing: .005em;
    transition: color var(--bm-transition), background-color var(--bm-transition), border-color var(--bm-transition), box-shadow var(--bm-transition), transform var(--bm-transition);
}
.btn:not(:disabled):active { transform: translateY(1px); }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--bm-primary-soft); }
.btn-primary { color: #fff; background: var(--bm-primary); border-color: var(--bm-primary); }
.btn-primary:hover, .btn-primary:focus { color: #fff; background: var(--bm-primary-hover); border-color: var(--bm-primary-hover); }
.btn-secondary, .btn-light, .btn-outline-secondary { color: var(--bm-text); border-color: var(--bm-border); background-color: #fff; }
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover { color: var(--bm-text); border-color: #c8d3e2; background-color: var(--bm-surface-hover); }
.btn-outline-primary { color: var(--bm-primary); border-color: #abc5f3; background: #fff; }
.btn-outline-primary:hover, .btn-outline-primary:focus { color: var(--bm-primary-hover); border-color: var(--bm-primary); background: var(--bm-primary-soft); }
.btn-danger { color: #fff; background: var(--bm-danger); border-color: var(--bm-danger); }
.btn-danger:hover, .btn-danger:focus { color: #fff; background: var(--bm-danger-hover); border-color: var(--bm-danger-hover); }

.form-control, .form-select, .input-group-text { min-height: 42px; border-color: var(--bm-border); border-radius: 10px; color: var(--bm-text); background-color: #fff; }
textarea.form-control { min-height: 96px; }
.form-control::placeholder { color: var(--bm-text-faint); opacity: 1; }
.form-control:focus, .form-select:focus { border-color: #79a4ed; box-shadow: 0 0 0 3px var(--bm-primary-soft); }
.form-label, .form-check-label { color: #34445d; font-weight: 600; }
.form-check-input:checked { border-color: var(--bm-primary); background-color: var(--bm-primary); }
.input-group-text { background: var(--bm-surface-2); }

.dropdown-menu { padding: 6px; border: 1px solid var(--bm-border-soft); border-radius: 14px; background: #fff; box-shadow: var(--bm-shadow-lg); }
.dropdown-item { min-height: 38px; display: flex; align-items: center; border-radius: 9px; color: var(--bm-text); }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active { color: var(--bm-primary-hover); background: var(--bm-primary-soft); }
.dropdown-divider { border-color: var(--bm-border-faint); }

.card, .modal-content, .list-group-item { border-color: var(--bm-border-soft); border-radius: var(--bm-radius); background-color: #fff; }
.card, .modal-content { box-shadow: var(--bm-shadow-sm); }
.modal-content { overflow: hidden; border-radius: var(--bm-radius-lg); box-shadow: var(--bm-shadow-lg); }
.modal-header, .modal-footer { border-color: var(--bm-border-soft); }
.modal-title, .card-title { color: var(--bm-text); font-weight: 720; }
.alert { border-radius: var(--bm-radius); }
.alert-primary { color: #214a89; border-color: #d3e2fb; background: #f0f6ff; }
.alert-success { color: #176d53; border-color: #cdeadd; background: #effaf5; }
.alert-danger { color: #9e2e3b; border-color: #f1cfd3; background: #fff4f5; }
.alert-warning { color: #85540f; border-color: #f0dfbd; background: #fff9ed; }
.page-link { color: var(--bm-primary); border-color: var(--bm-border-soft); }
.page-item.active .page-link { color: #fff; border-color: var(--bm-primary); background: var(--bm-primary); }
.table { --bs-table-color: var(--bm-text); --bs-table-border-color: var(--bm-border-soft); }
.table thead th { color: #53647c; font-size: .82rem; font-weight: 700; }

/* Native action buttons on the account and verification screens. */
.bm-login-submit, .bm-register-submit, .bm-forgot-submit, .bm-reset-submit,
.bm-2fa-submit, .bm-terms-page-submit, .bm-verify-btn-primary, .bm-vp-btn-primary {
    border: 1px solid var(--bm-primary);
    border-radius: 12px;
    color: #fff;
    background: var(--bm-primary);
    box-shadow: 0 5px 14px rgba(35, 105, 223, .16);
    font-weight: 700;
    transition: background-color var(--bm-transition), border-color var(--bm-transition), box-shadow var(--bm-transition), transform var(--bm-transition);
}
.bm-login-submit:hover:not(:disabled), .bm-register-submit:hover:not(:disabled), .bm-forgot-submit:hover:not(:disabled), .bm-reset-submit:hover:not(:disabled),
.bm-2fa-submit:hover:not(:disabled), .bm-terms-page-submit:hover:not(:disabled), .bm-verify-btn-primary:hover:not(:disabled), .bm-vp-btn-primary:hover:not(:disabled) {
    border-color: var(--bm-primary-hover);
    color: #fff;
    background: var(--bm-primary-hover);
    box-shadow: 0 7px 18px rgba(35, 105, 223, .22);
}
.bm-login-submit:disabled, .bm-register-submit:disabled, .bm-forgot-submit:disabled, .bm-reset-submit:disabled,
.bm-2fa-submit:disabled, .bm-terms-page-submit:disabled, .bm-verify-btn-primary:disabled, .bm-vp-btn-primary:disabled { opacity: .58; cursor: not-allowed; box-shadow: none; }
.bm-login-oauth-btn, .bm-register-oauth-btn, .bm-verify-btn-secondary, .bm-vp-btn-secondary {
    border-color: var(--bm-border);
    border-radius: 11px;
    color: var(--bm-text);
    background: #fff;
    box-shadow: none;
}
.bm-login-oauth-btn:hover, .bm-register-oauth-btn:hover, .bm-verify-btn-secondary:hover, .bm-vp-btn-secondary:hover {
    border-color: #bac9de;
    color: var(--bm-text);
    background: var(--bm-surface-2);
}

.bm-feed-btn, .bm-post-action, .bm-faq-vote, .bm-page-vote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--bm-border-soft);
    border-radius: 10px;
    color: var(--bm-text-soft);
    background: #fff;
    font: inherit;
    font-size: .9rem;
    font-weight: 620;
    line-height: 1.2;
    text-decoration: none;
    transition: color var(--bm-transition), background-color var(--bm-transition), border-color var(--bm-transition), box-shadow var(--bm-transition);
}
.bm-feed-btn:hover, .bm-post-action:hover:not(:disabled), .bm-faq-vote:hover, .bm-page-vote:hover {
    border-color: #cbd7e8;
    color: var(--bm-primary-hover);
    background: #f7faff;
}
.bm-feed-btn:focus-visible, .bm-post-action:focus-visible, .bm-faq-vote:focus-visible, .bm-page-vote:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--bm-primary-soft);
}
.bm-feed-vote.bm-feed-vote-active, .bm-post-action[data-action="like"].bm-post-action-active,
.bm-faq-vote-like.is-active, .bm-page-vote-like.is-active {
    border-color: #b8d0f5;
    color: var(--bm-primary-hover);
    background: var(--bm-primary-soft);
}
.bm-post-action[data-action="dislike"].bm-post-action-active, .bm-faq-vote-dislike.is-active, .bm-page-vote-dislike.is-active {
    border-color: #f0c7cc;
    color: var(--bm-danger-hover);
    background: var(--bm-danger-soft);
}
.bm-header-signin, .bm-header-signup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--bm-border);
    border-radius: 10px;
    color: var(--bm-text);
    background: #fff;
    font-weight: 650;
    text-decoration: none;
    transition: background-color var(--bm-transition), color var(--bm-transition), border-color var(--bm-transition), box-shadow var(--bm-transition);
}
.bm-header-signin:hover { border-color: #c6d3e4; color: var(--bm-primary-hover); background: #f8faff; }
.bm-header-signup { border-color: var(--bm-primary); color: #fff; background: var(--bm-primary); }
.bm-header-signup:hover { border-color: var(--bm-primary-hover); color: #fff; background: var(--bm-primary-hover); }
.bm-header-signin:focus-visible, .bm-header-signup:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--bm-primary-soft); }
.bm-manage-form-footer .btn, #xml-feed-manager form .btn { border: 1px solid var(--bm-primary); border-radius: 10px; color: #fff; background: var(--bm-primary); box-shadow: 0 4px 12px rgba(35, 105, 223, .15); }
.bm-manage-form-footer .btn:hover, #xml-feed-manager form .btn:hover { border-color: var(--bm-primary-hover); color: #fff; background: var(--bm-primary-hover); }
.bm-store-actions .btn-dark { color: #fff; background: var(--bm-primary); border-color: var(--bm-primary); }
.bm-store-actions .btn-dark:hover { background: var(--bm-primary-hover); border-color: var(--bm-primary-hover); }

/* Keep jQuery UI controls visually aligned with Bootstrap components. */
.ui-widget { font-family: inherit; font-size: .95rem; }
.ui-widget-content { border-color: var(--bm-border-soft); color: var(--bm-text); background: #fff; }
.ui-widget-header { border-color: #d7e5fb; color: var(--bm-text); background: #f2f7ff; }
.ui-slider.ui-widget-content { height: 8px; border: 0; border-radius: 999px; background: #e8edf5; }
.ui-slider .ui-slider-range { border-radius: 999px; background: var(--bm-primary); }
.ui-slider .ui-slider-handle { width: 20px; height: 20px; top: -6px; border: 2px solid var(--bm-primary); border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(23, 37, 59, .2); cursor: grab; }
.ui-slider .ui-slider-handle:focus, .ui-slider .ui-slider-handle.ui-state-active { outline: 0; box-shadow: 0 0 0 4px var(--bm-primary-soft); }

@media (prefers-reduced-motion: reduce) {
    :where(.btn, .dropdown-item, .form-control, .form-select, .modal-content) { transition: none; }
}