/**
 * Linked Product metabox — Storelly control panel on the WooCommerce product
 * edit screen. Token-driven (see static/css/_tokens.css). Scoped under .spbwc-lp
 * so it never leaks into other product metaboxes.
 *
 * docs/SPEC_LINKED_PRODUCT_UX.md §5.
 */
.spbwc-lp {
    font-size: var(--text-md, 13px);
    color: var(--nbd-st-text, #1d2327);
}

.spbwc-lp__toggle,
.spbwc-lp-quote .storelly-form-field {
    margin: 0 0 var(--nbd-space-3, 12px);
}

.spbwc-lp__toggle label {
    font-weight: var(--font-semibold, 600);
}

/* ---- Mapped option card ---- */
.spbwc-lp-card {
    border: 1px solid var(--nbd-st-border-light, #dcdcde);
    border-radius: var(--nbd-radius-md, 8px);
    background: var(--nbd-st-bg-soft, #f6f7f7);
    box-shadow: var(--shadow-card);
    padding: var(--nbd-space-3, 12px) var(--nbd-space-4, 16px);
    margin: 0 0 var(--nbd-space-4, 16px);
}

.spbwc-lp-card__head {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-2, 8px);
    margin-bottom: var(--nbd-space-2, 8px);
}

.spbwc-lp-card__icon {
    color: var(--nbd-st-primary, #2271b1);
}

.spbwc-lp-card__title {
    font-weight: var(--font-semibold, 600);
    font-size: var(--text-lg, 14px);
    color: var(--nbd-st-text, #1d2327);
}

.spbwc-lp-card__id {
    margin-left: auto;
    background: var(--nbd-st-border-subtle, #f0f0f1);
    color: var(--nbd-st-text-soft, #50575e);
    border-radius: var(--nbd-radius-sm, 4px);
    padding: 1px var(--nbd-space-2, 8px);
    font-size: var(--text-sm, 11px);
}

.spbwc-lp-card__summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nbd-space-1, 4px) var(--nbd-space-4, 16px);
    margin-bottom: var(--nbd-space-2, 8px);
    color: var(--nbd-st-text-soft, #50575e);
}

.spbwc-lp-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-1, 4px);
}

.spbwc-lp-meta .dashicons {
    font-size: var(--st-icon-md);
    width: var(--st-icon-md);
    height: var(--st-icon-md);
    line-height: var(--st-icon-md);
}

.spbwc-lp-meta--designer {
    color: var(--nbd-st-text-brand, #1e40af);
    font-weight: var(--font-semibold, 600);
}

/* ---- Field chips ---- */
.spbwc-lp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nbd-space-1, 4px);
    margin-bottom: var(--nbd-space-3, 12px);
}

.spbwc-lp-chip {
    background: var(--st-brand-tint, #eff6ff);
    color: var(--nbd-st-text-brand, #1e40af);
    border: 1px solid var(--nbd-st-border-brand, #bfdbfe);
    border-radius: var(--nbd-radius-pill, 9999px);
    padding: 2px var(--nbd-space-2, 8px);
    font-size: var(--text-sm, 11px);
    line-height: 1.6;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spbwc-lp-chip--more {
    background: var(--nbd-st-border-subtle, #f0f0f1);
    color: var(--nbd-st-text-soft, #50575e);
    border-color: var(--nbd-st-border-light, #dcdcde);
}

/* ---- Shared badge ---- */
.spbwc-lp-shared {
    margin-bottom: var(--nbd-space-3, 12px);
}

.spbwc-lp-shared__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-1, 4px);
    background: var(--st-pill-warning-bg, #fed7aa);
    color: var(--st-pill-warning-text, #9a3412);
    border: 0;
    border-radius: var(--nbd-radius, 6px);
    padding: var(--nbd-space-1, 4px) var(--nbd-space-2, 8px);
    font-size: var(--text-base, 12px);
    font-weight: var(--font-semibold, 600);
    cursor: pointer;
    transition: var(--transition-fast, all 0.15s ease);
}

.spbwc-lp-shared__badge:hover {
    filter: brightness(0.97);
}

.spbwc-lp-shared__badge .dashicons {
    font-size: var(--st-icon-sm);
    width: var(--st-icon-sm);
    height: var(--st-icon-sm);
    line-height: 15px;
}

.spbwc-lp-shared__caret {
    transition: transform 0.15s ease;
}

.spbwc-lp-shared__badge[aria-expanded="true"] .spbwc-lp-shared__caret {
    transform: rotate(180deg);
}

.spbwc-lp-shared__list {
    margin: var(--nbd-space-2, 8px) 0 0 var(--nbd-space-1, 4px);
    padding: 0 0 0 18px;
    list-style: disc;
}

.spbwc-lp-shared__list li {
    margin: 2px 0;
}

/* ---- Actions ---- */
.spbwc-lp-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nbd-space-2, 8px);
}

.spbwc-lp-action {
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-1, 4px);
}

.spbwc-lp-action .dashicons {
    font-size: var(--st-icon-md);
    width: var(--st-icon-md);
    height: var(--st-icon-md);
    line-height: var(--st-icon-md);
}

.spbwc-lp-action--unlink {
    color: var(--nbd-color-danger, #dc2626);
    text-decoration: none;
    cursor: pointer;
    margin-left: auto;
}

.spbwc-lp-action--unlink:hover {
    color: var(--st-pill-danger-text, #991b1b);
    text-decoration: underline;
}

/* Keyboard focus affordance (WP strips default outline on some buttons). */
.spbwc-lp-action:focus-visible,
.spbwc-lp-shared__badge:focus-visible,
.spbwc-lp-swap__select:focus-visible {
    outline: 2px solid var(--st-brand, #1d4ed8);
    outline-offset: 1px;
}

.spbwc-lp-swap__select {
    max-width: 180px;
}

.spbwc-lp.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

/* Builder disabled → de-emphasise the mapped card / create CTA: the option
   won't render on the storefront until "Enable product builder" is on. */
.spbwc-lp.is-builder-off .spbwc-lp-card,
.spbwc-lp.is-builder-off .spbwc-lp-empty {
    opacity: 0.55;
}

/* Hint shown only while the builder is disabled. */
.spbwc-lp-card__off-hint {
    display: none;
    align-items: center;
    gap: var(--nbd-space-1, 4px);
    margin: 0 0 var(--nbd-space-2, 8px);
    color: var(--st-pill-warning-text, #9a3412);
    font-size: var(--text-base, 12px);
}
.spbwc-lp.is-builder-off .spbwc-lp-card__off-hint {
    display: flex;
}
.spbwc-lp-card__off-hint .dashicons {
    font-size: var(--st-icon-sm);
    width: var(--st-icon-sm);
    height: var(--st-icon-sm);
    line-height: 15px;
}

/* ---- Empty / create state ---- */
.spbwc-lp-empty {
    border: 1px dashed var(--nbd-st-border, #c3c4c7);
    border-radius: var(--nbd-radius-md, 8px);
    padding: var(--nbd-space-4, 16px);
    text-align: center;
    margin: 0 0 var(--nbd-space-4, 16px);
}

.spbwc-lp-empty__text {
    margin: 0 0 var(--nbd-space-3, 12px);
    color: var(--nbd-st-text-soft, #50575e);
}

/* ---- Quote sub-card ---- */
.spbwc-lp-quote {
    border-top: 1px solid var(--nbd-st-border-subtle, #f0f0f1);
    padding-top: var(--nbd-space-3, 12px);
}

.spbwc-lp-quote__head {
    font-weight: var(--font-semibold, 600);
    margin: 0 0 var(--nbd-space-2, 8px);
    color: var(--nbd-st-text, #1d2327);
}

.spbwc-lp-quote .description {
    display: block;
    margin-top: var(--nbd-space-1, 4px);
    color: var(--nbd-st-text-mute, #8c8f94);
}

/* Dim the quote display selector until "Enable request quote" is on. */
.spbwc-lp-quote.is-quote-off .spbwc-lp-quote__mode {
    opacity: 0.5;
}

.spbwc-lp-notice.inline {
    margin: 0 0 var(--nbd-space-4, 16px);
    padding: var(--nbd-space-2, 8px) var(--nbd-space-3, 12px);
}

.spbwc-lp-notice ul {
    margin: var(--nbd-space-1, 4px) 0 0 18px;
    list-style: disc;
}