/* 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 */
}

/* Same note in the checkout order summary (CheckoutBase summary/item/details.html):
   bound with `text`, 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;
}