/**
 * AUDIMAC Quote Popup — "Yêu cầu tư vấn & báo giá"
 * ----------------------------------------------------------------------
 * File: assets/css/quote-popup.css
 *
 * Toàn bộ selector namespace dưới `.audm-quote-*` — không đụng tới bất kỳ
 * class nào của Homepage/Product Detail/theme cha. Chỉ dùng token có sẵn
 * trong tokens.css (--audm-color-*, --audm-space-*, --audm-radius-*...),
 * không khai báo màu mới.
 */

/* ============================================================
   0. Token bổ sung — chỉ thêm z-index cho modal (không có sẵn),
      không sửa giá trị nào khác trong tokens.css.
   ============================================================ */
:root {
	--audm-z-modal: 100;
}

/* ============================================================
   1. Overlay
   ============================================================ */
.audm-quote-overlay {
	position: fixed;
	inset: 0;
	background: var( --audm-color-overlay );
	z-index: var( --audm-z-modal );
	opacity: 0;
	transition: opacity var( --audm-transition );
}

.audm-quote-overlay.is-active {
	opacity: 1;
}

/* ============================================================
   2. Modal shell
   ============================================================ */
.audm-quote-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% ) scale( 0.97 );
	width: min( 600px, calc( 100vw - 32px ) );
	max-height: 85vh;
	background: var( --audm-color-bg );
	border-radius: var( --audm-radius-lg );
	box-shadow: var( --audm-shadow-lg );
	z-index: calc( var( --audm-z-modal ) + 1 );
	display: flex;
	flex-direction: column;
	opacity: 0;
	transition: opacity var( --audm-transition ), transform var( --audm-transition );
}

.audm-quote-modal.is-active {
	opacity: 1;
	transform: translate( -50%, -50% ) scale( 1 );
}

.audm-quote-modal__body {
	overflow-y: auto;
	padding: var( --audm-space-8 ) var( --audm-space-8 ) var( --audm-space-6 );
	-webkit-overflow-scrolling: touch;
}

.audm-quote-modal__close {
	position: absolute;
	top: var( --audm-space-4 );
	right: var( --audm-space-4 );
	width: 36px;
	height: 36px;
	border: none;
	background: var( --audm-color-bg-alt );
	color: var( --audm-color-dark );
	border-radius: var( --audm-radius-full );
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background var( --audm-transition );
	z-index: 1;
}

.audm-quote-modal__close:hover,
.audm-quote-modal__close:focus-visible {
	background: var( --audm-color-disabled-bg );
}

/* ============================================================
   3. Head
   ============================================================ */
.audm-quote-modal__head {
	margin-bottom: var( --audm-space-6 );
	padding-right: var( --audm-space-8 );
}

.audm-quote-modal__title {
	margin: 0 0 var( --audm-space-2 );
	font-size: var( --audm-font-size-xl );
	font-weight: var( --audm-font-weight-bold );
	color: var( --audm-color-dark );
	line-height: var( --audm-line-height-tight );
}

.audm-quote-modal__subtitle {
	margin: 0;
	font-size: var( --audm-font-size-sm );
	color: var( --audm-color-gray );
	line-height: var( --audm-line-height-base );
}

.audm-quote-modal__context {
	margin: var( --audm-space-3 ) 0 0;
	padding: var( --audm-space-2 ) var( --audm-space-3 );
	background: var( --audm-color-primary-light );
	color: var( --audm-color-primary-hover );
	border-radius: var( --audm-radius-md );
	font-size: var( --audm-font-size-sm );
	font-weight: var( --audm-font-weight-medium );
}

/* ============================================================
   4. Form layout
   ============================================================ */
.audm-quote-form {
	display: flex;
	flex-direction: column;
	gap: var( --audm-space-4 );
}

.audm-quote-form__row {
	display: flex;
	flex-direction: column;
	gap: var( --audm-space-4 );
}

.audm-quote-form__row--2col {
	flex-direction: row;
}

.audm-quote-form__row--2col .audm-quote-field {
	flex: 1 1 0;
	min-width: 0;
}

.audm-quote-field {
	display: flex;
	flex-direction: column;
	gap: var( --audm-space-1 );
}

.audm-quote-field label {
	font-size: var( --audm-font-size-sm );
	font-weight: var( --audm-font-weight-medium );
	color: var( --audm-color-dark );
}

.audm-quote-req {
	color: var( --audm-color-primary );
}

.audm-quote-field input[type="text"],
.audm-quote-field input[type="tel"],
.audm-quote-field input[type="email"],
.audm-quote-field input[type="number"],
.audm-quote-field select,
.audm-quote-field textarea {
	width: 100%;
	padding: var( --audm-space-3 );
	border: 1px solid var( --audm-color-border );
	border-radius: var( --audm-radius-md );
	font-size: var( --audm-font-size-md );
	font-family: var( --audm-font-family );
	color: var( --audm-color-dark );
	background: var( --audm-color-bg );
	transition: border-color var( --audm-transition );
	box-sizing: border-box;
}

.audm-quote-field input:focus,
.audm-quote-field select:focus,
.audm-quote-field textarea:focus {
	outline: none;
	border-color: var( --audm-color-primary );
}

.audm-quote-field textarea {
	resize: vertical;
	min-height: 72px;
}

.audm-quote-suffix-wrap {
	position: relative;
}

.audm-quote-suffix-wrap input {
	padding-right: 48px;
}

.audm-quote-suffix {
	position: absolute;
	right: var( --audm-space-3 );
	top: 50%;
	transform: translateY( -50% );
	color: var( --audm-color-gray-light );
	font-size: var( --audm-font-size-sm );
	pointer-events: none;
}

.audm-quote-error {
	display: none;
	font-size: var( --audm-font-size-xs );
	color: #C0392B;
}

.audm-quote-error.is-active {
	display: block;
}

.audm-quote-field.has-error input,
.audm-quote-field.has-error select {
	border-color: #C0392B;
}

.audm-quote-hint {
	font-size: var( --audm-font-size-xs );
	color: var( --audm-color-gray-light );
}

.audm-quote-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* ============================================================
   5. Advanced accordion
   ============================================================ */
.audm-quote-advanced-toggle {
	display: inline-flex;
	align-items: center;
	gap: var( --audm-space-2 );
	background: none;
	border: none;
	padding: var( --audm-space-2 ) 0;
	color: var( --audm-color-primary );
	font-size: var( --audm-font-size-sm );
	font-weight: var( --audm-font-weight-semibold );
	cursor: pointer;
	align-self: flex-start;
}

.audm-quote-advanced-toggle__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: var( --audm-radius-full );
	border: 1px solid var( --audm-color-primary );
	font-size: 13px;
	transition: transform var( --audm-transition );
}

.audm-quote-advanced-toggle[aria-expanded="true"] .audm-quote-advanced-toggle__icon {
	transform: rotate( 45deg );
}

.audm-quote-advanced {
	display: flex;
	flex-direction: column;
	gap: var( --audm-space-4 );
	padding-top: var( --audm-space-2 );
	border-top: 1px solid var( --audm-color-border );
}

/* ============================================================
   6. Consent + submit
   ============================================================ */
.audm-quote-consent {
	display: flex;
	align-items: flex-start;
	gap: var( --audm-space-2 );
	font-size: var( --audm-font-size-sm );
	color: var( --audm-color-dark );
	cursor: pointer;
}

.audm-quote-consent input {
	margin-top: 3px;
	flex-shrink: 0;
}

.audm-quote-submit {
	width: 100%;
	padding: var( --audm-space-4 );
	background: var( --audm-color-primary );
	color: var( --audm-color-white );
	border: none;
	border-radius: var( --audm-radius-md );
	font-size: var( --audm-font-size-md );
	font-weight: var( --audm-font-weight-bold );
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background var( --audm-transition );
}

.audm-quote-submit:hover:not( :disabled ),
.audm-quote-submit:focus-visible:not( :disabled ) {
	background: var( --audm-color-primary-hover );
}

.audm-quote-submit:disabled {
	background: var( --audm-color-disabled-bg );
	color: var( --audm-color-disabled-text );
	cursor: not-allowed;
}

.audm-quote-footnote {
	margin: 0;
	font-size: var( --audm-font-size-xs );
	color: var( --audm-color-gray-light );
	text-align: center;
}

.audm-quote-form__error-summary {
	padding: var( --audm-space-3 );
	border-radius: var( --audm-radius-md );
	background: #FDEDEC;
	color: #C0392B;
	font-size: var( --audm-font-size-sm );
}

/* ============================================================
   7. Success state
   ============================================================ */
.audm-quote-success {
	text-align: center;
	padding: var( --audm-space-8 ) 0;
}

.audm-quote-success__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto var( --audm-space-4 );
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var( --audm-radius-full );
	background: var( --audm-color-primary-light );
	color: var( --audm-color-primary );
	font-size: 28px;
	font-weight: var( --audm-font-weight-bold );
}

.audm-quote-success h3 {
	margin: 0 0 var( --audm-space-2 );
	font-size: var( --audm-font-size-lg );
	color: var( --audm-color-dark );
}

.audm-quote-success p {
	margin: 0 0 var( --audm-space-6 );
	color: var( --audm-color-gray );
	font-size: var( --audm-font-size-sm );
	line-height: var( --audm-line-height-relaxed );
}

.audm-quote-success .audm-btn {
	display: inline-flex;
}

/* ============================================================
   8. Body scroll lock (áp lên <body> khi modal mở, xử lý bởi JS)
   ============================================================ */
body.audm-quote-open {
	overflow: hidden;
}

/* ============================================================
   9. Responsive — Mobile
   ============================================================ */
@media ( max-width: 640px ) {
	.audm-quote-modal {
		width: calc( 100vw - 16px );
		max-height: 92vh;
		top: auto;
		bottom: 16px;
		left: 50%;
		transform: translate( -50%, 0 ) scale( 0.97 );
	}

	.audm-quote-modal.is-active {
		transform: translate( -50%, 0 ) scale( 1 );
	}

	.audm-quote-modal__body {
		padding: var( --audm-space-6 ) var( --audm-space-5 ) var( --audm-space-5 );
	}

	.audm-quote-form__row--2col {
		flex-direction: column;
	}
}