/* standalone-form.css — shared styles for /inquiry and /book.
   Public pages that are clean, branded, mobile-first form views the
   team can send to customers as direct URLs.
*/

.sf-page {
	max-width: 760px;
	margin: 0 auto;
	padding: 40px 20px 80px;
}
/* When nested inside the site-wide .s-page-top wave section, the wave
   provides the top padding (110px). Drop our own top padding so the
   card sits closer to the wave, and add a subtle border so the white
   card stays visible against the light-teal wave background. */
.s-page-top > .sf-page {
	padding-top: 14px;
	padding-bottom: 60px;
}
.s-page-top .sf-card {
	border-color: rgba(167, 210, 219, 0.5);
	box-shadow: 0 12px 40px rgba(27, 59, 80, 0.10);
}

.sf-card {
	background: #fff;
	border: 1px solid #eef1f5;
	border-radius: 18px;
	padding: 32px 32px 36px;
	box-shadow: 0 12px 40px rgba(27, 59, 80, 0.06);
}
@media (max-width: 600px) {
	.sf-card { padding: 22px 18px 26px; border-radius: 14px; }
	.sf-page { padding: 20px 12px 60px; }
	.s-page-top > .sf-page { padding-top: 8px; padding-bottom: 40px; }
}

.sf-eyebrow {
	display: inline-block;
	padding: 3px 12px;
	background: rgba(240, 98, 26, 0.12);
	color: #F0621A;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: 999px;
	margin-bottom: 14px;
}
.sf-title {
	margin: 0 0 10px;
	font-size: 28px;
	font-weight: 800;
	color: #1B3B50;
	line-height: 1.2;
}
.sf-lead {
	margin: 0 0 24px;
	color: #6b7585;
	font-size: 15px;
	line-height: 1.55;
}

.sf-form { display: flex; flex-direction: column; gap: 16px; }

.sf-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.sf-row-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 600px) { .sf-row, .sf-row-3 { grid-template-columns: 1fr; } }

.sf-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.sf-label {
	font-size: 13px;
	font-weight: 600;
	color: #1B3B50;
}
.sf-field input,
.sf-field select,
.sf-field textarea {
	padding: 11px 14px;
	border: 1px solid #d6dce5;
	border-radius: 10px;
	font-size: 15px;
	font-family: inherit;
	color: #1B3B50;
	background: #fff;
	transition: border-color .12s ease, box-shadow .12s ease;
	width: 100%;
	box-sizing: border-box;
}
.sf-field input:focus,
.sf-field select:focus,
.sf-field textarea:focus {
	outline: none;
	border-color: #F0621A;
	box-shadow: 0 0 0 3px rgba(240, 98, 26, 0.14);
}
.sf-field textarea { resize: vertical; min-height: 90px; }
.sf-hint {
	font-size: 11px;
	color: #8a93a8;
	margin-top: -2px;
}

.sf-event-info {
	margin-top: 8px;
	padding: 8px 12px;
	background: #f8f9fc;
	border-radius: 8px;
	font-size: 13px;
	color: #4b5871;
	line-height: 1.5;
}
.sf-warn { color: #c44a36; font-weight: 600; }

.sf-total {
	padding: 12px 16px;
	background: rgba(240, 98, 26, 0.08);
	border: 1px solid rgba(240, 98, 26, 0.20);
	border-radius: 10px;
	font-size: 14px;
	color: #1B3B50;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.sf-total strong { font-size: 18px; color: #F0621A; font-weight: 800; }

.sf-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: #4b5871;
	line-height: 1.5;
	padding: 4px 0;
	cursor: pointer;
}
.sf-consent input[type="checkbox"] {
	width: 18px; height: 18px; margin-top: 1px; accent-color: #F0621A;
	cursor: pointer; flex-shrink: 0;
}
.sf-consent a { color: #F0621A; text-decoration: underline; }

.sf-error {
	padding: 11px 14px;
	background: #fff0eb;
	border: 1px solid #f5b693;
	color: #c44a36;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
}

.sf-submit {
	margin-top: 8px;
	padding: 14px 20px;
	background: #F0621A;
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background .12s ease, transform .08s ease;
}
.sf-submit:hover:not(:disabled) {
	background: #d9521a;
	transform: translateY(-1px);
}
.sf-submit:disabled {
	background: #f5b693;
	cursor: wait;
}

.sf-empty {
	padding: 28px 24px;
	background: #f8f9fc;
	border-radius: 12px;
	text-align: center;
	color: #6b7585;
	font-size: 14px;
	line-height: 1.6;
}
.sf-empty a { color: #F0621A; font-weight: 700; text-decoration: underline; }

/* Success state — rendered as a centered modal dialog over the page.
   The form behind it is hidden by JS but the modal sits on top of
   whatever is left (the wave background) so the customer's first
   visual confirmation is unmistakable. One primary CTA back to home. */
.sf-success {
	position: fixed;
	inset: 0;
	background: rgba(27, 59, 80, 0.45);
	-webkit-backdrop-filter: blur(3px);
	        backdrop-filter: blur(3px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 1000;
	animation: sf-success-fade 0.18s ease-out;
}
.sf-success[hidden] { display: none !important; }
.sf-success-card {
	background: #fff;
	border-radius: 18px;
	padding: 36px 32px 28px;
	text-align: center;
	max-width: 440px;
	width: 100%;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
	animation: sf-success-pop 0.22s ease-out;
}
.sf-success-icon {
	width: 68px; height: 68px;
	background: #DEF7E0;
	color: #2D7233;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	font-weight: 800;
	margin-bottom: 18px;
}
.sf-success-title {
	margin: 0 0 10px;
	font-size: 24px;
	color: #1B3B50;
	font-weight: 800;
	letter-spacing: -0.3px;
}
.sf-success-text {
	color: #4b5871;
	font-size: 15px;
	line-height: 1.55;
	margin: 0 0 22px;
}
.sf-success-btn {
	display: inline-block;
	background: #F0621A;
	color: #fff !important;
	padding: 12px 22px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.12s, box-shadow 0.12s;
}
.sf-success-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(240, 98, 26, 0.35);
}
.sf-success-btn:active { transform: translateY(0); }

@keyframes sf-success-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes sf-success-pop {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 600px) {
	.sf-success-card { padding: 28px 22px 22px; border-radius: 14px; }
	.sf-success-title { font-size: 20px; }
	.sf-success-icon { width: 60px; height: 60px; font-size: 30px; }
}

/* Legacy inline-link class kept for backwards compat in unrelated views. */
.sf-link {
	color: #F0621A;
	font-weight: 600;
	text-decoration: none;
	display: inline-block;
	margin-top: 10px;
}
.sf-link:hover { text-decoration: underline; }

/* Promocode field — collapsed by default behind a "+ Маю промокод"
   summary so it doesn't dominate the form. Click → expands a compact
   input + small OK button row. */
.sf-promo-details {
	background: #f8f9fc;
	border: 1px solid #eef1f5;
	border-radius: 8px;
	padding: 8px 12px;
}
.sf-promo-details summary {
	cursor: pointer;
	user-select: none;
	color: #F0621A;
	font-size: 13px;
	font-weight: 600;
	list-style: none;
}
.sf-promo-details summary::-webkit-details-marker { display: none; }
.sf-promo-details summary::marker             { display: none; }
.sf-promo-details[open] summary {
	margin-bottom: 8px;
	color: #1B3B50;
}
.sf-promo { display: flex; gap: 6px; }
.sf-promo input {
	flex: 1;
	padding: 8px 10px;
	font-size: 13px;
	border: 1px solid #d6dce5;
	border-radius: 6px;
	background: #fff;
}
.sf-promo input:focus {
	outline: none;
	border-color: #F0621A;
	box-shadow: 0 0 0 2px rgba(240, 98, 26, 0.12);
}
.sf-promo-btn {
	flex-shrink: 0;
	padding: 0 14px;
	background: #1B3B50;
	color: #fff;
	border: 0;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background .12s ease;
}
.sf-promo-btn:hover:not(:disabled) { background: #0f2937; }
.sf-promo-btn:disabled { background: #7d8b9b; cursor: wait; }

.sf-promo-result {
	margin-top: 6px;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
}
.sf-promo-result-ok  { background: #DEF7E0; color: #2D7233; }
.sf-promo-result-err { background: #fff0eb; color: #c44a36; }