/* ============================================================
   WC Bulk Order — Frontend Styles
   ============================================================ */

/* Wrapper — shrinks to the width of the tab row so the table
   doesn't sprawl across the full page, but never exceeds the container. */
.wc-bulk-order-wrap {
	width: fit-content;
	max-width: 100%;
	font-size: 14px;
}

/* ── Tabs navigation ─────────────────────────────────────── */
.wc-bulk-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: 0 0 -1px;
	padding: 0;
	border-bottom: 2px solid #ddd;
}

.wc-bulk-tabs li {
	margin: 0;
}

.wc-bulk-tab-link {
	display: inline-block;
	padding: 10px 20px;
	border: 2px solid transparent;
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	background: #f5f5f5;
	color: #444;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
	cursor: pointer;
	position: relative;
	bottom: -2px;
}

.wc-bulk-tab-link:hover {
	background: #e8e8e8;
	color: #222;
}

.wc-bulk-tab-link.is-active {
	background: #fff;
	color: #0071a1;
	border-color: #ddd #ddd #fff;
	border-bottom: 2px solid #fff;
}

/* ── Tab panels ─────────────────────────────────────────── */
.wc-bulk-order-form {
	width: 100%;
}

.wc-bulk-tab-panel {
	display: none;
	padding: 0;
}

.wc-bulk-tab-panel.is-active {
	display: block;
}

/* ── Product table ──────────────────────────────────────── */
.wc-bulk-table {
	width: auto;         /* shrinks to sum of column widths, not full container */
	table-layout: fixed; /* honour the declared column widths exactly */
	border-collapse: collapse;
	border: 1px solid #ddd;
}

.wc-bulk-table thead {
	background: #f8f8f8;
}

.wc-bulk-table th,
.wc-bulk-table td {
	padding: 10px 12px;
	border-bottom: 1px solid #eee;
	vertical-align: middle;
	text-align: left;
}

.wc-bulk-table th {
	font-weight: 600;
	color: #555;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.wc-bulk-table tbody tr:last-child td {
	border-bottom: none;
}

/* Alternating row stripes — applied to td to beat theme tr overrides */
.wc-bulk-table tbody tr.row-even td { background: #ffffff !important; }
.wc-bulk-table tbody tr.row-odd td  { background: #f5f5f5 !important; }

.wc-bulk-table tbody tr:hover td {
	background: #eaf4fb !important;
}

/* Row checked highlight — override stripe */
.wc-bulk-table tbody tr.is-selected td,
.wc-bulk-table tbody tr.is-selected:hover td {
	background: #deeeff !important;
}

/* Column widths — explicit on every column so table-layout: fixed can calculate total */
.wc-bulk-table .col-check   { width: 80px;  text-align: center; }
.wc-bulk-table .col-product { width: 280px; }
.wc-bulk-table .col-price   { width: 110px; white-space: nowrap; }
.wc-bulk-table .col-unit    { width: 130px; color: #555; }
.wc-bulk-table .col-qty     { width: 160px; }

/* Price cells — bold in both header and body */
.wc-bulk-table .col-price,
.wc-bulk-table td.col-price,
.wc-bulk-table td.col-price .woocommerce-Price-amount,
.wc-bulk-table td.col-price bdi {
	font-weight: 700 !important;
}

/* Select column header */
.wc-bulk-check-header-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #555;
	margin-bottom: 4px;
}

.wc-bulk-select-all-label {
	display: block;
	font-size: 10px;
	color: #777;
	margin-top: 2px;
	cursor: pointer;
}

/* Per-row select wrapper: stacks checkbox above "Select" text */
.wc-bulk-select-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	cursor: pointer;
}

.wc-bulk-select-text {
	font-size: 10px;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	user-select: none;
}

/* ── Category group header rows (All Items tab only) ───────── */
.wc-bulk-group-header td {
	background: #e4ecf5 !important;
	padding: 7px 12px;
	border-top: 2px solid #b8cfe8;
	border-bottom: 1px solid #b8cfe8;
}

.wc-bulk-group-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #2c5282;
}

/* Product cell: thumb + name */
.wc-bulk-table .col-product label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.wc-bulk-thumb {
	flex-shrink: 0;
}

.wc-bulk-thumb img {
	width: 60px !important;
	height: 60px !important;
	max-width: 60px !important;
	object-fit: cover;
	border-radius: 3px;
	border: 1px solid #eee;
	display: block;
}

.wc-bulk-name {
	font-weight: 500;
	color: #333;
	word-break: break-word;
	white-space: normal;
}

/* Checkbox styling */
.wc-bulk-table input[type="checkbox"] {
	width: 16px;
	height: 16px;
	cursor: pointer;
	accent-color: #0071a1;
}

/* Qty cell: input + unit label side by side */
.wc-bulk-qty-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
}

.wc-bulk-qty-unit {
	font-size: 13px;
	color: #555;
	white-space: nowrap;
}

/* Qty input */
.wc-bulk-qty {
	width: 70px;
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 14px;
	text-align: center;
}

.wc-bulk-qty:focus {
	outline: none;
	border-color: #0071a1;
	box-shadow: 0 0 0 2px rgba(0, 113, 161, 0.15);
}

/* ── Action bar ─────────────────────────────────────────── */
.wc-bulk-action-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	padding: 16px 0;
	border-top: 2px solid #ddd;
	margin-top: 0;
	background: #fff;
	position: sticky;
	bottom: 0;
	z-index: 10;
}

/* Message */
.wc-bulk-message {
	flex: 1;
	padding: 8px 14px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	display: none;
}

.wc-bulk-message.is-error {
	display: block;
	background: #fce8e8;
	color: #c0392b;
	border: 1px solid #f5c6c6;
}

.wc-bulk-message.is-success {
	display: block;
	background: #e8f5e9;
	color: #2e7d32;
	border: 1px solid #c8e6c9;
}

/* Submit button */
.wc-bulk-submit-btn {
	padding: 12px 28px;
	background: #0071a1;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, opacity 0.15s;
	white-space: nowrap;
}

.wc-bulk-submit-btn:hover:not(:disabled) {
	background: #005a82;
}

.wc-bulk-submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Spinner inside button */
.wc-bulk-submit-btn .wc-bulk-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255,255,255,0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: wc-bulk-spin 0.7s linear infinite;
	vertical-align: middle;
	margin-right: 6px;
}

@keyframes wc-bulk-spin {
	to { transform: rotate(360deg); }
}

/* ── Responsive ─────────────────────────────────────────── */

/* ── Tablet (≤ 960px): wrapper fills page, form scrolls horizontally ── */
@media ( max-width: 960px ) {
	.wc-bulk-order-wrap {
		width: 100%;
	}

	.wc-bulk-order-form {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ── Phone (≤ 640px): tab bar scrolls, table converts to cards ── */
@media ( max-width: 640px ) {

	/* Tab bar — horizontal scroll instead of wrapping */
	.wc-bulk-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 2px;
		padding-bottom: 4px;
		scrollbar-width: thin;
	}

	.wc-bulk-tabs li {
		flex-shrink: 0;
	}

	.wc-bulk-tab-link {
		white-space: nowrap;
		padding: 8px 12px;
		font-size: 12px;
	}

	/* ── Convert table to block so rows become cards ── */
	.wc-bulk-table,
	.wc-bulk-table tbody,
	.wc-bulk-table tr.wc-bulk-row,
	.wc-bulk-table tr.wc-bulk-group-header {
		display: block;
	}

	.wc-bulk-table {
		width: 100% !important;
		table-layout: auto;
		border: none;
		background: none;
	}

	/* Hide column headers — labels are shown via ::before on each cell */
	.wc-bulk-table thead {
		display: none;
	}

	/* Group header keeps full width */
	.wc-bulk-table tr.wc-bulk-group-header td {
		display: block;
		width: 100% !important;
	}

	/* ── Each product row → rounded card ── */
	.wc-bulk-table tr.wc-bulk-row {
		position: relative;
		border: 1px solid #ddd;
		border-radius: 8px;
		margin-bottom: 10px;
		overflow: visible; /* let the pill button breathe */
	}

	/* Stripe on tr, not td (td backgrounds are cleared below) */
	.wc-bulk-table tr.wc-bulk-row.row-even { background: #ffffff; }
	.wc-bulk-table tr.wc-bulk-row.row-odd  { background: #f7f7f7; }

	/* All cells: block, full-width, clear desktop background overrides */
	.wc-bulk-table tr.wc-bulk-row td {
		display: block;
		width: 100% !important;
		border-bottom: none;
		background: transparent !important;
	}

	/* Selected card: highlight the tr */
	.wc-bulk-table tbody tr.wc-bulk-row.is-selected,
	.wc-bulk-table tbody tr.wc-bulk-row.is-selected:hover {
		background: #deeeff !important;
	}

	/* ── SELECT pill — pinned top-right of the card ──
	   Use tr.wc-bulk-row td.col-check (specificity 0,3,2) to beat the
	   general td rule (0,2,2) that forces width:100%!important.        */
	.wc-bulk-table tr.wc-bulk-row td.col-check {
		position: absolute;
		top: 10px;
		right: 10px;
		width: auto !important;
		padding: 0;
		text-align: right;
	}

	/* Pill button wrapper — inline-flex so it shrinks to content width */
	.wc-bulk-table td.col-check .wc-bulk-select-wrap {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		gap: 5px;
		padding: 6px 12px 6px 8px;
		border: 2px solid #bbb;
		border-radius: 24px;
		background: #fff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
		transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
		white-space: nowrap;
	}

	/* Custom circular checkbox */
	.wc-bulk-table td.col-check .wc-bulk-item-check {
		-webkit-appearance: none;
		appearance: none;
		width: 18px;
		height: 18px;
		min-width: 18px;
		border: 2px solid #bbb;
		border-radius: 50%;
		background: #fff;
		position: relative;
		cursor: pointer;
		transition: background 0.15s, border-color 0.15s;
		margin: 0;
	}

	/* Checkmark tick via pseudo-element */
	.wc-bulk-table td.col-check .wc-bulk-item-check::after {
		content: '';
		position: absolute;
		display: none;
		top: 2px;
		left: 5px;
		width: 5px;
		height: 9px;
		border: 2px solid #fff;
		border-top: none;
		border-left: none;
		transform: rotate(45deg);
	}

	.wc-bulk-table td.col-check .wc-bulk-item-check:checked {
		background: #0071a1;
		border-color: #0071a1;
	}

	.wc-bulk-table td.col-check .wc-bulk-item-check:checked::after {
		display: block;
	}

	/* "Select" label text inside pill */
	.wc-bulk-table td.col-check .wc-bulk-select-text {
		font-size: 11px;
		font-weight: 700;
		color: #666;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		transition: color 0.15s;
		user-select: none;
	}

	/* Selected state: solid blue pill */
	.wc-bulk-table tr.is-selected td.col-check .wc-bulk-select-wrap {
		border-color: #0071a1;
		background: #0071a1;
		box-shadow: 0 2px 8px rgba(0, 113, 161, 0.4);
	}

	.wc-bulk-table tr.is-selected td.col-check .wc-bulk-item-check {
		border-color: rgba(255, 255, 255, 0.7);
		background: rgba(255, 255, 255, 0.25);
	}

	.wc-bulk-table tr.is-selected td.col-check .wc-bulk-item-check:checked {
		background: rgba(255, 255, 255, 0.3);
		border-color: #fff;
	}

	.wc-bulk-table tr.is-selected td.col-check .wc-bulk-select-text {
		color: #fff;
	}

	/* ── Product — top section, leaves room for the pill button ── */
	.wc-bulk-table td.col-product {
		padding: 12px 96px 10px 12px; /* right padding wider to clear the pill */
		border-bottom: 1px solid #eee;
	}

	/* Ensure the inner flex label fills the cell and name doesn't collapse */
	.wc-bulk-table td.col-product label {
		display: flex;
		align-items: center;
		width: 100%;
		gap: 10px;
	}

	.wc-bulk-table td.col-product .wc-bulk-name {
		flex: 1;
		min-width: 0;
		word-break: break-word;
		white-space: normal;
	}

	/* ── Price + Min Order — sit side by side as a metadata bar ── */
	.wc-bulk-table td.col-price,
	.wc-bulk-table td.col-unit {
		display: inline-block !important;
		width: auto !important;
		vertical-align: top;
		padding: 6px 12px 4px 12px;
		font-size: 13px;
	}

	.wc-bulk-table td.col-price::before {
		content: "Price";
		display: block;
		font-size: 10px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: #999;
		margin-bottom: 2px;
	}

	.wc-bulk-table td.col-unit::before {
		content: "Min. Order";
		display: block;
		font-size: 10px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: #999;
		margin-bottom: 2px;
	}

	/* ── Qty — bottom section of the card ── */
	.wc-bulk-table td.col-qty {
		padding: 8px 12px 12px;
		border-top: 1px solid #eee;
		background: rgba(0, 0, 0, 0.025) !important;
	}

	/* Qty input slightly smaller on mobile */
	.wc-bulk-qty {
		width: 60px;
		font-size: 15px;
	}

	/* Thumbnail smaller on mobile */
	.wc-bulk-thumb img {
		width: 44px !important;
		height: 44px !important;
		max-width: 44px !important;
	}

	/* ── Action bar — unstick and stack ── */
	.wc-bulk-action-bar {
		flex-direction: column;
		align-items: stretch;
		position: static;
		padding: 12px 0;
	}

	.wc-bulk-submit-btn {
		width: 100%;
		text-align: center;
	}
}