/* Catering — quote builder.
   Loads after catering.css, so it inherits the same palette variables. */

.cater-shell { display: block; }

@media (min-width: 981px) {
	.cater-shell {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 32px;
		align-items: start;
	}
}

.cater-shell > .catering { min-width: 0; }

/* --------------------------------------------- stepper and add button --- */

.cater-add { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.cater-add.is-compact { margin: 0; gap: 6px; }

.cater-step {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--cater-line);
	border-radius: 8px;
	overflow: hidden;
}

/* The + and - are drawn with CSS rather than typed as characters. A theme's
   display font often has no real minus sign, which left the button looking
   blank; two bars cannot go missing, and they line up exactly. */
.cater-step button {
	appearance: none;
	position: relative;
	background: transparent;
	border: 0;
	color: var(--cater-accent);
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	padding: 0;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	transition: background .15s ease;
}

/* the horizontal bar, on both buttons */
.cater-step button::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 13px;
	height: 2px;
	margin: -1px 0 0 -6.5px;
	background: currentColor;
	border-radius: 2px;
}

/* the upright, which makes the plus */
.cater-step-up::after,
.cater-q-up::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 2px;
	height: 13px;
	margin: -6.5px 0 0 -1px;
	background: currentColor;
	border-radius: 2px;
}

.cater-step button:hover { background: var(--cater-accent-soft); }
.cater-step button:active { background: var(--cater-accent); color: var(--cater-bg); }

.cater-step button:focus-visible {
	outline: 2px solid var(--cater-accent);
	outline-offset: -2px;
}

.cater-step-qty,
.cater-q-qty {
	width: 40px;
	height: 36px;
	border: 0;
	border-left: 1px solid var(--cater-line);
	border-right: 1px solid var(--cater-line);
	background: transparent;
	color: var(--cater-text);
	text-align: center;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 36px;
	padding: 0;
	border-radius: 0;
	-moz-appearance: textfield;
}

.cater-step-qty::-webkit-outer-spin-button,
.cater-step-qty::-webkit-inner-spin-button,
.cater-q-qty::-webkit-outer-spin-button,
.cater-q-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* the smaller set used inside the quote panel */
.cater-step.is-mini button { width: 30px; height: 30px; flex-basis: 30px; }
.cater-step.is-mini button::before { width: 11px; margin-left: -5.5px; }
.cater-step.is-mini .cater-q-up::after { height: 11px; margin-top: -5.5px; }
.cater-step.is-mini .cater-q-qty { width: 32px; height: 30px; line-height: 30px; font-size: 14px; }

.cater-add-btn {
	appearance: none;
	border: 1px solid var(--cater-accent);
	background: var(--cater-accent);
	color: #17130a;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 8px 14px;
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity .15s ease, background .15s ease, color .15s ease;
}

.cater-add-btn:hover { opacity: .88; }
.cater-add.is-added .cater-add-btn { background: transparent; color: var(--cater-accent); }
.cater-add.is-compact .cater-add-btn { padding: 6px 11px; font-size: 11px; }

/* size rows that now carry controls need room to breathe */
.cater-card-sizes.has-add li,
.cater-row-sizes.has-add li {
	flex-wrap: wrap;
	row-gap: 8px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--cater-line);
}

.cater-card-sizes.has-add li:last-child,
.cater-row-sizes.has-add li:last-child { border-bottom: 0; padding-bottom: 0; }

.cater-card-sizes.has-add .cater-add,
.cater-row-sizes.has-add .cater-add { width: 100%; justify-content: flex-end; }

.cater-row-sizes.has-add li { align-items: center; }

/* -------------------------------------------------------- the panel --- */

.cater-quote {
	position: sticky;
	top: 24px;
	background: var(--cater-surface);
	border: 1px solid var(--cater-line);
	border-radius: var(--cater-radius);
	overflow: hidden;
	margin-top: 24px;
}

@media (min-width: 981px) { .cater-quote { margin-top: 0; } }

.cater-quote-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--cater-line);
}

.cater-quote-head h3 { margin: 0; font-size: 17px; color: var(--cater-text); }

.cater-quote-count {
	min-width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--cater-accent);
	color: #17130a;
	font-size: 13px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 7px;
}

.cater-quote-body { max-height: 46vh; overflow-y: auto; }
.cater-quote-empty { margin: 0; padding: 20px 18px; color: var(--cater-muted); font-size: 14px; line-height: 1.55; }
.cater-quote-list { list-style: none; margin: 0; padding: 0; }

.cater-quote-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--cater-line);
}

.cater-quote-row:last-child { border-bottom: 0; }
.cater-quote-main { flex: 1 1 auto; min-width: 0; }
.cater-quote-name { display: block; font-size: 14px; line-height: 1.4; color: var(--cater-text); }
.cater-quote-price { display: block; margin-top: 2px; font-size: 13px; color: var(--cater-accent); font-weight: 700; }

.cater-quote-foot { padding: 16px 18px; border-top: 1px solid var(--cater-line); }

.cater-quote-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--cater-muted);
}

.cater-quote-total strong { font-size: 19px; color: var(--cater-accent); }
.cater-quote-note { margin: 0 0 14px; font-size: 12px; line-height: 1.5; color: var(--cater-muted); text-align: center; }

.cater-quote-submit {
	display: block;
	text-align: center;
	background: var(--cater-accent);
	color: #17130a;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	padding: 13px 16px;
	border-radius: 9px;
	transition: opacity .15s ease;
}

.cater-quote-submit:hover { opacity: .88; color: #17130a; }
.cater-quote-call { margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--cater-muted); }
.cater-quote-call a { color: var(--cater-accent); text-decoration: none; font-weight: 700; }

/* ---------------------------------------------------- the request form --- */

.cater-quote-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 32px;
	align-items: start;
}

.cater-quote-cols.is-single { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 980px) { .cater-quote-cols { grid-template-columns: 1fr; } }

.cater-form-sec {
	margin: 34px 0 16px;
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cater-accent);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--cater-line);
}

.cater-form-sec:first-child { margin-top: 0; }

.cater-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
@media (max-width: 620px) { .cater-form-grid { grid-template-columns: 1fr; } }

.cater-field { margin: 0 0 18px; }
.cater-field label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--cater-text); }
.cater-req { color: var(--cater-accent); margin-left: 2px; }

.cater-field input,
.cater-field select,
.cater-field textarea {
	width: 100%;
	box-sizing: border-box;
	background: var(--cater-surface);
	border: 1px solid var(--cater-line);
	border-radius: 9px;
	color: var(--cater-text);
	font: inherit;
	font-size: 15px;
	padding: 12px 14px;
}

.cater-field textarea { resize: vertical; line-height: 1.5; }

.cater-field input:focus,
.cater-field select:focus,
.cater-field textarea:focus {
	outline: none;
	border-color: var(--cater-accent);
	box-shadow: 0 0 0 3px var(--cater-accent-soft);
}

.cater-field input::placeholder,
.cater-field textarea::placeholder { color: var(--cater-muted); opacity: .8; }

.cater-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cater-form-actions { margin-top: 26px; }

.cater-form-submit {
	appearance: none;
	border: 0;
	background: var(--cater-accent);
	color: #17130a;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	padding: 15px 30px;
	border-radius: 10px;
	cursor: pointer;
	transition: opacity .15s ease;
}

.cater-form-submit:hover { opacity: .88; }
.cater-form-submit:disabled { opacity: .55; cursor: default; }

.cater-form-msg { margin: 14px 0 0; font-size: 15px; line-height: 1.5; }
.cater-form-msg.is-busy { color: var(--cater-muted); }
.cater-form-msg.is-ok { color: var(--cater-accent); font-weight: 600; }
.cater-form-msg.is-bad { color: #ff8b8b; }

.cater-aside { display: grid; gap: 14px; }

.cater-info {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	background: var(--cater-surface);
	border: 1px solid var(--cater-line);
	border-radius: var(--cater-radius);
	padding: 16px 18px;
}

.cater-info-ico { font-size: 19px; line-height: 1.2; }

.cater-info-kicker {
	display: block;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cater-accent);
	margin-bottom: 4px;
}

.cater-info strong { display: block; font-size: 17px; color: var(--cater-text); }
.cater-info strong a { color: inherit; text-decoration: none; }
.cater-info p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--cater-muted); }

.cater-testimonial {
	margin: 0;
	background: var(--cater-surface);
	border: 1px solid var(--cater-line);
	border-radius: var(--cater-radius);
	padding: 20px;
}

.cater-testimonial p { margin: 0; font-style: italic; font-size: 14px; line-height: 1.65; color: var(--cater-text); }

.cater-testimonial cite {
	display: block;
	margin-top: 12px;
	font-style: normal;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cater-accent);
}

/* ---------------------------------------------------------- wp-admin --- */

.cater-q-pill {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	background: #f0f0f1;
	color: #3c434a;
}

.cater-q-pill.is-new { background: #fbf0d4; color: #7a5b00; }
.cater-q-pill.is-contacted { background: #e5f0fb; color: #1d4d7a; }
.cater-q-pill.is-quoted { background: #ede5fb; color: #46297a; }
.cater-q-pill.is-booked { background: #e2f5e8; color: #14622f; }
.cater-q-pill.is-closed { background: #f0f0f1; color: #646970; }

/* ------------------------------------------- the compact "rows" layout --- */

.cater-layout-rows .cater-grid-items {
	display: block;
	border-top: 1px solid var(--cater-line);
}

.cater-qrow {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 16px;
	padding: 14px 4px;
	border-bottom: 1px solid var(--cater-line);
}

.cater-qrow-thumb {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--cater-surface);
	line-height: 0;
}

.cater-qrow-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cater-qrow-noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--cater-line);
	font-size: 18px;
}

.cater-qrow-name {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	min-width: 0;
}

.cater-qrow-name a {
	color: var(--cater-accent);
	text-decoration: none;
}

.cater-qrow-name a:hover { text-decoration: underline; }

.cater-qrow-badge {
	justify-self: start;
	font-size: 11px;
	letter-spacing: .08em;
	color: var(--cater-bg);
	background: var(--cater-accent);
	border-radius: 999px;
	padding: 3px 9px;
	white-space: nowrap;
}

.cater-qrow-price {
	color: var(--cater-accent);
	font-weight: 700;
	font-size: 16px;
	white-space: nowrap;
	text-align: right;
}

.cater-qrow .cater-add-slot { display: flex; justify-content: flex-end; }
.cater-qrow .cater-add { margin: 0; flex-wrap: nowrap; }

/* Phones: photo and name on the first line, price and controls underneath. */
@media (max-width: 720px) {
	.cater-qrow {
		grid-template-columns: 56px minmax(0, 1fr);
		gap: 10px 12px;
		padding: 16px 4px;
	}

	.cater-qrow-thumb { width: 56px; height: 56px; }
	.cater-qrow-name { font-size: 16px; }
	.cater-qrow-badge { grid-column: 2; }

	.cater-qrow-price {
		grid-column: 2;
		text-align: left;
		font-size: 15px;
	}

	.cater-qrow .cater-add-slot {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}
}

/* ------------------------------------------ the sticky bar on phones --- */

.cater-bar { display: none; }

@media (max-width: 980px) {
	.cater-bar {
		display: flex;
		align-items: center;
		gap: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--cater-surface);
		border-top: 1px solid var(--cater-line);
		box-shadow: 0 -6px 20px rgba(0, 0, 0, .35);
	}

	.cater-bar[hidden] { display: none; }

	/* so the last row is never trapped under the bar */
	.cater-shell { padding-bottom: 76px; }
}

.cater-bar-view {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--cater-muted);
	font: inherit;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 6px 0;
	cursor: pointer;
	text-align: left;
}

.cater-bar-view .cater-quote-count {
	min-width: 24px;
	height: 24px;
	font-size: 12px;
}

.cater-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cater-bar-view strong { color: var(--cater-accent); margin-left: auto; white-space: nowrap; }

.cater-bar-go {
	flex: 0 0 auto;
	background: var(--cater-accent);
	color: var(--cater-bg);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	padding: 11px 18px;
	border-radius: 9px;
	white-space: nowrap;
}

.cater-bar-go:hover { color: var(--cater-bg); opacity: .9; }

/* --------------------------------------------- clear, and the date hint --- */

.cater-quote-clear {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--cater-muted);
	font: inherit;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
	margin-left: auto;
	margin-right: 10px;
	padding: 2px;
}

.cater-quote-clear:hover { color: var(--cater-accent); }

.cater-hint {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--cater-muted);
}

/* ---------------------------------------------------- holding our ground ---
   Themes style bare elements — input[type="text"], .entry-content button —
   with selectors that outrank a plain class, and a width:100% on the quantity
   box pushes the + button outside the rounded container, where overflow:hidden
   swallows it. These rules are deliberately specific, and the few properties
   that decide whether the control is usable at all are forced. */

.catering .cater-step,
.cater-shell .cater-step,
.cater-bar .cater-step {
	display: inline-flex !important;
	align-items: stretch !important;
	width: auto !important;
	max-width: none !important;
	flex-wrap: nowrap !important;
	overflow: visible;            /* never clip the + */
	background: transparent;
	box-shadow: none;
}

.catering .cater-step > input.cater-step-qty,
.catering .cater-step > input.cater-q-qty,
.cater-shell .cater-step > input.cater-step-qty,
.cater-shell .cater-step > input.cater-q-qty {
	width: 40px !important;
	min-width: 40px !important;
	max-width: 40px !important;
	height: 36px !important;
	flex: 0 0 40px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	background-image: none !important;
	color: var(--cater-text) !important;
	border: 0 !important;
	border-left: 1px solid var(--cater-line) !important;
	border-right: 1px solid var(--cater-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none;
	text-align: center !important;
	font-size: 15px !important;
	line-height: 36px !important;
	min-height: 0 !important;
}

.catering .cater-step > button,
.cater-shell .cater-step > button,
.cater-bar .cater-step > button {
	width: 36px !important;
	min-width: 36px !important;
	height: 36px !important;
	flex: 0 0 36px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--cater-accent) !important;
	min-height: 0 !important;
	text-indent: 0;
	overflow: visible;
}

/* the rounded outline moves to the group, now that it no longer clips */
.catering .cater-step,
.cater-shell .cater-step {
	border: 1px solid var(--cater-line) !important;
	border-radius: 8px !important;
}

.catering .cater-step > button:first-child { border-radius: 7px 0 0 7px !important; }
.catering .cater-step > button:last-child { border-radius: 0 7px 7px 0 !important; }

/* the smaller set inside the quote panel */
.catering .cater-step.is-mini > button,
.cater-shell .cater-step.is-mini > button {
	width: 30px !important;
	min-width: 30px !important;
	height: 30px !important;
	flex: 0 0 30px !important;
}

.catering .cater-step.is-mini > input.cater-q-qty,
.cater-shell .cater-step.is-mini > input.cater-q-qty {
	width: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;
	height: 30px !important;
	flex: 0 0 32px !important;
	line-height: 30px !important;
	font-size: 14px !important;
}

/* and the Add button, for themes that restyle every button on the page */
.catering .cater-add-btn,
.cater-shell .cater-add-btn {
	background: var(--cater-accent) !important;
	background-image: none !important;
	color: #17130a !important;
	border: 1px solid var(--cater-accent) !important;
	box-shadow: none !important;
	width: auto !important;
	min-width: 0 !important;
	line-height: 1.2 !important;
	text-shadow: none !important;
}

.catering .cater-add.is-added .cater-add-btn,
.cater-shell .cater-add.is-added .cater-add-btn {
	background: transparent !important;
	color: var(--cater-accent) !important;
}

/* hover and press feedback, re-stated so the forced background above
   does not flatten them */
.catering .cater-step > button:hover,
.cater-shell .cater-step > button:hover { background: var(--cater-accent-soft) !important; }

.catering .cater-step > button:active,
.cater-shell .cater-step > button:active {
	background: var(--cater-accent) !important;
	color: var(--cater-bg) !important;
}

.catering .cater-step > button:focus-visible,
.cater-shell .cater-step > button:focus-visible {
	outline: 2px solid var(--cater-accent) !important;
	outline-offset: -2px;
}

/* --------------------------------------- keeping the panel on the page ---
   The list column has to be allowed to shrink, or a wide table inside it
   pushes the quote panel past the right edge of the theme's container. */

.cater-shell {
	box-sizing: border-box;
	max-width: 100%;
}

.cater-shell > * { min-width: 0; }

@media (min-width: 981px) {
	.cater-shell {
		grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
	}
}

.cater-shell .cater-quote {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.cater-quote-cols { max-width: 100%; }
.cater-quote-cols > * { min-width: 0; }

@media (min-width: 981px) {
	.cater-quote-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
}