/**
 * Custom Order — storefront / My Account surfaces.
 *
 * Consumes the Printcart Stores v2.5 design tokens (`_tokens-storefront.css`,
 * `--nbd-*`) so the buyer-facing surfaces match the Printcart user-account design
 * system and are theme-overridable from one place. The `--co-*` aliases below map
 * the component's local names onto those tokens (with safe fallbacks) — change a
 * value once in the token file and every surface follows.
 *
 * Covers:
 *   - .spbwc-co-orderthumb design preview thumbnail on the order line item (D2)
 *   - .spbwc-co-action     "View" / "Download" / "Save" chips on line items (D1/D3)
 *   - .spbwc-saved-designs the My Account "Saved designs" tab card grid (M4)
 *
 * @package Storelly
 */

.spbwc-co-orderthumb,
.spbwc-co-action,
.spbwc-saved-designs {
    --co-accent:        var(--nbd-mb-primary, #2563eb);
    --co-accent-hover:  var(--nbd-mb-primary-pressed, #1d4ed8);
    --co-accent-text:   #ffffff;
    --co-text:          var(--nbd-mb-text, #1f2937);
    --co-muted:         var(--nbd-mb-text-soft, #6b7280);
    --co-border:        var(--nbd-mb-border, #e5e7eb);
    --co-border-strong: var(--nbd-mb-border-strong, #d1d5db);
    --co-bg:            var(--nbd-mb-bg, #ffffff);
    --co-bg-soft:       var(--nbd-mb-bg-soft, #f9fafb);
    --co-danger:        var(--nbd-color-error, #ef4444);
    --co-danger-soft:   var(--nbd-color-error-soft, #fee2e2);
    --co-danger-border: var(--nbd-color-error-border, #fca5a5);
    --co-radius:        var(--nbd-radius-xl, 12px);
    --co-transition:    var(--nbd-duration-normal, 220ms) var(--nbd-ease-out, ease-out);
}

/* ════════════════════════════════════════════════════════════════════════
   ORDER DETAIL — builder line item redesign
   Turns the default WooCommerce options list into a clean "design panel":
   a framed preview on the left, an aligned spec list on the right, and an
   action toolbar below. Scoped to the order-details table + builder rows only
   (rows that carry our action chips), so non-builder items are untouched.
   ════════════════════════════════════════════════════════════════════════ */
.woocommerce-table--order-details td.product-name { position: relative; }

/* Remove the legacy duplicate preview image (class-productbuilder-api
   spbwc_img_design_order_items) on rows that already show our framed thumbnail. */
.woocommerce-table--order-details tr:has(.spbwc-co-orderthumb) td.product-name > img {
    display: none !important;
}

/* Product title row sits above the panel. */
.woocommerce-table--order-details tr:has(.spbwc-co-action) td.product-name > a:first-child {
    font-weight: 600;
    font-size: 15px;
}
.woocommerce-table--order-details tr:has(.spbwc-co-action) .product-quantity {
    color: var(--co-muted);
    font-weight: 500;
}

/* ── Design preview thumbnail on the order line item (D2) ───────────────── */
.spbwc-co-orderthumb {
    display: inline-block;
    margin: 0 0 var(--nbd-space-2, 8px);
}
.spbwc-co-orderthumb img {
    display: block;
    max-width: 96px;
    height: auto;
    border: 1px solid var(--co-border);
    border-radius: var(--nbd-radius-md, 6px);
    background: var(--co-bg-soft);
}

/* On the order-details table, promote the thumbnail to a left-floated framed
   figure that the spec list flows beside. */
.woocommerce-table--order-details .spbwc-co-orderthumb {
    float: left;
    width: 150px;
    margin: var(--nbd-space-2, 8px) var(--nbd-space-4, 16px) var(--nbd-space-2, 8px) 0;
}
.woocommerce-table--order-details .spbwc-co-orderthumb img {
    max-width: 100%;
    padding: var(--nbd-space-2, 8px);
    border-radius: var(--nbd-radius-lg, 8px);
    box-shadow: var(--nbd-shadow-sm, 0 1px 2px 0 rgba(0,0,0,.05));
}

/* ── Options as a clean spec list ───────────────────────────────────────── */
.woocommerce-table--order-details tr:has(.spbwc-co-action) .wc-item-meta {
    list-style: none;
    margin: var(--nbd-space-2, 8px) 0 0;
    padding: 0;
}
.woocommerce-table--order-details tr:has(.spbwc-co-action) .wc-item-meta li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nbd-space-3, 12px);
    margin: 0;
    padding: 7px 0;
    border-bottom: 1px solid var(--nbd-mb-border-subtle, #f3f4f6);
    font-size: 13px;
}
.woocommerce-table--order-details tr:has(.spbwc-co-action) .wc-item-meta li:last-child {
    border-bottom: 0;
}
.woocommerce-table--order-details tr:has(.spbwc-co-action) .wc-item-meta .wc-item-meta-label {
    font-weight: 500;
    color: var(--co-muted);
    flex: 0 0 auto;
}
.woocommerce-table--order-details tr:has(.spbwc-co-action) .wc-item-meta li > p {
    margin: 0;
    text-align: right;
    color: var(--co-text);
    font-weight: 600;
}
/* Action toolbar clears the floated thumbnail. */
.woocommerce-table--order-details .spbwc-co-action { clear: both; }
.woocommerce-table--order-details .spbwc-co-action:first-of-type { margin-top: var(--nbd-space-3, 12px); }

/* ── Order line-item action chips (view / download / save) ──────────────── */
.spbwc-co-actions-label {
    display: block;
    margin: var(--nbd-space-3, 12px) 0 2px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--co-muted);
}
.spbwc-co-action {
    margin: var(--nbd-space-2, 8px) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--nbd-space-2, 8px);
}
.spbwc-co-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--st-btn-gap);
    padding: var(--st-btn-pad-md);
    font-size: var(--st-btn-font-md);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    color: var(--co-accent);
    background: var(--co-bg);
    border: 1px solid var(--co-accent);
    border-radius: var(--nbd-radius-full, 9999px);
    transition: background var(--co-transition),
                color var(--co-transition),
                box-shadow var(--co-transition);
}
.spbwc-co-chip:hover,
.spbwc-co-chip:focus {
    background: var(--co-accent);
    color: var(--co-accent-text);
    box-shadow: var(--nbd-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .25));
    text-decoration: none;
}
.spbwc-co-chip:focus-visible {
    outline: 2px solid var(--co-accent);
    outline-offset: 2px;
}
.spbwc-co-chip svg { width: var(--st-icon-sm); height: var(--st-icon-sm); flex: 0 0 auto; }
.spbwc-co-chip--ghost {
    color: var(--co-text);
    border-color: var(--co-border);
}
.spbwc-co-chip--ghost:hover,
.spbwc-co-chip--ghost:focus {
    background: var(--co-bg-soft);
    color: var(--co-text);
    border-color: var(--co-border-strong);
    box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════════════
   MY ACCOUNT FRAME — sidebar + content card (scoped to the account page only)
   Turns the plain WooCommerce My Account into a clean two-card layout using the
   Printcart tokens. Safe: only targets body.woocommerce-account.
   ════════════════════════════════════════════════════════════════════════ */
body.woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: var(--nbd-space-6, 24px);
    align-items: start;
}
/* Explicit placement so the sidebar is always the narrow left column and the
   content the wide right column, regardless of source order / notice wrappers. */
body.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
body.woocommerce-account .woocommerce-MyAccount-content    { grid-column: 2; grid-row: 1; }
body.woocommerce-account .woocommerce-notices-wrapper      { grid-column: 1 / -1; }
@media (max-width: 782px) {
    body.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
    body.woocommerce-account .woocommerce-MyAccount-navigation,
    body.woocommerce-account .woocommerce-MyAccount-content { grid-column: 1; grid-row: auto; }
}

/* Sidebar navigation as a card */
body.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none;
    width: auto;
    margin: 0;
    background: var(--co-bg, #fff);
    border: 1px solid var(--co-border);
    border-radius: var(--nbd-radius-xl, 12px);
    padding: var(--nbd-space-2, 8px);
    box-shadow: var(--nbd-shadow-sm, 0 1px 2px 0 rgba(0,0,0,.05));
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link a {
    display: block;
    padding: 10px 14px;
    border-radius: var(--nbd-radius-md, 6px);
    color: var(--co-text);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--co-transition), color var(--co-transition);
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover {
    background: var(--co-bg-soft);
    text-decoration: none;
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
    background: var(--nbd-mb-primary-soft, #dbeafe);
    color: var(--nbd-mb-primary-pressed, #1d4ed8);
    font-weight: 600;
}
/* Reset the block-theme's default 1em list-item padding so items sit tight in
   the card. Higher specificity (`…navigation ul li`) than
   woocommerce-blocktheme.css's `.woocommerce-account …navigation li`. */
body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}
/* Active item: a left accent bar on the soft-fill pill (logical → RTL-safe). */
body.woocommerce-account .woocommerce-MyAccount-navigation-link a { position: relative; }
body.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a::before {
    content: "";
    position: absolute;
    inset-block: 8px;
    inset-inline-start: 4px;
    width: 3px;
    border-radius: var(--nbd-radius-full, 9999px);
    background: var(--nbd-mb-primary, #2563eb);
}
/* Log out reads as a quiet, separated action at the foot of the list. */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-block-start: var(--nbd-space-2, 8px);
    padding-block-start: var(--nbd-space-2, 8px);
    border-block-start: 1px solid var(--nbd-mb-border-subtle, #f3f4f6);
}
/* Keyboard focus ring on nav links. */
body.woocommerce-account .woocommerce-MyAccount-navigation-link a:focus-visible {
    outline: none;
    box-shadow: var(--nbd-shadow-focus, 0 0 0 3px rgba(37, 99, 235, 0.25));
}

/* Content panel as a card */
body.woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: auto;
    margin: 0;
    background: var(--co-bg, #fff);
    border: 1px solid var(--co-border);
    border-radius: var(--nbd-radius-xl, 12px);
    padding: var(--nbd-space-6, 24px);
    box-shadow: var(--nbd-shadow-sm, 0 1px 2px 0 rgba(0,0,0,.05));
}

/* Orders / generic account tables */
body.woocommerce-account .woocommerce-orders-table,
body.woocommerce-account .shop_table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    margin: 0;
}
body.woocommerce-account .woocommerce-orders-table thead th,
body.woocommerce-account .shop_table thead th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--co-muted);
    padding: 10px 12px;
    border-bottom: 2px solid var(--co-border);
}
body.woocommerce-account .woocommerce-orders-table tbody td,
body.woocommerce-account .shop_table tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--nbd-mb-border-subtle, #f3f4f6);
    vertical-align: middle;
}

/* ── Saved designs tab ──────────────────────────────────────────────────── */
.spbwc-saved-designs h2 { margin: 0 0 var(--nbd-space-4, 16px); }
/* Empty state */
.spbwc-saved-designs > p:only-of-type {
    margin: 0;
    padding: var(--nbd-space-8, 32px) var(--nbd-space-4, 16px);
    text-align: center;
    color: var(--co-muted);
    background: var(--co-bg-soft);
    border: 1px dashed var(--co-border-strong);
    border-radius: var(--nbd-radius-xl, 12px);
}
.spbwc-saved-designs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--nbd-space-4, 16px);
}
.spbwc-saved-designs__item {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--co-border);
    border-radius: var(--co-radius);
    overflow: hidden;
    background: var(--co-bg);
    transition: box-shadow var(--co-transition), border-color var(--co-transition), transform var(--co-transition);
}
.spbwc-saved-designs__item:hover {
    box-shadow: var(--nbd-shadow-lg, 0 4px 12px 0 rgba(0, 0, 0, .08));
    border-color: var(--co-border-strong);
    transform: translateY(-2px);
}
.spbwc-saved-designs__thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--co-bg-soft);
    border-bottom: 1px solid var(--co-border);
    display: block;
}
.spbwc-saved-designs__body {
    display: flex;
    flex-direction: column;
    gap: var(--nbd-space-1, 4px);
    padding: var(--nbd-space-3, 12px) 14px 14px;
    flex: 1 1 auto;
}
.spbwc-saved-designs__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--co-text);
    line-height: 1.3;
}
.spbwc-saved-designs__date {
    font-size: 12px;
    color: var(--co-muted);
}
.spbwc-saved-designs__actions {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-2, 8px);
    margin-top: auto;
    padding-top: var(--nbd-space-3, 12px);
}
.spbwc-saved-designs__form { margin: 0; }
.spbwc-saved-designs__actions .button {
    margin: 0;
    cursor: pointer;
}
.spbwc-saved-designs__delete {
    background: var(--co-bg) !important;
    color: var(--co-danger) !important;
    border: 1px solid var(--co-danger-border) !important;
    box-shadow: none !important;
}
.spbwc-saved-designs__delete:hover {
    background: var(--co-danger-soft) !important;
}
.spbwc-saved-designs__unavailable {
    font-size: 12px;
    color: var(--co-muted);
    font-style: italic;
}

@media (max-width: 480px) {
    .spbwc-saved-designs__list { grid-template-columns: 1fr 1fr; gap: var(--nbd-space-3, 12px); }
}