/* Shared styling for the BNPL (Tabby / Tamara) on-site messaging boxes.

   Tamara's box is styled through window.tamaraWidgetConfig.css in the shared
   BnplWidgets.cshtml partial — that CSS is injected into the widget itself, so it cannot
   be written here.

   The Tabby container below IS ours, and deliberately mirrors Tamara's box so the two
   read as the same component. */

/* tamara-widget is a custom element, so it defaults to display:inline and collapses.
   This lived only in ProductDetails.css, which the builder does not load — the builder
   got away with it while a flex wrapper blockified it, then the widget vanished there the
   moment that wrapper was removed. It belongs with the widget, not with one page's
   stylesheet. */
tamara-widget {
    display: block;
}

/* Stacks the Tamara and Tabby boxes as one block. `gap` only materialises BETWEEN
   rendered boxes, so a page showing just one of them gets no stray spacing. Pages own the
   margin below this wrapper — see .bnpl-messaging in ProductDetails.css. */
.bnpl-messaging {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Matches Tamara: pure black at rest, lifting to #090B0D on hover, white 1px border.

   Over-specified on purpose. Tabby injects its own stylesheet at RUNTIME, so it always
   loads after this file; a plain .bnpl-tabby-box would tie on specificity with its rules
   and lose on load order. Repeating the class settles it. */
.bnpl-tabby-box.bnpl-tabby-box {
    background: #000000 !important;
    border: 1px #ffffff solid !important;
    border-radius: 10px !important;
    padding: 0;
    transition: background-color 0.2s ease;
    /* Inherited custom properties are the ONLY thing that crosses into Tabby's snippet —
       it renders in a shadow root, so no selector here can reach its markup. That also
       means its internal border and the colour of its price are not stylable from CSS;
       changing those needs a <style> injected into the shadow root from JS, which was
       tried and removed in favour of keeping this simple. */
    --snippetTextColor: #ffffff;
    --snippetLinkTextColor: #ffffff;
}

.bnpl-tabby-box.bnpl-tabby-box:hover {
    background-color: #090B0D !important;
}