@import url('https://fonts.googleapis.com/css2?family=Momo+Trust+Display&display=swap');

/* =====================================================================
   sellersync.css - our own overrides, layered on top of the Ynex
   template. Keep every SellerSync-specific rule here rather than in
   styles.css, which is vendor output and gets replaced wholesale on a
   template upgrade.

   Loaded after styles.css on every page.
   ===================================================================== */

:root {
    /* Sampled from the dominant pixel of assets/images/logo/logo.png */
    --ss-navy: #272368;
    /* The theme's real primary - what .text-primary and the Walmart pill
       render. Note --bs-primary is still stock Bootstrap #0d6efd here and is
       NOT the colour actually used, so track --primary-color instead. */
    --ss-heading: var(--primary-color, #308BD3);
    /* Shadow tint. A solid light blue, not the theme's --primary01/02/03,
       which are rgba() and would let the card behind bleed through. */
    --ss-heading-shadow: #8FC4E8;
    --ss-display: 'Momo Trust Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------------
   Headings
   Momo Trust Display ships a single weight (400). Browsers synthesise
   anything heavier, so hierarchy comes from size and colour rather than
   from weight.

   Colour is deliberately NOT !important: Bootstrap's .text-* utilities
   are, so a heading that carries text-white / text-muted / text-warning
   keeps the colour it was given (the marketplace group titles in the
   sellers modal rely on this).
   --------------------------------------------------------------------- */
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6,
.main-content .page-title,
.modal-title,
.seller-group-title,
/* every card heading, wherever the card lives - card-title is the template's
   own class, and some cards use a bare h* in the header instead */
.card-title,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    font-family: var(--ss-display);
}

/* Colour + a hard-offset shadow in the logo navy for a slight 3D lift.
   No blur radius: the shadow is a solid displaced copy, not a glow. */
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6,
.main-content .page-title,
.modal-title,
.card-title,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    color: var(--ss-heading);
    /* 1px, not 2px: the display face already has thick strokes, so a larger
       offset closes up the letterforms at these sizes. */
    text-shadow: 1px 1px 0 var(--ss-heading-shadow);
}

/* Page headers at 22px. The markup carries fs-18, which is an !important
   utility, so this needs !important to win. */
.main-content .page-title {
    font-size: 22px !important;
}

/* Card headings a step down from the page title */
.card-title,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    font-size: 20px !important;
}

/* The emboss is for page and modal titles only - headings inside a card
   sit on a small surface where it reads as blur rather than depth. */
.card .card-title,
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6 {
    text-shadow: none;
}

/* ---------------------------------------------------------------------
   Page header
   .page-header-breadcrumb is a flex container with gap-2, but its two
   children are both col-6 (50% each). 50% + 50% + gap overflows the
   line, so the button block wrapped underneath instead of sitting
   flush right at the heading's height. Let the title block take the
   slack and push the buttons to the end.
   --------------------------------------------------------------------- */
.page-header-breadcrumb > [class*="col-"] {
    width: auto;
    max-width: none;
    padding-inline: 0;
}

.page-header-breadcrumb > [class*="col-"]:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.page-header-breadcrumb > .text-end {
    flex: 0 0 auto;
    margin-inline-start: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
}

/* ---------------------------------------------------------------------
   Sidebar icons
   styles.css sets `fill: var(--menu-prime-color)` on .side-menu__icon.
   A CSS fill declaration beats the inline fill="none" presentation
   attribute, so every outline SVG was being flooded with colour -
   icons built from closed paths (document, person, building, key) came
   out solid. Restore fill:none for the outline icons only; the ones
   authored as solid declare fill="currentColor" and are left alone.
   --------------------------------------------------------------------- */
.app-sidebar svg.side-menu__icon[stroke="currentColor"],
.app-sidebar .side-menu__item:hover svg.side-menu__icon[stroke="currentColor"],
.app-sidebar .side-menu__item.active svg.side-menu__icon[stroke="currentColor"] {
    fill: none;
}

/* Geizhals and Conditions were authored as solid glyphs, so they are webfont
   icons instead - size them to match the 18px SVGs around them. */
.app-sidebar .side-menu__item i.side-menu__icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------------------------------------------------------------------
   Animated WebGL page background (assets/js/sellersync-bg.js).
   The canvas paints over the body's grey, and all page chrome is lifted
   above it. Cards keep their solid fill, so the field only shows in the
   gutters where the flat grey used to be.
   --------------------------------------------------------------------- */
/* Negative z-index paints the canvas above the body's background but below
   all in-flow content. Do NOT lift .page with position/z-index instead: that
   creates a stacking context that traps any modal markup nested inside it
   below Bootstrap's body-level backdrop (z-index 1050), making the modal
   unclickable. */
#ss-bg {
    z-index: -1;
}

.main-content,
.main-content > .container-fluid {
    background: transparent !important;
}

/* ---------------------------------------------------------------------
   Seller directories - compact tables.
   These grids carry long shop names, emails and addresses, which pushed
   the table far wider than the viewport. Cap the columns and let long
   values truncate rather than stretch the row.
   --------------------------------------------------------------------- */
.seller-compact {
    font-size: 12px;
    width: 100%;
    table-layout: fixed;
}

.seller-compact th,
.seller-compact td {
    padding: 0.35rem 0.5rem;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seller-compact td .text-truncate {
    max-width: 100%;
}

/* Product column only needs to fit a 28px avatar */
.seller-compact th.text-center,
.seller-compact td.text-center {
    width: 74px;
}

.seller-compact th.text-end,
.seller-compact td.text-end {
    width: 92px;
}

/* The unified directory carries a labelled "Market to Seller" button */
#allSellers th.text-end,
#allSellers td.text-end {
    width: 170px;
}

.seller-compact .avatar-sm {
    width: 28px;
    height: 28px;
}

.seller-compact .avatar-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------------------
   Pink button/badge variants for the European Pricing tab (ported from
   gosynchronicity, whose theme build includes them; this one doesn't).
   --------------------------------------------------------------------- */
.btn-pink-light {
    background-color: #fde7f3;
    color: #e685b5;
}

.btn-pink-light:hover,
.btn-pink-light.active,
.nav-pills .nav-link.btn-pink-light.active {
    background-color: #e685b5;
    color: #fff;
}

.bg-pink-subtle {
    background-color: #fde7f3 !important;
}

.border-pink-subtle {
    border-color: #f6bcd9 !important;
}

/* ---------------------------------------------------------------------
   Row actions - 3 across, wrapping to a second row, so the column stays
   narrow instead of stretching the table.
   --------------------------------------------------------------------- */
.action-grid {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 0.35rem;
    justify-content: flex-end;
}

.action-grid > .btn-group {
    display: inline-flex;
}

/* SweetAlert2 headers match the site's heading treatment (same display face,
   heading blue, hard-offset shadow as .modal-title), with extra breathing
   room between the title and the alert body - sitewide. */
.swal2-title {
    font-family: var(--ss-display);
    color: var(--ss-heading);
    text-shadow: 1px 1px 0 var(--ss-heading-shadow);
    margin-bottom: 0.85rem;
    /* capitalize every word, matching the sitewide button treatment */
    text-transform: capitalize;
}

/* Buttons: capitalize every word, sitewide */
.btn {
    text-transform: capitalize;
}

/* Sellers modal: fixed column widths so the three marketplace tables align.
   Amazon and Geizhals share a 6-column layout; Walmart has no middle
   (marketplace/location) column, so its first column absorbs that width and
   Price/Contact/Owner/Action line up across all three tables. */
#sellersModal .table { table-layout: fixed; width: 100%; }
#sellersModal .table td { overflow: hidden; text-overflow: ellipsis; }
#amazonBlock th:nth-child(1), #geizhalsBlock th:nth-child(1) { width: 25%; }
#amazonBlock th:nth-child(2), #geizhalsBlock th:nth-child(2) { width: 15%; }
#amazonBlock th:nth-child(3), #geizhalsBlock th:nth-child(3) { width: 12%; }
#amazonBlock th:nth-child(4), #geizhalsBlock th:nth-child(4) { width: 23%; }
#amazonBlock th:nth-child(5), #geizhalsBlock th:nth-child(5) { width: 12%; }
#amazonBlock th:nth-child(6), #geizhalsBlock th:nth-child(6) { width: 13%; }
#walmartBlock th:nth-child(1) { width: 40%; }
#walmartBlock th:nth-child(2) { width: 12%; }
#walmartBlock th:nth-child(3) { width: 23%; }
#walmartBlock th:nth-child(4) { width: 12%; }
#walmartBlock th:nth-child(5) { width: 13%; }


/* Action grid: hairline divider between the full-width View Product button
   and the icon buttons beneath it */
.action-grid-divider {
    grid-column: 1 / -1;
    border-top: 1px solid #d8e4ee;
    height: 0;
    margin: 1px 0 2px;
}

/* DataTables stamps its own alignment on header cells, so the utility class
   needs to win explicitly */
table.dataTable thead th.text-center,
.table thead th.text-center {
    text-align: center !important;
}

/* Card headers: mild top-to-bottom blue gradient with a subtle binary-rain
   overlay. The rain is a tiled SVG of 0/1 digits in the heading blue drifting
   downward on two parallax layers; opacity keeps it well behind the title. */
.main-content .card > .card-header {
    position: relative;
    background: linear-gradient(180deg, #f5faff 0%, #ddedfa 100%);
    overflow: hidden;
}
.main-content .card > .card-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='160'%3E%3Cstyle%3Etext{font-family:Consolas,monospace;font-size:10px;fill:%23308bd3}%3C/style%3E%3Ctext%20x='6'%20y='12'%3E1%3C/text%3E%3Ctext%20x='6'%20y='38'%3E1%3C/text%3E%3Ctext%20x='6'%20y='76'%3E0%3C/text%3E%3Ctext%20x='6'%20y='102'%3E0%3C/text%3E%3Ctext%20x='6'%20y='134'%3E0%3C/text%3E%3Ctext%20x='26'%20y='49'%3E0%3C/text%3E%3Ctext%20x='26'%20y='75'%3E0%3C/text%3E%3Ctext%20x='26'%20y='107'%3E1%3C/text%3E%3Ctext%20x='26'%20y='133'%3E0%3C/text%3E%3Ctext%20x='46'%20y='46'%3E1%3C/text%3E%3Ctext%20x='46'%20y='72'%3E0%3C/text%3E%3Ctext%20x='46'%20y='98'%3E0%3C/text%3E%3Ctext%20x='46'%20y='136'%3E1%3C/text%3E%3Ctext%20x='66'%20y='43'%3E0%3C/text%3E%3Ctext%20x='66'%20y='69'%3E0%3C/text%3E%3Ctext%20x='66'%20y='101'%3E1%3C/text%3E%3Ctext%20x='66'%20y='127'%3E0%3C/text%3E%3Ctext%20x='86'%20y='40'%3E1%3C/text%3E%3Ctext%20x='86'%20y='78'%3E0%3C/text%3E%3Ctext%20x='86'%20y='104'%3E0%3C/text%3E%3Ctext%20x='86'%20y='136'%3E0%3C/text%3E%3Ctext%20x='106'%20y='37'%3E0%3C/text%3E%3Ctext%20x='106'%20y='75'%3E0%3C/text%3E%3Ctext%20x='106'%20y='113'%3E0%3C/text%3E%3Ctext%20x='106'%20y='145'%3E1%3C/text%3E%3Ctext%20x='126'%20y='34'%3E1%3C/text%3E%3Ctext%20x='126'%20y='72'%3E1%3C/text%3E%3Ctext%20x='126'%20y='104'%3E1%3C/text%3E%3Ctext%20x='126'%20y='130'%3E0%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='160'%3E%3Cstyle%3Etext{font-family:Consolas,monospace;font-size:10px;fill:%23308bd3}%3C/style%3E%3Ctext%20x='6'%20y='12'%3E1%3C/text%3E%3Ctext%20x='6'%20y='38'%3E1%3C/text%3E%3Ctext%20x='6'%20y='76'%3E0%3C/text%3E%3Ctext%20x='6'%20y='102'%3E0%3C/text%3E%3Ctext%20x='6'%20y='134'%3E0%3C/text%3E%3Ctext%20x='26'%20y='49'%3E0%3C/text%3E%3Ctext%20x='26'%20y='75'%3E0%3C/text%3E%3Ctext%20x='26'%20y='107'%3E1%3C/text%3E%3Ctext%20x='26'%20y='133'%3E0%3C/text%3E%3Ctext%20x='46'%20y='46'%3E1%3C/text%3E%3Ctext%20x='46'%20y='72'%3E0%3C/text%3E%3Ctext%20x='46'%20y='98'%3E0%3C/text%3E%3Ctext%20x='46'%20y='136'%3E1%3C/text%3E%3Ctext%20x='66'%20y='43'%3E0%3C/text%3E%3Ctext%20x='66'%20y='69'%3E0%3C/text%3E%3Ctext%20x='66'%20y='101'%3E1%3C/text%3E%3Ctext%20x='66'%20y='127'%3E0%3C/text%3E%3Ctext%20x='86'%20y='40'%3E1%3C/text%3E%3Ctext%20x='86'%20y='78'%3E0%3C/text%3E%3Ctext%20x='86'%20y='104'%3E0%3C/text%3E%3Ctext%20x='86'%20y='136'%3E0%3C/text%3E%3Ctext%20x='106'%20y='37'%3E0%3C/text%3E%3Ctext%20x='106'%20y='75'%3E0%3C/text%3E%3Ctext%20x='106'%20y='113'%3E0%3C/text%3E%3Ctext%20x='106'%20y='145'%3E1%3C/text%3E%3Ctext%20x='126'%20y='34'%3E1%3C/text%3E%3Ctext%20x='126'%20y='72'%3E1%3C/text%3E%3Ctext%20x='126'%20y='104'%3E1%3C/text%3E%3Ctext%20x='126'%20y='130'%3E0%3C/text%3E%3C/svg%3E");
    background-size: 140px 160px, 210px 240px;
    background-repeat: repeat;
    opacity: 0.14;
    animation: ss-binary-rain 26s linear infinite;
}
.main-content .card > .card-header > * {
    position: relative;
    z-index: 1;
}
@keyframes ss-binary-rain {
    from { background-position: 0 0, 70px 0; }
    to   { background-position: 0 160px, 70px 240px; }
}
@media (prefers-reduced-motion: reduce) {
    .main-content .card > .card-header::before { animation: none; }
}

/* Card headers close with a solid rule in the heading blue. The theme sets
   border-block-end on .card-header, so assert the logical property too. */
.main-content .card > .card-header {
    border-bottom: 1px solid var(--ss-heading) !important;
    border-block-end: 1px solid var(--ss-heading) !important;
}

/* Action-button popovers: header in the same light blue as the onboarding
   modal header (bg-primary-transparent), title in the heading blue */
.ss-popover .popover-header {
    background-color: rgba(var(--primary-rgb, 48, 139, 211), 0.15);
    color: var(--ss-heading);
    border-bottom: 1px solid rgba(var(--primary-rgb, 48, 139, 211), 0.35);
}


/* View Product tab-pane headers (.ss-pane-header) get the full card-header
   treatment: gradient, binary rain, blue rule, uniform padding. They are not
   direct children of .card, so the .card > .card-header rules skip them. */
.main-content .ss-pane-header {
    position: relative;
    background: linear-gradient(180deg, #f5faff 0%, #ddedfa 100%);
    overflow: hidden;
    border-bottom: 1px solid var(--ss-heading) !important;
    border-block-end: 1px solid var(--ss-heading) !important;
    /* escape the card-body's 1rem padding so the header spans edge to edge */
    margin: -1rem -1rem 1rem -1rem;
    border-top-left-radius: calc(var(--bs-card-border-radius, 0.5rem) - 1px);
    border-top-right-radius: calc(var(--bs-card-border-radius, 0.5rem) - 1px);
}
.main-content .ss-pane-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='160'%3E%3Cstyle%3Etext{font-family:Consolas,monospace;font-size:10px;fill:%23308bd3}%3C/style%3E%3Ctext%20x='6'%20y='12'%3E1%3C/text%3E%3Ctext%20x='6'%20y='38'%3E1%3C/text%3E%3Ctext%20x='6'%20y='76'%3E0%3C/text%3E%3Ctext%20x='6'%20y='102'%3E0%3C/text%3E%3Ctext%20x='6'%20y='134'%3E0%3C/text%3E%3Ctext%20x='26'%20y='49'%3E0%3C/text%3E%3Ctext%20x='26'%20y='75'%3E0%3C/text%3E%3Ctext%20x='26'%20y='107'%3E1%3C/text%3E%3Ctext%20x='26'%20y='133'%3E0%3C/text%3E%3Ctext%20x='46'%20y='46'%3E1%3C/text%3E%3Ctext%20x='46'%20y='72'%3E0%3C/text%3E%3Ctext%20x='46'%20y='98'%3E0%3C/text%3E%3Ctext%20x='46'%20y='136'%3E1%3C/text%3E%3Ctext%20x='66'%20y='43'%3E0%3C/text%3E%3Ctext%20x='66'%20y='69'%3E0%3C/text%3E%3Ctext%20x='66'%20y='101'%3E1%3C/text%3E%3Ctext%20x='66'%20y='127'%3E0%3C/text%3E%3Ctext%20x='86'%20y='40'%3E1%3C/text%3E%3Ctext%20x='86'%20y='78'%3E0%3C/text%3E%3Ctext%20x='86'%20y='104'%3E0%3C/text%3E%3Ctext%20x='86'%20y='136'%3E0%3C/text%3E%3Ctext%20x='106'%20y='37'%3E0%3C/text%3E%3Ctext%20x='106'%20y='75'%3E0%3C/text%3E%3Ctext%20x='106'%20y='113'%3E0%3C/text%3E%3Ctext%20x='106'%20y='145'%3E1%3C/text%3E%3Ctext%20x='126'%20y='34'%3E1%3C/text%3E%3Ctext%20x='126'%20y='72'%3E1%3C/text%3E%3Ctext%20x='126'%20y='104'%3E1%3C/text%3E%3Ctext%20x='126'%20y='130'%3E0%3C/text%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='160'%3E%3Cstyle%3Etext{font-family:Consolas,monospace;font-size:10px;fill:%23308bd3}%3C/style%3E%3Ctext%20x='6'%20y='12'%3E1%3C/text%3E%3Ctext%20x='6'%20y='38'%3E1%3C/text%3E%3Ctext%20x='6'%20y='76'%3E0%3C/text%3E%3Ctext%20x='6'%20y='102'%3E0%3C/text%3E%3Ctext%20x='6'%20y='134'%3E0%3C/text%3E%3Ctext%20x='26'%20y='49'%3E0%3C/text%3E%3Ctext%20x='26'%20y='75'%3E0%3C/text%3E%3Ctext%20x='26'%20y='107'%3E1%3C/text%3E%3Ctext%20x='26'%20y='133'%3E0%3C/text%3E%3Ctext%20x='46'%20y='46'%3E1%3C/text%3E%3Ctext%20x='46'%20y='72'%3E0%3C/text%3E%3Ctext%20x='46'%20y='98'%3E0%3C/text%3E%3Ctext%20x='46'%20y='136'%3E1%3C/text%3E%3Ctext%20x='66'%20y='43'%3E0%3C/text%3E%3Ctext%20x='66'%20y='69'%3E0%3C/text%3E%3Ctext%20x='66'%20y='101'%3E1%3C/text%3E%3Ctext%20x='66'%20y='127'%3E0%3C/text%3E%3Ctext%20x='86'%20y='40'%3E1%3C/text%3E%3Ctext%20x='86'%20y='78'%3E0%3C/text%3E%3Ctext%20x='86'%20y='104'%3E0%3C/text%3E%3Ctext%20x='86'%20y='136'%3E0%3C/text%3E%3Ctext%20x='106'%20y='37'%3E0%3C/text%3E%3Ctext%20x='106'%20y='75'%3E0%3C/text%3E%3Ctext%20x='106'%20y='113'%3E0%3C/text%3E%3Ctext%20x='106'%20y='145'%3E1%3C/text%3E%3Ctext%20x='126'%20y='34'%3E1%3C/text%3E%3Ctext%20x='126'%20y='72'%3E1%3C/text%3E%3Ctext%20x='126'%20y='104'%3E1%3C/text%3E%3Ctext%20x='126'%20y='130'%3E0%3C/text%3E%3C/svg%3E");
    background-size: 140px 160px, 210px 240px;
    background-repeat: repeat;
    opacity: 0.14;
    animation: ss-binary-rain 26s linear infinite;
}
.main-content .ss-pane-header > * {
    position: relative;
    z-index: 1;
}
.main-content .ss-pane-header .card-title {
    margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
    .main-content .ss-pane-header::before { animation: none; }
}

/* All table column headers match the Sellers Modal treatment:
   uppercase, small, semi-bold, slightly tracked */
.main-content .table thead th {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Filter panel pills: unselected (outline) state sits on solid white,
   not the panel's tinted background. On hover Bootstrap's outline buttons
   fill and flip the text to white - which vanishes against our forced white
   fill - so pin the idle text/border colours through hover too. */
#filtersPanel .ss-filter[class*="btn-outline-"],
#filtersPanel .ss-filter[class*="btn-outline-"]:hover,
#filtersPanel .ss-filter[class*="btn-outline-"]:focus {
    background-color: #fff !important;
    color: var(--bs-btn-color) !important;
    border-color: var(--bs-btn-border-color) !important;
}

/* Slightly smaller type, slightly roomier padding on every filter pill */
#filtersPanel .ss-filter {
    font-size: calc(0.8rem - 1pt);
    padding: calc(0.26rem + 1px) calc(0.5rem + 1px);
}

/* Brand / Category rows (source-app scheme: Brand = success, Category =
   info): pin the idle outline/text to the TEMPLATE colour so it is exactly
   the colour the selected state fills solid with - the generic rule above
   would otherwise resolve to stock Bootstrap's darker defaults */
#filtersPanel .ss-filter[data-dim="brand"].btn-outline-success,
#filtersPanel .ss-filter[data-dim="brand"].btn-outline-success:hover,
#filtersPanel .ss-filter[data-dim="brand"].btn-outline-success:focus {
    color: rgb(var(--success-rgb)) !important;
    border-color: rgb(var(--success-rgb)) !important;
}
#filtersPanel .ss-filter[data-dim="category"].btn-outline-info,
#filtersPanel .ss-filter[data-dim="category"].btn-outline-info:hover,
#filtersPanel .ss-filter[data-dim="category"].btn-outline-info:focus {
    color: rgb(var(--info-rgb)) !important;
    border-color: rgb(var(--info-rgb)) !important;
}

/* Search veil: white overlay across the products card with the logo device
   spinning at its centre while a database search round-trips */
.ss-search-veil {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}
.ss-veil-spinner {
    width: 84px;
    height: 84px;
    animation: ss-veil-spin 1.6s linear infinite;
}
@keyframes ss-veil-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* the veil is positioned against the card body */
.card .card-body { position: relative; }


/* Search bar lives inside the DataTables wrapper, floated right on the same
   row as the page-length dropdown (which floats left) */
.dataTables_wrapper #productSearchBar {
    float: right;
}

/* Clear Filters keeps readable colours through hover/focus (outline-dark
   hover otherwise paints white-on-white) */
#btnClearFilters,
#btnClearFilters:hover,
#btnClearFilters:focus {
    background-color: #fff !important;
    color: var(--bs-btn-color) !important;
    border-color: var(--bs-btn-border-color) !important;
}


/* Header Filters button: solid white when idle, colours pinned through
   hover/focus like the other outline controls */
#btnFilters,
#btnFilters:hover,
#btnFilters:focus {
    background-color: #fff !important;
    color: var(--bs-btn-color) !important;
    border-color: var(--bs-btn-border-color) !important;
}

/* Working-sheet count badge: gentle breathing pulse, inline with the
   button text (no positional transform to preserve) */
.ss-badge-pulse-inline {
    animation: ss-badge-pulse-inline 2.2s ease-in-out infinite;
    transform-origin: center;
}
@keyframes ss-badge-pulse-inline {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
    50%      { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .ss-badge-pulse-inline { animation: none; }
}

/* Sales sheet option boxes (Create wizard + Builder): each card keeps its
   border colour, and gets a light background tint plus a heading in the
   same hue. Display Options rides the template secondary (orange-red,
   255,90,41); Pricing Options rides warning (amber, 255,154,19). Heading
   text uses a darkened cut of the hue so it stays readable on the tint. */
.card.custom-card.ss-optbox-display {
    background-color: rgba(var(--secondary-rgb), 0.06);
}
.card.custom-card.ss-optbox-display .card-header {
    border-block-end-color: rgba(var(--secondary-rgb), 0.3);
}
.card.custom-card.ss-optbox-display .card-header .card-title {
    color: #b53d16;
}
.card.custom-card.ss-optbox-pricing {
    background-color: rgba(var(--warning-rgb), 0.08);
}
.card.custom-card.ss-optbox-pricing .card-header {
    border-block-end-color: rgba(var(--warning-rgb), 0.35);
}
.card.custom-card.ss-optbox-pricing .card-header .card-title {
    color: #a56109;
}
/* the Amazon-domain sub-panel sits on frosted white so its own amber
   left-border reads against the tinted card */
.ss-optbox-pricing .amazon-domain-section {
    background: rgba(255, 255, 255, 0.65);
}

/* Card-header outline-danger actions (e.g. the Working Sheet "Clear All
   Items" button) sit on solid white when idle */
.card-header .btn-outline-danger {
    background-color: #fff;
}

/* Option boxes v2: white bodies; the colour moves into the card header as a
   top-to-bottom gradient of the border hue (same treatment as the sitewide
   blue headers), and the heading text matches the border colour exactly. */
.ss-optbox-display, .ss-optbox-pricing,
.ss-optbox-display .card-body, .ss-optbox-pricing .card-body {
    background-color: #fff !important;
}
.main-content .ss-optbox-display > .card-header {
    background: linear-gradient(180deg, rgba(255, 90, 41, 0.05) 0%, rgba(255, 90, 41, 0.20) 100%) !important;
    border-bottom: 1px solid rgb(255, 90, 41) !important;
    border-block-end: 1px solid rgb(255, 90, 41) !important;
}
.main-content .ss-optbox-pricing > .card-header {
    background: linear-gradient(180deg, rgba(255, 154, 19, 0.05) 0%, rgba(255, 154, 19, 0.20) 100%) !important;
    border-bottom: 1px solid rgb(255, 154, 19) !important;
    border-block-end: 1px solid rgb(255, 154, 19) !important;
}
.ss-optbox-display > .card-header .card-title,
.ss-optbox-display > .card-header .card-title i {
    color: rgb(255, 90, 41) !important;
}
.ss-optbox-pricing > .card-header .card-title,
.ss-optbox-pricing > .card-header .card-title i {
    color: rgb(255, 154, 19) !important;
}

/* Option boxes: round the bottom corners properly - the white card-body was
   painting square corners over the card's rounded border */
.main-content .ss-optbox-display,
.main-content .ss-optbox-pricing {
    border-radius: var(--bs-card-border-radius, 0.5rem);
    overflow: hidden;
}
.ss-optbox-display .card-body,
.ss-optbox-pricing .card-body {
    border-bottom-left-radius: calc(var(--bs-card-border-radius, 0.5rem) - 1px);
    border-bottom-right-radius: calc(var(--bs-card-border-radius, 0.5rem) - 1px);
}

/* Uppercase small table heads for modal item tables (mirrors the inline
   rule on Manage Products so the Sellers-modal look is reusable sitewide) */
.seller-table-head th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

/* Sheet Details modal table: a rule under every row (header included) and
   alternating product-row tints */
.ss-details-table thead th,
.ss-details-table tbody td {
    border-bottom: 1px solid #d8e4ee !important;
}
.ss-details-table > tbody > tr:nth-of-type(odd) > td {
    background-color: #f5faff;
}
.ss-details-table > tbody > tr:nth-of-type(even) > td {
    background-color: #ffffff;
}

/* -- Market Info "See X more prices" pop-down --------------------------- */
a[data-bs-toggle="collapse"] .ss-collapse-caret {
	transition: transform 0.2s ease;
}
a[data-bs-toggle="collapse"]:not(.collapsed) .ss-collapse-caret {
	transform: rotate(180deg);
}