/* MotionCreate - Dark mode (26/10/2026, CONCEPTION-MODE-SOMBRE.md).
   Active only on html[data-mc-theme="dark"] (set before the page is painted); screen only: printing stays light.
   The colors come from Admin > Settings > Dark mode (--mcd-*); the main color of the site (--primary_color) is kept. */
@media screen {
html[data-mc-theme=dark] {
    --mcd-field2: color-mix(in srgb, var(--mcd-field) 82%, #ffffff 18%);
    --mcd-muted: color-mix(in srgb, var(--mcd-text) 62%, var(--mcd-bg) 38%);
    /* variables of the theme of Marketbob */
    --background_color: var(--mcd-bg);
    --navbar2_background_color: var(--mcd-card);
    --header_background_color: var(--mcd-bg);
    --swiper_background_color: var(--mcd-card);
    --text_color: var(--mcd-text);
    --heading_color: var(--mcd-heading);
    --text_muted: var(--mcd-muted);
    --border_color: var(--mcd-border);
    --secondary_color: color-mix(in srgb, var(--mcd-text) 55%, var(--mcd-bg) 45%);
    --search_bar_background_color: var(--mcd-field);
    --search_bar_text_color: var(--mcd-text);
    --search_bar_placeholder_color: var(--mcd-muted);
    --search_category_menu_background_color: var(--mcd-field2);
    --search_category_menu_text_color: var(--mcd-text);
    --search_suggestions_background_color: var(--mcd-card);
    --search_suggestions_text_color: var(--mcd-text);
    --search_suggestions_hover_color: var(--mcd-field);
    --navbar_search_background_color: var(--mcd-field);
    --navbar_search_text_color: var(--mcd-text);
    --navbar_search_border_color: var(--mcd-border);
    --navbar_search_icon_color: var(--mcd-muted);
    --primary_color: var(--mcd-primary, #8a72f0);
    /* v2: bars of the site and side menu of the member space (colors of the settings) */
    --navbar1_background_color: var(--mcd-topbar);
    --navbar2_background_color: var(--mcd-menubar);
    --footer_background_color: var(--mcd-footer);
    --footer_border_color: color-mix(in srgb, var(--mcd-footer) 80%, var(--mcd-text) 20%);
    --item_preview_navbar_background: var(--mcd-topbar);
    --dashboard_sidebar_header_background_color: var(--mcd-sidebar);
    --dashboard_sidebar_body_background_color: var(--mcd-sidebar);
    --dashboard_sidebar_elements_background_color: color-mix(in srgb, var(--mcd-sidebar) 90%, var(--mcd-text) 10%);
    /* v2: text editor (CKEditor 5) of the member space */
    --ck-color-base-background: var(--mcd-field);
    --ck-color-base-foreground: var(--mcd-card);
    --ck-color-base-border: var(--mcd-border);
    --ck-color-text: var(--mcd-text);
    --ck-color-toolbar-background: var(--mcd-card);
    --ck-color-toolbar-border: var(--mcd-border);
    --ck-color-button-default-hover-background: var(--mcd-field2);
    --ck-color-button-on-background: var(--mcd-field2);
    --ck-color-button-on-hover-background: var(--mcd-field2);
    --ck-color-button-on-color: var(--mcd-heading);
    --ck-color-dropdown-panel-background: var(--mcd-card);
    --ck-color-dropdown-panel-border: var(--mcd-border);
    --ck-color-panel-background: var(--mcd-card);
    --ck-color-panel-border: var(--mcd-border);
    --ck-color-input-background: var(--mcd-field);
    --ck-color-input-border: var(--mcd-border);
    --ck-color-input-text: var(--mcd-text);
    --ck-color-list-background: var(--mcd-card);
    --ck-color-list-button-hover-background: var(--mcd-field);
    --ck-color-labeled-field-label-background: var(--mcd-card);
    --ck-color-split-button-hover-background: var(--mcd-field2);
    /* variables of the MotionCreate pages */
    --bg_white: var(--mcd-card);
    --card_bg: var(--mcd-card);
    --text_muted2: var(--mcd-muted);
    /* Bootstrap 5.3 (data-bs-theme="dark" is set too) */
    --bs-body-bg: var(--mcd-bg);
    --bs-body-color: var(--mcd-text);
    --bs-border-color: var(--mcd-border);
    --bs-secondary-bg: var(--mcd-field);
    --bs-tertiary-bg: var(--mcd-card);
    --bs-emphasis-color: var(--mcd-heading);
    --bs-heading-color: var(--mcd-heading);
    --bs-secondary-color: var(--mcd-muted);
    color-scheme: dark;
}
html[data-mc-theme=dark] body,
html[data-mc-theme=dark] body.bg-white { background-color: var(--mcd-bg) !important; color: var(--mcd-text); }
html[data-mc-theme=dark] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: var(--mcd-heading); }
html[data-mc-theme=dark] :is(.text-dark, .link-dark, .text-black) { color: var(--mcd-text) !important; }
html[data-mc-theme=dark] .text-muted { color: var(--mcd-muted) !important; }
html[data-mc-theme=dark] .bg-white { background-color: var(--mcd-card) !important; }
html[data-mc-theme=dark] :is(.bg-light, .bg-body-tertiary) { background-color: var(--mcd-field) !important; }
html[data-mc-theme=dark] :is(.border, .border-top, .border-bottom, .border-start, .border-end, hr) { border-color: var(--mcd-border) !important; }

/* surfaces of the theme (white in app.css) */
html[data-mc-theme=dark] :is(.card-v, .card-bg, .item, .home-category, .custom-tabs-item, .blog-post, .accordion-custom .accordion-item, .testimonial,
    .drop-down .drop-down-menu, .nav-bar.nav-bar-sm .nav-bar-menu .nav-bar-menu-inner, .noti-lg .noti-item, .dashboard-nav, .dashboard-footer,
    .dashboard-counter, .settings-links .settings-links-inner, .settings-links .settings-link, .cookies, .bootstrap-select .dropdown-menu,
    .dropzone-drag .dropzone-drag-inner, .dropzone .dz-preview, .uploaded-file, .dashboard-tabs .dashboard-tabs-nav-item, .plan, .plan-switcher,
    .table-container .dropdown-btn, .dropdown-menu, .modal-content, .list-group-item, .card, .offcanvas, .accordion-item, .accordion-button,
    .popover, .toast, .page-link, .nav-tabs .nav-link.active, .dashboard-sidebar-footer) {
    background-color: var(--mcd-card) !important; color: var(--mcd-text); border-color: var(--mcd-border) !important;
}
html[data-mc-theme=dark] :is(.form-control, .form-select, .search .search-input input, .nav-search, .bootstrap-tagsinput, .btn.btn-light,
    .btn-soft, .dashboard-btn, .dashboard-btn-bg, .plan-switcher .plan-switcher-item, .input-group-text, .form-control:disabled, .form-control[readonly],
    .social-btn, .btn-social) {
    background-color: var(--mcd-field) !important; color: var(--mcd-text) !important; border-color: var(--mcd-border) !important;
}
html[data-mc-theme=dark] :is(.form-control, .form-select)::placeholder { color: var(--mcd-muted) !important; }
html[data-mc-theme=dark] .form-check-input:not(:checked) { background-color: var(--mcd-field); border-color: color-mix(in srgb, var(--mcd-border) 55%, var(--mcd-text) 45%); }
html[data-mc-theme=dark] :is(.user-menu .user-name, .user-menu .drop-down-btn, .user-menu .drop-down-btn i) { color: var(--mcd-text); }
html[data-mc-theme=dark] .accordion-button:not(.collapsed) { color: var(--mcd-heading); box-shadow: none; }
html[data-mc-theme=dark] .accordion-button::after { filter: invert(1) brightness(1.6); }
html[data-mc-theme=dark] :is(.dropdown-item, .drop-down .drop-down-item) { color: var(--mcd-text); }
html[data-mc-theme=dark] :is(.dropdown-item:hover, .dropdown-item:focus) { background-color: var(--mcd-field); color: var(--mcd-heading); }
/* v2: the selected / hovered states of the theme keep the main color (tabs of the member space, settings, plans, pages,
   menus) - the dark surfaces above must not hide them */
html[data-mc-theme=dark] :is(.dashboard-tabs .dashboard-tabs-nav-item.current, .dashboard-tabs .dashboard-tabs-nav-item:hover, .settings-links .settings-link.active,
    .plan-switcher .plan-switcher-item.active, .page-item.active .page-link, .page-item .page-link:hover, .drop-down .drop-down-menu .drop-down-item.active,
    .drop-down .drop-down-menu .drop-down-item:hover, .profile-dropdown .dropdown-menu .dropdown-item.active) {
    background-color: var(--primary_color) !important; border-color: var(--primary_color) !important; color: #fff !important;
}
html[data-mc-theme=dark] :is(.table, .table > :not(caption) > * > *) { --bs-table-bg: var(--mcd-card); --bs-table-color: var(--mcd-text); border-color: var(--mcd-border); color: var(--mcd-text); }
html[data-mc-theme=dark] :is(.table.table-striped thead th, .table.table-striped tbody td, .invoice-table td) { background-color: var(--mcd-card) !important; color: var(--mcd-text); }
html[data-mc-theme=dark] .table.table-striped tr:nth-child(odd) td { background-color: var(--mcd-field) !important; }
html[data-mc-theme=dark] .changelogs pre { background: var(--mcd-bg); color: var(--mcd-text); }
html[data-mc-theme=dark] :is(.btn-close) { filter: invert(1) grayscale(100%) brightness(200%); }
html[data-mc-theme=dark] .btn-outline-dark { color: var(--mcd-text); border-color: var(--mcd-border); }
html[data-mc-theme=dark] .btn-outline-secondary { color: var(--mcd-text); border-color: var(--mcd-border); }
html[data-mc-theme=dark] :is(.alert-light) { background: var(--mcd-field); color: var(--mcd-text); border-color: var(--mcd-border); }
html[data-mc-theme=dark] .pagination .page-item.active .page-link { background-color: var(--primary_color) !important; color: #fff; }
html[data-mc-theme=dark] ::-webkit-scrollbar-track { background: var(--mcd-bg); }

/* logos: the logo made for dark backgrounds where the light one is used (author / member space) */
.mc-logo-for-dark { display: none !important; }
html[data-mc-theme=dark] .mc-logo-for-light { display: none !important; }
html[data-mc-theme=dark] .mc-logo-for-dark { display: inline-block !important; }

/* v2: text editor: the content area (white in CKEditor) and its texts */
html[data-mc-theme=dark] :is(.ck.ck-editor__main > .ck-editor__editable, .ck.ck-editor__editable_inline, .ck-content) { background: var(--mcd-field) !important; color: var(--mcd-text); }
html[data-mc-theme=dark] .ck.ck-editor__main > .ck-editor__editable.ck-focused { border-color: var(--primary_color) !important; }
html[data-mc-theme=dark] .ck.ck-toolbar .ck-icon, html[data-mc-theme=dark] .ck.ck-button { color: var(--mcd-text); }
html[data-mc-theme=dark] .ck-content :is(h1, h2, h3, h4, h5, h6, strong, b) { color: var(--mcd-heading); }
/* v2: menus with dark texts on the bars (currency, account) */
html[data-mc-theme=dark] :is(.dashboard-nav, .nav-bar) .drop-down .drop-down-btn { color: var(--mcd-text); }
/* v2: a pressed button keeps no light background */
html[data-mc-theme=dark] .mc-theme-btn:is(:focus, :active, :focus-visible) { background-color: transparent !important; color: inherit; }

/* sun / moon button */
.mc-theme-btn .mc-theme-sun { display: none; }
html[data-mc-theme=dark] .mc-theme-btn .mc-theme-sun { display: inline-block; }
html[data-mc-theme=dark] .mc-theme-btn .mc-theme-moon { display: none; }

/* ---------- MotionCreate pages ---------- */
/* Top 10 and Trending: the colors of their settings are replaced by the dark palette */
/* .mc-pop: window of the Top 10 shown on mouse-over (added at the end of the page, it copies the colors of the section) */
html[data-mc-theme=dark] :is(.mc-top, .mc-tr, .mc-pop) { --mc-bg: var(--mcd-bg) !important; --mc-text: var(--mcd-text) !important; --mc-number: color-mix(in srgb, var(--mcd-border) 70%, var(--mcd-text) 30%) !important; }
html[data-mc-theme=dark] :is(.mc-top-arrow, .mc-top-periods, .mc-top-cat, .mc-top-card, .mc-top-side span, .mc-pop, .mc-pop-round, .mc-tr-periods,
    .mc-tr-cat, .mc-tr-card, .mc-cartbtn) { background: var(--mcd-card) !important; }
html[data-mc-theme=dark] .mc-cartbtn:hover { background: var(--mc-accent, var(--primary_color)) !important; color: #fff; }
html[data-mc-theme=dark] .mc-top-bd { background: var(--mcd-field2); color: var(--mcd-text); }
html[data-mc-theme=dark] .mc-tr { --mc-pill: color-mix(in srgb, var(--mc-accent) 22%, var(--mcd-card)) !important; }
/* v2 (26/10/2026): texts in the accent color of the Top 10 / Trending (dark green and blue by default): lighter on dark */
html[data-mc-theme=dark] :is(.mc-top, .mc-tr, .mc-pop) { --mcd-accent-text: color-mix(in srgb, var(--mc-accent) 55%, #fff 45%); }
html[data-mc-theme=dark] :is(.mc-tr .mc-accent, .mc-tr-icon, .mc-tr-growth, .mc-tr-name:hover, .mc-tr-cat-name :is(.mc-by-cat, .mc-by-author), .mc-top-catname :is(.mc-by-cat, .mc-by-author), .mc-tr-cat.active, .mc-top .mc-accent,
    .mc-top-all, .mc-top-all:hover, .mc-top-icon, .mc-top-cat.active) { color: var(--mcd-accent-text) !important; }
html[data-mc-theme=dark] .mc-top-icon { background: color-mix(in srgb, var(--mc-accent) 22%, var(--mcd-card)); }
html[data-mc-theme=dark] .mc-top-move.up { background: #123b2a; color: #5ee0a5; }
html[data-mc-theme=dark] .mc-top-move.down { background: #43191c; color: #ff8a8f; }
html[data-mc-theme=dark] .mc-top-move.same { background: var(--mcd-field2); color: var(--mcd-muted); }
html[data-mc-theme=dark] .mc-pack-strip a { background: var(--mcd-field); }
html[data-mc-theme=dark] :is(.mc-top-img, .mc-tr-img, .mc-pop .mc-pop-img) { background-color: var(--mcd-field); }

/* packs */
html[data-mc-theme=dark] :is(.mc-pk-tabs, .mc-pk-buy, .mc-pk-box, .mc-pk-faq-item, .mc-pk-side .mc-pk-fav, .mc-pk-side .mc-pk-colbtn, .mc-pk-card,
    .mc-pk-row, .mc-pk-rev, .mc-pk-com, .mc-pk-form, .mc-co-bundle, .mc-pack-card) { background-color: var(--mcd-card) !important; border-color: var(--mcd-border) !important; color: var(--mcd-text); }
html[data-mc-theme=dark] :is(.mc-pk-highlights, .mc-pk-hl) { background-color: var(--mcd-field) !important; }
/* v2 (26/10/2026): favorite and collection buttons of a pack: hover and "in a collection" kept in the main color (the dark
   card above hid them) */
html[data-mc-theme=dark] .mc-pk-side :is(.mc-pk-fav, .mc-pk-colbtn):hover { color: var(--primary_color); border-color: var(--primary_color) !important; }
html[data-mc-theme=dark] .mc-pk-side .mc-pk-colbtn.is-in { color: var(--primary_color); }
html[data-mc-theme=dark] .mc-pk-side .mc-pk-fav.on { color: #fb7185; }
/* v2: main buttons (e.g. "Buy the pack"): a hover that can be seen on dark (the theme only makes them 10 % transparent) */
html[data-mc-theme=dark] .btn.btn-primary:is(:hover, :focus-visible) { background-color: color-mix(in srgb, var(--primary_color) 80%, #fff 20%); border-color: color-mix(in srgb, var(--primary_color) 80%, #fff 20%); opacity: 1; }

/* collections */
html[data-mc-theme=dark] :is(.mc-col-card, .mc-colp-banner, .mc-cole-row, .mc-cols-tabs a, .mc-col-cover) { background-color: var(--mcd-card) !important; border-color: var(--mcd-border) !important; color: var(--mcd-text); }
html[data-mc-theme=dark] .mc-cols-tabs a.active { background-color: var(--primary_color) !important; color: #fff; }

/* item cards (chips of Unlimited, badges) */
html[data-mc-theme=dark] .mc-chip { background: var(--mcd-field2); color: var(--mcd-text); }

/* Unlimited page (its light surfaces and dark texts; the colored hero, featured plan and buttons are kept) */
html[data-mc-theme=dark] .mcu { --mcu-ink: var(--mcd-heading); --mcu-soft: var(--mcd-muted); }
html[data-mc-theme=dark] :is(.mcu-panel, .mcu-benefit-icon, .mcu-step-num, .mcu-contact-icon) { background-color: var(--mcd-card) !important; border-color: var(--mcd-border) !important; }
html[data-mc-theme=dark] .mcu :is(.mcu-plan, .mcu-vs-card, .mcu-chip, .mcu-faq-list .accordion-item, .mcu-price) { border-color: var(--mcd-border) !important; }
html[data-mc-theme=dark] .mcu-plan { background: var(--mcd-card) !important; }
html[data-mc-theme=dark] .mcu-plan-desc { color: var(--mcd-text) !important; }
html[data-mc-theme=dark] .mcu-price-sub { color: var(--mcd-text) !important; }
html[data-mc-theme=dark] .mcu-feats li { color: var(--mcd-text) !important; }
html[data-mc-theme=dark] .mcu-tile { background: var(--mcd-field) !important; }
html[data-mc-theme=dark] .mcu-chip { background: var(--mcd-card) !important; }
html[data-mc-theme=dark] .mcu-vs-card { background: var(--mcd-card) !important; }
html[data-mc-theme=dark] .mcu-vs-top > i { background: var(--mcd-field) !important; }
html[data-mc-theme=dark] .mcu-vs-value { color: var(--mcd-text) !important; }
html[data-mc-theme=dark] .mcu-faq-list .accordion-item { background: var(--mcd-card) !important; }
html[data-mc-theme=dark] .mcu-faq-list .accordion-body { color: var(--mcd-text) !important; background: var(--mcd-card) !important; } /* v2: the answer opened was on a light background */
}

/* v2: switch with three icons (light / same as the device / dark); the current choice is filled */
.mc-theme-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 50rem; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); line-height: 1; }
.mc-theme-switch button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .72); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; padding: 0; cursor: pointer; transition: background .15s, color .15s; }
.mc-theme-switch button:hover { color: #fff; }
html:not([data-mc-choice]) .mc-theme-switch [data-mc-mode=light],
html[data-mc-choice=light] .mc-theme-switch [data-mc-mode=light],
html[data-mc-choice=system] .mc-theme-switch [data-mc-mode=system],
html[data-mc-choice=dark] .mc-theme-switch [data-mc-mode=dark] { background: rgba(255, 255, 255, .2); color: #fff; }
/* on a light bar (member space in light mode) */
.mc-theme-switch.on-light { border-color: var(--border_color, #e2e2ea); background: #f4f4f7; }
.mc-theme-switch.on-light button { color: #6b6b7b; }
.mc-theme-switch.on-light button:hover { color: #1f1f2b; }
html[data-mc-choice=light] .mc-theme-switch.on-light [data-mc-mode=light],
html[data-mc-choice=system] .mc-theme-switch.on-light [data-mc-mode=system],
html[data-mc-choice=dark] .mc-theme-switch.on-light [data-mc-mode=dark] { background: #fff; color: #1f1f2b; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
html[data-mc-theme=dark] .mc-theme-switch.on-light { border-color: var(--mcd-border); background: var(--mcd-field); }
html[data-mc-theme=dark] .mc-theme-switch.on-light button { color: var(--mcd-muted); background: transparent; box-shadow: none; }
html[data-mc-theme=dark] .mc-theme-switch.on-light button:hover { color: var(--mcd-heading); }
html[data-mc-theme=dark][data-mc-choice=light] .mc-theme-switch.on-light [data-mc-mode=light],
html[data-mc-theme=dark][data-mc-choice=system] .mc-theme-switch.on-light [data-mc-mode=system],
html[data-mc-theme=dark][data-mc-choice=dark] .mc-theme-switch.on-light [data-mc-mode=dark] { background: var(--mcd-card); color: var(--mcd-heading); }

/* v2 (26/10/2026): header of the profile of an author: its picture (Admin > Appearance) is light; a dark veil over it keeps
   the name, the sales and the texts readable (painted between the picture and the texts, the layout does not change) */
html[data-mc-theme=dark] .header.header-profile[style*="background-image"] { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--mcd-bg) 80%, transparent); }
/* v2 (27/10/2026): bar of the categories on a computer: the links have no background of their own, only the color of the
   bar (the dark surface is for the menu of the phones, under 1200 px, as the white of the theme) */
@media (min-width: 1200px) {
    html[data-mc-theme=dark] .nav-bar.nav-bar-sm .nav-bar-menu .nav-bar-menu-inner { background-color: transparent !important; }
}
/* v2: the frame of the button of the member space stays visible on the dark bar */
html[data-mc-theme=dark] .mc-theme-btn.btn-outline-secondary { border-color: color-mix(in srgb, var(--mcd-text) 45%, var(--mcd-bg) 55%); color: var(--mcd-heading); }

/* v2 (26/10/2026): phones: the buttons of the bar (Unlimited, light / dark, cart, account, menu) fit the width of the
   screen, without empty space on the right: smaller gaps, square buttons, the logo smaller if needed (proportions kept) */
@media (max-width: 575.98px) {
    .nav-bar .nav-bar-actions > .ms-3 { margin-left: .5rem !important; }
    .nav-bar .nav-bar-actions .btn.btn-padding { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
    .nav-bar .nav-bar-container .logo { flex: 0 1 auto; min-width: 0; }
    .nav-bar .nav-bar-container .logo img { max-width: 100%; object-fit: contain; object-position: left center; }
}