/*
 * Beringela theme (docs/BRAND-BERINGELA-THEME-PLAN.md).
 *
 * Loaded ONLY when the theme is active (preview cookie or the theme.lojabrother
 * setting) and every rule is scoped under html[data-brand="beringela"], so the
 * classic theme never sees it. Base CSS does not change until the plan's F6.
 *
 * Colours come from the tokens emitted by head.tokens.phtml, never literals,
 * except where the base CSS itself uses a literal dark surface (sidenav, footer).
 */

/*
 * Everything below re-colours what the base CSS hard-codes in blue or orange
 * (classification: plan §5.2, F3a). Surfaces that already read tokens (header,
 * menu, sidenav, auth, error pages) change with the palette and need no rule here.
 * Left alone on purpose: .btn-brother (the manufacturer's colour), social colours,
 * state colours (success, danger, promo #bf0000, .alert-orange), the order-status
 * families (.badge-orange / dark-blue = DELIVERED / SENT) and SIBS.
 */

/* ---------- Bootstrap defaults that are still its own blue ---------- */
/* :where() keeps the plain-link rule at the specificity of Bootstrap's own `a`, so
   every class rule that colours a link today still wins over it. */

/* Native checkboxes and radios (search filters) default to the browser's blue. */
html[data-brand="beringela"] {
    accent-color: var(--lb-brand);
}

:where(html[data-brand="beringela"]) a {
    color: var(--lb-brand);
}

:where(html[data-brand="beringela"]) a:hover {
    color: var(--lb-brand-hover);
}

/* The spec-filter "OK" button sets its blue inline, hence the !important. */
html[data-brand="beringela"] .specRangeApply {
    background: var(--lb-brand) !important;
}

html[data-brand="beringela"] .page-link {
    color: var(--lb-brand);
}

html[data-brand="beringela"] .page-item.active .page-link {
    background-color: var(--lb-brand);
    border-color: var(--lb-brand);
    color: #FFFFFF;
}

html[data-brand="beringela"] .page-link:focus,
html[data-brand="beringela"] .form-control:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--lb-brand-rgb), .25);
}

html[data-brand="beringela"] .form-control:focus {
    border-color: rgba(var(--lb-brand-rgb), .5);
}

/* ---------- Buttons: the lojabrother family (primary brand) ---------- */

html[data-brand="beringela"] .btn-lojabrother,
html[data-brand="beringela"] .btn-lojabrother.disabled,
html[data-brand="beringela"] .btn-lojabrother:disabled,
html[data-brand="beringela"] .btn-lojabrother:not(:disabled):not(.disabled):active,
html[data-brand="beringela"] .btn-lojabrother:not(:disabled):not(.disabled).active {
    background-color: var(--lb-brand);
    border-color: var(--lb-brand);
    color: #FFFFFF;
}

html[data-brand="beringela"] .btn-lojabrother:hover {
    background-color: var(--lb-brand-hover);
    border-color: var(--lb-brand-hover);
    color: #FFFFFF;
}

html[data-brand="beringela"] .btn-lojabrother:focus,
html[data-brand="beringela"] .btn-lojabrother.focus,
html[data-brand="beringela"] .btn-lojabrother:not(:disabled):not(.disabled):active:focus,
html[data-brand="beringela"] .btn-outline-lojabrother:focus,
html[data-brand="beringela"] .btn-outline-lojabrother.focus {
    box-shadow: 0 0 0 .2rem rgba(var(--lb-brand-rgb), .5);
}

html[data-brand="beringela"] .btn-outline-lojabrother,
html[data-brand="beringela"] .btn.btn-outline-lojabrother,
html[data-brand="beringela"] .btn-outline-lojabrother.disabled,
html[data-brand="beringela"] .btn-outline-lojabrother:disabled {
    color: var(--lb-brand);
    border-color: var(--lb-brand);
}

html[data-brand="beringela"] .btn-outline-lojabrother:hover,
html[data-brand="beringela"] .btn.btn-outline-lojabrother:hover,
html[data-brand="beringela"] .btn-outline-lojabrother:not(:disabled):not(.disabled):active,
html[data-brand="beringela"] .btn-outline-lojabrother:not(:disabled):not(.disabled).active {
    background-color: var(--lb-brand);
    border-color: var(--lb-brand);
    color: #FFFFFF;
}

html[data-brand="beringela"] .text-lojabrother,
html[data-brand="beringela"] a.text-lojabrother:hover,
html[data-brand="beringela"] a.text-lojabrother:focus {
    color: var(--lb-brand) !important;
}

html[data-brand="beringela"] .bg-lojabrother {
    background-color: var(--lb-brand) !important;
}

html[data-brand="beringela"] .border-lojabrother {
    border-color: var(--lb-brand) !important;
}

/* ---------- Buttons: Bootstrap's native blue and the custom .btn-primary ---------- */

html[data-brand="beringela"] .btn-primary {
    background-color: var(--lb-brand);
    border-color: var(--lb-brand);
    color: #FFFFFF;
}

html[data-brand="beringela"] .btn-primary:hover,
html[data-brand="beringela"] .btn-primary:focus {
    background-color: var(--lb-brand-hover);
    border-color: var(--lb-brand-hover);
    color: #FFFFFF;
}

html[data-brand="beringela"] .btn-outline-primary {
    color: var(--lb-brand);
    border-color: var(--lb-brand);
}

html[data-brand="beringela"] .btn-outline-primary:hover {
    background-color: var(--lb-brand);
    border-color: var(--lb-brand);
    color: #FFFFFF;
}

html[data-brand="beringela"] .btn-link {
    color: var(--lb-brand);
}

html[data-brand="beringela"] .text-primary {
    color: var(--lb-brand) !important;
}

html[data-brand="beringela"] .bg-primary {
    background-color: var(--lb-brand) !important;
}

/* ---------- The accent button (mobile .btn-orange): pink, dark text ---------- */
/* Only the mobile templates use .btn-orange as a brand button (filters, list view,
   sidenav search); white on pink is 2.58:1, so the text takes --lb-on-accent. */

html[data-brand="beringela"] .btn-orange,
html[data-brand="beringela"] .btn-orange.disabled,
html[data-brand="beringela"] .btn-orange:disabled,
html[data-brand="beringela"] .btn-orange:not(:disabled):not(.disabled):active,
html[data-brand="beringela"] .btn-orange:not(:disabled):not(.disabled).active {
    background-color: var(--lb-accent);
    border-color: var(--lb-accent);
    color: var(--lb-on-accent);
}

html[data-brand="beringela"] .btn-orange:hover {
    background-color: var(--lb-accent-hover);
    border-color: var(--lb-accent-hover);
    color: var(--lb-on-accent);
}

html[data-brand="beringela"] .btn-orange:focus,
html[data-brand="beringela"] .btn-orange.focus,
html[data-brand="beringela"] .btn-orange:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 111, 174, .5);
}

/* ---------- Badges ---------- */

html[data-brand="beringela"] .badge-lojabrother {
    background-color: var(--lb-brand);
    color: #FFFFFF;
}

html[data-brand="beringela"] .badge-lojabrother[href]:hover,
html[data-brand="beringela"] .badge-lojabrother[href]:focus {
    background-color: var(--lb-brand-hover);
}

/* The "ORIGINAL" pill. The grey ones carry .lb-bg-ebebeb (!important) and stay grey. */
html[data-brand="beringela"] .badge-primary {
    background-color: var(--lb-brand);
    color: #FFFFFF;
}

/* Star-promo pill: its background is the accent, so the text goes dark. */
html[data-brand="beringela"] .label-orange {
    color: var(--lb-on-accent);
}

/* ---------- Header and search ---------- */

/* The SVG lockup has no built-in padding (the classic PNG had), so centre it on the
   header row: its middle then sits on the search box's middle. Height, not width,
   is what the row needs fixed; the template's width="180" was set for the PNG. */
html[data-brand="beringela"] #logoContainer {
    align-self: center;
    padding-top: 0 !important;
}

html[data-brand="beringela"] #logoContainer a {
    display: block;
    line-height: 0;
}

html[data-brand="beringela"] #logoContainer img {
    width: auto;
    height: 36px;
}

/* The checkout header pins the classic PNG to 160px wide with !important
   (computer/layout/head.css); the wider SVG would come out ~29px tall there. */
html[data-brand="beringela"] body[data-module="/checkout/"] #logoContainer a img {
    width: auto !important;
    height: 36px;
}

html[data-brand="beringela"] .btn-search-comp,
html[data-brand="beringela"] .btn-search-comp:active,
html[data-brand="beringela"] .btn-search-comp.active,
html[data-brand="beringela"] .btn-search-comp:focus,
html[data-brand="beringela"] .btn-search-comp.focus,
html[data-brand="beringela"] .btn-search-comp:hover,
html[data-brand="beringela"] .btn-search-comp[disabled]:hover {
    color: var(--lb-on-accent) !important;
}

/* Cart badge: the accent pill with a dark number (white on this pink is 2.6:1). */
html[data-brand="beringela"] span#navbarCartQuantity {
    background-color: var(--lb-accent);
    color: var(--lb-on-accent) !important;
}

html[data-brand="beringela"] .cart-btn {
    border-color: var(--lb-brand-hover);
}

html[data-brand="beringela"] #searchInputForm #searchInputSubmit,
html[data-brand="beringela"] .search-input-result-highlight,
html[data-brand="beringela"] .cart-preview-item-link:hover,
html[data-brand="beringela"] .cart-preview-item-link:hover .cart-preview-item-desc,
html[data-brand="beringela"] .cart-preview-item-link:focus,
html[data-brand="beringela"] .cart-preview-item-link:focus .cart-preview-item-desc {
    color: var(--lb-accent-text);
}

/* ---------- Product cards and product page ---------- */

html[data-brand="beringela"] .relatedProduct:hover {
    color: var(--lb-accent-text);
}

html[data-brand="beringela"] .move-left-wrapper,
html[data-brand="beringela"] .move-right-wrapper {
    color: var(--lb-brand);
}

html[data-brand="beringela"] .compatible-printers-section {
    border-color: var(--lb-brand);
}

html[data-brand="beringela"] .compatible-printers-header,
html[data-brand="beringela"] .printer-model-link:hover {
    color: var(--lb-brand);
}

html[data-brand="beringela"] .printer-family-header {
    background: var(--lb-brand);
    color: #FFFFFF;
}

/* ---------- Footer (dark #212121): the accent switches to its dark-surface tone ---------- */

html[data-brand="beringela"] div#footer {
    border-top-color: var(--lb-accent-on-dark);
}

html[data-brand="beringela"] div#footer ul li:before {
    color: var(--lb-accent-on-dark);
}

html[data-brand="beringela"] div#footer ul li a:hover {
    color: var(--lb-accent-on-dark) !important;
}

html[data-brand="beringela"] .footer-categorias td a:hover,
html[data-brand="beringela"] #footer-categorias td a:hover {
    color: var(--lb-accent-on-dark);
}

/* ---------- Checkout ---------- */

html[data-brand="beringela"] #finishForm a {
    color: var(--lb-brand);
}

/* ---------- Account: tints that were rgba(0, 82, 156, x) ---------- */

html[data-brand="beringela"] .account-refresh .account-last-order-status-badge--info,
html[data-brand="beringela"] .account-refresh .account-last-order-status-badge--primary {
    background: rgba(var(--lb-brand-rgb), .12);
}

html[data-brand="beringela"] .account-orders-status-badge--info,
html[data-brand="beringela"] .account-orders-status-badge--primary,
html[data-brand="beringela"] .account-address-default-badge {
    background: rgba(var(--lb-brand-rgb), .10);
}

html[data-brand="beringela"] .account-order-view-payment-pending .account-card-header {
    background: rgba(var(--lb-brand-rgb), .06);
    border-bottom-color: rgba(var(--lb-brand-rgb), .20);
}

html[data-brand="beringela"] .account-address-add:hover,
html[data-brand="beringela"] .account-address-add:focus-visible {
    background: rgba(var(--lb-brand-rgb), .04);
}

html[data-brand="beringela"] .account-printers-note {
    background: rgba(var(--lb-brand-rgb), .06);
}

/* ---------- Popups and modal headers ---------- */

html[data-brand="beringela"] #popUp .modal-header {
    background: var(--lb-brand);
    color: #FFFFFF;
}

html[data-brand="beringela"] #popUp .modal-content {
    border-color: var(--lb-brand);
}

html[data-brand="beringela"] .modal .modal-dialog .modal-content .modal-header {
    border-bottom-color: var(--lb-brand);
}

/* ---------- Auth ---------- */

html[data-brand="beringela"] #changePasswordAlert {
    border-color: var(--lb-accent-text);
    color: var(--lb-accent-text);
    background: var(--lb-accent-tint);
}