/*
 * Jatco Request Quote – Public Stylesheet
 * Version: 1.0.0
 */

/* ── Custom Properties ────────────────────────────────────────────────── */
:root {
	--jrq-primary:       #1e3a5f;
	--jrq-primary-dark:  #152c4a;
	--jrq-primary-light: #2a5080;
	--jrq-accent:        #e8562a;
	--jrq-success:       #16a34a;
	--jrq-danger:        #dc2626;
	--jrq-text:          #111827;
	--jrq-text-muted:    #6b7280;
	--jrq-border:        #e5e7eb;
	--jrq-bg-light:      #f9fafb;
	--jrq-radius:        6px;
	--jrq-radius-lg:     10px;
	--jrq-shadow:        0 4px 16px rgba(0,0,0,.12);
	--jrq-shadow-sm:     0 2px 6px rgba(0,0,0,.07);
	--jrq-transition:    0.2s ease;
	--jrq-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── Reset / Base ─────────────────────────────────────────────────────── */
.jatco-rq-add-wrap,
.jatco-rq-header,
.jatco-rq-cart-wrap,
.jatco-rq-form-wrap {
	font-family: var(--jrq-font);
	color: var(--jrq-text);
	box-sizing: border-box;
}

.jatco-rq-add-wrap *,
.jatco-rq-header *,
.jatco-rq-cart-wrap *,
.jatco-rq-form-wrap * {
	box-sizing: inherit;
}

/* ── Utility Buttons ──────────────────────────────────────────────────── */
.jatco-rq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 20px;
	border: 2px solid transparent;
	border-radius: var(--jrq-radius);
	font-family: var(--jrq-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--jrq-transition), border-color var(--jrq-transition), color var(--jrq-transition), transform var(--jrq-transition);
	white-space: nowrap;
	position: relative;
	overflow: hidden;
}

.jatco-rq-btn:focus-visible {
	outline: 3px solid var(--jrq-primary-light);
	outline-offset: 2px;
}

.jatco-rq-btn--primary {
	background: var(--jrq-primary);
	color: #fff;
	border-color: var(--jrq-primary);
}
.jatco-rq-btn--primary:hover {
	background: var(--jrq-primary-dark);
	border-color: var(--jrq-primary-dark);
	color: #fff;
	transform: translateY(-1px);
}

.jatco-rq-btn--secondary {
	background: transparent;
	color: var(--jrq-primary);
	border-color: var(--jrq-primary);
}
.jatco-rq-btn--secondary:hover {
	background: var(--jrq-primary);
	color: #fff;
}

.jatco-rq-btn--ghost {
	background: transparent;
	color: var(--jrq-text-muted);
	border-color: var(--jrq-border);
}
.jatco-rq-btn--ghost:hover {
	border-color: var(--jrq-danger);
	color: var(--jrq-danger);
}

.jatco-rq-btn--large { padding: 13px 28px; font-size: 15px; }
.jatco-rq-btn--full  { width: 100%; }

/* ── Add to Request Button ────────────────────────────────────────────── */
.jatco-rq-add-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 16px 0;
}

.jatco-rq-qty-wrap {
	display: flex;
	align-items: center;
	border: 1px solid var(--jrq-border);
	border-radius: var(--jrq-radius);
	overflow: hidden;
}

.jatco-rq-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 40px;
	background: var(--jrq-bg-light);
	border: none;
	cursor: pointer;
	font-size: 18px;
	color: var(--jrq-text);
	transition: background var(--jrq-transition);
}
.jatco-rq-qty-btn:hover { background: var(--jrq-border); }

.jatco-rq-qty-input {
	width: 52px;
	height: 40px;
	border: none;
	border-left: 1px solid var(--jrq-border);
	border-right: 1px solid var(--jrq-border);
	text-align: center;
	font-size: 14px;
	font-family: var(--jrq-font);
	color: var(--jrq-text);
	-moz-appearance: textfield;
}
.jatco-rq-qty-input::-webkit-inner-spin-button,
.jatco-rq-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.jatco-rq-qty-input:focus { outline: none; background: #fff; }

.jatco-rq-add-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: var(--jrq-primary);
	color: #fff;
	border: none;
	border-radius: var(--jrq-radius);
	font-family: var(--jrq-font);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--jrq-transition), transform var(--jrq-transition), box-shadow var(--jrq-transition);
	position: relative;
	overflow: hidden;
}
.jatco-rq-add-btn:hover  { background: var(--jrq-primary-dark); transform: translateY(-1px); }
.jatco-rq-add-btn:active { transform: translateY(0); }

.jatco-rq-feedback {
	font-size: 13px;
	font-weight: 600;
	color: var(--jrq-success);
	transition: opacity var(--jrq-transition);
}
.jatco-rq-feedback--error { color: var(--jrq-danger); }

/* ── Header Cart Widget ───────────────────────────────────────────────── */
.jatco-rq-header {
	position: relative;
	/*display: inline-block;*/
}

.jatco-rq-header__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	background: transparent;
	border: 1px solid var(--jrq-border);
	border-radius: var(--jrq-radius);
	font-family: var(--jrq-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--jrq-text);
	cursor: pointer;
	transition: background var(--jrq-transition), border-color var(--jrq-transition);
}
.jatco-rq-header__toggle:hover {
	background: var(--jrq-bg-light);
	border-color: var(--jrq-primary);
}

.jatco-rq-header__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	background: var(--jrq-accent);
	color: #fff;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	transition: transform var(--jrq-transition);
}
.jatco-rq-header__count.jatco-rq-bump {
	transform: scale(1.4);
}

/* Panel */
.jatco-rq-header__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 340px;
	max-width: 90vw;
	background: #fff;
	border: 1px solid var(--jrq-border);
	border-radius: var(--jrq-radius-lg);
	box-shadow: var(--jrq-shadow);
	z-index: 9999;
	overflow: hidden;
	/* Animation */
	transform-origin: top right;
	animation: jrqPanelIn 0.18s ease forwards;
}
.jatco-rq-header__panel[hidden] { display: none; }

@keyframes jrqPanelIn {
	from { opacity: 0; transform: scale(.96) translateY(-6px); }
	to   { opacity: 1; transform: scale(1)  translateY(0); }
}

.jatco-rq-header__panel-inner { display: flex; flex-direction: column; max-height: 480px; }

.jatco-rq-header__panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var(--jrq-border);
	flex-shrink: 0;
}

.jatco-rq-header__panel-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--jrq-primary);
}

.jatco-rq-header__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: transparent;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--jrq-text-muted);
	transition: background var(--jrq-transition), color var(--jrq-transition);
}
.jatco-rq-header__close:hover { background: var(--jrq-bg-light); color: var(--jrq-text); }

/* Items list */
.jatco-rq-header__items {
	overflow-y: auto;
	flex: 1 1 auto;
	padding: 8px 0;
}

.jatco-rq-header__empty {
	padding: 24px 16px;
	text-align: center;
	color: var(--jrq-text-muted);
	font-size: 14px;
	margin: 0;
}

.jatco-rq-header-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	transition: background var(--jrq-transition);
}
.jatco-rq-header-item:hover { background: var(--jrq-bg-light); }

.jatco-rq-header-item__thumb {
	width: 44px;
	height: 44px;
	border-radius: 4px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--jrq-bg-light);
}

.jatco-rq-header-item__thumb-placeholder {
	width: 44px;
	height: 44px;
	border-radius: 4px;
	background: var(--jrq-bg-light);
	border: 1px solid var(--jrq-border);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--jrq-border);
}

.jatco-rq-header-item__info { flex: 1 1 0; min-width: 0; }

.jatco-rq-header-item__title {
	font-size: 13px;
	font-weight: 600;
	color: var(--jrq-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	text-decoration: none;
}
.jatco-rq-header-item__title:hover { color: var(--jrq-primary); }

.jatco-rq-header-item__qty {
	font-size: 12px;
	color: var(--jrq-text-muted);
	margin-top: 2px;
}

.jatco-rq-header-item__remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: transparent;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--jrq-text-muted);
	flex-shrink: 0;
	transition: background var(--jrq-transition), color var(--jrq-transition);
}
.jatco-rq-header-item__remove:hover { background: #fee2e2; color: var(--jrq-danger); }

/* Footer */
.jatco-rq-header__panel-footer {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px;
	border-top: 1px solid var(--jrq-border);
	flex-shrink: 0;
}
.jatco-rq-header__panel-footer[hidden] { display: none; }

/* ── Full Cart Page ────────────────────────────────────────────────────── */
.jatco-rq-cart-wrap { max-width: 900px; margin: 0 auto; padding: 16px 0; }

.jatco-rq-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 64px 24px;
	text-align: center;
	color: var(--jrq-text-muted);
}
.jatco-rq-cart-empty[hidden] { display: none; }
.jatco-rq-cart-empty svg { opacity: .3; }
.jatco-rq-cart-empty p { font-size: 16px; margin: 0; }

.jatco-rq-cart-content[hidden] { display: none; }

.jatco-rq-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.jatco-rq-table th,
.jatco-rq-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--jrq-border);
	text-align: left;
	vertical-align: middle;
}

.jatco-rq-table th {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--jrq-text-muted);
	font-weight: 700;
	background: var(--jrq-bg-light);
}

.jatco-rq-table td.jatco-rq-table__thumb { width: 60px; padding: 8px 12px; }
.jatco-rq-table td.jatco-rq-table__qty   { width: 140px; }
.jatco-rq-table td.jatco-rq-table__remove { width: 50px; text-align: center; }

.jatco-rq-table__thumb img {
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 4px;
	background: var(--jrq-bg-light);
}

.jatco-rq-table__thumb-placeholder {
	width: 50px;
	height: 50px;
	border-radius: 4px;
	background: var(--jrq-bg-light);
	border: 1px solid var(--jrq-border);
}

.jatco-rq-table__title-link {
	font-weight: 600;
	color: var(--jrq-text);
	text-decoration: none;
}
.jatco-rq-table__title-link:hover { color: var(--jrq-primary); }

/* Inline qty in cart table */
.jatco-rq-cart-qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--jrq-border);
	border-radius: var(--jrq-radius);
	overflow: hidden;
	width: fit-content;
}
.jatco-rq-cart-qty-btn {
	width: 30px;
	height: 34px;
	background: var(--jrq-bg-light);
	border: none;
	cursor: pointer;
	font-size: 16px;
	color: var(--jrq-text);
	transition: background var(--jrq-transition);
}
.jatco-rq-cart-qty-btn:hover { background: var(--jrq-border); }
.jatco-rq-cart-qty-input {
	width: 44px;
	height: 34px;
	border: none;
	border-left: 1px solid var(--jrq-border);
	border-right: 1px solid var(--jrq-border);
	text-align: center;
	font-size: 13px;
	font-family: var(--jrq-font);
	-moz-appearance: textfield;
}
.jatco-rq-cart-qty-input::-webkit-inner-spin-button,
.jatco-rq-cart-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.jatco-rq-remove-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: transparent;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--jrq-text-muted);
	transition: background var(--jrq-transition), color var(--jrq-transition);
}
.jatco-rq-remove-btn:hover { background: #fee2e2; color: var(--jrq-danger); }

.jatco-rq-cart-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

/* ── Quote Form ───────────────────────────────────────────────────────── */
.jatco-rq-form-wrap { max-width: 720px; margin: 0 auto; }

.jatco-rq-form-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 48px 24px;
	text-align: center;
}
.jatco-rq-form-success[hidden] { display: none; }
.jatco-rq-form-success svg { color: var(--jrq-success); }
.jatco-rq-form-success__msg { font-size: 18px; font-weight: 600; color: var(--jrq-success); margin: 0; }
.jatco-rq-success__ref {
	display: inline-block;
	padding: 5px 18px;
	background: var(--jrq-bg-light);
	border: 1px solid var(--jrq-border);
	border-radius: 100px;
	font-size: 13px;
	font-weight: 700;
	color: var(--jrq-text-muted);
	letter-spacing: 0.05em;
	font-family: var(--jrq-font);
	margin: 0;
}

/* Summary box */
.jatco-rq-form-summary {
	background: var(--jrq-bg-light);
	border: 1px solid var(--jrq-border);
	border-radius: var(--jrq-radius-lg);
	padding: 20px 24px;
	margin-bottom: 28px;
}
.jatco-rq-form-summary__title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--jrq-primary);
}
.jatco-rq-form-summary__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.jatco-rq-form-summary__list li {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	padding: 6px 0;
	border-bottom: 1px solid var(--jrq-border);
}
.jatco-rq-form-summary__list li:last-child { border-bottom: none; }
.jatco-rq-form-summary__qty { font-weight: 600; color: var(--jrq-text-muted); }
.jatco-rq-form-summary__empty { margin: 0; font-size: 14px; color: var(--jrq-text-muted); }
.jatco-rq-form-summary__empty[hidden] { display: none; }

.jatco-rq-form-summary__footer {
	padding-top: 14px;
	margin-top: 14px;
	border-top: 1px solid var(--jrq-border);
}

/* Terms & Conditions checkbox */
.jatco-rq-form__field--terms { margin-bottom: 20px; }

/* Override generic label styles from .jatco-rq-form__field label */
.jatco-rq-form__field--terms .jatco-rq-terms-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
	color: var(--jrq-text);
	font-family: var(--jrq-font);
	line-height: 1.5;
}

/* Override span accent color from .jatco-rq-form__field label span */
.jatco-rq-form__field--terms .jatco-rq-terms-label span {
	color: var(--jrq-text);
}

/* Override input styles from .jatco-rq-form__field input */
.jatco-rq-form__field--terms .jatco-rq-terms-checkbox {
	width: 16px;
	height: 16px;
	padding: 0;
	border: 1px solid var(--jrq-border);
	border-radius: 3px;
	flex-shrink: 0;
	margin-top: 2px;
	cursor: pointer;
	accent-color: var(--jrq-primary);
	-webkit-appearance: auto;
	appearance: auto;
	box-shadow: none;
	background: transparent;
}
.jatco-rq-form__field--terms .jatco-rq-terms-checkbox:focus {
	outline: 2px solid var(--jrq-primary-light);
	outline-offset: 2px;
	border-color: var(--jrq-primary);
	box-shadow: none;
}

.jatco-rq-form__field--terms .jatco-rq-terms-label a {
	color: var(--jrq-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.jatco-rq-form__field--terms .jatco-rq-terms-label a:hover { color: var(--jrq-primary-dark); }

/* Form fields */
.jatco-rq-form__row { margin-bottom: 20px; }
.jatco-rq-form__row--2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.jatco-rq-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.jatco-rq-form__field label {
	font-size: 13px;
	font-weight: 600;
	color: var(--jrq-text);
}
.jatco-rq-form__field label span { color: var(--jrq-accent); }

.jatco-rq-form__field input,
.jatco-rq-form__field textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1.5px solid var(--jrq-border);
	border-radius: var(--jrq-radius);
	font-family: var(--jrq-font);
	font-size: 14px;
	color: var(--jrq-text);
	background: #fff;
	transition: border-color var(--jrq-transition), box-shadow var(--jrq-transition);
	-webkit-appearance: none;
}
.jatco-rq-form__field input:focus,
.jatco-rq-form__field textarea:focus {
	outline: none;
	border-color: var(--jrq-primary);
	box-shadow: 0 0 0 3px rgba(30,58,95,.12);
}
.jatco-rq-form__field input.jatco-rq-invalid,
.jatco-rq-form__field textarea.jatco-rq-invalid {
	border-color: var(--jrq-danger);
}
.jatco-rq-form__field textarea { resize: vertical; min-height: 110px; }

.jatco-rq-form__error {
	font-size: 12px;
	color: var(--jrq-danger);
	min-height: 16px;
}
.jatco-rq-form__error--global {
	padding: 12px 16px;
	background: #fee2e2;
	border: 1px solid #fca5a5;
	border-radius: var(--jrq-radius);
	margin-bottom: 16px;
	font-size: 14px;
}
.jatco-rq-form__error--global:empty { display: none; }

.jatco-rq-form__actions {
	margin-top: 24px;
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Spinner inside submit button */
.jatco-rq-btn__spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: jrqSpin .7s linear infinite;
}
@keyframes jrqSpin { to { transform: rotate(360deg); } }
.jatco-rq-btn__spinner[hidden] { display: none; }

/* ── Skeleton loading (15) ────────────────────────────────────────────── */
@keyframes jrqShimmer {
	from { background-position: -200% 0; }
	to   { background-position:  200% 0; }
}
.jatco-rq-skeleton {
	background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: jrqShimmer 1.4s infinite linear;
	border-radius: 4px;
}
.jatco-rq-skeleton-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--jrq-border);
}
.jatco-rq-skeleton-thumb { width: 44px; height: 44px; border-radius: 4px; flex-shrink: 0; }
.jatco-rq-skeleton-body  { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.jatco-rq-skeleton-line  { height: 12px; width: 75%; }
.jatco-rq-skeleton-line--short { width: 40%; }

/* Summary list skeleton items */
.jatco-rq-skeleton-li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--jrq-border);
}

/* ── Animations ───────────────────────────────────────────────────────── */

/* 1. Add button success pulse */
@keyframes jrqAddPulse {
	0%   { transform: scale(1);    box-shadow: none; }
	40%  { transform: scale(1.07); box-shadow: 0 0 0 6px rgba(22,163,74,.22); }
	100% { transform: scale(1);    box-shadow: none; }
}
.jatco-rq-add-btn.jatco-rq-btn--pulsed { animation: jrqAddPulse 0.55s ease forwards; }

/* 2. Quantity bump */
@keyframes jrqQtyBump {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.28); }
	100% { transform: scale(1); }
}
.jatco-rq-qty-input.jatco-rq-bumping,
.jatco-rq-cart-qty-input.jatco-rq-bumping,
.jatco-rq-panel-qty-val.jatco-rq-bumping { animation: jrqQtyBump 0.22s ease; }

/* 3. Ripple */
.jatco-rq-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,.35);
	transform: scale(0);
	animation: jrqRipple 0.55s linear;
	pointer-events: none;
}
@keyframes jrqRipple { to { transform: scale(4); opacity: 0; } }

/* 4. Panel close animation */
@keyframes jrqPanelOut {
	from { opacity: 1; transform: scale(1)   translateY(0); }
	to   { opacity: 0; transform: scale(.96) translateY(-6px); }
}
.jatco-rq-header__panel.jatco-rq-panel-out { animation: jrqPanelOut 0.16s ease forwards; }

/* 6. Header item entry (stagger applied via inline style) */
@keyframes jrqItemIn {
	from { opacity: 0; transform: translateX(10px); }
	to   { opacity: 1; transform: translateX(0); }
}
.jatco-rq-header-item { animation: jrqItemIn 0.2s ease both; }

/* 7. Header item exit */
@keyframes jrqItemOut {
	from { opacity: 1; transform: translateX(0);     max-height: 66px; }
	to   { opacity: 0; transform: translateX(-18px); max-height: 0; padding-top: 0; padding-bottom: 0; }
}
.jatco-rq-header-item.jatco-rq-removing {
	animation: jrqItemOut 0.22s ease forwards;
	overflow: hidden;
}

/* 8. Cart row removal */
@keyframes jrqRowOut {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(-28px); }
}
tr.jatco-rq-row-removing td { animation: jrqRowOut 0.2s ease forwards; }

/* 9. Quantity cell flash */
@keyframes jrqQtyFlash {
	0%   { background: transparent; }
	35%  { background: #fef9c3; }
	100% { background: transparent; }
}
.jatco-rq-table__qty.jatco-rq-qty-flash { animation: jrqQtyFlash 0.65s ease; }

/* 10. Empty state fade-in */
@keyframes jrqFadeUp {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}
.jatco-rq-cart-empty.jatco-rq-fade-in { animation: jrqFadeUp 0.3s ease both; }

/* 11. Form container slide-out / success slide-in */
@keyframes jrqSlideOutUp {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(-14px); }
}
.jatco-rq-form-container.jatco-rq-slide-out { animation: jrqSlideOutUp 0.22s ease forwards; }
.jatco-rq-form-success.jatco-rq-slide-in   { animation: jrqFadeUp 0.3s ease 0.12s both; }

/* 12. Field shake on validation error */
@keyframes jrqShake {
	0%, 100% { transform: translateX(0); }
	20%  { transform: translateX(-7px); }
	40%  { transform: translateX(7px); }
	60%  { transform: translateX(-4px); }
	80%  { transform: translateX(4px); }
}
.jatco-rq-form__field input.jatco-rq-shaking,
.jatco-rq-form__field textarea.jatco-rq-shaking,
.jatco-rq-terms-label.jatco-rq-shaking { animation: jrqShake 0.36s ease; }

/* 14. Toast notifications */
.jatco-rq-toast-wrap {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 999999;
	display: flex;
	flex-direction: column-reverse;
	gap: 8px;
	pointer-events: none;
}
.jatco-rq-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	background: #fff;
	border-left: 3px solid var(--jrq-success);
	border-radius: var(--jrq-radius);
	box-shadow: 0 4px 20px rgba(0,0,0,.14);
	font-family: var(--jrq-font);
	font-size: 13px;
	font-weight: 600;
	color: var(--jrq-text);
	pointer-events: auto;
	animation: jrqToastIn 0.28s cubic-bezier(.22,.61,.36,1) both;
	min-width: 180px;
	max-width: 300px;
}
.jatco-rq-toast--error { border-left-color: var(--jrq-danger); }
.jatco-rq-toast.jatco-rq-toast--out { animation: jrqToastOut 0.22s ease forwards; }
@keyframes jrqToastIn {
	from { opacity: 0; transform: translateX(24px) scale(.96); }
	to   { opacity: 1; transform: translateX(0)    scale(1); }
}
@keyframes jrqToastOut {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(28px); }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.jatco-rq-add-wrap { flex-direction: column; align-items: flex-start; }
	.jatco-rq-add-btn  { width: 100%; justify-content: center; }

	.jatco-rq-header__panel { width: 92vw; right: -24px; }

	.jatco-rq-table thead { display: none; }
	.jatco-rq-table,
	.jatco-rq-table tbody,
	.jatco-rq-table tr { display: block; }
	.jatco-rq-table tr {
		padding: 12px 0;
		border-bottom: 1px solid var(--jrq-border);
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		align-items: center;
	}
	.jatco-rq-table td { padding: 4px 8px; border: none; }
	.jatco-rq-table td.jatco-rq-table__thumb { order: -1; }
	.jatco-rq-table td.jatco-rq-table__title { flex: 1 1 120px; }

	.jatco-rq-cart-actions { flex-direction: column-reverse; }
	.jatco-rq-cart-actions .jatco-rq-btn { width: 100%; }

	.jatco-rq-form__row--2col { grid-template-columns: 1fr; }

	.jatco-rq-drawer { width: 100%; }
}

/* ── Side Cart Drawer ─────────────────────────────────────────────────── */

/* Prevent body scroll while drawer is open */
body.jatco-rq-drawer-open { overflow: hidden; }

/* Backdrop */
.jatco-rq-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 99998;
	animation: jrqBackdropIn 0.22s ease both;
}
.jatco-rq-drawer-backdrop[hidden] { display: none; }
.jatco-rq-drawer-backdrop.jatco-rq-backdrop-out { animation: jrqBackdropOut 0.26s ease forwards; }

@keyframes jrqBackdropIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes jrqBackdropOut { from { opacity: 1; } to { opacity: 0; } }

/* Drawer panel */
.jatco-rq-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 380px;
	max-width: 92vw;
	background: #fff;
	box-shadow: -4px 0 28px rgba(0,0,0,.16);
	z-index: 99999;
	display: flex;
	flex-direction: column;
	animation: jrqDrawerIn 0.28s cubic-bezier(.22,.61,.36,1) both;
}
.jatco-rq-drawer[hidden] { display: none; }
.jatco-rq-drawer.jatco-rq-closing { animation: jrqDrawerOut 0.24s ease forwards; }

@keyframes jrqDrawerIn  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes jrqDrawerOut { from { transform: translateX(0); }    to { transform: translateX(100%); } }

.jatco-rq-drawer__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

/* Header bar */
.jatco-rq-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	background: var(--jrq-primary);
	flex-shrink: 0;
}

.jatco-rq-drawer__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	font-family: var(--jrq-font);
}

.jatco-rq-drawer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: rgba(255,255,255,.15);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: #fff;
	transition: background var(--jrq-transition);
	flex-shrink: 0;
}
.jatco-rq-drawer__close:hover { background: rgba(255,255,255,.28); }

/* Items list */
.jatco-rq-drawer__items {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 4px 0;
}

.jatco-rq-drawer__empty {
	padding: 48px 20px;
	text-align: center;
	color: var(--jrq-text-muted);
	font-size: 14px;
	font-family: var(--jrq-font);
	margin: 0;
}

/* Individual item row */
.jatco-rq-drawer__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--jrq-border);
	animation: jrqItemIn 0.2s ease both;
	font-family: var(--jrq-font);
}
.jatco-rq-drawer__item:last-child { border-bottom: none; }
.jatco-rq-drawer__item.jatco-rq-removing { animation: jrqItemOut 0.22s ease forwards; overflow: hidden; }

.jatco-rq-drawer__item-thumb {
	width: 56px;
	height: 56px;
	border-radius: 6px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--jrq-bg-light);
}

.jatco-rq-drawer__item-thumb-placeholder {
	width: 56px;
	height: 56px;
	border-radius: 6px;
	background: var(--jrq-bg-light);
	border: 1px solid var(--jrq-border);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--jrq-border);
}

.jatco-rq-drawer__item-info { flex: 1; min-width: 0; }

.jatco-rq-drawer__item-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--jrq-text);
	text-decoration: none;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 4px;
}
.jatco-rq-drawer__item-title:hover { color: var(--jrq-primary); }

.jatco-rq-drawer__item-qty {
	font-size: 12px;
	color: var(--jrq-text-muted);
}

.jatco-rq-drawer__item-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: transparent;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--jrq-text-muted);
	flex-shrink: 0;
	transition: background var(--jrq-transition), color var(--jrq-transition);
}
.jatco-rq-drawer__item-remove:hover { background: #fee2e2; color: var(--jrq-danger); }

/* Footer buttons */
.jatco-rq-drawer__footer {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 20px;
	border-top: 1px solid var(--jrq-border);
	background: var(--jrq-bg-light);
	flex-shrink: 0;
}
.jatco-rq-drawer__footer[hidden] { display: none; }

/* ── Remove confirmation popover ──────────────────────────────────────── */
.jatco-rq-header-item__remove,
.jatco-rq-drawer__item-remove,
.jatco-rq-remove-btn { position: relative; }

.jatco-rq-remove-popover {
	position: absolute;
	right: calc(100% + 8px);
	top: 50%;
	transform: translateY(-50%);
	background: #fff;
	border: 1px solid var(--jrq-border);
	border-radius: 20px;
	box-shadow: 0 2px 12px rgba(0,0,0,.13);
	padding: 4px 6px 4px 10px;
	display: flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	z-index: 100;
	animation: jrqPopIn 0.14s ease both;
}
@keyframes jrqPopIn {
	from { opacity: 0; transform: translateY(-50%) scale(.88); }
	to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
.jatco-rq-remove-popover__label {
	font-size: 11px;
	font-weight: 600;
	color: var(--jrq-text-muted);
	font-family: var(--jrq-font);
	padding-right: 2px;
}
.jatco-rq-remove-popover__yes,
.jatco-rq-remove-popover__no {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
	transition: background var(--jrq-transition);
	flex-shrink: 0;
}
.jatco-rq-remove-popover__yes { background: var(--jrq-danger); color: #fff; }
.jatco-rq-remove-popover__yes:hover { background: #b91c1c; }
.jatco-rq-remove-popover__no { background: var(--jrq-bg-light); color: var(--jrq-text-muted); }
.jatco-rq-remove-popover__no:hover { background: var(--jrq-border); }

/* ── Panel item quantity control (header dropdown + side drawer) ──── */
.jatco-rq-panel-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--jrq-border);
	border-radius: var(--jrq-radius);
	overflow: hidden;
	margin-top: 5px;
}

.jatco-rq-panel-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: var(--jrq-bg-light);
	border: none;
	cursor: pointer;
	font-size: 13px;
	color: var(--jrq-text);
	line-height: 1;
	padding: 0;
	transition: background var(--jrq-transition);
	flex-shrink: 0;
}
.jatco-rq-panel-qty-btn:hover { background: var(--jrq-border); }

.jatco-rq-panel-qty-val {
	min-width: 26px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--jrq-text);
	font-family: var(--jrq-font);
	border-left: 1px solid var(--jrq-border);
	border-right: 1px solid var(--jrq-border);
}

/* Clear cart button — used in both dropdown footer and drawer footer */
.jatco-rq-clear-panel-btn {
	display: block;
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--jrq-font);
	font-size: 12px;
	color: var(--jrq-text-muted);
	text-align: center;
	padding: 4px 0 0;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--jrq-transition);
}
.jatco-rq-clear-panel-btn:hover { color: var(--jrq-danger); }

/* Clear cart inline confirmation state */
.jatco-rq-clear-confirming {
	animation: jrqPopIn 0.14s ease both;
}

.jatco-rq-clear-panel-btn.jatco-rq-clear-confirming {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: auto;
	background: #fff3f3;
	border: 1px solid #fca5a5;
	border-radius: 20px;
	padding: 4px 8px;
	text-decoration: none;
	margin: 0 auto;
}

#jatco-rq-clear-cart.jatco-rq-clear-confirming {
	border-color: #fca5a5;
	background: #fff3f3;
	border-radius: 20px;
	gap: 8px;
}

.jatco-rq-clear-confirm__text {
	font-size: 11px;
	font-weight: 600;
	color: var(--jrq-text-muted);
	font-family: var(--jrq-font);
	white-space: nowrap;
}

.jatco-rq-clear-confirm__yes,
.jatco-rq-clear-confirm__no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 9px;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	font-size: 11px;
	font-weight: 600;
	font-family: var(--jrq-font);
	transition: background var(--jrq-transition);
	white-space: nowrap;
	flex-shrink: 0;
}

.jatco-rq-clear-confirm__yes { background: var(--jrq-danger); color: #fff; }
.jatco-rq-clear-confirm__yes:hover { background: #b91c1c; }
.jatco-rq-clear-confirm__no { background: var(--jrq-bg-light); color: var(--jrq-text-muted); }
.jatco-rq-clear-confirm__no:hover { background: var(--jrq-border); }