/* Shared, reusable UI component classes built on top of the design tokens in mc-variables.css. */

/*
 * Action link: an <a> that performs an action (Edit, Delete, Back, ...) rather than navigating.
 * Blue link colour by default; the --danger modifier signals a destructive action.
 * Uses fixed link/danger tokens, never the per-store theme-primary colour (that is reserved for buttons).
 */
.mc-action-link,
.mc-action-link:visited {
    align-items: center;
    color: var(--mc-link-color, #006fce);
    display: inline-flex;
    gap: 7px;
    text-decoration: none;
}

.mc-action-link:hover,
.mc-action-link:focus-visible {
    color: var(--mc-link-color-hover, #0051c8);
    text-decoration: underline;
}

.mc-action-link--danger,
.mc-action-link--danger:visited {
    color: var(--mc-danger-color, #e21b2d);
}

.mc-action-link--danger:hover,
.mc-action-link--danger:focus-visible {
    color: var(--mc-danger-color-hover, #b81220);
    text-decoration: underline;
}

/*
 * Status text colours: apply the semantic colour to any element (status messages,
 * inline notes, ...). Colour only — add boxing/padding per element where needed.
 */
.mc-text-success {
    color: var(--mc-success-color, #1a7f37);
}

.mc-text-warning {
    color: var(--mc-warning-color, #9a6700);
}

.mc-text-info {
    color: var(--mc-info-color, #0969da);
}

.mc-text-danger {
    color: var(--mc-danger-color, #e21b2d);
}

/* Lucide-ikon foran en seksjonstittel i sidebaren */
.sidebar-heading-icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
}

.sidebar-heading-icon__svg {
    display: block;
    width: 20px;
    height: 20px;
}

/*
 * Alpine.js: hides elements until Alpine has initialised them.
 * Put x-cloak on markup whose server-rendered state would flash wrong before boot.
 */
[x-cloak] {
    display: none !important;
}

/*
 * Ordering-window notice in the header. Calm on purpose: this is information
 * about when the customer can order, not an incident. The service message
 * (.service-msg) stays red and keeps its warning symbol — do not merge the two.
 */
.mc-order-window {
    align-items: center;
    background: var(--mc-surface-color, #fff);
    border-bottom: 1px solid var(--mc-border-color, #dfe3e8);
    color: var(--mc-text-color, #1f2328);
    display: flex;
    font-size: 14px;
    gap: 8px;
    justify-content: center;
    line-height: 1.4;
    padding: 8px 16px;
    text-align: center;
}

/* display:flex would otherwise win over the hidden attribute the shell ships with. */
.mc-order-window[hidden] {
    display: none;
}

.mc-order-window__icon {
    flex: none;
    height: 18px;
    width: 18px;
}

/* Not open yet: same shape, quieter still, so it does not read as a call to action. */
.mc-order-window--upcoming {
    color: var(--mc-text-muted-color, #5b6475);
}

/* Pricing note (product attribute pris_info) — sits directly under the price in
   both the product page and the product cards, quieter than the amount itself.
   Rendered by the product templates, not the price box, so it also shows when
   the price itself is hidden. */
.mc-price-info {
    color: var(--mc-text-muted-color, #5b6475);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    margin-block: 4px 24px; /* a full blank line before the SKU line / meta row that follows */
}

/* <strong> is the only markup the note allows (escaped with an allow-list in the
   templates and PriceInfoConfigProvider): bold and 1px above the surrounding text. */
.mc-price-info strong {
    font-size: calc(1em + 1px);
    font-weight: 700;
}

/* «per stk» after a unit price when the product has tier prices and no pack size
   (Model/Catalog/TierUnitLabel): product page, product cards, cart and «Mine ordre».
   Quieter than the amount it qualifies; a fixed size, since it sits next to amounts
   from 14px (cart) to 23px (cards). */
.mc-price-unit {
    margin-left: 0.3em;
    color: var(--mc-text-muted-color, #5b6475);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
}

/* Same note in the checkout order summary (CheckoutBase summary/item/details.html):
   bound with `html` (escaped server-side), so line breaks from the textarea survive via pre-line. */
.mc-summary-item__price-info {
    font-size: 12px;
    margin-block: 6px 0;
    white-space: pre-line;
}