/* ==========================================================================
   AUCTION-ORIGIN IMAGE MASKING (scene-swap)
   ========================================================================== */

/* Auction-origin image masking (scene-swap) */
.mp-origin-warn { background: #fff4e5; border: 1px solid #f0c38e; color: #7a4a12; border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; font-size: 13px; line-height: 1.4; }
.mp-img-preview-item, .mp-img-item { position: relative; }
.mp-img-auction-badge { position: absolute; top: 6px; left: 6px; background: var(--sbv2-rust, #c0392b); color: #fff; font-size: 10px; font-weight: 600; line-height: 1; padding: 4px 6px; border-radius: 4px; letter-spacing: .02em; pointer-events: none; z-index: 2; }
.is-auction-src { outline: 2px solid var(--sbv2-rust, #c0392b); outline-offset: -2px; }
.mp-origin-warn-strong { background: #fdecea; border-color: #e0a3a0; color: #8a1f17; margin-bottom: 16px; }

/* ==========================================================================
   VIEW ORDER — "Udskriv ordre" print button + @media print rules
   ========================================================================== */

/* Row that wraps the print + share buttons — sits between WC actions and order-contact-strip */
.order-print-row {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: var(--space-md);
}

/* "Udskriv ordre" button — secondary/outline style matching the site aesthetic */
.btn-print-order {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.4375rem 0.875rem;
    min-height: 36px;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--sbv2-ink-2, #444444);
    background: var(--sbv2-paper, #FFFFFF);
    border: 1px solid var(--sbv2-line-strong, #CCCCCC);
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--duration) var(--ease),
                border-color var(--duration) var(--ease),
                background var(--duration) var(--ease);
}

.btn-print-order:hover {
    color: var(--sbv2-ink, #111111);
    border-color: var(--sbv2-muted-2, #696860);
    background: var(--sbv2-bg, #F4F4F4);
}

.btn-print-order:focus-visible {
    outline: 2px solid var(--sbv2-ink, #111111);
    outline-offset: 2px;
    border-radius: var(--radius-md);
    color: var(--sbv2-ink, #111111);
}

@media (prefers-reduced-motion: reduce) {
    .btn-print-order {
        transition: none;
    }
}

/* "Del ordre" share button — same outline style as print button.
   "Hent kvittering" download button (#1145) reuses the same rules. */
.btn-share-order,
.btn-download-invoice {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.4375rem 0.875rem;
    min-height: 36px;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--sbv2-ink-2, #444444);
    background: var(--sbv2-paper, #FFFFFF);
    border: 1px solid var(--sbv2-line-strong, #CCCCCC);
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--duration) var(--ease),
                border-color var(--duration) var(--ease),
                background var(--duration) var(--ease);
}

.btn-share-order:hover,
.btn-download-invoice:hover {
    color: var(--sbv2-ink, #111111);
    border-color: var(--sbv2-muted-2, #696860);
    background: var(--sbv2-bg, #F4F4F4);
}

.btn-share-order:focus-visible,
.btn-download-invoice:focus-visible {
    outline: 2px solid var(--sbv2-ink, #111111);
    outline-offset: 2px;
    border-radius: var(--radius-md);
    color: var(--sbv2-ink, #111111);
}

.btn-download-invoice:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* "Kvittering er ved at blive klargjort" fallback (#57) — same slot as the
   download button when no invoice GUID exists yet, but not clickable. */
.order-invoice-pending {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.4375rem 0.875rem;
    min-height: 36px;
    font-size: 0.8125rem;
    color: var(--sbv2-muted-2, #696860);
}

@media (prefers-reduced-motion: reduce) {
    .btn-share-order,
    .btn-download-invoice {
        transition: none;
    }
}

/* Order share toast — clipboard confirmation */
.order-share-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(0.5rem);
    background: var(--sbv2-ink, #111111);
    color: var(--sbv2-paper, #FFFFFF);
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-md);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.order-share-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .order-share-toast {
        transition: none;
    }
}

/* ── @media print — clean order printout ── */
@media print {
    /* Hide all navigation and chrome */
    .ops-topbar,
    .ops-sidebar,
    .wc-account-sidebar,
    .account-nav,
    .my-account-nav,
    .breadcrumb,
    nav,
    footer,
    .order-print-row,
    .btn-print-order,
    .btn-share-order,
    .btn-download-invoice,
    .order-share-toast,
    .order-delivery-hint,
    .order-completed-banner,
    .order-cancelled-notice,
    .order-what-next,
    .order-contact-strip,
    .order-continue-shopping,
    .order-actions-button,
    .woocommerce-MyAccount-navigation {
        display: none !important;
    }

    /* Full-width content area — remove sidebar grid */
    body,
    .ops-layout,
    .woocommerce-MyAccount-content,
    .account-page,
    .woocommerce-account .woocommerce {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    /* Typography: black on white, readable font size */
    body,
    p,
    td,
    th,
    address {
        color: #000 !important;
        background: #fff !important;
        font-size: 11pt !important;
    }

    /* Strip decorative box-shadows and backgrounds from cards */
    .woocommerce-order-details,
    .woocommerce-customer-details {
        border: 1px solid #ccc !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin-bottom: 16pt !important;
    }

    /* Intro status paragraph: keep border-left accent, strip background */
    .woocommerce-MyAccount-content > p:first-child {
        background: none !important;
        border-left: 3px solid #666 !important;
        font-size: 10pt !important;
        padding: 8pt 12pt !important;
        margin-bottom: 12pt !important;
    }

    /* Order table: full width, no overflow clipping */
    .woocommerce-table--order-details {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    .woocommerce-table--order-details th,
    .woocommerce-table--order-details td {
        border: 1px solid #ccc !important;
        padding: 6pt 8pt !important;
        font-size: 10pt !important;
    }

    /* Customer address columns: side by side if possible */
    .woocommerce-customer-details .col-1,
    .woocommerce-customer-details .col-2 {
        width: 48% !important;
        display: inline-block !important;
        vertical-align: top !important;
        padding: 8pt !important;
    }

    /* Remove link underlines except on address/contact items */
    a {
        text-decoration: none !important;
        color: #000 !important;
    }

    /* Order notes: retain if present */
    .woocommerce-OrderUpdates-title {
        font-size: 12pt !important;
        margin-top: 16pt !important;
    }
}

/* ==========================================================================
   VIEW ORDER — print + share buttons: full-width 44px touch targets on mobile
   ========================================================================== */
@media (max-width: 480px) {
    /* Stack the two buttons side-by-side filling the row; wrap if both can't fit */
    .order-print-row {
        flex-wrap: wrap;
    }

    /* Each button grows to fill available width; 44px min-height meets WCAG 2.5.5 */
    .btn-print-order,
    .btn-share-order,
    .btn-download-invoice {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 44px;
        font-size: 0.875rem;
    }
}

/* ==========================================================================
   WISHLIST — Reserved item: subtle amber-tinted visual state
   Shows that the item is taken but not yet sold — milder than the sold treatment.
   ========================================================================== */

/* Warm amber desaturation on the thumbnail — product is still in the store but held */
.wishlist-item--reserved .wishlist-item-image img {
    filter: sepia(20%) saturate(80%);
    opacity: 0.85;
}

/* Suppress hover lift so the card feels "unavailable" */
.wishlist-item--reserved:hover {
    box-shadow: none;
}

/* "Reserveret" hover overlay on reserved wishlist item images — pointer devices only */
@media (hover: hover) {
    .wishlist-item--reserved .wishlist-item-image {
        position: relative;
    }

    .wishlist-item--reserved .wishlist-item-image::after {
        content: 'Reserveret';
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(146, 64, 14, 0.38);
        color: var(--sbv2-amber-soft, #fef3c7);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0;
        transition: opacity var(--duration-slow) var(--ease);
        pointer-events: none;
    }

    .wishlist-item--reserved:hover .wishlist-item-image::after {
        opacity: 1;
    }
}

/* Send-til-Dinero modal — side-by-side PDF/form split (2026-07-15) */
.uisd-split {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.uisd-col-pdf {
    flex: 1.86;
    min-width: 0;
}

.uisd-col-form {
    flex: 1;
    min-width: 220px;
}

@media (max-width: 768px) {
    .uisd-split {
        flex-direction: column;
    }
}

/* Lightbox — account context (my-products detail panel).
   Opt-in via TMLightbox.open(..., { overlayClass: 'lb-account' }).
   Base chrome lives in lightbox.css (shared with storefront); this scopes
   the #465 control-chrome/contrast/tap-target fixes to the account surface
   only, per the HARD SCOPE fence (lightbox.css itself is shared storefront+
   account and out of this agent's remit). See issue #465. */
.lightbox-overlay.lb-account {
    background: rgba(0, 0, 0, 0.85);
}

.lightbox-overlay.lb-account .lb-prev,
.lightbox-overlay.lb-account .lb-next,
.lightbox-overlay.lb-account .lb-close {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50%;
    opacity: 0.9;
    font-size: 1.25rem;
    transition: background var(--duration) var(--ease), opacity var(--duration) var(--ease);
}

.lightbox-overlay.lb-account .lb-prev:hover,
.lightbox-overlay.lb-account .lb-next:hover,
.lightbox-overlay.lb-account .lb-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.65);
}

.lightbox-overlay.lb-account .lb-prev:focus-visible,
.lightbox-overlay.lb-account .lb-next:focus-visible,
.lightbox-overlay.lb-account .lb-close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;
}

.lightbox-overlay.lb-account .lb-counter {
    background: rgba(0, 0, 0, 0.45);
    padding: 2px 10px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.9);
}

/* "Mine forespørgsler" negotiation-status stepper (Sendt / Under
   forhandling / Afsluttet) — display-only, reads existing request state. */
.tmf-stepper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px 0 10px;
    font-size: 0.85rem;
}

.tmf-step {
    color: #999;
}

.tmf-step--done {
    color: #666;
}

.tmf-step--current {
    color: #1a1a1a;
    font-weight: 600;
}

.tmf-step-sep {
    color: #ccc;
}

.tmf-step-outcome {
    margin-left: 4px;
    color: #666;
    font-style: italic;
}

/* Horizontal-scroll fallback so the counter-offer action cell (Accept/
   Decline/price/note/photo/Counter) stays reachable on narrow viewports
   instead of being clipped by the account-shell's overflow-x:hidden
   ancestor — same pattern already proven in .sbv2-lines-wrap. */
.tmf-lines-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* tresser-woo-opus#43 (dealer D): line thumbnail + deep-link scroll target */
.tmf-thumb {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}

.tmf-request {
    scroll-margin-top: 80px;
}

.notif-pref-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 8px);
}

.notif-pref-row label {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
    font-weight: 400;
    cursor: pointer;
}

.notif-pref-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--sbv2-ink, #1a1a1a);
}

/* "Bestil igen" reorder action strip on a retail order row (item 175) */
.order-row-actions {
    padding: 0.375rem var(--space-lg) 0.5rem calc(48px + var(--space-lg) + var(--space-md));
    border-bottom: 1px solid var(--sbv2-tint, #EEEEEE);
    background: var(--sbv2-bg, #F4F4F4);
}

.order-reorder-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sbv2-ink, #111111);
    background: none;
    border: 1px solid var(--sbv2-tint, #DDDDDD);
    border-radius: var(--radius-sm, 4px);
    padding: 6px 12px;
    cursor: pointer;
    transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.order-reorder-btn:hover:not(.is-loading) {
    background: var(--sbv2-paper, #FFFFFF);
    border-color: var(--sbv2-ink, #111111);
}

.order-reorder-btn:focus-visible {
    outline: 2px solid var(--sbv2-ink, #111111);
    outline-offset: 2px;
}

.order-reorder-btn.is-loading {
    opacity: 0.6;
    cursor: default;
}

@media (max-width: 768px) {
    .order-row-actions {
        padding: 0.375rem var(--space-md) 0.5rem calc(40px + var(--space-md) + var(--space-sm));
    }
}

/* Toast for the reorder action's error/partial-add feedback */
.reorder-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    z-index: 9000;
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    background: var(--sbv2-ink, #111111);
    color: var(--sbv2-paper, #FFFFFF);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.reorder-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Mine anmeldelser (backlog item 276) — reuses shop.css's .review-star/
   .review-item card look (shop.css itself isn't enqueued on account pages,
   so the shared classnames are re-declared here) plus its own edit-form. */
.my-reviews-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
}

.review-item {
    padding: var(--space-md);
    background: var(--sbv2-bg, #F4F4F4);
    border-radius: var(--radius-md);
}

.review-stars {
    display: inline-flex;
    letter-spacing: 1px;
}

.review-star {
    color: var(--sbv2-muted-2, #AAAAAA);
}

.review-star.is-filled {
    color: #e0a527;
}

.review-stars--small {
    font-size: 0.8125rem;
}

.review-item-date {
    color: var(--sbv2-muted, #777777);
    font-size: 0.8125rem;
}

.review-item-content {
    margin-top: var(--space-xs);
    font-size: 0.9375rem;
    color: var(--sbv2-ink, #111111);
}

.my-review-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.my-review-product-link {
    font-weight: 500;
    color: inherit;
    text-decoration: none;
}

.my-review-product-link:hover {
    text-decoration: underline;
}

.my-review-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: 0.25rem;
}

.my-review-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.my-review-edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.my-review-edit-form label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.my-review-edit-form select,
.my-review-edit-form textarea {
    font: inherit;
    padding: var(--space-sm);
    border: 1px solid var(--sbv2-tint, #EEEEEE);
    border-radius: var(--radius-sm);
    resize: vertical;
}

/* tresser-woo-opus#50: unticked "Giv mig besked, hvis den bliver ledig" on inquiry forms */
.tresser-notify-optin label { display: flex; align-items: flex-start; gap: .5rem; font-size: .9rem; line-height: 1.4; cursor: pointer; }
.tresser-notify-optin input[type="checkbox"] { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin: .1rem 0 0; }