/*
 * order-desk.css
 * Design tokens ported from the approved prototype (outfitbulk-order-desk-prototype-v2_3_3.html).
 * Scoped under #outfitbulk-order-desk-root to avoid leaking into the rest of the WP theme (Astra).
 */

#outfitbulk-order-desk-root {
	--ob-black: #0A0A0A;
	--ob-red: #E8111A;
	--ob-red-dark: #B90D15;
	--ob-white: #FFFFFF;
	--ob-grey-50: #F7F7F8;
	--ob-grey-100: #EFEFF1;
	--ob-grey-150: #E7E7EA;
	--ob-grey-200: #DADADF;
	--ob-grey-400: #9A9AA2;
	--ob-grey-600: #5C5C64;
	--ob-grey-800: #2B2B30;
	--ob-green: #1B8A4A;
	--ob-green-bg: #E8F7EE;
	--ob-amber: #B4790A;
	--ob-amber-bg: #FFF6E5;
	--ob-red-bg: #FDEAEB;
	--font-display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
	--font-body: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
	--radius: 10px;
	--radius-sm: 6px;
	--shadow-card: 0 1px 2px rgba(10,10,10,0.06), 0 1px 1px rgba(10,10,10,0.04);
	--shadow-pop: 0 12px 32px rgba(10,10,10,0.18);

	font-family: var(--font-body);
	color: var(--ob-black);
	font-size: 16px;
	line-height: 1.4;
	max-width: 100%;
}

#outfitbulk-order-desk-root * { box-sizing: border-box; }
#outfitbulk-order-desk-root h1,
#outfitbulk-order-desk-root h2,
#outfitbulk-order-desk-root h3,
#outfitbulk-order-desk-root h4 {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: 0.2px;
	margin: 0;
	text-transform: uppercase;
}
#outfitbulk-order-desk-root button {
	font-family: var(--font-body);
	cursor: pointer;
	min-height: 44px; /* mobile-first touch target */
}
#outfitbulk-order-desk-root input,
#outfitbulk-order-desk-root select,
#outfitbulk-order-desk-root textarea {
	font-family: var(--font-body);
	font-size: 16px; /* prevents iOS zoom-on-focus */
	min-height: 44px;
}

.obod-signin-gate,
.obod-loading {
	padding: 24px 16px;
	text-align: center;
	color: var(--ob-grey-600);
}

.obod-card {
	background: #fff;
	border: 1px solid var(--ob-grey-150);
	border-radius: var(--radius);
	padding: 16px;
	box-shadow: var(--shadow-card);
	margin-bottom: 12px;
}

.obod-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: var(--radius-sm);
	border: 1.5px solid transparent;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.obod-btn-primary { background: var(--ob-red); color: #fff; }
.obod-btn-primary:hover { background: var(--ob-red-dark); }
.obod-btn-outline { background: #fff; border-color: var(--ob-grey-200); color: var(--ob-black); }
.obod-btn-dark { background: var(--ob-black); color: #fff; }

.obod-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 999px;
	text-transform: uppercase;
}
.obod-badge-grey { background: var(--ob-grey-100); color: var(--ob-grey-600); }
.obod-badge-green { background: var(--ob-green-bg); color: var(--ob-green); }
.obod-badge-amber { background: var(--ob-amber-bg); color: var(--ob-amber); }
.obod-badge-red { background: var(--ob-red-bg); color: var(--ob-red-dark); }

.obod-alert {
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	font-size: 13px;
	margin-bottom: 8px;
}
.obod-alert-amber { background: var(--ob-amber-bg); color: #7A4F04; border: 1px solid #F0D699; }
.obod-alert-red { background: var(--ob-red-bg); color: var(--ob-red-dark); border: 1px solid #F3B9BC; }
.obod-alert-green { background: var(--ob-green-bg); color: #0F5C31; border: 1px solid #A9E3C0; }
.obod-alert-grey { background: var(--ob-grey-100); color: var(--ob-grey-600); border: 1px solid var(--ob-grey-200); }

.obod-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.obod-field label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--ob-grey-600); }
.obod-field input, .obod-field select, .obod-field textarea {
	border: 1.5px solid var(--ob-grey-200);
	border-radius: var(--radius-sm);
	padding: 0 12px;
	width: 100%;
}

.obod-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.obod-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; color: var(--ob-grey-600); padding: 8px; border-bottom: 2px solid var(--ob-grey-150); }
.obod-table td { padding: 9px 8px; border-bottom: 1px solid var(--ob-grey-100); }

@media (max-width: 640px) {
	.obod-table-as-cards thead { display: none; }
	.obod-table-as-cards tr { display: block; border-bottom: 1px solid var(--ob-grey-150); padding: 8px 0; }
	.obod-table-as-cards td { display: flex; justify-content: space-between; border: none; padding: 4px 2px; }
	.obod-table-as-cards td::before { content: attr(data-label); font-weight: 700; color: var(--ob-grey-600); font-size: 11px; text-transform: uppercase; }
}

.obod-prototype-banner {
	background: var(--ob-amber-bg);
	border: 1px solid #F0D699;
	color: #7A4F04;
	padding: 8px 12px;
	font-size: 12px;
	border-radius: var(--radius-sm);
	margin-bottom: 12px;
}