/* ==========================================================================
   Apply Modal — Zoho Application Form
   ========================================================================== */

/* -- Overlay -------------------------------------------------------------- */

.pg-apply-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.75);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pg-apply-modal--open {
	opacity: 1;
	visibility: visible;
}

/* -- Container ------------------------------------------------------------ */

.pg-apply-modal__container {
	position: relative;
	width: 94%;
	max-width: 960px;
	max-height: 90vh;
	background-color: var(--pg-primary-medium-blue);
	border-radius: 0.75rem;
	display: flex;
	flex-direction: column;
	transform: translateY(24px);
	transition: transform 0.3s ease, max-width 0.4s ease;
}

.pg-apply-modal--open .pg-apply-modal__container {
	transform: translateY(0);
}

/* -- Header --------------------------------------------------------------- */

.pg-apply-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.75rem 2rem 0;
	flex-shrink: 0;
}

.pg-apply-modal__title {
	font-family: var(--pg-font-family);
	font-size: 1.5rem;
	font-weight: var(--pg-font-weight-bold);
	color: var(--pg-off-white-2);
	margin: 0;
	letter-spacing: 0.01em;
}

/* -- Close Button --------------------------------------------------------- */

.pg-apply-modal__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: none;
	border: 1px solid var(--pg-mid-gray);
	border-radius: 50%;
	color: var(--pg-off-white);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
	flex-shrink: 0;
}

.pg-apply-modal__close:hover {
	border-color: var(--pg-off-white-2);
	color: var(--pg-off-white-2);
}

.pg-apply-modal__close svg {
	width: 14px;
	height: 14px;
}

/* -- Scrollable Body ------------------------------------------------------ */

.pg-apply-modal__body {
	overflow-y: auto;
	padding: 1.5rem 2rem 2rem;
	flex: 1;
	min-height: 0;
}

/* Scrollbar styling */
.pg-apply-modal__body::-webkit-scrollbar {
	width: 6px;
}

.pg-apply-modal__body::-webkit-scrollbar-track {
	background: transparent;
}

.pg-apply-modal__body::-webkit-scrollbar-thumb {
	background-color: var(--pg-mid-gray);
	border-radius: 3px;
}

/* ==========================================================================
   Form Overrides — Zoho Web-to-Entity Form
   ========================================================================== */

/* Reset Zoho wrapper */
#crmWebToEntityForm.zcwf_lblLeft {
	background-color: transparent !important;
	color: var(--pg-text-color) !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Hide the Zoho title — we use our own modal header */
#crmWebToEntityForm .zcwf_title {
	display: none !important;
}

/* -- Rows ----------------------------------------------------------------- */

#crmWebToEntityForm .zcwf_row {
	margin: 0 0 1.25rem !important;
}

/* -- Paired Field Rows (two-column) ----------------------------------- */

.pg-form-row--pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.25rem;
}

/* -- Labels (stacked above fields) ---------------------------------------- */

#crmWebToEntityForm .zcwf_col_lab {
	width: 100% !important;
	float: none !important;
	margin: 0 0 0.4rem !important;
	padding: 0 !important;
}

#crmWebToEntityForm .zcwf_col_lab label {
	font-family: var(--pg-font-family) !important;
	font-size: 0.875rem !important;
	font-weight: var(--pg-font-weight-medium) !important;
	color: var(--pg-off-white) !important;
}

/* Required asterisk */
#crmWebToEntityForm .zcwf_col_lab label span {
	color: var(--pg-orange) !important;
}

/* -- Field Container ------------------------------------------------------ */

#crmWebToEntityForm .zcwf_col_fld {
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
}

/* -- Text Inputs ---------------------------------------------------------- */

#crmWebToEntityForm .zcwf_col_fld input[type="text"],
#crmWebToEntityForm .zcwf_col_fld input[type="password"],
#crmWebToEntityForm .zcwf_col_fld input[type="email"] {
	width: 100% !important;
	float: none !important;
	background-color: var(--pg-primary-dark-blue) !important;
	border: 1px solid var(--pg-mid-gray) !important;
	border-radius: 0.375rem !important;
	padding: 0.7rem 0.875rem !important;
	font-family: var(--pg-font-family) !important;
	font-size: 0.9375rem !important;
	color: var(--pg-text-color) !important;
	transition: border-color 0.2s ease !important;
	box-sizing: border-box !important;
}

#crmWebToEntityForm .zcwf_col_fld input[type="text"]:focus,
#crmWebToEntityForm .zcwf_col_fld input[type="password"]:focus,
#crmWebToEntityForm .zcwf_col_fld input[type="email"]:focus {
	border-color: var(--pg-light-blue-gray) !important;
	outline: none !important;
}

#crmWebToEntityForm .zcwf_col_fld input::placeholder {
	color: var(--pg-light-blue-gray) !important;
	opacity: 0.6 !important;
}

/* -- Textareas ------------------------------------------------------------ */

#crmWebToEntityForm .zcwf_col_fld textarea {
	width: 100% !important;
	float: none !important;
	background-color: var(--pg-primary-dark-blue) !important;
	border: 1px solid var(--pg-mid-gray) !important;
	border-radius: 0.375rem !important;
	padding: 0.7rem 0.875rem !important;
	font-family: var(--pg-font-family) !important;
	font-size: 0.9375rem !important;
	color: var(--pg-text-color) !important;
	min-height: 80px !important;
	resize: vertical !important;
	transition: border-color 0.2s ease !important;
	box-sizing: border-box !important;
}

#crmWebToEntityForm .zcwf_col_fld textarea:focus {
	border-color: var(--pg-light-blue-gray) !important;
	outline: none !important;
}

/* -- Selects -------------------------------------------------------------- */

#crmWebToEntityForm .zcwf_col_fld_slt {
	width: 100% !important;
	float: none !important;
	background-color: var(--pg-primary-dark-blue) !important;
	border: 1px solid var(--pg-mid-gray) !important;
	border-radius: 0.375rem !important;
	padding: 0.7rem 0.875rem !important;
	font-family: var(--pg-font-family) !important;
	font-size: 0.9375rem !important;
	color: var(--pg-text-color) !important;
	cursor: pointer !important;
	transition: border-color 0.2s ease !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%238a9bb0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.875rem center !important;
}

#crmWebToEntityForm .zcwf_col_fld_slt:focus {
	border-color: var(--pg-light-blue-gray) !important;
	outline: none !important;
}

#crmWebToEntityForm .zcwf_col_fld_slt option {
	background-color: var(--pg-primary-dark-blue) !important;
	color: var(--pg-text-color) !important;
}

/* -- Submit / Reset Buttons ----------------------------------------------- */

#crmWebToEntityForm form > .zcwf_row:last-child {
	margin-top: 0.5rem !important;
}

#crmWebToEntityForm form > .zcwf_row:last-child .zcwf_col_lab {
	display: none !important;
}

#crmWebToEntityForm .formsubmit.zcwf_button {
	display: inline-block !important;
	width: 100% !important;
	padding: 0.9rem 2rem !important;
	font-family: var(--pg-font-family) !important;
	font-size: 0.875rem !important;
	font-weight: var(--pg-font-weight-semibold) !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--pg-white) !important;
	background: var(--pg-orange) !important;
	border: none !important;
	border-radius: 0.36rem !important;
	cursor: pointer !important;
	transition: background-color 0.3s ease !important;
	line-height: 1.6 !important;
}

#crmWebToEntityForm .formsubmit.zcwf_button:hover {
	background: var(--pg-orange-hover) !important;
}

#crmWebToEntityForm .formsubmit.zcwf_button:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
}

/* Hide the Reset button */
#crmWebToEntityForm input[name="reset"] {
	display: none !important;
}

/* -- Help text ------------------------------------------------------------ */

#crmWebToEntityForm .zcwf_col_help {
	display: none !important;
}

/* -- Error messages (inline) ---------------------------------------------- */

.pg-apply-modal__field-error {
	display: block;
	font-family: var(--pg-font-family);
	font-size: 0.8125rem;
	color: #f87171;
	margin-top: 0.35rem;
}

/* ==========================================================================
   Success State
   ========================================================================== */

.pg-apply-modal__success {
	display: none;
	text-align: center;
	padding: 3rem 1rem;
}

.pg-apply-modal__success--visible {
	display: block;
}

.pg-apply-modal__success-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 1.5rem;
	background-color: var(--pg-orange);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pg-apply-modal__success-icon svg {
	width: 32px;
	height: 32px;
	color: var(--pg-white);
}

.pg-apply-modal__success-title {
	font-family: var(--pg-font-family);
	font-size: 1.5rem;
	font-weight: var(--pg-font-weight-bold);
	color: var(--pg-off-white-2);
	margin: 0 0 0.75rem;
}

.pg-apply-modal__success-text {
	font-family: var(--pg-font-family);
	font-size: 1rem;
	color: var(--pg-off-white);
	line-height: 1.6;
	margin: 0 0 2rem;
}

.pg-apply-modal__success-close {
	display: inline-block;
	padding: 0.75rem 2.5rem;
	font-family: var(--pg-font-family);
	font-size: 0.875rem;
	font-weight: var(--pg-font-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pg-white);
	background-color: var(--pg-orange);
	border: none;
	border-radius: 0.36rem;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.pg-apply-modal__success-close:hover {
	background-color: var(--pg-orange-hover);
}

/* ==========================================================================
   Video Success State
   ========================================================================== */

/* Wider container for the thank-you video */
.pg-apply-modal--video .pg-apply-modal__container {
	max-width: 1100px;
}

/* Hide the form header — success content has its own heading */
.pg-apply-modal--video .pg-apply-modal__header {
	display: none;
}

/* Adjusted padding for video layout */
.pg-apply-modal--video .pg-apply-modal__success {
	padding: 1.5rem 1rem 2rem;
}

/* Responsive 16:9 video wrapper */
.pg-apply-modal__video-wrap {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	margin: 1.5rem 0;
	border-radius: 0.5rem;
	overflow: hidden;
	background: #000;
}

.pg-apply-modal__video-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet — pairs stack to single column */
@media (max-width: 768px) {
	.pg-apply-modal__container {
		max-width: 700px;
	}

	.pg-form-row--pair {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.pg-apply-modal__container {
		width: 100%;
		max-height: 100vh;
		border-radius: 0;
	}

	.pg-apply-modal__header {
		padding: 1.25rem 1.25rem 0;
	}

	.pg-apply-modal__body {
		padding: 1.25rem;
	}

	.pg-apply-modal__title {
		font-size: 1.25rem;
	}
}