/* ==========================================================================
   Hauen.Media Contact Form — Frontend Styles
   ========================================================================== */

.hm-cf-wrapper {
	--hm-bg:        #263148;
	--hm-accent:    #D4FF5C;
	--hm-ink:       #05060B;
	--hm-white:     #FFFFFF;
	--hm-white-10:  rgba(255,255,255,0.10);
	--hm-white-15:  rgba(255,255,255,0.15);
	--hm-white-30:  rgba(255,255,255,0.30);
	--hm-white-60:  rgba(255,255,255,0.60);
	--hm-error-bg:  rgba(239,68,68,0.15);
	--hm-error-bdr: rgba(239,68,68,0.45);
	--hm-success-bg:  rgba(212,255,92,0.12);
	--hm-success-bdr: rgba(212,255,92,0.40);
	--hm-radius:    10px;
	--hm-radius-sm: 6px;
	--hm-pad:       clamp(24px, 5vw, 48px);
	--hm-font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	font-family: var(--hm-font);
	box-sizing:  border-box;
}

.hm-cf-wrapper *,
.hm-cf-wrapper *::before,
.hm-cf-wrapper *::after { box-sizing: inherit; }

/* ── Container ────────────────────────────────────────────────────── */
.hm-cf-wrapper {
	background:    var(--hm-bg);
	border-radius: 16px;
	padding:       var(--hm-pad);
	color:         var(--hm-white);
	position:      relative;
	overflow:      hidden;
	max-width:     680px;
}

/* ambient glow */
.hm-cf-wrapper::before {
	content:    '';
	position:   absolute;
	inset:      -100px -100px auto auto;
	width:      300px;
	height:     300px;
	background: radial-gradient(circle, rgba(212,255,92,0.07) 0%, transparent 70%);
	pointer-events: none;
}

/* ── Header ───────────────────────────────────────────────────────── */
.hm-cf-header { margin-bottom: 28px; position: relative; z-index: 1; }

.hm-cf-logo-mark {
	display:      inline-block;
	color:        var(--hm-accent);
	font-size:    0.9rem;
	margin-bottom: 10px;
	filter:       drop-shadow(0 0 6px rgba(212,255,92,.5));
}

.hm-cf-title {
	margin:        0 0 6px;
	font-size:     clamp(1.3rem, 3vw, 1.75rem);
	font-weight:   700;
	color:         var(--hm-white);
	line-height:   1.2;
	letter-spacing: -0.02em;
}

.hm-cf-subtitle {
	margin:    0;
	color:     var(--hm-white-60);
	font-size: 0.9rem;
	line-height: 1.6;
}

/* ── Form layout ──────────────────────────────────────────────────── */
.hm-cf-form { position: relative; z-index: 1; }

.hm-cf-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 0;
}

@media (max-width: 520px) {
	.hm-cf-row { grid-template-columns: 1fr; }
}

/* ── Fields ───────────────────────────────────────────────────────── */
.hm-cf-field { margin-bottom: 16px; }

.hm-cf-label {
	display:        block;
	font-size:      0.78rem;
	font-weight:    600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color:          var(--hm-white-60);
	margin-bottom:  7px;
}

.hm-cf-req { color: var(--hm-accent); margin-left: 3px; }

.hm-cf-input,
.hm-cf-textarea,
.hm-cf-select {
	width:           100%;
	background:      var(--hm-white-10);
	border:          1.5px solid var(--hm-white-15);
	border-radius:   var(--hm-radius-sm);
	padding:         11px 14px;
	color:           var(--hm-white);
	font-size:       0.95rem;
	font-family:     var(--hm-font);
	transition:      border-color .2s, background .2s, box-shadow .2s;
	outline:         none;
	-webkit-appearance: none;
}

.hm-cf-input::placeholder,
.hm-cf-textarea::placeholder { color: var(--hm-white-30); }

.hm-cf-input:focus,
.hm-cf-textarea:focus,
.hm-cf-select:focus {
	border-color: var(--hm-accent);
	background:   rgba(255,255,255,0.13);
	box-shadow:   0 0 0 3px rgba(212,255,92,0.12);
}

.hm-cf-input.hm-error,
.hm-cf-textarea.hm-error { border-color: rgba(239,68,68,0.7); }

.hm-cf-textarea { resize: vertical; min-height: 130px; }

.hm-cf-select {
	cursor:       pointer;
	appearance:   none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
}

.hm-cf-select option { background: #263148; color: #fff; }

.hm-cf-char-count {
	display:    block;
	text-align: right;
	font-size:  0.75rem;
	color:      var(--hm-white-30);
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
}

/* ── Submit button ────────────────────────────────────────────────── */
.hm-cf-submit {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	background:      var(--hm-accent);
	color:           var(--hm-ink);
	border:          none;
	border-radius:   var(--hm-radius-sm);
	padding:         13px 28px;
	font-size:       0.95rem;
	font-weight:     700;
	font-family:     var(--hm-font);
	cursor:          pointer;
	transition:      transform .15s, box-shadow .15s, background .15s;
	width:           100%;
	justify-content: center;
	margin-top:      4px;
}

.hm-cf-submit:hover:not(:disabled) {
	background:  #c8f54e;
	transform:   translateY(-1px);
	box-shadow:  0 6px 20px rgba(212,255,92,0.25);
}

.hm-cf-submit:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.hm-cf-submit:disabled { opacity: 0.65; cursor: not-allowed; }

.hm-cf-submit-arrow { transition: transform .2s; font-size: 1.1rem; }
.hm-cf-submit:hover:not(:disabled) .hm-cf-submit-arrow { transform: translateX(4px); }

/* ── Alerts ───────────────────────────────────────────────────────── */
.hm-cf-alert {
	border-radius: var(--hm-radius-sm);
	padding:       12px 16px;
	font-size:     0.9rem;
	margin-bottom: 18px;
	line-height:   1.5;
}

.hm-cf-alert[hidden] { display: none; }

.hm-cf-alert--success {
	background: var(--hm-success-bg);
	border:     1px solid var(--hm-success-bdr);
	color:      #c8f54e;
}

.hm-cf-alert--error {
	background: var(--hm-error-bg);
	border:     1px solid var(--hm-error-bdr);
	color:      #fca5a5;
}

/* ── Success state (replaces form after send) ─────────────────────── */
.hm-cf-success-state {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content: center;
	text-align:     center;
	padding:        40px 20px;
	gap:            16px;
	animation:      hmFadeIn .4s ease both;
}

.hm-cf-success-icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           56px;
	height:          56px;
	border-radius:   50%;
	background:      rgba(212,255,92,0.15);
	border:          2px solid var(--hm-accent);
	color:           var(--hm-accent);
	font-size:       1.5rem;
	font-weight:     700;
}

.hm-cf-success-text {
	margin:    0;
	color:     var(--hm-white-60);
	font-size: 0.95rem;
	line-height: 1.6;
	max-width: 360px;
}

/* ── Access notice ────────────────────────────────────────────────── */
.hm-cf-notice {
	border-radius: var(--hm-radius-sm);
	padding:       16px;
	font-size:     0.9rem;
	position:      relative;
	z-index:       1;
}

.hm-cf-notice--warning {
	background: rgba(251,191,36,0.12);
	border:     1px solid rgba(251,191,36,0.35);
	color:      #fde68a;
}

.hm-cf-login-link { color: #fbbf24; text-decoration: underline; }
.hm-cf-login-link:hover { color: #fde68a; }

/* ── Spinner ──────────────────────────────────────────────────────── */
@keyframes hmSpin    { to { transform: rotate(360deg); } }
@keyframes hmFadeIn  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.hm-spinner {
	width:         16px;
	height:        16px;
	border:        2px solid var(--hm-ink);
	border-top-color: transparent;
	border-radius: 50%;
	animation:     hmSpin .6s linear infinite;
	display:       inline-block;
}

/* ==========================================================================
   Light theme  (data-theme="light")
   ========================================================================== */

.hm-cf-wrapper--light {
	--hm-bg:          #EDE8F5;
	--hm-accent:      #3B0F6E;
	--hm-ink:         #FFFFFF;
	--hm-white:       #1A0A2E;
	--hm-white-10:    rgba(26,10,46,0.06);
	--hm-white-15:    rgba(26,10,46,0.12);
	--hm-white-30:    rgba(26,10,46,0.38);
	--hm-white-60:    rgba(26,10,46,0.60);
	--hm-error-bg:    rgba(185,28,28,0.08);
	--hm-error-bdr:   rgba(185,28,28,0.35);
	--hm-success-bg:  rgba(59,15,110,0.08);
	--hm-success-bdr: rgba(59,15,110,0.30);
}

.hm-cf-wrapper--light::before {
	background: radial-gradient(circle, rgba(139,92,246,0.08) 0%, transparent 70%);
}

.hm-cf-wrapper--light .hm-cf-logo-mark {
	color:  var(--hm-accent);
	filter: drop-shadow(0 0 6px rgba(139,92,246,.3));
}

.hm-cf-wrapper--light .hm-cf-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(26,10,46,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.hm-cf-wrapper--light .hm-cf-select option { background: #EDE8F5; color: #1A0A2E; }

.hm-cf-wrapper--light .hm-cf-submit {
	background: var(--hm-accent);
	color:      #FFFFFF;
}

.hm-cf-wrapper--light .hm-cf-submit:hover:not(:disabled) {
	background: #2d0b56;
	box-shadow: 0 6px 20px rgba(59,15,110,0.22);
}

.hm-cf-wrapper--light .hm-spinner {
	border-color:     #FFFFFF;
	border-top-color: transparent;
}

.hm-cf-wrapper--light .hm-cf-alert--success {
	background: rgba(59,15,110,0.09);
	border:     1px solid rgba(59,15,110,0.30);
	color:      #2d0b56;
}

.hm-cf-wrapper--light .hm-cf-alert--error {
	background: rgba(185,28,28,0.08);
	border:     1px solid rgba(185,28,28,0.30);
	color:      #991b1b;
}

.hm-cf-wrapper--light .hm-cf-success-icon {
	background: rgba(59,15,110,0.10);
	border:     2px solid var(--hm-accent);
	color:      var(--hm-accent);
}

.hm-cf-wrapper--light .hm-cf-notice--warning {
	background: rgba(161,98,7,0.08);
	border:     1px solid rgba(161,98,7,0.28);
	color:      #92400e;
}

.hm-cf-wrapper--light .hm-cf-login-link { color: #78350f; }

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.hm-cf-submit,
	.hm-cf-submit-arrow,
	.hm-spinner,
	.hm-cf-success-state { animation: none; transition: none; }
}