/* =========================================================
   SKH Product System – New Releases & Preorders Addon
   Frontend CSS – v1.0.0
   Strikt scopad till .skh-nr-* – påverkar inga andra element.
   Använder CSS-variabler från ev. "SKH Design Foundation" om de
   finns (t.ex. --skh-color-primary), med säkra fallbackvärden
   som matchar SKH Product Systems befintliga produktsida.
   ========================================================= */

/* ---------------------------------------------------------
   1. FÖRBOKNINGSKORT – produktsidan, nära pris/köpknapp
   --------------------------------------------------------- */

.skh-nr-card {
    --skh-nr-accent:    var(--skh-color-primary, #168f83);
    --skh-nr-accent-dk: var(--skh-color-primary-dark, #0f5c52);
    --skh-nr-ink:       var(--skh-color-ink, #111827);
    --skh-nr-muted:     var(--skh-color-muted, #6b7280);
    --skh-nr-urgent:    var(--skh-color-danger, #b3261e);
    --skh-nr-bg:        var(--skh-color-surface-alt, #f0fdf9);
    --skh-nr-border:    var(--skh-color-border, #b9e6de);

    box-sizing: border-box;
    width: 100%;
    background: var(--skh-nr-bg);
    border: 1.5px solid var(--skh-nr-border);
    border-radius: 12px;
    padding: 16px 18px 14px;
    margin: 0 0 16px;
    font-family: inherit;
}

.skh-nr-card * { box-sizing: border-box; }

.skh-nr-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--skh-nr-accent);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 10px;
    line-height: 1.6;
}

.skh-nr-card--upcoming .skh-nr-chip {
    background: var(--skh-nr-ink);
}

.skh-nr-card--closing-soon .skh-nr-chip {
    background: var(--skh-nr-urgent);
}

.skh-nr-lead {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--skh-nr-ink);
}

.skh-nr-endline {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 800;
    color: var(--skh-nr-accent-dk);
    line-height: 1.4;
}

.skh-nr-endline--upcoming {
    color: var(--skh-nr-ink);
}

.skh-nr-endline--urgent {
    color: var(--skh-nr-urgent);
}

.skh-nr-urgent-note {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--skh-nr-urgent);
}

.skh-nr-estimates {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--skh-nr-muted);
    line-height: 1.6;
}

.skh-nr-info-line {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--skh-nr-ink);
    font-style: italic;
    line-height: 1.5;
}

.skh-nr-limit-note {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--skh-nr-muted);
}

@media (max-width: 600px) {
    .skh-nr-card { padding: 14px 14px 12px; }
    .skh-nr-endline { font-size: 14px; }
}

/* ---------------------------------------------------------
   2. BADGE I PRODUKTLOOPAR / KATEGORIER / SÖK / RELATERADE
   --------------------------------------------------------- */

.skh-nr-loop-badge {
    --skh-nr-accent: var(--skh-color-primary, #168f83);
    --skh-nr-ink:    var(--skh-color-ink, #111827);
    --skh-nr-urgent: var(--skh-color-danger, #b3261e);

    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: inline-block;
    padding: 3px 9px;
    border-radius: 5px;
    background: var(--skh-nr-accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.5;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

.skh-nr-loop-badge--upcoming { background: var(--skh-nr-ink); }
.skh-nr-loop-badge--closing-soon { background: var(--skh-nr-urgent); }

.skh-nr-loop-subbadge {
    position: absolute;
    top: 34px;
    right: 10px;
    z-index: 3;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    background: rgba(17,24,39,.82);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
    pointer-events: none;
}

/* Behöver en positionerad förälder. WooCommerce-loopens li.product
   har normalt position:relative redan via temat, men vi säkerställer
   det här utan att röra andra egenskaper. */
ul.products li.product {
    position: relative;
}

@media (max-width: 480px) {
    .skh-nr-loop-badge,
    .skh-nr-loop-subbadge { right: 6px; font-size: 9.5px; }
    .skh-nr-loop-subbadge { top: 30px; }
}

/* ---------------------------------------------------------
   3. VARUKORG / KASSA – badge vid produktnamn
   --------------------------------------------------------- */

.skh-nr-cart-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 5px;
    background: var(--skh-color-primary, #168f83);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

/* ---------------------------------------------------------
   4. ORDERFLAGGA – Mina sidor (kundvy)
   --------------------------------------------------------- */

.skh-nr-order-flag--myaccount {
    background: #f0fdf9;
    border: 1px solid #99e6d8;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 18px;
    color: #0f5c52;
}

.skh-nr-order-flag--myaccount strong { display: block; margin-bottom: 4px; }
.skh-nr-order-flag--myaccount p { margin: 0; font-size: 13px; }