/* =============================================================================
   TranslateAce Order Form — frontend.css
   ============================================================================= */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.taof-form-wrapper {
	margin: 28px 0 8px;
	font-size: 15px;
	line-height: 1.5;
	color: #2d3748;
}

/* ── Step cards ───────────────────────────────────────────────────────────── */
.taof-step {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	margin-bottom: 18px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.taof-step-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	background: #f7fafc;
	border-bottom: 1px solid #e2e8f0;
}

.taof-step-header h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #1a202c;
	letter-spacing: 0.01em;
}

.taof-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	background: #2b6cb0;
	color: #fff;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
}

.taof-step-content {
	padding: 20px 22px 22px;
}

.taof-step-desc {
	margin: 0 0 16px;
	color: #718096;
	font-size: 13px;
}

/* ── Shared field labels ──────────────────────────────────────────────────── */
.taof-field-group {
	margin-bottom: 4px;
}

.taof-field-group > label,
.taof-sub-field > label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
	color: #2d3748;
	font-size: 14px;
}

.taof-required {
	color: #e53e3e;
	margin-left: 2px;
}

.taof-optional {
	font-weight: 400;
	color: #a0aec0;
	font-size: 13px;
	margin-left: 4px;
}

.taof-field-hint {
	margin: 6px 0 0;
	font-size: 12px;
	color: #a0aec0;
}

/* ── Error messages ───────────────────────────────────────────────────────── */
.taof-field-error {
	display: none;
	margin-top: 6px;
	color: #c53030;
	font-size: 13px;
	font-weight: 500;
}

/* ── File upload area ─────────────────────────────────────────────────────── */
.taof-upload-area {
	position: relative;
	border: 2px dashed #cbd5e0;
	border-radius: 8px;
	padding: 28px 20px;
	background: #f7fafc;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
	min-height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.taof-upload-area:hover,
.taof-upload-area:focus,
.taof-upload-area.taof-dragover {
	border-color: #2b6cb0;
	background: #ebf4ff;
	outline: none;
}

/* Hidden file input — opened programmatically by the Browse button (trusted gesture).
   fileInput.click() called synchronously from a button handler always opens the
   native file picker in Chrome, regardless of any other event listeners on the page. */
.taof-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
}

/* No longer applied but kept so any residual JS references are safe no-ops. */
.taof-file-input--inactive {
	display: none;
}

/* Idle state */
.taof-upload-idle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.taof-upload-icon {
	font-size: 38px;
	line-height: 1;
}

.taof-upload-text {
	font-weight: 600;
	color: #4a5568;
	font-size: 14px;
}

.taof-upload-hint {
	font-size: 12px;
	color: #a0aec0;
}

/* ── Browse-file button ───────────────────────────────────────────────────── */
.taof-browse-btn {
	background: #2b6cb0;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 9px 22px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
	margin: 2px 0;
}

.taof-browse-btn:hover,
.taof-browse-btn:focus {
	background: #2c5282;
	outline: none;
}

/* Progress state */
.taof-upload-progress {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.taof-progress-bar {
	width: 100%;
	max-width: 320px;
	height: 6px;
	background: #e2e8f0;
	border-radius: 3px;
	overflow: hidden;
}

.taof-progress-fill {
	height: 100%;
	background: #2b6cb0;
	border-radius: 3px;
	transition: width 0.3s ease;
	width: 0;
}

#taof-upload-status {
	font-size: 13px;
	color: #4a5568;
}

/* Done state */
.taof-upload-done {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

.taof-file-icon {
	font-size: 22px;
}

.taof-done-name {
	font-weight: 600;
	color: #2b6cb0;
	word-break: break-all;
	font-size: 14px;
}

.taof-remove-file {
	background: #e53e3e;
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0;
	transition: background 0.15s;
	position: relative; /* sit above the file-input overlay */
	z-index: 3;
}

.taof-remove-file:hover {
	background: #c53030;
}

/* ── Document type cards ──────────────────────────────────────────────────── */
.taof-doc-type-card {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	margin-bottom: 14px;
	overflow: hidden;
}

.taof-checkbox-label {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: #f7fafc;
	cursor: pointer;
	transition: background 0.15s;
	user-select: none;
}

.taof-checkbox-label:hover {
	background: #edf2f7;
}

.taof-checkbox-label input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.taof-checkbox-custom {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border: 2px solid #cbd5e0;
	border-radius: 4px;
	background: #fff;
	position: relative;
	transition: border-color 0.15s, background 0.15s;
}

.taof-checkbox-label input[type="checkbox"]:checked + .taof-checkbox-custom {
	background: #2b6cb0;
	border-color: #2b6cb0;
}

.taof-checkbox-label input[type="checkbox"]:checked + .taof-checkbox-custom::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 10px;
	border: 2px solid #fff;
	border-top: none;
	border-left: none;
	transform: rotate(45deg);
}

.taof-checkbox-text {
	font-weight: 600;
	font-size: 15px;
	color: #2d3748;
}

/* ── Sub-field (page/stamp count) ─────────────────────────────────────────── */
.taof-sub-field {
	padding: 16px 18px;
	border-top: 1px solid #e2e8f0;
	background: #fff;
}

.taof-price-note {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: #718096;
}

/* ── Counters ─────────────────────────────────────────────────────────────── */
.taof-counter-group {
	display: inline-flex;
	align-items: center;
	border: 1px solid #cbd5e0;
	border-radius: 6px;
	overflow: hidden;
}

.taof-counter-btn {
	width: 38px;
	height: 38px;
	border: none;
	background: #f0f4f8;
	color: #4a5568;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.taof-counter-btn:hover {
	background: #e2e8f0;
}

.taof-number-input {
	width: 62px;
	height: 38px;
	border: none;
	border-left: 1px solid #cbd5e0;
	border-right: 1px solid #cbd5e0;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	color: #2d3748;
	-moz-appearance: textfield;
	appearance: textfield;
	background: #fff;
}

.taof-number-input::-webkit-outer-spin-button,
.taof-number-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ── Language select ──────────────────────────────────────────────────────── */
.taof-select {
	width: 100%;
	max-width: 420px;
	padding: 10px 14px;
	border: 1px solid #cbd5e0;
	border-radius: 6px;
	font-size: 14px;
	color: #2d3748;
	background: #fff;
	cursor: pointer;
}

.taof-select:focus {
	outline: none;
	border-color: #2b6cb0;
	box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.18);
}

/* ── Textarea ─────────────────────────────────────────────────────────────── */
.taof-textarea {
	display: block;
	width: 100%;
	max-width: 500px;
	padding: 10px 14px;
	border: 1px solid #cbd5e0;
	border-radius: 6px;
	font-size: 14px;
	color: #2d3748;
	resize: vertical;
	font-family: inherit;
	box-sizing: border-box;
}

.taof-textarea:focus {
	outline: none;
	border-color: #2b6cb0;
	box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.18);
}

/* ── Delivery radio cards ─────────────────────────────────────────────────── */
.taof-delivery-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.taof-radio-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.taof-radio-card:hover {
	border-color: #90cdf4;
	background: #ebf8ff;
}

.taof-radio-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* Checked state via :has() — progressive enhancement; fallback is just border change via JS class */
.taof-radio-card:has( input[type="radio"]:checked ) {
	border-color: #2b6cb0;
	background: #ebf4ff;
}

.taof-radio-dot {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border: 2px solid #cbd5e0;
	border-radius: 50%;
	position: relative;
	transition: border-color 0.15s;
}

.taof-radio-card input[type="radio"]:checked + .taof-radio-dot {
	border-color: #2b6cb0;
}

.taof-radio-card input[type="radio"]:checked + .taof-radio-dot::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	background: #2b6cb0;
	border-radius: 50%;
}

.taof-radio-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.taof-radio-body strong {
	font-size: 15px;
	font-weight: 700;
	color: #2d3748;
}

.taof-radio-body span {
	font-size: 13px;
	color: #718096;
}

/* ── Live summary box ─────────────────────────────────────────────────────── */
.taof-summary-box {
	background: #ebf8ff;
	border: 1px solid #bee3f8;
	border-radius: 8px;
	padding: 16px 20px;
	margin-bottom: 20px;
}

.taof-summary-box h4 {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #2b6cb0;
}

.taof-summary-rows {
	display: flex;
	flex-direction: column;
}

.taof-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: 14px;
	color: #4a5568;
	padding: 7px 0;
	border-bottom: 1px solid #bee3f8;
}

.taof-summary-row:last-child {
	border-bottom: none;
}

.taof-summary-total {
	font-weight: 700;
	font-size: 17px;
	color: #2b6cb0;
	padding-top: 10px;
	margin-top: 2px;
}

/* ── Confirmation block ───────────────────────────────────────────────────── */
.taof-confirm-block {
	background: #fffaf0;
	border: 1px solid #fbd38d;
	border-radius: 8px;
	padding: 16px 18px;
}

.taof-confirm-label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	user-select: none;
}

.taof-confirm-label input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* Reuse checkbox-custom styles — duplicate needed for confirm block context */
.taof-check-custom {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border: 2px solid #cbd5e0;
	border-radius: 4px;
	background: #fff;
	position: relative;
	margin-top: 2px;
	transition: border-color 0.15s, background 0.15s;
}

.taof-confirm-label input[type="checkbox"]:checked + .taof-check-custom {
	background: #2b6cb0;
	border-color: #2b6cb0;
}

.taof-confirm-label input[type="checkbox"]:checked + .taof-check-custom::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 10px;
	border: 2px solid #fff;
	border-top: none;
	border-left: none;
	transform: rotate(45deg);
}

.taof-confirm-text {
	font-size: 14px;
	line-height: 1.55;
	color: #4a5568;
}

/* ── Proceed-to-Checkout submit row ───────────────────────────────────────── */
.taof-submit-row {
	margin-top: 24px;
	text-align: center;
}

.taof-submit-btn {
	display: inline-block;
	width: 100%;
	max-width: 480px;
	padding: 16px 32px;
	background: #2b6cb0;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
	box-shadow: 0 2px 8px rgba(43, 108, 176, 0.25);
}

.taof-submit-btn:hover,
.taof-submit-btn:focus {
	background: #2c5282;
	box-shadow: 0 4px 12px rgba(43, 108, 176, 0.35);
	outline: none;
}

.taof-submit-btn:active {
	transform: translateY(1px);
	box-shadow: 0 1px 4px rgba(43, 108, 176, 0.25);
}

.taof-submit-btn[disabled] {
	background: #a0aec0;
	cursor: not-allowed;
	box-shadow: none;
}

.taof-submit-note {
	margin: 10px 0 0;
	font-size: 12px;
	color: #718096;
}

/* ── TAOF-product-only suppression of stock buttons ───────────────────────────
   On product pages where the translation form is enabled (body class
   .taof-product is added by the plugin), every standard purchase control is
   hidden so the customer's only path to checkout is filling the form and
   clicking the "Proceed to Checkout" button rendered above.

   Suppressed elements:
     • WooCommerce's built-in single_add_to_cart_button + quantity input
     • Buy Now Button plugin (.wc-buy-now-button)
     • PayPal Payments Smart Buttons (PayPal, Pay Later, Pay in 4)
     • WooCommerce Payments Payment Request Button (Apple Pay, Google Pay, Link)
     • Stripe gateway Payment Request Button
     • Theme-injected "ajax add to cart" buttons

   Why: every one of these submits the cart WITHOUT the TAOF form data —
   no document, no language, no page count.  Allowing them on a TAOF
   product would generate orders the business cannot fulfill. */
body.taof-product form.cart .quantity,
body.taof-product form.cart .single_add_to_cart_button,
body.taof-product .wc-buy-now-button,
body.taof-product .ppc-button-container,
body.taof-product .ppcp-button-container,
body.taof-product .ppcp-mini-cart,
body.taof-product .ppcp-paylater-message,
body.taof-product .ppcp-googlepay-button-container,
body.taof-product .ppcp-applepay-button-container,
body.taof-product div[id^="ppc-button-"],
body.taof-product div[id^="paypal-button-"],
body.taof-product div[id^="paypal-installment-"],
body.taof-product .wc-stripe-payment-request-button,
body.taof-product .wc-stripe-payment-request-button-separator,
body.taof-product #wc-stripe-payment-request-wrapper,
body.taof-product #wc-stripe-payment-request-button-separator,
body.taof-product .wcpay-payment-request-wrapper,
body.taof-product #wcpay-payment-request-wrapper,
body.taof-product #wcpay-payment-request-button-separator,
body.taof-product .gpay-button,
body.taof-product .applepay-button,
body.taof-product .stripe-link-button,
body.taof-product .ajax_add_to_cart {
	display: none !important;
}

/* ── Large upload area (v1.4.0 — Step 1 is upload-only) ───────────────────── */
.taof-upload-area--large {
	min-height: 200px;
	padding: 40px 24px;
	border-width: 3px;
}

.taof-upload-headline {
	font-weight: 700;
	color: #2d3748;
	font-size: 17px;
}

.taof-upload-sub {
	font-size: 13px;
	color: #a0aec0;
	margin: 2px 0;
}

.taof-browse-btn--large {
	padding: 12px 30px;
	font-size: 15px;
	border-radius: 8px;
}

.taof-upload-count {
	margin: 12px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: #2b6cb0;
}

/* ── Global language selector (top of Step 2) ─────────────────────────────── */
.taof-global-language {
	background: #f7fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 16px 18px;
	margin-bottom: 20px;
}

.taof-global-language-title {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: #2b6cb0;
	margin-bottom: 10px;
}

.taof-global-language > label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
	color: #2d3748;
	font-size: 14px;
}

/* Dropdown and the Apply button sit on one line, wrapping on narrow screens. */
.taof-global-language-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.taof-global-language-row .taof-select {
	flex: 0 1 280px;
	max-width: 280px;
}

.taof-apply-all-btn {
	flex: 0 0 auto;
	background: #fff;
	color: #2b6cb0;
	border: 1px solid #2b6cb0;
	border-radius: 6px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	white-space: nowrap;
	line-height: 1.2;
}

.taof-apply-all-btn:hover,
.taof-apply-all-btn:focus {
	background: #2b6cb0;
	color: #fff;
	outline: none;
}

.taof-apply-all-btn:active {
	transform: translateY(1px);
}

.taof-apply-all-feedback {
	display: none;
	margin: 8px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: #2f855a;
}

.taof-apply-all-feedback.is-warning {
	color: #b7791f;
}

.taof-docs-empty {
	margin: 0;
	padding: 24px 20px;
	text-align: center;
	color: #a0aec0;
	font-size: 13px;
	background: #f7fafc;
	border: 1px dashed #cbd5e0;
	border-radius: 8px;
}

/* ── Per-document cards ───────────────────────────────────────────────────── */
.taof-doc-cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.taof-doc-cards:not(:empty) {
	margin-top: 4px;
}

.taof-doc-card {
	background: #fff;
	border: 1px solid #cbd5e0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.taof-doc-card-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: #ebf4ff;
	border-bottom: 1px solid #cbd5e0;
}

.taof-doc-number {
	flex-shrink: 0;
	background: #2b6cb0;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 4px 10px;
	border-radius: 12px;
}

.taof-doc-filename {
	font-weight: 600;
	color: #2b6cb0;
	font-size: 14px;
	flex: 1 1 auto;
	word-break: break-all;
}

.taof-doc-remove {
	background: #e53e3e;
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0;
	transition: background 0.15s;
}

.taof-doc-remove:hover {
	background: #c53030;
}

/* Two-column body: preview thumbnail on the left, questions on the right. */
.taof-doc-card-body {
	padding: 16px 18px 18px;
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.taof-doc-thumb {
	flex: 0 0 130px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.taof-doc-thumb-img {
	width: 130px;
	height: 150px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid #e2e8f0;
	background: #f7fafc;
	display: block;
}

.taof-doc-thumb-badge {
	width: 130px;
	height: 150px;
	border-radius: 6px;
	border: 1px solid #e2e8f0;
	background: #edf2f7;
	color: #4a5568;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.06em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.taof-view-pages-btn {
	width: 130px;
	background: #fff;
	color: #2b6cb0;
	border: 1px solid #2b6cb0;
	border-radius: 6px;
	padding: 7px 6px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	line-height: 1.3;
}

.taof-view-pages-btn:hover,
.taof-view-pages-btn:focus {
	background: #2b6cb0;
	color: #fff;
	outline: none;
}

.taof-doc-details {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.taof-doc-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	color: #2d3748;
	font-size: 13px;
}

.taof-doc-fields-row {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

.taof-doc-fields-row .taof-doc-field {
	flex: 0 1 auto;
}

.taof-doc-lang-field {
	flex: 1 1 200px !important;
	min-width: 180px;
}

.taof-doc-lang-field .taof-select {
	max-width: 100%;
}

.taof-doc-type-other {
	display: block;
	width: 100%;
	max-width: 420px;
	padding: 10px 14px;
	margin-top: 8px;
	border: 1px solid #cbd5e0;
	border-radius: 6px;
	font-size: 14px;
	color: #2d3748;
	background: #fff;
	box-sizing: border-box;
}

.taof-doc-type-other:focus {
	outline: none;
	border-color: #2b6cb0;
	box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.18);
}

.taof-doc-type-error {
	margin-top: 6px;
}

.taof-detected-note {
	margin: 6px 0 0;
	font-size: 11px;
	color: #b7791f;
	line-height: 1.4;
	max-width: 220px;
}

/* ── Preview modal ────────────────────────────────────────────────────────── */
body.taof-modal-open {
	overflow: hidden;
}

.taof-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.taof-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(26, 32, 44, 0.72);
}

.taof-modal-panel {
	position: relative;
	background: #fff;
	border-radius: 12px;
	width: 100%;
	max-width: 760px;
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}

.taof-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	background: #f7fafc;
	border-bottom: 1px solid #e2e8f0;
	flex-shrink: 0;
}

.taof-modal-header h4 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #1a202c;
}

.taof-modal-close {
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	color: #718096;
	cursor: pointer;
	padding: 0 4px;
}

.taof-modal-close:hover {
	color: #1a202c;
}

.taof-modal-body {
	padding: 18px 20px;
	overflow-y: auto;
	flex: 1 1 auto;
}

.taof-modal-hint {
	margin: 0 0 12px;
	font-size: 13px;
	color: #718096;
	line-height: 1.55;
}

.taof-modal-filename {
	font-weight: 600;
	color: #2b6cb0;
	font-size: 14px;
	margin-bottom: 10px;
	word-break: break-all;
}

.taof-modal-preview {
	background: #f7fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 10px;
	min-height: 260px;
}

.taof-preview-image {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 4px;
}

.taof-preview-frame {
	width: 100%;
	height: 58vh;
	min-height: 320px;
	border: none;
	border-radius: 4px;
	background: #fff;
}

.taof-preview-fallback {
	text-align: center;
	padding: 40px 20px;
	color: #718096;
}

.taof-preview-fallback-icon {
	font-size: 44px;
	display: block;
	margin-bottom: 10px;
}

.taof-preview-fallback p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}

.taof-preview-openlink {
	margin: 10px 0 0;
	text-align: center;
	font-size: 13px;
}

.taof-preview-openlink a {
	color: #2b6cb0;
}

.taof-modal-footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 16px 20px;
	background: #f7fafc;
	border-top: 1px solid #e2e8f0;
	flex-shrink: 0;
}

.taof-modal-pagecount label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	color: #2d3748;
	margin-bottom: 6px;
}

.taof-modal-save {
	width: auto !important;
	padding: 11px 26px !important;
	font-size: 15px !important;
	margin: 0 !important;
}

/* ── Summary — per-document lines ─────────────────────────────────────────── */
.taof-summary-docs {
	margin-bottom: 12px;
}

.taof-summary-doc {
	padding: 8px 0;
	border-bottom: 1px solid #bee3f8;
	font-size: 14px;
	color: #2d3748;
}

.taof-summary-doc:last-child {
	border-bottom: none;
}

.taof-summary-doc-meta {
	margin-top: 2px;
	font-size: 13px;
	color: #4a5568;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media ( max-width: 640px ) {
	.taof-step-content {
		padding: 16px;
	}

	.taof-upload-area {
		padding: 22px 14px;
	}

	.taof-select,
	.taof-textarea {
		max-width: 100%;
	}

	.taof-summary-row {
		flex-direction: column;
		gap: 2px;
	}

	.taof-summary-total {
		flex-direction: row;
	}

	.taof-doc-fields-row {
		flex-direction: column;
		gap: 14px;
	}

	/* Stack the thumbnail above the questions on narrow screens. */
	.taof-doc-card-body {
		flex-direction: column;
		gap: 14px;
	}

	.taof-doc-thumb {
		flex: 0 0 auto;
		flex-direction: row;
		align-items: flex-start;
		gap: 12px;
		width: 100%;
	}

	.taof-doc-thumb-img,
	.taof-doc-thumb-badge {
		width: 92px;
		height: 108px;
	}

	.taof-view-pages-btn {
		width: auto;
		flex: 1 1 auto;
		align-self: flex-start;
	}

	.taof-detected-note {
		max-width: 100%;
	}

	.taof-upload-area--large {
		min-height: 170px;
		padding: 30px 16px;
	}

	/* Stack the language dropdown above its Apply button on narrow screens,
	   and let both go full width so neither is cramped. */
	.taof-global-language-row {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.taof-global-language-row .taof-select {
		flex: 1 1 auto;
		max-width: 100%;
	}

	.taof-apply-all-btn {
		width: 100%;
		padding: 12px 18px;
	}

	.taof-modal {
		padding: 0;
	}

	.taof-modal-panel {
		max-width: 100%;
		max-height: 100vh;
		border-radius: 0;
	}

	.taof-preview-frame {
		height: 50vh;
	}

	.taof-modal-footer {
		flex-direction: column;
		align-items: stretch;
	}

	.taof-modal-save {
		width: 100% !important;
	}
}