/**
 * Forme (PLAN.md §6) — modal rezervacije + „Postani partner” stranica.
 * Sve vrednosti iz tokens.css. Breakpointi: 768/1024.
 */

/* ---------- Polja ---------- */
.es-form__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-4) var(--sp-4);
}

.es-form__field { grid-column: span 2; }

.es-form__field--half { grid-column: span 1; }

.es-form__label {
	display: block;
	margin-bottom: var(--sp-2);
	color: var(--c-text-muted);
	font-size: var(--fs-overline);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-overline);
	text-transform: uppercase; 
} 

.es-form__req { color: var(--c-accent); }

.es-form__input {
	width: 100%;
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-bg);
	border: 1px solid var(--c-border-strong);
	border-radius: 0;
	color: var(--c-text);
	caret-color: var(--c-text);
	font-family: var(--font-sans);
	font-size: var(--fs-body-sm);
	line-height: 1.5;
	transition: border-color var(--dur-fast) var(--ease);
}

.es-form__input:focus {
	outline: none;
	border-color: var(--c-accent);
}

.es-form__input.is-invalid { border-color: var(--c-error); }

/* Browser autofill (Chrome/Edge/Safari/Firefox) nameće svoju svetlu pozadinu
   i taman tekst preko naše boje — na tamnoj formi ispadne nečitljivo. Vraćamo
   naše boje i sprečavamo tranziciju u belu pozadinu odloženim tranzicijom. */
.es-form__input:-webkit-autofill,
.es-form__input:-webkit-autofill:hover,
.es-form__input:-webkit-autofill:focus, 
.es-form__input:autofill {
	-webkit-text-fill-color: var(--c-text);
	-webkit-box-shadow: 0 0 0 1000px var(--c-bg) inset;
	box-shadow: 0 0 0 1000px var(--c-bg) inset;
	caret-color: var(--c-text);
	transition: background-color 9999s ease-in-out 0s;
}

.section--light .es-form__input:-webkit-autofill,
.section--light .es-form__input:-webkit-autofill:hover,
.section--light .es-form__input:-webkit-autofill:focus,
.section--light .es-form__input:autofill {
	-webkit-text-fill-color: var(--c-text);
	-webkit-box-shadow: 0 0 0 1000px var(--c-bg) inset;
	box-shadow: 0 0 0 1000px var(--c-bg) inset;
	caret-color: var(--c-text);
}

select.es-form__input { appearance: auto; }

textarea.es-form__input { resize: vertical; }

/* ---------- Checkbox ---------- */
.es-form__checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	cursor: pointer;
	color: var(--c-text-body);
	font-size: var(--fs-small);
	line-height: 1.5;
}

.es-form__checkbox input {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 2px;
	accent-color: var(--c-accent);
}

/* ---------- Greške i status ---------- */
.es-form__error {
	display: none;
	margin: var(--sp-1) 0 0;
	color: var(--c-error);
	font-size: 0.8125rem;
}

.es-form__error.is-visible { display: block; }

.es-form__footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin-top: var(--sp-6);
}

.es-form__status {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--c-text-muted);
}

.es-form__status.is-error { color: var(--c-error); }

.es-form__submit[disabled] {
	opacity: 0.6;
	cursor: wait;
}

/* Honeypot — vizuelno nepostojeće, dostupno botu */
.es-form__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Modal ---------- */
.es-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-4);
}

.es-modal[hidden] { 
	display: none;
}

.es-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(5, 7, 10, 0.8);
	backdrop-filter: blur(4px);
}

.es-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 44rem;
	max-height: calc(100vh - 3rem);
	overflow-y: auto;
	padding: var(--sp-10);
	overflow-x: hidden;
}

.es-modal__close {
	position: absolute;
	top: var(--sp-4);
	right: var(--sp-4);
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: none;
	border: 1px solid var(--c-border-heavy);
	border-radius: 0;
	color: var(--c-text);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
	z-index: 2;
}

.es-modal__close:hover,
.es-modal__close:focus {
	background: none;
	border-color: var(--c-accent);
	color: var(--c-accent);
}

.es-modal__title {
	margin: var(--sp-4) 0 0;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.02em;
}

.es-modal__note {
	margin: var(--sp-3) 0 var(--sp-8);
	color: var(--c-text-muted);
	font-size: var(--fs-small);
}

/* WYSIWYG sadržaj — pasusi i liste iz editora */
.es-modal__note > :last-child { margin-bottom: 0; }
.es-modal__note p { margin: 0 0 var(--sp-2); }
.es-modal__note a { color: var(--c-accent); text-decoration: underline; }
.es-modal__note ul,
.es-modal__note ol { margin: 0 0 var(--sp-2); padding-left: var(--sp-5); }
.es-modal__note li { margin-bottom: var(--sp-1); }

body.es-modal-open { overflow: hidden; }

/* ---------- Popup uspešnog slanja (rezervacija + partner forma) ---------- */
.es-success-modal__dialog {
	max-width: 26rem;
	padding: var(--sp-14) var(--sp-10);
	text-align: center;
}

.es-success-modal__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 auto var(--sp-6);
	border: 1px solid var(--c-accent);
	color: var(--c-accent);
	font-size: 1.25rem;
}

.es-success-modal__message {
	margin: 0;
	color: var(--c-text);
	font-size: var(--fs-body-lg);
	line-height: 1.6;
}

/* ---------- Partner stranica ---------- */
.partner-page__hero {
	padding-block: var(--sp-14) var(--sp-8);
}

.partner-page__hero .section-title { margin-top: var(--sp-4); }

.partner-page__sub {
	margin: var(--sp-6) 0 0;
	max-width: 34rem;
	color: var(--c-text-body);
}

.partner-page__body { padding-block: var(--sp-14) var(--sp-section); }

.partner-page__team { padding-block: 0 var(--sp-section); }

.partner-page__team .overline { margin-bottom: var(--sp-8); }

.partner-page__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--sp-10) 5rem;
	align-items: start;
}

.partner-page__form { padding: var(--sp-10); }

.partner-page__aside .overline { margin-bottom: var(--sp-4); }

.partner-page__content { margin-bottom: var(--sp-8); }

.partner-page__benefits {
	counter-reset: pbenefit;
	margin: 0 0 var(--sp-8);
	padding: 0;
	list-style: none;
}

.partner-page__benefits li {
	counter-increment: pbenefit;
	display: flex;
	gap: var(--sp-3);
	padding-block: var(--sp-3);
	border-bottom: 1px solid var(--c-border-subtle);
	color: var(--c-text);
	font-size: var(--fs-body-sm);
}

.partner-page__benefits li::before {
	content: counter(pbenefit, decimal-leading-zero);
	color: var(--c-accent);
	font-size: var(--fs-overline);
	line-height: 1.9;
	letter-spacing: 0.05em;
}

.partner-page__contact {
	color: var(--c-text-muted);
	font-size: var(--fs-small);
	line-height: 2;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
	.partner-page__grid { grid-template-columns: 1fr; }

	.partner-page__body { padding-block: var(--sp-8) var(--sp-14); }
}

@media (max-width: 767px) {
	.es-form__field--half { grid-column: span 2; }

	.es-modal { padding: var(--sp-2); }

	.es-modal__dialog { padding: var(--sp-6); }

	.partner-page__form { padding: var(--sp-6); }
}