/* ============================================================
   alert-card.css — single source of truth for the unified
   .pt-alert-card markup used on three surfaces:

     - dashboard "Översikt"  → .pt-alert-card--sm
     - bevakningar fullsida  → .pt-alert-card (default)
     - header user-popup     → .pt-alert-card--xs

   Why a standalone file? portal-redesign.css only loads on
   /mitt-konto/* pages, but the header floating popup can open on
   any page (rendered by Assets.php::renderFloatingButton on every
   non-admin, non-portal page for logged-in users). This file is
   enqueued separately by:

     - Assets.php          (every logged-in user, all pages)
     - SiteHeaderService   (when the custom site-header is active)
     - PortalShortcodes    (on /mitt-konto/* pages)

   WordPress dedupes the 'pricetracker-alert-card' handle so the
   triple-enqueue is a no-op — only one network round-trip happens.
   ============================================================ */

/* Required tokens — duplicated from portal-redesign.css :root so
   this file can stand alone. Safe to duplicate because identical
   `:root` declarations merge cleanly per the CSS cascade. */
:root {
    --ptp-surface: #ffffff;
    --ptp-ink: #111827;
    --ptp-ink-soft: #4b5563;
    --ptp-ink-mute: #6b7280;
    --ptp-line: #e5e7eb;
    --ptp-line-strong: #d1d5db;
    --ptp-accent-deep: #2563eb;
    --ptp-accent-strong: #1d4ed8;  /* hover/djup handling (kanon) */
    --ptp-accent-soft: #dbeafe;
    --ptp-accent-tint: #eff6ff;    /* blå-soft yta (aktiv flik) */
    --ptp-success: #047857;
    --ptp-success-bright: #10b981; /* ikon/bar-fyllnad (kanon §4) */
    --ptp-success-line: #a7f3d0;   /* border på träffad-kort */
    --ptp-success-soft: #ecfdf5;
    --ptp-warning: #f59e0b;        /* amber bar nära mål */
    --ptp-warning-deep: #b45309;   /* amber text (kanon §4) */
    --ptp-warning-soft: #fffbeb;
    --ptp-danger: #dc2626;
    --ptp-danger-soft: #fef2f2;
    --ptp-card-soft:   #f3f4f6;
    --ptp-card-softer: #f9fafb;
    --ptp-card-line:   #e5e7eb;
}

/* ============================================================
   .pt-alert-card v2.2 — Unified minimal, single-accent, status-aware
   ============================================================
   Used on three surfaces:
     - dashboard preview        → .pt-alert-card--sm
     - full bevakningar-sidan   → .pt-alert-card (default)
     - header user-popup        → .pt-alert-card--xs
   Replaces the three legacy BEM trees:
     - .pt-portal__alert-row*
     - .pt-portal__alert-card* (+ --editable)
     - .pt-portal__basket-alert-card* (+ --v2)
     - .pt-user-popup__alert-card*
   Designprinciper (Alternativ A, 2026-06)
   ---------------
   - Accent = blå var(--ptp-accent-deep); statusfärger per kanon §4:
     amber (--near, <= 5 % från målet), grön (--hit), röd REA-pill.
     Mjuka bakgrunder använder --ptp-card-soft, aldrig --ptp-bg-tint.
   - Tre priser runt progress-bar:n: Pris nu + Mål ovanför, Startpris
     + note under. Notisen anges i KRONOR ("250 kr från målet").
   - Bar: spår #f3f4f6 (vit på träffad), SOLID fyllnad blå/amber/grön.
   - Två ikoner (penna + soptunna) istället för ⋯-meny.
   - Inline edit-form på soft-yta (#f3f4f6 + border) — ingen modal.
   - Status-modifiers: --pending / --hit / --cancelled / --expired
     + state-modifier --near (sätts från presenter-fältet 'state').
   - Mobile-first, tap-mål >= 44 px. Inga transform-hovrar.
   ============================================================ */

.pt-alert-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: var(--ptp-surface);
    border: 1px solid var(--ptp-line);
    border-radius: 14px;
    color: var(--ptp-ink);
    transition: border-color .15s ease;
}
.pt-alert-card:hover { border-color: var(--ptp-line-strong); }

/* `[hidden]` MUST beat the explicit `display: flex/grid` on __edit, __products,
   __expander etc. !important is the only way because our own selectors are
   single-class so they tie with `[hidden] { display: none }` in specificity,
   and the cascade puts __edit last. Without this every basket-card would
   render with edit-form + product-list expanded by default. */
.pt-alert-card [hidden],
.pt-alert-card[hidden] { display: none !important; }

/* Top row -------------------------------------------------- */
.pt-alert-card__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.pt-alert-card__thumb {
    flex: none;
    width: 48px; height: 48px;
    border-radius: 10px;
    border: 1px solid var(--ptp-line);
    background: var(--ptp-card-soft);
    object-fit: cover;
    display: block;
}
.pt-alert-card__chips {
    flex: none;
    display: flex;
}
.pt-alert-card__chip {
    width: 34px; height: 48px;
    border-radius: 10px;
    background: var(--ptp-card-soft);
    border: 1px solid var(--ptp-line);
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700;
    color: var(--ptp-ink-soft);
    letter-spacing: 0.04em;
}
.pt-alert-card__chip + .pt-alert-card__chip { margin-left: -8px; }
.pt-alert-card__chip:nth-child(1) { z-index: 3; }
.pt-alert-card__chip:nth-child(2) { z-index: 2; }
.pt-alert-card__chip:nth-child(3) { z-index: 1; }

.pt-alert-card__body { flex: 1; min-width: 0; }
.pt-alert-card__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ptp-ink);
    line-height: 1.35;
    letter-spacing: -0.005em;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pt-alert-card__title a { color: inherit; text-decoration: none; }
.pt-alert-card__title a:hover { color: var(--ptp-accent-deep); }
.pt-alert-card__meta {
    margin-top: 3px;
    font-size: 12px;
    color: var(--ptp-ink-mute);
    display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
}
.pt-alert-card__meta-sep {
    width: 3px; height: 3px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.5;
    margin: 0 2px;
}

.pt-alert-card__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--ptp-card-soft);
    color: var(--ptp-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.pt-alert-card__status svg { width: 10px; height: 10px; flex: none; }
/* "Mål uppnått" — grön text på vit pill med grön border så den lyfter
   även mot träffad-kortets gröna soft-yta (#ecfdf5). */
.pt-alert-card__status--triggered {
    background: var(--ptp-surface);
    border-color: var(--ptp-success-line);
    color: var(--ptp-success);
}
/* "Väntar" — amber på warning-soft (enade pending-uttrycket, kanon §4). */
.pt-alert-card__status--pending   { background: var(--ptp-warning-soft); color: var(--ptp-warning-deep); }
.pt-alert-card__status--expired   { background: var(--ptp-card-soft);    color: var(--ptp-ink-mute); }

.pt-alert-card__savings {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ptp-success-soft);
    color: var(--ptp-success);
}

/* Actions (edit + delete) ---------------------------------- */
.pt-alert-card__actions {
    flex: none;
    display: flex;
    gap: 6px;
    align-items: center;
}
.pt-alert-card__action {
    width: 34px; height: 34px;
    border-radius: 8px;
    display: grid; place-items: center;
    background: transparent;
    border: 1px solid var(--ptp-line);
    color: var(--ptp-ink-mute);
    cursor: pointer;
    transition: color .12s, background .12s, border-color .12s;
}
.pt-alert-card__action:hover {
    color: var(--ptp-ink);
    background: var(--ptp-card-soft);
    border-color: var(--ptp-line-strong);
}
.pt-alert-card__action--danger:hover {
    color: var(--ptp-danger);
    background: var(--ptp-danger-soft);
    border-color: rgba(220, 38, 38, 0.3);
}
.pt-alert-card__action svg { width: 16px; height: 16px; }

/* Progress block ------------------------------------------- */
.pt-alert-card__progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pt-alert-card__price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.pt-alert-card__price-row-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--ptp-ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
    margin-bottom: 2px;
    white-space: nowrap;
}
.pt-alert-card__price-now,
.pt-alert-card__price-target {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.pt-alert-card__price-target { text-align: right; }
.pt-alert-card__price-now > strong,
.pt-alert-card__price-target > strong {
    font-size: 20px;
    font-weight: 700;
    color: var(--ptp-ink);
    letter-spacing: -0.025em;
    line-height: 1;
    white-space: nowrap;
}
/* Mål-värdet alltid i djup handlingsblå (#1d4ed8) 700 — även på
   träffad-kort, där bara "Pris nu" går grönt (matchar prototypen). */
.pt-alert-card__price-target > strong { color: var(--ptp-accent-strong); }
.pt-alert-card--hit .pt-alert-card__price-now > strong { color: var(--ptp-success); }
.pt-alert-card__price-target--empty > strong { color: var(--ptp-ink-mute); font-weight: 600; font-size: 14px; }

/* Träffad-kort: grön soft-yta + grön border, vit bildplatta. */
.pt-alert-card--hit {
    background: var(--ptp-success-soft);
    border-color: var(--ptp-success-line);
}
.pt-alert-card--hit .pt-alert-card__thumb {
    background: var(--ptp-surface);
    border-color: var(--ptp-success-line);
}

/* Progress-bar: spår #f3f4f6 (vitt på träffad-kort), SOLID fyllnad —
   blå som standard, amber nära mål, grön när målet är träffat. */
.pt-alert-card__bar {
    height: 6px;
    background: var(--ptp-card-soft);
    border-radius: 999px;
    overflow: hidden;
}
.pt-alert-card__bar > span {
    display: block;
    height: 100%;
    background: var(--ptp-accent-deep);
    border-radius: inherit;
    transition: width .4s ease;
}
.pt-alert-card--near .pt-alert-card__bar > span { background: var(--ptp-warning); }
.pt-alert-card--hit  .pt-alert-card__bar { background: var(--ptp-surface); }
.pt-alert-card--hit  .pt-alert-card__bar > span { background: var(--ptp-success-bright); }

.pt-alert-card__bar-footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 12px;
    color: var(--ptp-ink-mute);
}
.pt-alert-card__bar-footer > :last-child { text-align: right; }
.pt-alert-card__price-start strong {
    font-weight: 600;
    color: var(--ptp-ink-soft);
}
/* Notisen ("250 kr från målet" / "Målpriset uppnått") — alltid 700.
   Färg följer kortets state: grön på träffad, amber nära mål. Only the
   note span on the right (last child) changes colour — "Startpris 934 kr"
   on the left stays neutral so the user still sees the original price in
   its normal colour. The :last-child selector also covers pre-rendered
   markup that lacks the __note class. */
.pt-alert-card__note { font-weight: 700; }
.pt-alert-card--hit .pt-alert-card__bar-footer > :last-child {
    color: var(--ptp-success);
    font-weight: 700;
}
.pt-alert-card--near .pt-alert-card__bar-footer > :last-child {
    color: var(--ptp-warning-deep);
    font-weight: 700;
}

/* Pending state — solid bar (the old striped gradient looked broken);
   progress renders at width 0 while we wait for price data. */
.pt-alert-card--pending .pt-alert-card__price-now { color: var(--ptp-ink-mute); }

/* Cancelled / expired -------------------------------------- */
.pt-alert-card--cancelled,
.pt-alert-card--expired {
    background: var(--ptp-card-softer);
    border-color: var(--ptp-card-line);
}
.pt-alert-card--cancelled .pt-alert-card__title,
.pt-alert-card--expired   .pt-alert-card__title,
.pt-alert-card--cancelled .pt-alert-card__price-now,
.pt-alert-card--expired   .pt-alert-card__price-now { color: var(--ptp-ink-mute); }
.pt-alert-card--cancelled .pt-alert-card__bar > span,
.pt-alert-card--expired   .pt-alert-card__bar > span { background: var(--ptp-ink-mute); opacity: 0.5; }

/* "Se butiker" — blå pill-CTA på träffade produktkort ------- */
.pt-alert-card__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    background: var(--ptp-accent-deep);
    color: var(--ptp-surface);
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 7px 16px;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s ease;
}
.pt-alert-card__cta:hover { background: var(--ptp-accent-strong); color: var(--ptp-surface); }

/* Basket expander + product list --------------------------- */
.pt-alert-card__expander {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 0 0;
    margin-top: 2px;
    border: 0; border-top: 1px solid var(--ptp-line);
    background: transparent;
    font: inherit;
    font-size: 13px; font-weight: 500;
    color: var(--ptp-ink-soft);
    cursor: pointer;
    text-align: left;
    width: 100%;
}
.pt-alert-card__expander:hover { color: var(--ptp-ink); }
.pt-alert-card__expander > span:not(.pt-alert-card__expander-chips) { flex: 1; }
.pt-alert-card__expander svg {
    width: 14px; height: 14px;
    transition: transform .2s;
}
.pt-alert-card__expander[aria-expanded="true"] svg { transform: rotate(180deg); }
.pt-alert-card__expander-chips {
    display: flex;
}
.pt-alert-card__expander-chips .pt-alert-card__chip {
    width: 26px; height: 26px; border-radius: 7px; font-size: 9px;
}

/* Prototypens expander-lista: ljus avdelare (#f3f4f6) + padding-top 10px
   på containern, raderna separeras med gap 8px — inga egna border/padding
   på raderna, så de ligger kant-i-kant med kortets innehåll. */
.pt-alert-card__products {
    list-style: none;
    padding: 10px 0 0;
    margin: -2px 0 0;
    display: flex; flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--ptp-card-soft);
}
.pt-alert-card__product {
    display: flex; align-items: center; gap: 10px;
    padding: 0;
}
.pt-alert-card__product-thumb {
    flex: none;
    width: 34px; height: 34px;
    border-radius: 8px;
    border: 1px solid var(--ptp-line);
    background: var(--ptp-card-soft);
    object-fit: cover;
}
.pt-alert-card__product-main { flex: 1; min-width: 0; }
.pt-alert-card__product-brandrow {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.pt-alert-card__product-brand {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Röd REA-mini-pill (kanon: rea = röd familj #fecaca/#991b1b). */
.pt-alert-card__product-sale {
    flex: none;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #991b1b;
    background: #fecaca;
    border-radius: 999px;
    padding: 1px 7px;
    white-space: nowrap;
}
.pt-alert-card__product-name {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ptp-ink);
    line-height: 1.3;
    text-decoration: none;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pt-alert-card__product-name:hover { color: var(--ptp-accent-deep); }
/* Priskolumn: ev. gammalt pris genomstruket + aktuellt pris, med grön
   besparing ("-14 kr") under. */
.pt-alert-card__product-pricecol {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.pt-alert-card__product-price-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.pt-alert-card__product-old {
    font-size: 10.5px;
    color: #9ca3af;
    text-decoration: line-through;
    white-space: nowrap;
}
.pt-alert-card__product-price {
    flex: none;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ptp-ink);
    white-space: nowrap;
}
.pt-alert-card__product-drop {
    font-size: 10px;
    font-weight: 700;
    color: var(--ptp-success);
    white-space: nowrap;
}

/* Edit form (inline, appears under the progress block) -----
   Egen soft-yta (#f3f4f6 + border, radius 12) så formen läses som
   ett tydligt redigeringsläge i kortet — ersätter den gamla
   border-top-avdelaren. */
.pt-alert-card__edit {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--ptp-card-soft);
    border: 1px solid var(--ptp-card-line);
    border-radius: 12px;
}
.pt-alert-card__edit-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ptp-ink-soft);
}
.pt-alert-card__edit-label strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ptp-ink);
    margin-top: 2px;
}
.pt-alert-card__input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.pt-alert-card__input {
    flex: 1; min-width: 0;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--ptp-line);
    background: var(--ptp-surface);
    color: var(--ptp-ink);
    min-height: 44px;
}
.pt-alert-card__input:focus {
    outline: 0;
    border-color: var(--ptp-accent-deep);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4); /* kanon-fokusring */
}
.pt-alert-card__input-suffix {
    font-size: 14px;
    font-weight: 600;
    color: var(--ptp-ink-mute);
    padding: 0 4px;
}
.pt-alert-card__edit-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}
/* Ghost "Avbryt" + blå "Spara bevakning" (portalens hover-språk:
   ghost-border -> #9ca3af, blå -> #1d4ed8 — inga transforms). */
.pt-alert-card__btn {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid rgba(17, 24, 39, 0.14);
    background: var(--ptp-surface);
    color: var(--ptp-ink);
    cursor: pointer;
    min-height: 40px;
    white-space: nowrap;
    transition: color .12s, background .12s, border-color .12s;
}
.pt-alert-card__btn:hover {
    color: var(--ptp-ink);
    background: var(--ptp-surface);
    border-color: #9ca3af;
}
.pt-alert-card__btn--primary {
    background: var(--ptp-accent-deep);
    color: var(--ptp-surface);
    border-color: var(--ptp-accent-deep);
}
.pt-alert-card__btn--primary:hover {
    background: var(--ptp-accent-strong);
    border-color: var(--ptp-accent-strong);
    color: var(--ptp-surface);
}

/* Mode tabs in edit (Vid sänkning / Totalpris) --------------
   Segmentflikar som pills i vit pill-container — aktiv flik får
   blå-soft yta + blå 700 (formen själv ligger på #f3f4f6). */
.pt-alert-card__mode-tabs {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--ptp-surface);
    border: 1px solid var(--ptp-card-line);
    border-radius: 999px;
}
.pt-alert-card__mode-tab {
    flex: 1;
    padding: 6px 14px;
    border: 0;
    background: transparent;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ptp-ink-mute);
    cursor: pointer;
    white-space: nowrap;
    min-height: 36px;
}
.pt-alert-card__mode-tab:hover { color: var(--ptp-ink); }
.pt-alert-card__mode-tab.is-active {
    background: var(--ptp-accent-tint);
    color: var(--ptp-accent-strong);
    font-weight: 700;
}

.pt-alert-card__percent-pills {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.pt-alert-card__percent-pill {
    font: inherit;
    font-size: 13px; font-weight: 600;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--ptp-line);
    background: var(--ptp-surface);
    color: var(--ptp-ink-soft);
    cursor: pointer;
    min-height: 38px;
    min-width: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color .12s, background .12s, border-color .12s;
}
.pt-alert-card__percent-pill:hover { color: var(--ptp-ink); border-color: var(--ptp-line-strong); }
.pt-alert-card__percent-pill.is-active {
    border-color: var(--ptp-accent-deep);
    background: var(--ptp-accent-deep);
    color: var(--ptp-surface);
}

/* Size variants -------------------------------------------- */
.pt-alert-card--sm { padding: 14px; gap: 12px; }
.pt-alert-card--sm .pt-alert-card__thumb { width: 44px; height: 44px; border-radius: 8px; }
.pt-alert-card--sm .pt-alert-card__chip   { width: 30px; height: 44px; border-radius: 8px; }
.pt-alert-card--sm .pt-alert-card__title  { font-size: 14px; }
.pt-alert-card--sm .pt-alert-card__price-now > strong,
.pt-alert-card--sm .pt-alert-card__price-target > strong { font-size: 18px; }

.pt-alert-card--xs {
    padding: 10px;
    gap: 8px;
    border-radius: 10px;
}
.pt-alert-card--xs .pt-alert-card__head { gap: 10px; }
.pt-alert-card--xs .pt-alert-card__thumb { width: 36px; height: 36px; border-radius: 7px; }
.pt-alert-card--xs .pt-alert-card__chip { width: 26px; height: 36px; border-radius: 7px; font-size: 10px; }
.pt-alert-card--xs .pt-alert-card__chip + .pt-alert-card__chip { margin-left: -6px; }
.pt-alert-card--xs .pt-alert-card__title { font-size: 13px; -webkit-line-clamp: 1; }
.pt-alert-card--xs .pt-alert-card__meta { font-size: 11px; }
.pt-alert-card--xs .pt-alert-card__progress { gap: 6px; }
.pt-alert-card--xs .pt-alert-card__price-row-label { font-size: 9px; }
.pt-alert-card--xs .pt-alert-card__price-now > strong { font-size: 14px; }
.pt-alert-card--xs .pt-alert-card__price-target > strong { font-size: 14px; }
.pt-alert-card--xs .pt-alert-card__bar { height: 4px; }
.pt-alert-card--xs .pt-alert-card__bar-footer { font-size: 10px; gap: 6px; }
.pt-alert-card--xs .pt-alert-card__actions { gap: 4px; }
.pt-alert-card--xs .pt-alert-card__action { width: 28px; height: 28px; border-radius: 6px; }
.pt-alert-card--xs .pt-alert-card__action svg { width: 14px; height: 14px; }
/* Popup-edit lives directly inside the .pt-alert-card--xs card now —
   the previous redirect to /mitt-konto/bevakningar/ was an unnecessary
   detour. The edit-form respects [hidden] like everywhere else; we
   tighten its typography below so it fits the narrower popup width. */
.pt-alert-card--xs .pt-alert-card__edit { gap: 8px; padding: 12px; }
.pt-alert-card--xs .pt-alert-card__edit-label { font-size: 11px; }
.pt-alert-card--xs .pt-alert-card__edit-label strong { font-size: 13px; }
.pt-alert-card--xs .pt-alert-card__mode-tab { font-size: 12px; padding: 6px 8px; min-height: 32px; }
.pt-alert-card--xs .pt-alert-card__input { font-size: 14px; padding: 9px 12px; min-height: 38px; }
.pt-alert-card--xs .pt-alert-card__btn { font-size: 12px; padding: 8px 14px; min-height: 34px; }

/* Mobile (≤640px) — tap-targets ≥ 44 px -------------------- */
@media (max-width: 640px) {
    .pt-alert-card { padding: 14px; gap: 12px; }
    .pt-alert-card__head { gap: 12px; }
    .pt-alert-card__title { font-size: 14px; }
    .pt-alert-card__price-now > strong,
    .pt-alert-card__price-target > strong { font-size: 19px; }
    .pt-alert-card__btn { font-size: 14px; padding: 12px 22px; min-height: 44px; }
    .pt-alert-card__action { width: 30px; height: 30px; border-radius: 8px; }
    .pt-alert-card__action svg { width: 14px; height: 14px; }
    .pt-alert-card__mode-tab { font-size: 12px; padding: 10px 10px; min-height: 40px; }
}

@media (max-width: 380px) {
    .pt-alert-card__price-now > strong,
    .pt-alert-card__price-target > strong { font-size: 18px; }
    .pt-alert-card__edit-actions { flex-direction: column-reverse; }
    .pt-alert-card__btn { width: 100%; }
}

/* ============================================================
   .pt-alert-card — THEME OVERRIDE ARMOR
   ------------------------------------------------------------
   Astra (and most parent themes) ship aggressive default button
   styling: filled black background, uppercase text, custom font,
   shadows, white-on-dark hover. Without armor, our action icons
   render as flat white squares (background overridden, color
   reset, padding broken) and the percent-pills + mode-tabs come
   out with the theme's pill-button skin instead of ours.
   Every property below is the theme can clobber MUST be repeated
   with !important to win regardless of the page context.
   ============================================================ */

/* Icon-buttons (penna + soptunna) */
.pt-alert-card button.pt-alert-card__action,
.pt-alert-card a.pt-alert-card__action {
    width: 34px !important;
    height: 34px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: 1px solid var(--ptp-line) !important;
    color: var(--ptp-ink-mute) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font: inherit !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: grid !important;
    place-items: center !important;
    transition: color .12s, background .12s, border-color .12s !important;
}
.pt-alert-card button.pt-alert-card__action:hover,
.pt-alert-card button.pt-alert-card__action:focus,
.pt-alert-card button.pt-alert-card__action:focus-visible {
    color: var(--ptp-ink) !important;
    background: var(--ptp-card-soft) !important;
    border-color: var(--ptp-line-strong) !important;
    outline: none !important;
}
.pt-alert-card button.pt-alert-card__action--danger:hover,
.pt-alert-card button.pt-alert-card__action--danger:focus,
.pt-alert-card button.pt-alert-card__action--danger:focus-visible {
    color: var(--ptp-danger) !important;
    background: var(--ptp-danger-soft) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
}
.pt-alert-card .pt-alert-card__action svg {
    width: 16px !important;
    height: 16px !important;
    fill: none !important;
    stroke: currentColor !important;
    display: block !important;
}

/* Avbryt (ghost) / Spara bevakning (blå pill) */
.pt-alert-card button.pt-alert-card__btn {
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(17, 24, 39, 0.14) !important;
    background: var(--ptp-surface) !important;
    color: var(--ptp-ink) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    min-height: 40px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: color .12s, background .12s, border-color .12s !important;
}
.pt-alert-card button.pt-alert-card__btn:hover,
.pt-alert-card button.pt-alert-card__btn:focus {
    color: var(--ptp-ink) !important;
    background: var(--ptp-surface) !important;
    border-color: #9ca3af !important;
    outline: none !important;
}
/* Kanon-fokusringen vid tangentbordsnavigering. */
.pt-alert-card button.pt-alert-card__btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4) !important;
}
.pt-alert-card button.pt-alert-card__btn--primary {
    background: var(--ptp-accent-deep) !important;
    color: var(--ptp-surface) !important;
    border-color: var(--ptp-accent-deep) !important;
}
.pt-alert-card button.pt-alert-card__btn--primary:hover,
.pt-alert-card button.pt-alert-card__btn--primary:focus,
.pt-alert-card button.pt-alert-card__btn--primary:focus-visible {
    background: var(--ptp-accent-strong) !important;
    border-color: var(--ptp-accent-strong) !important;
    color: var(--ptp-surface) !important;
}

/* Mode-tabs (Vid sänkning / Totalpris) — pills, aktiv = blå-soft + blå 700 */
.pt-alert-card button.pt-alert-card__mode-tab {
    flex: 1 !important;
    padding: 6px 14px !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 999px !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ptp-ink-mute) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    min-height: 36px !important;
}
.pt-alert-card button.pt-alert-card__mode-tab:hover,
.pt-alert-card button.pt-alert-card__mode-tab:focus {
    color: var(--ptp-ink) !important;
    background: transparent !important;
    outline: none !important;
}
.pt-alert-card button.pt-alert-card__mode-tab:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4) !important;
}
.pt-alert-card button.pt-alert-card__mode-tab.is-active {
    background: var(--ptp-accent-tint) !important;
    color: var(--ptp-accent-strong) !important;
    font-weight: 700 !important;
}

/* Percent-pills (-5%, -10%, ...) */
.pt-alert-card button.pt-alert-card__percent-pill {
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 9px 16px !important;
    border-radius: 999px !important;
    border: 1px solid var(--ptp-line) !important;
    background: var(--ptp-surface) !important;
    color: var(--ptp-ink-soft) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    cursor: pointer !important;
    min-height: 38px !important;
    min-width: 60px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color .12s, background .12s, border-color .12s !important;
}
.pt-alert-card button.pt-alert-card__percent-pill:hover,
.pt-alert-card button.pt-alert-card__percent-pill:focus,
.pt-alert-card button.pt-alert-card__percent-pill:focus-visible {
    color: var(--ptp-ink) !important;
    border-color: var(--ptp-line-strong) !important;
    background: var(--ptp-surface) !important;
    outline: none !important;
}
.pt-alert-card button.pt-alert-card__percent-pill.is-active {
    border-color: var(--ptp-accent-deep) !important;
    background: var(--ptp-accent-deep) !important;
    color: var(--ptp-surface) !important;
}

/* Expander (Visa N produkter / chevron) */
.pt-alert-card button.pt-alert-card__expander {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 0 0 !important;
    margin: 2px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--ptp-line) !important;
    background: transparent !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ptp-ink-soft) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
    text-align: left !important;
    width: 100% !important;
    border-radius: 0 !important;
    min-height: 0 !important;
}
.pt-alert-card button.pt-alert-card__expander:hover,
.pt-alert-card button.pt-alert-card__expander:focus,
.pt-alert-card button.pt-alert-card__expander:focus-visible {
    color: var(--ptp-ink) !important;
    background: transparent !important;
    outline: none !important;
}

/* Number input (Astra applies its own padding + line-height on text inputs
   inside forms; lock our values down so the field doesn't grow vertically). */
.pt-alert-card input.pt-alert-card__input,
.pt-alert-card input[type="number"].pt-alert-card__input {
    font: inherit !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--ptp-line) !important;
    background: var(--ptp-surface) !important;
    color: var(--ptp-ink) !important;
    min-height: 44px !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
}
.pt-alert-card input.pt-alert-card__input:focus,
.pt-alert-card input[type="number"].pt-alert-card__input:focus {
    outline: 0 !important;
    border-color: var(--ptp-accent-deep) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4) !important; /* kanon-fokusring */
}

/* Title link — kill the theme underline on hover */
.pt-alert-card .pt-alert-card__title a,
.pt-alert-card .pt-alert-card__title a:hover,
.pt-alert-card .pt-alert-card__title a:focus,
.pt-alert-card .pt-alert-card__product-name,
.pt-alert-card .pt-alert-card__product-name:hover,
.pt-alert-card .pt-alert-card__product-name:focus {
    text-decoration: none !important;
    box-shadow: none !important;
}

/* "Se butiker"-pillen är en <a> — armor mot temats länkstilar. */
.pt-alert-card a.pt-alert-card__cta {
    background: var(--ptp-accent-deep) !important;
    color: var(--ptp-surface) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 7px 16px !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}
.pt-alert-card a.pt-alert-card__cta:hover,
.pt-alert-card a.pt-alert-card__cta:focus {
    background: var(--ptp-accent-strong) !important;
    color: var(--ptp-surface) !important;
    text-decoration: none !important;
    outline: none !important;
}
.pt-alert-card a.pt-alert-card__cta:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4) !important;
}

/* Basket product list is a real <ul> — Astra's `.entry-content ul` /
   `.entry-content li` (0,1,1) beats our single-class reset (0,1,0), so the
   list picked up the theme's list indent (padding/margin-left) on stage.
   Element-qualified selectors + !important win in every page context.
   No `display` here on purpose: the `[hidden]`-rule above must keep
   beating the base `display: flex`. */
.pt-alert-card ul.pt-alert-card__products {
    list-style: none !important;
    padding: 10px 0 0 !important;
    margin: -2px 0 0 !important;
}
.pt-alert-card ul.pt-alert-card__products li.pt-alert-card__product {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Title is a <p> (was <h3>). Astra resets `.entry-content p { margin: 0 0
   1.5em }` with higher specificity than our base class rule — armor the
   typography here so the title doesn't pick up a 1.5em bottom-margin
   inside WP entry-content wrappers. */
.pt-alert-card p.pt-alert-card__title {
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    line-height: 1.35 !important;
}
.pt-alert-card--sm p.pt-alert-card__title { font-size: 14px !important; }
.pt-alert-card--xs p.pt-alert-card__title { font-size: 13px !important; }

@media (max-width: 640px) {
    .pt-alert-card button.pt-alert-card__action {
        width: 30px !important;
        height: 30px !important;
        border-radius: 8px !important;
        padding: 0 !important;
    }
    .pt-alert-card .pt-alert-card__action svg {
        width: 14px !important;
        height: 14px !important;
    }
    .pt-alert-card button.pt-alert-card__btn {
        font-size: 14px !important;
        padding: 12px 22px !important;
        min-height: 44px !important;
    }
    .pt-alert-card button.pt-alert-card__mode-tab {
        font-size: 12px !important;
        padding: 10px 10px !important;
        min-height: 40px !important;
    }
}

@media (max-width: 380px) {
    .pt-alert-card button.pt-alert-card__btn { width: 100% !important; }
}