/*
 * The quote list — the site dialog (`.ntw-rfq`), the inline form (same markup, inside
 * `ntw_quote_form`), the item chips, the header count and the toast.
 *
 * Ported from prototype/a-rung-suong/style.css (`.ntw-q*`), renamed `ntw-rfq` because
 * `ntw-q` is a prefix of every future `ntw-quote*` class. Depends on core.css for the
 * tokens, `.ntw-btn` and the `.ntw-field` colour bridge.
 *
 *   · White text only ever sits on `--green-btn` (4.97:1). `--green` is 3.15:1 on white.
 *   · Form fields are the documented 2px exception to the pill rule.
 *   · No italic anywhere: Be Vietnam Pro ships no italic, so the browser would slant
 *     the roman glyphs.
 *   · `[hidden]` is restated for every element given a `display` here, or the
 *     attribute loses to the class and a "hidden" panel shows.
 */

.ntw-rfq {
	width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0;
	border: 1px solid var(--line-2); border-radius: 20px; background: var(--ink-2); color: var(--mist);
	box-shadow: 0 40px 120px rgba(0, 0, 0, .7);
}
.ntw-rfq::backdrop { background: rgba(5, 8, 6, .72); backdrop-filter: blur(4px); }
.ntw-rfq[open] { animation: ntw-rfq-pop .45s var(--ease); }
@keyframes ntw-rfq-pop { from { opacity: 0; transform: translateY(20px) scale(.98); } }
.ntw-rfq__panel { display: flex; flex-direction: column; max-height: calc(100dvh - 26px); }
.ntw-rfq__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 26px 28px 18px; border-bottom: 1px solid var(--line); }
.ntw-rfq__eyebrow { margin: 0 0 6px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--green); }
.ntw-rfq__title { margin: 0; font: 500 1.55rem/1.25 var(--f-display); letter-spacing: -.02em; color: var(--mist); }
.ntw-rfq__close {
	display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
	border: 1px solid var(--line-2); background: transparent; color: var(--mist); font-size: 18px; cursor: pointer;
}
.ntw-rfq__close:hover, .ntw-rfq__close:focus-visible { border-color: var(--green); color: var(--green); }
.ntw-rfq__body { padding: 22px 28px 28px; overflow: auto; }

/* item chips */
.ntw-rfq__label { margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist-faint); }
.ntw-rfq__items ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.ntw-rfq__chip {
	display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 8px 6px 14px;
	border-radius: 999px; background: var(--ink-3); border: 1px solid var(--line); font-size: 13.5px; color: var(--mist);
}
.ntw-rfq__chip span { min-width: 0; overflow-wrap: anywhere; }
.ntw-rfq__chip button {
	display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border: 0; border-radius: 50%;
	background: var(--line-2); color: var(--mist); font-size: 12px; cursor: pointer;
}
.ntw-rfq__chip button:hover, .ntw-rfq__chip button:focus-visible { background: var(--green-btn); color: #fff; }
.ntw-rfq__empty { padding: 8px 14px; border-radius: 999px; border: 1px dashed var(--line-2); font-size: 13.5px; color: var(--mist-faint); }

/* fields — shared by the dialog and the inline form */
.ntw-rfq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.ntw-rfq__field { display: grid; gap: 6px; margin: 0; min-width: 0; }
.ntw-rfq__field--wide { grid-column: 1 / -1; margin-top: 14px; }
.ntw-rfq__field label { font-size: 13px; letter-spacing: .02em; color: var(--ntw-w-label, var(--mist-dim)); }
.ntw-rfq .ntw-field, .ntw-rfq__form .ntw-field {
	width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 2px;
	border: 1px solid var(--ntw-w-border, var(--line-2)); background-color: var(--ntw-w-field-bg, var(--ink));
	color: var(--mist); font: 400 15px/1.4 var(--f-body);
}
.ntw-rfq__form textarea.ntw-field { min-height: 100px; resize: vertical; }
.ntw-rfq__form .ntw-field:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(36, 168, 0, .18); }
.ntw-rfq__form .ntw-field[aria-invalid="true"] { border-color: #ff8a73; }
.ntw-rfq__msg { font-size: 12.5px; color: #ffb4a3; }
.ntw-rfq__msg:empty { display: none; }
.ntw-rfq__notice { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; border: 1px solid #ff8a73; color: #ffd2c7; font-size: 14px; }

/* the honeypot: off-screen, not display:none (some bots skip hidden fields) */
.ntw-rfq__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ntw-rfq__legal { margin: 14px 0 0; font-size: 12.5px; color: var(--mist-faint); }
.ntw-rfq__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 20px 0 0; }
.ntw-rfq__send[disabled] { opacity: .6; cursor: progress; }
.ntw-rfq__call { color: var(--mist-dim); text-decoration: underline; text-underline-offset: 4px; }
.ntw-rfq__call:hover { color: var(--green); }
.ntw-rfq__done, .ntw-rfq__error { display: grid; gap: 8px; padding: 10px 0; outline: none; }
.ntw-rfq__done p, .ntw-rfq__error p { margin: 0; color: var(--mist-dim); }
.ntw-rfq__done .ntw-rfq__title { color: var(--mist); }
.ntw-rfq__error { padding: 14px; border-radius: 12px; border: 1px solid #ff8a73; }

.ntw-rfq__form[hidden], .ntw-rfq__done[hidden], .ntw-rfq__error[hidden], .ntw-badge[hidden] { display: none; }

/* the toast — `chrome.css` lifts it above the dock on a phone */
.ntw-toast {
	position: fixed; left: 50%; bottom: 28px; z-index: 120; max-width: calc(100vw - 32px);
	transform: translate(-50%, 20px); opacity: 0; padding: 12px 20px; border-radius: 999px;
	background: var(--mist); color: var(--ink); font-size: 14px; font-weight: 500; pointer-events: none;
	transition: opacity .3s, transform .4s var(--ease);
}
.ntw-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 720px) {
	.ntw-rfq__grid { grid-template-columns: minmax(0, 1fr); }
	.ntw-rfq__head, .ntw-rfq__body { padding-inline: 18px; }
	.ntw-toast { bottom: 88px; }
}
@media (prefers-reduced-motion: reduce) {
	.ntw-rfq[open] { animation: none; }
	.ntw-toast { transition: none; }
}