/* ===================================================
   SOGH Booking Modal
=================================================== */

/* ── Overlay ──────────────────────────────────────── */
.sogh-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .72);
	z-index: 99999;
	align-items: center;
	justify-content: center;
	padding: 20px;
	backdrop-filter: blur(2px);
	overflow-y: auto;
}

.sogh-modal-overlay.is-open {
	display: flex;
}

/* ── Modal Box ────────────────────────────────────── */
.sogh-modal {
	background: #fff;
	width: 100%;
	max-width: 800px;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
	animation: soghModalIn .22s ease;
	margin: auto;

	/* Hide scrollbar — scroll still works */
	scrollbar-width: none;       /* Firefox */
	-ms-overflow-style: none;    /* IE / Edge */
}

.sogh-modal::-webkit-scrollbar {
	display: none;               /* Chrome, Safari, Opera */
}

@keyframes soghModalIn {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Modal Header ─────────────────────────────────── */
.sogh-modal__header {
	background: #24400E;
	padding: 28px 36px 24px;
}

.sogh-modal__label {
	font-family: 'Saira', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #A1F152;
	margin-bottom: 8px;
}

.sogh-modal__title {
	font-family: 'Saira', sans-serif;
	font-size: 26px;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
	margin: 0;
}

.sogh-modal__service-name {
	font-family: 'Golos Text', sans-serif;
	font-size: 14px;
	color: rgba(255,255,255,.65);
	margin-top: 6px;
}

/* ── Close button ─────────────────────────────────── */
.sogh-modal__close {
	position: absolute;
	top: 16px;
	right: 20px;
	background: none;
	border: none;
	color: rgba(255,255,255,.65);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	transition: color .15s;
}

.sogh-modal__close:hover {
	color: #fff;
}

/* ── Form body ────────────────────────────────────── */
.sogh-modal__body {
	padding: 28px 36px 36px;
}

/* ── 2-column grid for paired fields ─────────────── */
.sogh-form__grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
}

.sogh-form__row {
	margin-bottom: 18px;
}

.sogh-form__row label {
	display: block;
	font-family: 'Saira', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #444;
	margin-bottom: 6px;
}

.sogh-form__row .required-star {
	color: #A1F152;
	margin-left: 2px;
}

.sogh-form__row input,
.sogh-form__row textarea,
.sogh-form__row select {
	width: 100%;
	padding: 12px 14px;
	font-family: 'Golos Text', sans-serif;
	font-size: 15px;
	color: #222;
	background: #f8f8f8;
	border: 1.5px solid #e0e0e0;
	outline: none;
	border-radius: 0;
	transition: border-color .15s, background .15s;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
}

.sogh-form__row input:focus,
.sogh-form__row textarea:focus,
.sogh-form__row select:focus {
	border-color: #A1F152;
	background: #fff;
}

.sogh-form__row input[readonly] {
	background: #f0f0f0;
	color: #666;
	cursor: default;
}

.sogh-form__row textarea {
	resize: vertical;
	min-height: 100px;
}

.sogh-form__row textarea.sogh-textarea--lg {
	min-height: 130px;
}

/* ── Submit ────────────────────────────────────────── */
.sogh-form__submit {
	width: 100%;
	background: #A1F152;
	color: #000;
	border: none;
	padding: 16px 32px;
	font-family: 'Saira', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
	margin-top: 4px;
}

.sogh-form__submit:hover {
	background: #A1F152;
	color: #000;
	opacity: .88;
}

.sogh-form__submit:disabled {
	opacity: .65;
	cursor: not-allowed;
}

/* ── Messages ─────────────────────────────────────── */
.sogh-form__message {
	display: none;
	padding: 12px 16px;
	font-family: 'Golos Text', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	margin-top: 16px;
}

.sogh-form__message.is-error {
	background: #fef2f2;
	color: #b91c1c;
	border-left: 3px solid #b91c1c;
}

.sogh-form__message.is-success {
	background: #f0fdf4;
	color: #166534;
	border-left: 3px solid #166534;
}

/* ── Privacy note ─────────────────────────────────── */
.sogh-form__privacy {
	font-family: 'Golos Text', sans-serif;
	font-size: 12px;
	color: #999;
	margin-top: 14px;
	text-align: center;
}

/* ── Section divider inside form ─────────────────── */
.sogh-form__section-label {
	font-family: 'Saira', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #24400E;
	border-bottom: 2px solid #A1F152;
	padding-bottom: 6px;
	margin: 24px 0 18px;
}

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 620px) {
	.sogh-form__grid-2 {
		grid-template-columns: 1fr;
	}
	.sogh-modal__header,
	.sogh-modal__body {
		padding-left: 20px;
		padding-right: 20px;
	}
}