/* Brilliant Cut Appointments — booking section. Scoped to .bcbk so the theme can't override it. */
.bcbk {
	--bcbk-accent: #b8955a;
	--bcbk-accent-dark: #8f6f3c;
	--bcbk-dark: #14110f;
	--bcbk-ink-soft: #2a2420;
	--bcbk-ivory: #f7f3ec;
	--bcbk-muted: #6d645b;
	--bcbk-line: rgba(20, 17, 15, .12);
	--bcbk-serif: "Cormorant Garamond", "Times New Roman", serif;
	--bcbk-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bcbk-card-bg: #ffffff;
	--bcbk-field-bg: var(--bcbk-ivory);
	--bcbk-info-heading: var(--bcbk-dark);
	--bcbk-info-text: var(--bcbk-dark);
	--bcbk-info-muted: var(--bcbk-muted);
	--bcbk-info-line: var(--bcbk-line);
	--bcbk-info-bg: #ffffff;
	container-type: inline-size; container-name: bcbk;
	font-family: var(--bcbk-sans); font-size: 16px; line-height: 1.7; color: var(--bcbk-info-text);
	-webkit-font-smoothing: antialiased; text-align: left;
}
.bcbk *, .bcbk *::before, .bcbk *::after { box-sizing: border-box; }
.bcbk .bcbk__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.bcbk--form-only .bcbk__grid { display: block; }
.bcbk .bcbk__formcol { container-type: inline-size; container-name: bcbkform; min-width: 0; }
.bcbk .bcbk__info { min-width: 0; }
.bcbk .bcbk-svg { width: 1em; height: 1em; display: block; flex-shrink: 0; }

/* ---------- Left column ---------- */
.bcbk .bcbk__eyebrow {
	margin: 0 0 18px; font-family: var(--bcbk-sans); font-size: .75rem; font-weight: 600; line-height: 1.5;
	letter-spacing: .22em; text-transform: uppercase; color: var(--bcbk-accent-dark);
}
.bcbk .bcbk__heading {
	margin: 0 0 .5em; font-family: var(--bcbk-serif); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 500;
	line-height: 1.15; letter-spacing: -.01em; color: var(--bcbk-info-heading); text-transform: none;
}
.bcbk .bcbk__lead { margin: 0 0 1.2em; font-size: 1.125rem; line-height: 1.7; color: var(--bcbk-info-muted); max-width: 620px; }
.bcbk .bcbk__contact { list-style: none; margin: 0; padding: 0; }
.bcbk .bcbk__contact li { display: flex; gap: 18px; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--bcbk-info-line); list-style: none; }
.bcbk .bcbk__contact li::before, .bcbk .bcbk__contact li::marker { content: none; }
.bcbk .bcbk__contact .bcbk-svg { width: 22px; height: 22px; color: var(--bcbk-accent); margin-top: 4px; }
.bcbk .bcbk__contact strong {
	display: block; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bcbk-info-muted); line-height: 1.7;
}
.bcbk .bcbk__contact a, .bcbk .bcbk__contact span { color: var(--bcbk-info-text); font-size: 1.05rem; text-decoration: none; }
.bcbk .bcbk__contact a:hover { color: var(--bcbk-accent-dark); }
.bcbk .bcbk__copy {
	display: inline-block; margin: 0 0 0 8px; padding: 2px 8px; font: inherit; font-size: .68rem; line-height: 1.6; letter-spacing: .1em;
	text-transform: uppercase; background: none; border: 1px solid currentColor; border-radius: 0; color: var(--bcbk-info-text); cursor: pointer; vertical-align: 2px;
}
.bcbk .bcbk__copy:hover { background: var(--bcbk-info-text); color: var(--bcbk-info-bg); }
.bcbk .bcbk__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* ---------- Buttons ---------- */
.bcbk .bcbk-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin: 0;
	padding: 16px 30px; font-family: var(--bcbk-sans); font-size: .8rem; font-weight: 600; line-height: 1;
	letter-spacing: .16em; text-transform: uppercase; text-decoration: none; text-shadow: none; box-shadow: none;
	border: 1px solid var(--bcbk-dark); border-radius: 2px; cursor: pointer; transition: all .25s ease; white-space: nowrap;
}
.bcbk .bcbk-btn .bcbk-svg { width: 16px; height: 16px; }
.bcbk .bcbk-btn--gold { background: var(--bcbk-accent); border-color: var(--bcbk-accent); color: #fff; }
.bcbk .bcbk-btn--gold:hover { background: var(--bcbk-accent-dark); border-color: var(--bcbk-accent-dark); color: #fff; }
.bcbk .bcbk-btn--outline { background: transparent; color: var(--bcbk-info-text); border-color: var(--bcbk-info-text); }
.bcbk .bcbk-btn--outline:hover { background: var(--bcbk-info-text); color: var(--bcbk-info-bg); }
.bcbk .bcbk-btn--dark { background: var(--bcbk-btn-bg); border-color: var(--bcbk-btn-bg); color: #fff; }
.bcbk .bcbk-btn--dark:hover, .bcbk .bcbk-btn--dark:focus { background: var(--bcbk-accent-dark); border-color: var(--bcbk-accent-dark); color: #fff; }

/* ---------- Form column: keeps its own colours whatever the section behind it ---------- */
.bcbk .bcbk__formcol { --bcbk-form-text: var(--bcbk-dark); --bcbk-btn-bg: var(--bcbk-dark); color: var(--bcbk-form-text); }
.bcbk .bcbk__formcol .bcbk__title, .bcbk .bcbk__formcol .bcbk__field input, .bcbk .bcbk__formcol .bcbk__field select, .bcbk .bcbk__formcol .bcbk__field textarea, .bcbk .bcbk__formcol .bcbk__again { color: var(--bcbk-form-text); }
.bcbk .bcbk__formcol .bcbk__field label { color: var(--bcbk-form-text); opacity: .88; }
.bcbk .bcbk__formcol .bcbk__field select option { color: #14110f; background: #fff; }
.bcbk--on-dark .bcbk__formcol:not(:has(.bcbk__card)) { --bcbk-form-text: #f7f3ec; --bcbk-btn-bg: var(--bcbk-accent); }

/* Dark section behind the widget */
.bcbk--on-dark { --bcbk-info-heading: #f7f3ec; --bcbk-info-text: #f7f3ec; --bcbk-info-muted: #bfb5a7; --bcbk-info-line: rgba(247, 243, 236, .14); --bcbk-info-bg: #14110f; }
.bcbk--on-dark .bcbk__eyebrow { color: var(--bcbk-accent); }

/* ---------- Form card ---------- */
.bcbk .bcbk__card { background: var(--bcbk-card-bg); padding: 48px; border: 1px solid var(--bcbk-line); }
.bcbk .bcbk__title {
	margin: 0 0 8px; font-family: var(--bcbk-serif); font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 500;
	line-height: 1.15; letter-spacing: -.01em; color: var(--bcbk-dark); text-transform: none;
}
.bcbk .bcbk__intro { margin: 0 0 1.2em; color: var(--bcbk-muted); font-size: 1rem; line-height: 1.7; }
.bcbk .bcbk__form { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0; }
.bcbk .bcbk__form[hidden] { display: none; }
.bcbk .bcbk__full { grid-column: 1 / -1; }
.bcbk .bcbk__field { min-width: 0; display: flex; flex-direction: column; }
.bcbk .bcbk__field label {
	display: block; margin: 0 0 8px; padding: 0; font-family: var(--bcbk-sans); font-size: .72rem; font-weight: 600; line-height: 1.5;
	letter-spacing: .14em; text-transform: uppercase; color: var(--bcbk-ink-soft);
}
.bcbk .bcbk__field input, .bcbk .bcbk__field select, .bcbk .bcbk__field textarea {
	display: block; width: 100%; max-width: 100%; height: auto; min-height: 50px; margin: 0; padding: 14px 16px;
	font-family: var(--bcbk-sans); font-size: .95rem; font-weight: 400; line-height: 1.4; color: var(--bcbk-dark);
	background-color: var(--bcbk-field-bg); border: 1px solid var(--bcbk-line); border-radius: 2px; box-shadow: none;
	transition: border-color .2s, background-color .2s; -webkit-appearance: none; appearance: none;
}
.bcbk .bcbk__field input:focus, .bcbk .bcbk__field select:focus, .bcbk .bcbk__field textarea:focus {
	outline: none; border-color: var(--bcbk-accent); background-color: #fff; box-shadow: none;
}
.bcbk .bcbk__field input::placeholder, .bcbk .bcbk__field textarea::placeholder { color: #8a8178; opacity: 1; }
.bcbk .bcbk__field select {
	padding-right: 40px; cursor: pointer; text-overflow: ellipsis;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%2314110f' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.bcbk .bcbk__field input[type="date"] { min-height: 50px; }
.bcbk .bcbk__field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.bcbk .bcbk__field textarea { min-height: 120px; resize: vertical; }
.bcbk .bcbk__field.is-invalid input, .bcbk .bcbk__field.is-invalid select, .bcbk .bcbk__field.is-invalid textarea { border-color: #b44; background-color: #fff; }
.bcbk .bcbk__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.bcbk .bcbk__consent { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 0; }
.bcbk .bcbk__consent input {
	flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; padding: 0; cursor: pointer;
	accent-color: var(--bcbk-dark); -webkit-appearance: checkbox; appearance: auto;
}
.bcbk .bcbk__consent label {
	margin: 0; font-family: var(--bcbk-sans); font-size: .8rem; font-weight: 400; line-height: 1.6;
	letter-spacing: normal; text-transform: none; color: var(--bcbk-muted); cursor: pointer;
}
.bcbk .bcbk__consent a { color: var(--bcbk-accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.bcbk .bcbk__consent.is-invalid label { color: #8a2b2b; }
.bcbk .bcbk__consent.is-invalid input { outline: 2px solid #b44; outline-offset: 2px; }

.bcbk .bcbk__submit { width: 100%; padding: 19px; white-space: normal; }
.bcbk .bcbk__form.is-loading .bcbk__submit { opacity: .6; pointer-events: none; }
.bcbk .bcbk__status:empty { display: none; }
.bcbk .bcbk__msg { padding: 14px 16px; font-size: .92rem; line-height: 1.6; }
.bcbk .bcbk__msg.is-success { background: #eef5ec; color: #2f5a2a; border-left: 3px solid #4f8a46; }
.bcbk .bcbk__msg.is-error { background: #fbeeee; color: #8a2b2b; border-left: 3px solid #b44; }

/* ---------- Success state ---------- */
.bcbk .bcbk__done { text-align: center; padding: 24px 0 8px; outline: none; }
.bcbk .bcbk__done-icon {
	display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 18px;
	border: 1px solid var(--bcbk-accent); color: var(--bcbk-accent); transform: rotate(45deg);
}
.bcbk .bcbk__done-icon svg { width: 26px; height: 26px; transform: rotate(-45deg); }
.bcbk .bcbk__done .bcbk__intro { max-width: 440px; margin: 0 auto 22px; }
.bcbk .bcbk__again {
	padding: 0; background: none; border: 0; border-bottom: 1px solid var(--bcbk-accent); border-radius: 0; color: var(--bcbk-dark);
	font: 600 .75rem/1.8 var(--bcbk-sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}

/* ---------- Responsive (sizes follow the space the widget has, not just the screen) ---------- */
@container bcbk (min-width: 900px) {
	.bcbk .bcbk__grid { grid-template-columns: 1fr 1fr; gap: var(--bcbk-gap, 70px); }
}
@container bcbkform (min-width: 470px) {
	.bcbk .bcbk__form { grid-template-columns: 1fr 1fr; }
}
@container bcbkform (max-width: 420px) {
	.bcbk .bcbk__card { padding: 30px 22px; }
}
@media (max-width: 600px) {
	.bcbk .bcbk__card { padding: 30px 22px; }
	.bcbk .bcbk__actions .bcbk-btn { flex: 1 1 100%; }
}
/* Browsers without container queries (pre-2023) fall back to screen width. */
@supports not (container-type: inline-size) {
	@media (min-width: 961px) { .bcbk .bcbk__grid { grid-template-columns: 1fr 1fr; gap: 70px; } }
	@media (min-width: 601px) { .bcbk .bcbk__form { grid-template-columns: 1fr 1fr; } }
}