/**
 * Checkout — Pincode Checker with Multi Address WooCommerce
 * @since 1.1.0
 *
 * Layout is done via inline styles on divs (highest specificity).
 * This file only handles field resets, inline-row, status, and mobile.
 */

/* ── Section ────────────────────────────────────────────────────────── */
#pcmaw-checkout-section {
	margin: 0 0 40px 0;
	width: 100%;
}

.pcmaw-checkout-heading {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 24px 0;
}

/* ── Card ───────────────────────────────────────────────────────────── */
.pcmaw-product-block {
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 16px;
	background: #fff;
	box-sizing: border-box;
}

/* ── Image: kill any theme border/shadow on img tags ───────────────── */
.pcmaw-col-image img.pcmaw-product-thumb {
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	max-width: none !important;
}

/* ── Fields inside right col — compact ──────────────────────────────── */
.pcmaw-col-fields .form-row,
.pcmaw-col-fields p.form-row {
	float: none !important;
	clear: none !important;
	width: 100% !important;
	margin: 0 0 6px 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* Labels */
.pcmaw-col-fields .form-row label,
.pcmaw-col-fields p.form-row label {
	display: block !important;
	margin: 0 0 2px 0 !important;
	padding: 0 !important;
	font-size: 12px !important;
	line-height: 1.2 !important;
}

/* Inputs */
.pcmaw-col-fields .form-row input[type="text"],
.pcmaw-col-fields p.form-row input[type="text"] {
	height: 32px !important;
	min-height: 32px !important;
	padding: 4px 8px !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

/* Textarea — 3 lines max */
.pcmaw-col-fields .form-row textarea,
.pcmaw-col-fields p.form-row textarea {
	height: 60px !important;
	min-height: 60px !important;
	max-height: 60px !important;
	padding: 6px 8px !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
	resize: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

/* No margin on last field */
.pcmaw-col-fields .form-row:last-child,
.pcmaw-col-fields p.form-row:last-child {
	margin-bottom: 0 !important;
}

/* ── Pincode + Date inline row ──────────────────────────────────────── */
.pcmaw-inline-row {
	display: flex;
	flex-direction: row;
	gap: 16px;
}

.pcmaw-inline-row .form-row {
	flex: 1 1 0% !important;
	width: auto !important;
	float: none !important;
}

/* ── Pincode status ─────────────────────────────────────────────────── */
.pcmaw-pincode-status {
	font-size: 13px;
	margin-top: 6px;
	min-height: 20px;
}
.pcmaw-status-available   { color: #2e7d32; font-weight: 500; }
.pcmaw-status-unavailable { color: #c62828; font-weight: 500; }
.pcmaw-status-checking    { color: #777; }

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media ( max-width: 640px ) {

	/*
	 * .pcmaw-row has inline style="display:flex; flex-direction:row"
	 * CSS !important overrides inline styles when specificity is high enough.
	 * Using ID + class chain to ensure highest specificity.
	 */
	#pcmaw-checkout-section .pcmaw-row {
		flex-direction: column !important;
		gap: 16px !important;
	}

	/* Image col: shrink to thumbnail row */
	#pcmaw-checkout-section .pcmaw-col-image {
		flex: none !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 12px !important;
	}

	#pcmaw-checkout-section .pcmaw-col-image img.pcmaw-product-thumb {
		width: 64px !important;
		height: 64px !important;
		min-width: 64px !important;
		flex-shrink: 0 !important;
	}

	#pcmaw-checkout-section .pcmaw-col-image .pcmaw-product-name {
		margin: 0 !important;
	}

	/* Fields col: full width */
	#pcmaw-checkout-section .pcmaw-col-fields {
		flex: none !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	/* Pincode + date stack vertically */
	#pcmaw-checkout-section .pcmaw-inline-row {
		flex-direction: column !important;
		gap: 0 !important;
	}

	#pcmaw-checkout-section .pcmaw-inline-row .form-row {
		flex: none !important;
		width: 100% !important;
	}
}