/*!
 * Quick Questions to Supplier — "Ask Supplier" button + panel. Token-driven, RTL-aware.
 */
.qq-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer;
    border: 1px solid var(--rfq-border, #cbd5e1); color: var(--rfq-ink, #0f172a);
    background: var(--rfq-surface, #fff); border-radius: 8px; padding: 8px 14px;
    transition: border-color .15s ease, color .15s ease;
}
.qq-btn:hover { border-color: var(--rfq-accent, #2563eb); color: var(--rfq-accent, #2563eb); }
.qq-btn__icon { font-size: 18px; line-height: 1; }

.qq-modal { position: fixed; inset: 0; z-index: 10050; display: none; }
.qq-modal.is-open { display: block; }
body.qq-open { overflow: hidden; }
.qq-modal__overlay { position: absolute; inset: 0; background: rgba(15,23,42,.55); }
.qq-modal__dialog {
    position: relative; max-width: 480px; width: calc(100% - 32px); margin: 7vh auto; max-height: 84vh; overflow-y: auto;
    background: var(--rfq-surface, #fff); color: var(--rfq-ink, #0f172a); border-radius: 14px; padding: 24px;
    box-shadow: 0 20px 60px rgba(15,23,42,.3);
}
.qq-modal__close { position: absolute; top: 10px; inset-inline-end: 14px; border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: #64748b; }
.qq-modal__title { font-size: 18px; font-weight: 700; margin: 0 0 14px; padding-inline-end: 24px; }
.qq-supplier { font-size: 13px; color: #475569; margin: 0 0 12px; }
.qq-loading, .qq-error { color: #64748b; padding: 12px 0; }

.qq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.qq-chip {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
    font-size: 13px; line-height: 1.35; font-weight: 500;
    border: 1px solid var(--rfq-border, #e2e8f0); border-radius: 999px;
    background: var(--rfq-surface, #fff); color: var(--rfq-ink, #0f172a);
    padding: 7px 14px 7px 11px; cursor: pointer; position: relative; -webkit-user-select: none; user-select: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.qq-chip:hover { border-color: var(--rfq-accent, #2563eb); }
/* The whole pill is the control; hide the native checkbox (also defeats global input sizing) */
.qq-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; pointer-events: none; }
.qq-chip::before {
    content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
    border: 1.5px solid var(--rfq-border, #cbd5e1); background-position: center; background-repeat: no-repeat; background-size: 11px;
    transition: border-color .15s ease, background-color .15s ease;
}
.qq-chip:has(input:checked) { border-color: var(--rfq-accent, #2563eb); background: #eff6ff; color: var(--rfq-accent, #2563eb); }
.qq-chip:has(input:checked)::before {
    border-color: var(--rfq-accent, #2563eb); background-color: var(--rfq-accent, #2563eb);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.qq-chip:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(37,99,235,.15); }

.qq-textarea { width: 100%; border: 1px solid var(--rfq-border, #cbd5e1); border-radius: 8px; padding: 10px; font: inherit; }
.qq-textarea:focus { outline: none; border-color: var(--rfq-accent, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.qq-hint { font-size: 12px; color: #64748b; background: var(--rfq-muted, #f1f5f9); padding: 8px 10px; border-radius: 8px; margin-top: 8px; }

.qq-actions { margin-top: 14px; text-align: end; }
.qq-send { border: 0; border-radius: 8px; cursor: pointer; background: var(--rfq-accent, #2563eb); color: #fff; font-weight: 600; padding: 10px 18px; font-size: 14px; }
.qq-send:disabled { opacity: .7; cursor: progress; }
.qq-feedback { margin-top: 12px; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.qq-feedback--ok { background: #dcfce7; color: #166534; }
.qq-feedback--warn { background: #fef9c3; color: #854d0e; }