/* ComenziBăuturi – Calculator Corporate
 * Everything is scoped under .cbcc. Font family is inherited from the theme.
 * Change the accent from WP Admin → Lead-uri corporate → Setări.
 */

.cbcc {
	--cbcc-accent: #b3122e;
	--cbcc-accent-soft: rgba(179, 18, 46, .07);
	--cbcc-ink: #1c1917;
	--cbcc-muted: #6b6560;
	--cbcc-line: #e7e3df;
	--cbcc-bg: #ffffff;
	--cbcc-bg-soft: #faf8f6;
	--cbcc-panel: #1c1917;
	--cbcc-panel-ink: #faf8f6;
	--cbcc-panel-muted: #b8b0a9;
	--cbcc-ok: #15803d;
	--cbcc-err: #b91c1c;
	--cbcc-radius: 14px;

	color: var(--cbcc-ink);
	font-size: 16px;
	line-height: 1.5;
	margin: 0 auto;
	max-width: 1180px;
	text-align: left;
}
@supports (background: color-mix(in srgb, red 10%, white)) {
	.cbcc { --cbcc-accent-soft: color-mix(in srgb, var(--cbcc-accent) 7%, transparent); }
}

.cbcc *, .cbcc *::before, .cbcc *::after { box-sizing: border-box; }
.cbcc h3 { font-size: 20px; line-height: 1.3; margin: 0; color: inherit; font-weight: 700; letter-spacing: -.01em; text-transform: none; }
.cbcc p { margin: 0; }
.cbcc ul { list-style: none; margin: 0; padding: 0; }
.cbcc small { font-size: 13px; }
.cbcc fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cbcc legend { padding: 0; }
.cbcc [hidden] { display: none !important; }
.cbcc input, .cbcc select, .cbcc textarea, .cbcc button { font: inherit; color: inherit; }
.cbcc a { color: var(--cbcc-accent); }

/* ---------- layout ---------- */
.cbcc-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 32px;
	align-items: start;
}
.cbcc-main { display: grid; gap: 20px; min-width: 0; }

.cbcc-step {
	background: var(--cbcc-bg);
	border: 1px solid var(--cbcc-line);
	border-radius: var(--cbcc-radius);
	padding: 28px;
	display: grid;
	gap: 22px;
}
.cbcc-step__head { display: flex; align-items: center; gap: 12px; }
.cbcc-step__num {
	flex: none;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--cbcc-ink);
	color: #fff;
	font-size: 14px; font-weight: 700;
	display: grid; place-items: center;
}

.cbcc-field { display: grid; gap: 10px; }
.cbcc-label { font-weight: 600; font-size: 15px; }
.cbcc-help { color: var(--cbcc-muted); font-size: 14px; }
.cbcc-help--lead { margin-top: -10px; }

/* ---------- employees range ---------- */
.cbcc-range { display: flex; align-items: center; gap: 18px; }
.cbcc-range input[type=range] { flex: 1; accent-color: var(--cbcc-accent); height: 28px; margin: 0; min-width: 0; }
.cbcc-range__num { display: flex; align-items: center; gap: 8px; color: var(--cbcc-muted); font-size: 14px; }
.cbcc-range__num input,
.cbcc-stepper input {
	width: 84px;
	height: 44px;
	padding: 0 10px;
	border: 1px solid var(--cbcc-line);
	border-radius: 10px;
	background: var(--cbcc-bg);
	text-align: center;
	font-weight: 700;
	font-size: 17px;
	color: var(--cbcc-ink);
	box-shadow: none;
	-moz-appearance: textfield;
	appearance: textfield;
}
.cbcc input[type=number]::-webkit-inner-spin-button,
.cbcc input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- segmented presence ---------- */
.cbcc-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cbcc-seg__opt { position: relative; cursor: pointer; margin: 0; }
.cbcc-seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.cbcc-seg__opt span {
	display: grid; gap: 2px;
	height: 100%;
	padding: 12px 14px;
	border: 1px solid var(--cbcc-line);
	border-radius: 10px;
	font-weight: 600; font-size: 14px;
	transition: border-color .15s, background .15s;
}
.cbcc-seg__opt small { color: var(--cbcc-muted); font-weight: 400; }
.cbcc-seg__opt:hover span { border-color: #cfc8c2; }
.cbcc-seg__opt input:checked + span { border-color: var(--cbcc-accent); background: var(--cbcc-accent-soft); box-shadow: inset 0 0 0 1px var(--cbcc-accent); }
.cbcc-seg__opt input:focus-visible + span { outline: 2px solid var(--cbcc-accent); outline-offset: 2px; }

/* ---------- stepper ---------- */
.cbcc-stepper { display: inline-flex; align-items: center; gap: 8px; }
.cbcc-stepper button {
	width: 44px; height: 44px;
	border: 1px solid var(--cbcc-line);
	border-radius: 10px;
	background: var(--cbcc-bg-soft);
	font-size: 20px; line-height: 1;
	cursor: pointer;
	padding: 0;
	color: var(--cbcc-ink);
}
.cbcc-stepper button:hover { border-color: #cfc8c2; background: #f3efeb; }

/* ---------- product cards ---------- */
.cbcc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-items: start; }
.cbcc-card {
	border: 1px solid var(--cbcc-line);
	border-radius: 12px;
	background: var(--cbcc-bg);
	transition: border-color .15s, box-shadow .15s;
	overflow: hidden;
}
.cbcc-card:hover { border-color: #cfc8c2; }
.cbcc-card.is-active { border-color: var(--cbcc-accent); box-shadow: inset 0 0 0 1px var(--cbcc-accent); }

.cbcc-card__toggle { display: flex; align-items: center; gap: 14px; padding: 16px; cursor: pointer; margin: 0; position: relative; }
.cbcc-card__check { position: absolute; opacity: 0; pointer-events: none; }
.cbcc-card__check:focus-visible ~ .cbcc-card__tick { outline: 2px solid var(--cbcc-accent); outline-offset: 2px; }
.cbcc-card__icon {
	flex: none;
	width: 44px; height: 44px;
	border-radius: 10px;
	display: grid; place-items: center;
	background: var(--cbcc-bg-soft);
	color: var(--cbcc-muted);
	transition: background .15s, color .15s;
}
.cbcc-card.is-active .cbcc-card__icon { background: var(--cbcc-accent-soft); color: var(--cbcc-accent); }
.cbcc-card__text { flex: 1; display: grid; gap: 1px; min-width: 0; }
.cbcc-card__text strong { font-size: 16px; }
.cbcc-card__text small { color: var(--cbcc-muted); line-height: 1.35; }
.cbcc-card__tick {
	flex: none;
	width: 22px; height: 22px;
	border-radius: 6px;
	border: 1.5px solid #cfc8c2;
	background: var(--cbcc-bg);
	position: relative;
}
.cbcc-card.is-active .cbcc-card__tick { background: var(--cbcc-accent); border-color: var(--cbcc-accent); }
.cbcc-card.is-active .cbcc-card__tick::after {
	content: "";
	position: absolute; left: 6.5px; top: 2.5px;
	width: 6px; height: 11px;
	border: solid #fff; border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.cbcc-card__variants { display: none; padding: 0 12px 12px; gap: 6px; }
.cbcc-card.is-active .cbcc-card__variants { display: grid; }
.cbcc-variant {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 10px 12px;
	border-radius: 9px;
	border: 1px solid var(--cbcc-line);
	cursor: pointer;
	margin: 0;
	position: relative;
	font-size: 14px;
	background: var(--cbcc-bg);
}
.cbcc-variant input { position: absolute; opacity: 0; pointer-events: none; }
.cbcc-variant__label { display: grid; gap: 1px; padding-left: 26px; position: relative; font-weight: 600; }
.cbcc-variant__label::before {
	content: "";
	position: absolute; left: 0; top: 2px;
	width: 16px; height: 16px;
	border-radius: 50%;
	border: 1.5px solid #cfc8c2;
	background: var(--cbcc-bg);
}
.cbcc-variant__label small { color: var(--cbcc-muted); font-weight: 400; font-size: 12.5px; }
.cbcc-variant__price { text-align: right; font-weight: 700; white-space: nowrap; display: grid; }
.cbcc-variant__price small { color: var(--cbcc-muted); font-weight: 400; font-size: 12px; }
.cbcc-variant:hover { border-color: #cfc8c2; }
.cbcc-variant input:checked ~ .cbcc-variant__label::before { border: 5px solid var(--cbcc-accent); }
.cbcc-variant:has(input:checked) { border-color: var(--cbcc-accent); background: var(--cbcc-accent-soft); }
.cbcc-variant input:focus-visible ~ .cbcc-variant__label::before { outline: 2px solid var(--cbcc-accent); outline-offset: 2px; }
.cbcc-variant.is-oos { opacity: .7; }
.cbcc-oos { color: var(--cbcc-err) !important; }

/* ---------- events ---------- */
.cbcc-switch { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; margin: 0; font-size: 15px; position: relative; }
.cbcc-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cbcc-switch__ui {
	flex: none;
	width: 44px; height: 26px;
	border-radius: 13px;
	background: #d6d0ca;
	position: relative;
	transition: background .2s;
	margin-top: -1px;
}
.cbcc-switch__ui::after {
	content: "";
	position: absolute; top: 3px; left: 3px;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	transition: transform .2s;
}
.cbcc-switch input:checked + .cbcc-switch__ui { background: var(--cbcc-accent); }
.cbcc-switch input:checked + .cbcc-switch__ui::after { transform: translateX(18px); }
.cbcc-switch input:focus-visible + .cbcc-switch__ui { outline: 2px solid var(--cbcc-accent); outline-offset: 2px; }
.cbcc-events { display: grid; gap: 20px; padding-top: 4px; }

/* ---------- summary panel ---------- */
.cbcc-summary { position: sticky; top: 24px; }
.cbcc-summary__inner {
	background: var(--cbcc-panel);
	color: var(--cbcc-panel-ink);
	border-radius: var(--cbcc-radius);
	padding: 26px;
	display: grid;
	gap: 16px;
}
.cbcc-summary__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cbcc-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cbcc-panel-muted); }
.cbcc-tier {
	font-size: 12px; font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255,255,255,.1);
	color: #fff;
}
.cbcc-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: -8px !important; }
.cbcc-total span { font-size: 38px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cbcc-total small { color: var(--cbcc-panel-muted); }
.cbcc-total-secondary { color: var(--cbcc-panel-muted); font-size: 14px; margin-top: -12px !important; font-variant-numeric: tabular-nums; }
.cbcc-total-secondary:empty { display: none; }

.cbcc-sub {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 12px 14px;
	border-radius: 10px;
	background: rgba(255,255,255,.07);
	border: 1px dashed rgba(255,255,255,.22);
	font-size: 14px;
}
.cbcc-sub b { color: #fff; }
.cbcc-sub strong { font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.cbcc-lines { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.12); }
.cbcc-lines li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 10px;
	align-items: baseline;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255,255,255,.08);
	font-size: 14px;
}
.cbcc-lines__qty { font-weight: 700; color: #fff; min-width: 28px; font-variant-numeric: tabular-nums; }
.cbcc-lines__name { display: grid; min-width: 0; }
.cbcc-lines__name small { color: var(--cbcc-panel-muted); font-size: 12px; }
.cbcc-lines__amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cbcc-lines:empty { display: none; }
.cbcc-empty { color: var(--cbcc-panel-muted); font-size: 14px; }

.cbcc-perks { display: grid; gap: 8px; font-size: 14px; }
.cbcc-perks li { display: flex; align-items: center; gap: 10px; }
.cbcc-perks svg { width: 18px; height: 18px; flex: none; color: var(--cbcc-panel-muted); }

.cbcc-eventbox {
	padding: 14px;
	border-radius: 10px;
	background: rgba(255,255,255,.06);
	display: grid; gap: 6px;
}
.cbcc-eventbox__total span { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cbcc-eventbox__total small { color: var(--cbcc-panel-muted); }
.cbcc-lines--compact li { padding: 7px 0; font-size: 13px; }

.cbcc-disclaimer { font-size: 12px; color: var(--cbcc-panel-muted); line-height: 1.45; }

/* ---------- buttons ---------- */
.cbcc .cbcc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px;
	padding: 12px 22px;
	border: 0;
	border-radius: 10px;
	background: var(--cbcc-accent);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s, transform .05s;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
}
.cbcc .cbcc-btn:hover { filter: brightness(1.08); color: #fff; }
.cbcc .cbcc-btn:active { transform: translateY(1px); }
.cbcc .cbcc-btn:focus-visible { outline: 3px solid var(--cbcc-accent); outline-offset: 3px; }
.cbcc-btn--block { width: 100%; }
.cbcc-btn--lg { min-height: 54px; padding: 14px 30px; font-size: 17px; }
.cbcc .cbcc-btn[disabled] { opacity: .65; cursor: progress; }
.cbcc-btn.is-loading span::after {
	content: "";
	display: inline-block;
	width: 14px; height: 14px;
	margin-left: 10px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	vertical-align: -2px;
	animation: cbcc-spin .7s linear infinite;
}
@keyframes cbcc-spin { to { transform: rotate(360deg); } }

/* ---------- lead form ---------- */
.cbcc-lead {
	margin-top: 32px;
	padding: 36px;
	background: var(--cbcc-bg-soft);
	border: 1px solid var(--cbcc-line);
	border-radius: var(--cbcc-radius);
	scroll-margin-top: 90px;
}
.cbcc-lead__head { display: grid; gap: 6px; margin-bottom: 24px; max-width: 640px; }
.cbcc-lead__head h3 { font-size: 24px; }
.cbcc-lead__head p { color: var(--cbcc-muted); }

.cbcc-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.cbcc-input { display: grid; gap: 6px; align-content: start; }
.cbcc-input--full { grid-column: 1 / -1; }
.cbcc-input > label, .cbcc-input > legend { font-weight: 600; font-size: 14px; margin: 0 0 6px; }
.cbcc-input > label { margin: 0; }
.cbcc-optional { color: var(--cbcc-muted); font-weight: 400; }

.cbcc-input input[type=text],
.cbcc-input input[type=tel],
.cbcc-input input[type=email],
.cbcc-input select,
.cbcc-input textarea {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid #d6d0ca;
	border-radius: 10px;
	background: var(--cbcc-bg);
	color: var(--cbcc-ink);
	font-size: 16px;
	box-shadow: none;
	line-height: 1.4;
}
.cbcc-input textarea { min-height: 96px; resize: vertical; }
.cbcc-input select { appearance: auto; }
.cbcc-input input:focus, .cbcc-input select:focus, .cbcc-input textarea:focus {
	outline: none;
	border-color: var(--cbcc-accent);
	box-shadow: 0 0 0 3px var(--cbcc-accent-soft);
}
.cbcc-input.has-error input, .cbcc-input.has-error select, .cbcc-input.has-error textarea { border-color: var(--cbcc-err); }
.cbcc-error { color: var(--cbcc-err); font-size: 13px; min-height: 0; }
.cbcc-error:empty { display: none; }

.cbcc-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cbcc-choice { position: relative; cursor: pointer; margin: 0; }
.cbcc-choice input { position: absolute; opacity: 0; pointer-events: none; }
.cbcc-choice span {
	display: block;
	height: 100%;
	padding: 12px 14px;
	border: 1px solid #d6d0ca;
	border-radius: 10px;
	background: var(--cbcc-bg);
	font-size: 14px; font-weight: 600;
	line-height: 1.35;
}
.cbcc-choice input:checked + span { border-color: var(--cbcc-accent); background: var(--cbcc-accent-soft); box-shadow: inset 0 0 0 1px var(--cbcc-accent); }
.cbcc-choice input:focus-visible + span { outline: 2px solid var(--cbcc-accent); outline-offset: 2px; }

.cbcc-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; margin: 0; color: var(--cbcc-muted); }
.cbcc-check input { margin: 3px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--cbcc-accent); }

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

.cbcc-form__error {
	margin: 18px 0 0 !important;
	padding: 12px 14px;
	border-radius: 10px;
	background: #fef2f2;
	color: var(--cbcc-err);
	font-size: 14px;
}
.cbcc-form [data-submit] { margin-top: 22px; }

.cbcc-success { display: grid; gap: 10px; justify-items: start; padding: 8px 0; outline: none; }
.cbcc-success__icon {
	width: 52px; height: 52px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: #dcfce7;
	color: var(--cbcc-ok);
}
.cbcc-success h3 { font-size: 22px; }

/* ---------- mobile bar ---------- */
.cbcc-mobilebar { display: none; }

/* ---------- responsive ----------
 * Layout reacts to the width the theme gives the plugin (container queries), not to the screen,
 * so it works in a narrow content column as well as on a full-width template.
 * The container is .cbcc-body (not .cbcc) because containment would break the fixed mobile bar.
 */
.cbcc-body { container-type: inline-size; container-name: cbcc; }

@container cbcc (max-width: 900px) {
	.cbcc-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.cbcc-summary { position: static; }
}

@container cbcc (max-width: 620px) {
	.cbcc-step { padding: 20px 16px; gap: 18px; }
	.cbcc-lead { padding: 24px 16px; }
	.cbcc-seg, .cbcc-choices { grid-template-columns: minmax(0, 1fr); }
	.cbcc-form__grid { grid-template-columns: minmax(0, 1fr); }
	.cbcc-cards { grid-template-columns: minmax(0, 1fr); }
	.cbcc-range { flex-direction: column; align-items: stretch; gap: 8px; }
	.cbcc-range__num { justify-content: flex-start; }
	.cbcc-total span { font-size: 32px; }
	.cbcc .cbcc-btn--lg { width: 100%; }
}

/* Older browsers without container queries fall back to the screen width. */
@supports not (container-type: inline-size) {
	@media (max-width: 960px) {
		.cbcc-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
		.cbcc-summary { position: static; }
	}
	@media (max-width: 640px) {
		.cbcc-seg, .cbcc-choices, .cbcc-form__grid, .cbcc-cards { grid-template-columns: minmax(0, 1fr); }
		.cbcc-step, .cbcc-lead { padding: 20px 16px; }
	}
}

@media (max-width: 960px) {
	.cbcc-mobilebar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: fixed;
		left: 12px; right: 12px; bottom: 12px;
		z-index: 9990;
		padding: 10px 10px 10px 16px;
		border-radius: 14px;
		background: var(--cbcc-panel);
		color: var(--cbcc-panel-ink);
		box-shadow: 0 10px 30px rgba(0,0,0,.25);
		transform: translateY(140%);
		transition: transform .25s ease;
	}
	.cbcc-mobilebar.is-visible { transform: none; }
	.cbcc-mobilebar div { display: grid; line-height: 1.25; }
	.cbcc-mobilebar small { color: var(--cbcc-panel-muted); font-size: 12px; }
	.cbcc-mobilebar strong { font-size: 18px; font-variant-numeric: tabular-nums; }
	.cbcc-mobilebar .cbcc-btn { min-height: 44px; padding: 10px 16px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.cbcc *, .cbcc *::before, .cbcc *::after { transition: none !important; animation: none !important; }
}