/* ============================================================
   Site Support Contact
   Front-end contact form, subscribe modal, unsubscribe modal
   ============================================================ */

:root {
	--ss-modal-bg: var(--header-bg, #0c141b);
	--ss-modal-text: var(--page-text, #e6eef3);
	--ss-modal-border: color-mix(in srgb, var(--ss-modal-text) 10%, transparent);
	--ss-modal-input-bg: color-mix(in srgb, var(--header-bg, #0c141b) 88%, black 12%);
	--ss-modal-input-bd: color-mix(in srgb, var(--ss-modal-text) 18%, transparent);
	--ss-modal-backdrop: rgba(0, 0, 0, .55);
	--ss-modal-shadow: 0 20px 60px rgba(0, 0, 0, .55);
	--ss-contact-submit: var(--contact-submit, var(--primary, #6aa0ff));
	--ss-contact-submit-hover: var(--contact-submit-hover, var(--primary-hover, #5a8dea));
	--ss-contact-cancel: var(--contact-cancel, #6b7280);
	--ss-contact-cancel-hover: var(--contact-cancel-hover, #4b5563);
	--ss-contact-danger: var(--contact-danger, #e05a5a);
	--ss-contact-muted: var(--contact-muted, var(--footer-text, #cfe0ea));
	--ss-contact-accent: var(--accent, #ffce6a);
}

/* ============================================================
   Contact Page/Form
   ============================================================ */

.ss-contact-subhead {
	margin-bottom: 20px;
	font-size: clamp(1em, 1vw + 0.5rem, 1.5rem);
}

.ss-contact-card {
	max-width: 720px;
	margin: 24px auto;
	padding: 18px 20px;
	border-radius: 14px;
	background: var(--ss-modal-bg);
	color: var(--ss-modal-text);
	border: 1px solid var(--ss-modal-border);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}

.ss-contact-card__title,
.ss-card__title {
	margin: 0 0 12px;
	font-size: 1.25rem;
}

.ss-card__title {
	padding-left: 3px;
}

p.ss-contact-help {
	padding: 10px 5px;
	font-size: 15px;
}

.ss-contact-card__title i,
.ss-card__title i {
	margin-right: 8px;
}

.ss-contact-field {
	margin: 12px 0;
}

.ss-contact-field label {
	display: block;
	margin: 0 0 6px;
	padding-left: 3px;
	font-weight: 600;
	color: var(--ss-modal-text);
}

.ss-contact-field input[type="text"],
.ss-contact-field input[type="email"],
.ss-contact-field textarea {
	width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--ss-modal-input-bd);
	background: var(--ss-modal-input-bg);
	color: var(--ss-modal-text);
	outline: none;
}

.ss-contact-field input[type="text"]:focus,
.ss-contact-field input[type="email"]:focus,
.ss-contact-field textarea:focus {
	color: var(--ss-modal-text);
	border-color: var(--ss-contact-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-contact-accent) 25%, transparent);
}

.ss-contact-field input[aria-invalid="true"],
.ss-contact-field textarea[aria-invalid="true"] {
	border-color: var(--ss-contact-danger) !important;
}

.ss-contact-consent label {
	font-weight: 500;
}

.ss-contact-hp {
	position: absolute;
	left: -9999px;
	opacity: 0;
	height: 0;
	width: 0;
	overflow: hidden;
}

.ss-contact-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
}

.ss-contact-btn {
	background: var(--ss-contact-submit);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 10px 16px;
	font-weight: 700;
	cursor: pointer;
}

.ss-contact-btn:hover,
.ss-contact-btn:focus {
	background: var(--ss-contact-submit-hover);
	color: #fff;
}

.ss-contact-btn.secondary,
.ss-contact-btn.alt {
	background: var(--ss-contact-cancel);
}

.ss-contact-btn.secondary:hover,
.ss-contact-btn.secondary:focus,
.ss-contact-btn.alt:hover,
.ss-contact-btn.alt:focus {
	background: var(--ss-contact-cancel-hover);
	color: #fff;
}

.ss-contact-btn.danger {
	background: var(--ss-contact-danger);
}

.ss-contact-btn:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.ss-contact-status {
	font-size: .95rem;
	opacity: .85;
	color: var(--ss-contact-muted);
}

.ss-contact-actions .ss-contact-status {
	margin-left: auto;
}

/* Opt-in checkbox alignment */
.ss-contact-card .ss-contact-optin label {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: .25rem 0 0;
}

.ss-contact-card .ss-contact-optin input[type="checkbox"] {
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0;
	vertical-align: middle;
}

/* Legacy-compatible button styling when contact template uses shared .btn classes */
.ss-contact-actions .btn {
	border-radius: 999px;
	padding: .8rem 1.2rem;
	text-decoration: none;
}

.ss-contact-actions .btn.btn-secondary {
	background: var(--secondary);
	color: #fff;
	border: none;
}

.ss-contact-actions .btn.btn-secondary:hover,
.ss-contact-actions .btn.btn-secondary:focus {
	background: var(--secondary-hover);
	color: #fff;
	cursor: pointer;
}

/* ============================================================
   Shared Modal System
   Used by subscribe + unsubscribe modals
   ============================================================ */

.ss-modal-backdrop {
	position: fixed;
	inset: 0;
	background: var(--ss-modal-backdrop);
	backdrop-filter: blur(2px);
	z-index: 9998;
}

.ss-modal-backdrop[hidden] {
	display: none !important;
}

.ss-modal {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	z-index: 9999;
}

.ss-modal[hidden] {
	display: none !important;
}

.ss-modal-card,
.ss-modal__inner {
	width: min(520px, 92vw);
	background: var(--ss-modal-bg);
	color: var(--ss-modal-text);
	border-radius: 12px;
	border: 1px solid var(--ss-modal-border);
	box-shadow: var(--ss-modal-shadow);
	transform: translateY(8px);
	opacity: 0;
	animation: ssModalIn .18s ease-out forwards;
}

@keyframes ssModalIn {
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.ss-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid var(--ss-modal-border);
}

.ss-modal-header h3 {
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
}

.ss-modal-close {
	background: transparent;
	border: 0;
	color: var(--ss-contact-muted);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.ss-modal-close:hover,
.ss-modal-close:focus {
	color: var(--ss-modal-text);
}

.ss-modal-body {
	padding: 18px;
}

/* Modal-specific form input overrides */
.ss-modal .ss-contact-field input[type="text"],
.ss-modal .ss-contact-field input[type="email"] {
	background: var(--ss-modal-input-bg);
	color: var(--ss-modal-text);
	border: 1px solid var(--ss-modal-input-bd);
	border-radius: 8px;
}

.ss-modal .ss-contact-field input[type="text"]:focus,
.ss-modal .ss-contact-field input[type="email"]:focus {
	border-color: var(--ss-contact-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-contact-accent) 25%, transparent);
}

/* ============================================================
   Notify / Subscribe Trigger Button
   ============================================================ */

.ss-hp-notify-btn,
.ss-notify-btn {
	padding: 10px;
	font-size: 20px;
	font-weight: 700;
	color: #fff !important;
	background-color: var(--primary);
	border-radius: 999px;
	text-decoration: none;
	text-transform: uppercase;
}

.ss-hp-notify-btn:hover,
.ss-hp-notify-btn:focus,
.ss-notify-btn:hover,
.ss-notify-btn:focus {
	color: #fff !important;
	background-color: var(--primary-hover) !important;
	text-decoration: none;
}

.ss-contact-head {
	font-size: clamp(2rem, 5vw + 0.5rem, 4rem);
}