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

/* Design tokens */
.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-gap:       clamp(20px, 4vw, 40px);
	--hm-pad:       clamp(20px, 5vw, 40px);
	--hm-font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--hm-mono:      "SFMono-Regular", Menlo, Consolas, monospace;

	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;
}

/* Subtle ambient accent glow behind form area */
.hm-cf-wrapper::before {
	content:    '';
	position:   absolute;
	inset:      -120px -120px auto auto;
	width:      340px;
	height:     340px;
	background: radial-gradient(circle, rgba(212,255,92,0.08) 0%, transparent 70%);
	pointer-events: none;
}

/* ——— Grid ———————————————————————————————————————————————————————— */
.hm-cf-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hm-gap);
	position: relative;
	z-index: 1;
}

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

/* ——— Column divider ————————————————————————————————————————————— */
.hm-cf-col--history {
	border-left: 1px solid var(--hm-white-15);
	padding-left: var(--hm-gap);
}

@media (max-width: 780px) {
	.hm-cf-col--history {
		border-left:  none;
		border-top:   1px solid var(--hm-white-15);
		padding-left: 0;
		padding-top:  var(--hm-gap);
	}
}

/* ——— Header ————————————————————————————————————————————————————— */
.hm-cf-header {
	margin-bottom: 28px;
}

.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, 2.5vw, 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 fields ———————————————————————————————————————————————— */
.hm-cf-field {
	margin-bottom: 18px;
	position: relative;
}

.hm-cf-label {
	display:       block;
	font-size:     0.8rem;
	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 {
	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 {
	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: 120px;
}

.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);
	letter-spacing:  0.01em;
	cursor:          pointer;
	transition:      transform .15s, box-shadow .15s, background .15s;
	width:           100%;
	justify-content: center;
	margin-top:      6px;
}

.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;
}

/* ——— Access notice ————————————————————————————————————————————— */
.hm-cf-notice {
	border-radius: var(--hm-radius-sm);
	padding:       16px;
	font-size:     0.9rem;
}

.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;
}

/* ——— History panel ————————————————————————————————————————————— */
.hm-cf-history-header {
	display:     flex;
	align-items: center;
	gap:         8px;
	margin-bottom: 18px;
}

.hm-cf-history-icon {
	color:   var(--hm-accent);
	display: flex;
}

.hm-cf-history-title {
	margin:      0;
	font-size:   1rem;
	font-weight: 700;
	color:       var(--hm-white);
	letter-spacing: -0.01em;
}

.hm-cf-history-list {
	list-style:    none;
	margin:        0;
	padding:       0;
	display:       flex;
	flex-direction: column;
	gap:           8px;
}

.hm-cf-history-item {
	display:         flex;
	justify-content: space-between;
	align-items:     flex-start;
	gap:             12px;
	background:      var(--hm-white-10);
	border:          1px solid var(--hm-white-15);
	border-radius:   var(--hm-radius-sm);
	padding:         10px 14px;
	transition:      background .15s;
	animation:       hmFadeIn .3s ease both;
}

.hm-cf-history-item:hover {
	background: var(--hm-white-15);
}

.hm-cf-history-subject {
	font-size:   0.88rem;
	font-weight: 500;
	color:       var(--hm-white);
	flex:        1;
	min-width:   0;
	overflow:    hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hm-cf-history-date {
	font-size:      0.75rem;
	color:          var(--hm-white-30);
	white-space:    nowrap;
	font-variant-numeric: tabular-nums;
	flex-shrink:    0;
}

.hm-cf-history-empty {
	display:     flex;
	align-items: center;
	gap:         10px;
	padding:     20px;
	color:       var(--hm-white-30);
	font-size:   0.88rem;
	background:  var(--hm-white-10);
	border:      1px dashed var(--hm-white-15);
	border-radius: var(--hm-radius-sm);
}

.hm-cf-history-empty-icon {
	font-size: 1.2rem;
	opacity:   0.5;
}

.hm-cf-history-note {
	margin:    14px 0 0;
	font-size: 0.75rem;
	color:     var(--hm-white-30);
	line-height: 1.5;
}

/* ——— New item highlight (added after submission) ——————————————— */
.hm-cf-history-item--new {
	border-color: var(--hm-accent);
	background:   rgba(212,255,92,0.07);
}

/* ——— Animations ————————————————————————————————————————————————— */
@keyframes hmFadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes hmSpin {
	to { transform: rotate(360deg); }
}

.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;
}

/* ——— Accessibility: reduced motion ————————————————————————————— */
@media (prefers-reduced-motion: reduce) {
	.hm-cf-submit,
	.hm-cf-submit-arrow,
	.hm-cf-history-item,
	.hm-spinner {
		animation:  none;
		transition: none;
	}
}

/* ==========================================================================
   Theme: Light — Lavender / Purple  (data-theme="light")
   ========================================================================== */

.hm-cf-wrapper--light {
	/* Override every token for the light theme */
	--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);
}

/* Ambient glow — soft purple instead of lime */
.hm-cf-wrapper--light::before {
	background: radial-gradient(circle, rgba(139,92,246,0.10) 0%, transparent 70%);
}

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

/* Inputs: use accent border on focus, dark text */
.hm-cf-wrapper--light .hm-cf-input,
.hm-cf-wrapper--light .hm-cf-textarea {
	color: var(--hm-white);   /* dark text */
}

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

.hm-cf-wrapper--light .hm-cf-input:focus,
.hm-cf-wrapper--light .hm-cf-textarea:focus {
	border-color: var(--hm-accent);
	background:   rgba(26,10,46,0.08);
	box-shadow:   0 0 0 3px rgba(59,15,110,0.12);
}

/* Submit button: dark purple bg, white text */
.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);
}

/* Spinner contrast on light button */
.hm-cf-wrapper--light .hm-spinner {
	border-color:     #FFFFFF;
	border-top-color: transparent;
}

/* Alerts */
.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;
}

/* History items */
.hm-cf-wrapper--light .hm-cf-history-icon {
	color: var(--hm-accent);
}

.hm-cf-wrapper--light .hm-cf-history-item--new {
	border-color: var(--hm-accent);
	background:   rgba(59,15,110,0.07);
}

/* Access notice */
.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;
}


/* ── Department select ──────────────────────────────────────────────── */
.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, box-shadow .2s;
	outline:        none;
	-webkit-appearance: none;
	cursor:         pointer;
}

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

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

.hm-cf-wrapper--light .hm-cf-select {
	color: var(--hm-white);
}

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

/* ── History item status pill ───────────────────────────────────────── */
.hm-cf-history-item-main {
	display:     flex;
	align-items: center;
	gap:         8px;
	min-width:   0;
	flex:        1;
}

.hm-cf-history-status {
	display:       inline-block;
	padding:       1px 7px;
	border-radius: 10px;
	font-size:     0.7rem;
	font-weight:   600;
	white-space:   nowrap;
	flex-shrink:   0;
}

.hm-cf-history-status--open    { background: rgba(251,191,36,0.25); color: #fde68a; }
.hm-cf-history-status--replied { background: rgba(212,255,92,0.20); color: var(--hm-accent); }
.hm-cf-history-status--closed  { background: rgba(255,255,255,0.10); color: var(--hm-white-60); }

.hm-cf-wrapper--light .hm-cf-history-status--open    { background: rgba(180,83,9,0.12);  color: #92400e; }
.hm-cf-wrapper--light .hm-cf-history-status--replied { background: rgba(6,95,70,0.12);   color: #065f46; }
.hm-cf-wrapper--light .hm-cf-history-status--closed  { background: rgba(107,114,128,0.12); color: #6b7280; }