/*!
 * lyra-bt-b2b-blocks.css
 *
 * Styles for: Quick Order SKU Table, Tiered Bulk Pricing, RFQ Hybrid,
 * PDF Data Sheet Portal, Multi-User Approval.
 *
 * Includes the .lyra-bt-lazy-loaded fade-in transition used by the PDF
 * Portal (and reusable by AR Viewer / Hotspot Explorer next batch).
 */

.lyra-bt-qos, .lyra-bt-tbp, .lyra-bt-rfq, .lyra-bt-pdfp, .lyra-bt-mua {
    --lyra-bt-b2b-text:       #0f172a;
    --lyra-bt-b2b-text-dim:   #64748b;
    --lyra-bt-b2b-surface:    #ffffff;
    --lyra-bt-b2b-border:     #e2e8f0;
    --lyra-bt-b2b-radius:     12px;
    --lyra-bt-b2b-primary:    #1d4ed8;
    --lyra-bt-b2b-primary-h:  #1e40af;
    --lyra-bt-b2b-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05);
    --lyra-bt-b2b-green:      #047857;
    --lyra-bt-b2b-red:        #b91c1c;
    --lyra-bt-b2b-amber-bg:   #fef3c7;
    --lyra-bt-b2b-amber-fg:   #92400e;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--lyra-bt-b2b-text);
}

/* ─────────────────────────────────────────────────────────────────
 *  Lazy-render fade-in (shared utility class)
 * ───────────────────────────────────────────────────────────────── */

[data-lyra-bt-lazy] {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease;
}
.lyra-bt-lazy-loaded {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ─────────────────────────────────────────────────────────────────
 *  1. Quick Order SKU Table
 * ───────────────────────────────────────────────────────────────── */

.lyra-bt-qos {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 36px);
    background: var(--lyra-bt-b2b-surface);
    border: 1px solid var(--lyra-bt-b2b-border);
    border-radius: var(--lyra-bt-b2b-radius);
    box-shadow: var(--lyra-bt-b2b-shadow-sm);
}
.lyra-bt-qos-header { margin-bottom: 16px; }
.lyra-bt-qos-title {
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    margin: 0 0 4px;
}
.lyra-bt-qos-intro {
    margin: 0;
    color: var(--lyra-bt-b2b-text-dim);
    font-size: 14px;
    line-height: 1.4;
}
.lyra-bt-qos-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px;
}
.lyra-bt-qos-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.lyra-bt-qos-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lyra-bt-b2b-text-dim);
    border-bottom: 1px solid var(--lyra-bt-b2b-border);
}
.lyra-bt-qos-th-sku    { width: 50%; }
.lyra-bt-qos-th-qty    { width: 120px; }
.lyra-bt-qos-th-status { width: auto; }
.lyra-bt-qos-row td {
    padding: 6px 6px;
    border-bottom: 1px solid #f1f5f9;
}
.lyra-bt-qos-sku, .lyra-bt-qos-qty {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--lyra-bt-b2b-border);
    border-radius: 6px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    color: var(--lyra-bt-b2b-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lyra-bt-qos-sku { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.lyra-bt-qos-sku:focus, .lyra-bt-qos-qty:focus {
    outline: 0;
    border-color: var(--lyra-bt-b2b-primary);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}
.lyra-bt-qos-status-cell {
    font-size: 13px;
    color: var(--lyra-bt-b2b-text-dim);
}
.lyra-bt-qos-status-cell[data-status="ok"]    { color: var(--lyra-bt-b2b-green); }
.lyra-bt-qos-status-cell[data-status="error"] { color: var(--lyra-bt-b2b-red);   }
.lyra-bt-qos-status-icon {
    margin-right: 4px;
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle;
}
.lyra-bt-qos-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.lyra-bt-qos-btn {
    padding: 12px 24px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--lyra-bt-b2b-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
    -webkit-appearance: none;
    appearance: none;
}
.lyra-bt-qos-btn:hover:not(:disabled)  { background: var(--lyra-bt-b2b-primary-h); }
.lyra-bt-qos-btn:active:not(:disabled) { transform: translateY(1px); }
.lyra-bt-qos-btn:disabled              { opacity: 0.55; cursor: not-allowed; }
.lyra-bt-qos-summary {
    font-size: 13px;
    color: var(--lyra-bt-b2b-text-dim);
}

/* ─────────────────────────────────────────────────────────────────
 *  2. Tiered Bulk Pricing
 * ───────────────────────────────────────────────────────────────── */

.lyra-bt-tbp {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 32px);
    background: var(--lyra-bt-b2b-surface);
    border: 1px solid var(--lyra-bt-b2b-border);
    border-radius: var(--lyra-bt-b2b-radius);
    box-shadow: var(--lyra-bt-b2b-shadow-sm);
}
.lyra-bt-tbp-header { margin-bottom: 12px; }
.lyra-bt-tbp-title {
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 700;
    margin: 0;
}
.lyra-bt-tbp-subtitle {
    font-size: 13px;
    color: var(--lyra-bt-b2b-text-dim);
    margin-top: 2px;
}
.lyra-bt-tbp-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    font-size: 14px;
}
.lyra-bt-tbp-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lyra-bt-b2b-text-dim);
    border-bottom: 1px solid var(--lyra-bt-b2b-border);
}
.lyra-bt-tbp-tier td {
    padding: 10px;
    border-bottom: 1px solid #f1f5f9;
}
.lyra-bt-tbp-tier.is-active {
    background: #ecfdf5;
}
.lyra-bt-tbp-tier.is-active td {
    border-bottom-color: #d1fae5;
}
.lyra-bt-tbp-mq {
    display: inline-block;
    padding: 2px 8px;
    background: #f1f5f9;
    border-radius: 999px;
    font-weight: 600;
}
.lyra-bt-tbp-tier.is-active .lyra-bt-tbp-mq {
    background: var(--lyra-bt-b2b-green);
    color: #fff;
}
.lyra-bt-tbp-calc {
    background: #f8fafc;
    padding: 16px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lyra-bt-tbp-qty-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lyra-bt-b2b-text-dim);
}
.lyra-bt-tbp-qty {
    width: 120px;
    padding: 10px 12px;
    border: 1px solid var(--lyra-bt-b2b-border);
    border-radius: 6px;
    background: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--lyra-bt-b2b-text);
}
.lyra-bt-tbp-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lyra-bt-tbp-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
    color: var(--lyra-bt-b2b-text-dim);
}
.lyra-bt-tbp-row strong {
    color: var(--lyra-bt-b2b-text);
    font-weight: 700;
}
.lyra-bt-tbp-row-total {
    border-top: 1px solid var(--lyra-bt-b2b-border);
    padding-top: 6px;
    margin-top: 4px;
    font-size: 15px;
    color: var(--lyra-bt-b2b-text);
    font-weight: 600;
}
.lyra-bt-tbp-btn {
    padding: 12px 24px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--lyra-bt-b2b-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    align-self: flex-start;
    transition: background .15s ease, transform .1s ease;
}
.lyra-bt-tbp-btn:hover:not(:disabled)  { background: var(--lyra-bt-b2b-primary-h); }
.lyra-bt-tbp-btn:active:not(:disabled) { transform: translateY(1px); }
.lyra-bt-tbp-btn:disabled              { opacity: 0.55; cursor: not-allowed; }

/* ─────────────────────────────────────────────────────────────────
 *  3. RFQ Hybrid
 * ───────────────────────────────────────────────────────────────── */

.lyra-bt-rfq {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 36px);
    background: var(--lyra-bt-b2b-surface);
    border: 1px solid var(--lyra-bt-b2b-border);
    border-radius: var(--lyra-bt-b2b-radius);
    box-shadow: var(--lyra-bt-b2b-shadow-sm);
}
.lyra-bt-rfq-header { margin-bottom: 16px; }
.lyra-bt-rfq-title {
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    margin: 0 0 6px;
}
.lyra-bt-rfq-product {
    font-size: 13px;
    color: var(--lyra-bt-b2b-text-dim);
    margin-bottom: 6px;
}
.lyra-bt-rfq-intro {
    margin: 0;
    color: var(--lyra-bt-b2b-text-dim);
    font-size: 14px;
    line-height: 1.5;
}
.lyra-bt-rfq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.lyra-bt-rfq-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lyra-bt-rfq-field-full {
    grid-column: 1 / -1;
}
.lyra-bt-rfq-field > span {
    font-size: 13px;
    font-weight: 600;
    color: var(--lyra-bt-b2b-text);
}
.lyra-bt-rfq-field em {
    font-style: normal;
    color: var(--lyra-bt-b2b-red);
}
.lyra-bt-rfq-field input,
.lyra-bt-rfq-field textarea {
    padding: 10px 12px;
    border: 1px solid var(--lyra-bt-b2b-border);
    border-radius: 6px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    color: var(--lyra-bt-b2b-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lyra-bt-rfq-field input:focus,
.lyra-bt-rfq-field textarea:focus {
    outline: 0;
    border-color: var(--lyra-bt-b2b-primary);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}
.lyra-bt-rfq-field.is-error input,
.lyra-bt-rfq-field.is-error textarea {
    border-color: var(--lyra-bt-b2b-red);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}
.lyra-bt-rfq-btn {
    padding: 14px 28px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--lyra-bt-b2b-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}
.lyra-bt-rfq-btn:hover:not(:disabled)  { background: var(--lyra-bt-b2b-primary-h); }
.lyra-bt-rfq-btn:active:not(:disabled) { transform: translateY(1px); }
.lyra-bt-rfq-btn:disabled              { opacity: 0.55; cursor: not-allowed; }
.lyra-bt-rfq-status {
    margin-top: 10px;
    font-size: 13px;
    color: var(--lyra-bt-b2b-text-dim);
    min-height: 1.2em;
}
.lyra-bt-rfq-status[data-kind="success"] { color: var(--lyra-bt-b2b-green); }
.lyra-bt-rfq-status[data-kind="error"]   { color: var(--lyra-bt-b2b-red); }
.lyra-bt-rfq-success {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    color: var(--lyra-bt-b2b-green);
}
.lyra-bt-rfq-success .dashicons {
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
}
.lyra-bt-rfq-success p {
    margin: 0;
    color: var(--lyra-bt-b2b-text);
    font-size: 14px;
    line-height: 1.5;
}
@media (max-width: 640px) {
    .lyra-bt-rfq-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────
 *  4. PDF Data Sheet Portal
 * ───────────────────────────────────────────────────────────────── */

.lyra-bt-pdfp {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 36px);
}
.lyra-bt-pdfp-header { margin-bottom: 16px; }
.lyra-bt-pdfp-title {
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 700;
    margin: 0 0 4px;
}
.lyra-bt-pdfp-intro {
    margin: 0;
    color: var(--lyra-bt-b2b-text-dim);
    font-size: 14px;
    line-height: 1.5;
}
.lyra-bt-pdfp-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--lyra-bt-pdf-cols-desktop, 3), 1fr);
    gap: clamp(12px, 2vw, 18px);
}
.lyra-bt-pdfp-card {
    background: var(--lyra-bt-b2b-surface);
    border: 1px solid var(--lyra-bt-b2b-border);
    border-radius: var(--lyra-bt-b2b-radius);
    box-shadow: var(--lyra-bt-b2b-shadow-sm);
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}
.lyra-bt-pdfp-card:hover {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}
.lyra-bt-pdfp-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    color: inherit;
    text-decoration: none;
}
.lyra-bt-pdfp-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fee2e2;
    color: var(--lyra-bt-b2b-red);
}
.lyra-bt-pdfp-icon .dashicons {
    font-size: 28px !important;
    width: 28px !important;
    height: 28px !important;
}
.lyra-bt-pdfp-body {
    flex: 1;
    min-width: 0;
}
.lyra-bt-pdfp-kind {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lyra-bt-b2b-text-dim);
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 4px;
}
.lyra-bt-pdfp-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--lyra-bt-b2b-text);
    line-height: 1.3;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.lyra-bt-pdfp-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--lyra-bt-b2b-text-dim);
}
.lyra-bt-pdfp-meta-format { font-weight: 600; }
.lyra-bt-pdfp-download {
    flex-shrink: 0;
    color: var(--lyra-bt-b2b-text-dim);
    transition: color .15s ease;
}
.lyra-bt-pdfp-link:hover .lyra-bt-pdfp-download {
    color: var(--lyra-bt-b2b-primary);
}
.lyra-bt-pdfp-download .dashicons {
    font-size: 22px !important;
    width: 22px !important;
    height: 22px !important;
}

@media (max-width: 640px) {
    .lyra-bt-pdfp-grid { grid-template-columns: repeat(var(--lyra-bt-pdf-cols-mobile, 1), 1fr); }
}

/* ─────────────────────────────────────────────────────────────────
 *  5. Multi-User Approval
 * ───────────────────────────────────────────────────────────────── */

.lyra-bt-mua {
    max-width: 800px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 32px);
    background: var(--lyra-bt-b2b-surface);
    border: 1px solid var(--lyra-bt-b2b-border);
    border-radius: var(--lyra-bt-b2b-radius);
    box-shadow: var(--lyra-bt-b2b-shadow-sm);
}
.lyra-bt-mua-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.lyra-bt-mua-title {
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 700;
    margin: 0;
}
.lyra-bt-mua-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 700;
    background: var(--lyra-bt-b2b-amber-bg);
    color: var(--lyra-bt-b2b-amber-fg);
    border-radius: 999px;
}
.lyra-bt-mua-message,
.lyra-bt-mua-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    background: #f8fafc;
    border-radius: 10px;
    color: var(--lyra-bt-b2b-text-dim);
    font-size: 14px;
}
.lyra-bt-mua-message .dashicons,
.lyra-bt-mua-empty .dashicons {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
}
.lyra-bt-mua-empty .dashicons {
    color: var(--lyra-bt-b2b-green);
}
.lyra-bt-mua-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lyra-bt-mua-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    flex-wrap: wrap;
}
.lyra-bt-mua-item-body {
    flex: 1;
    min-width: 200px;
}
.lyra-bt-mua-item-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--lyra-bt-b2b-text);
    line-height: 1.3;
}
.lyra-bt-mua-item-meta {
    margin-top: 4px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--lyra-bt-b2b-text-dim);
}
.lyra-bt-mua-item-meta strong {
    color: var(--lyra-bt-b2b-text);
    font-weight: 600;
}
.lyra-bt-mua-item-rationale {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--lyra-bt-b2b-text-dim);
}
.lyra-bt-mua-item-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--lyra-bt-b2b-text);
    flex-shrink: 0;
}
.lyra-bt-mua-item-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.lyra-bt-mua-btn {
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--lyra-bt-b2b-border);
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
    color: var(--lyra-bt-b2b-text);
    transition: background .15s ease;
}
.lyra-bt-mua-btn-approve { color: var(--lyra-bt-b2b-green); border-color: #a7f3d0; }
.lyra-bt-mua-btn-reject  { color: var(--lyra-bt-b2b-red);   border-color: #fecaca; }
.lyra-bt-mua-btn:disabled, .lyra-bt-mua-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}