/* ===========================================================================
   NOIR CHROMA — contact.php
   Overrides assets/css/contact-page.css.
   =========================================================================== */

body[data-skin="noir"] .contact-wrapper { background: var(--n-bg); }

body[data-skin="noir"] .tech-card {
  background: var(--n-surface);
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-lg);
  box-shadow: none;
  overflow: hidden;
}


/* ---- Info panel --------------------------------------------------------- */
/* contact.php:82 writes the panel background as an inline style built from
   admin settings ($infoBg). An inline style is specificity 1-0-0, which no
   selector can beat — !important is the only lever, and this is one of the
   two places in the whole skin where it is used. */

body[data-skin="noir"] .info-panel {
  background: var(--n-grad-soft) !important;
  border-inline-end: 1px solid var(--n-border);
  position: relative;
}
body[data-skin="noir"] .info-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--n-ink-1);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
body[data-skin="noir"] .info-content {
  position: relative;
  z-index: 1;
}

body[data-skin="noir"] .info-title {
  font-family: var(--n-font-display);
  color: var(--n-fg);
  font-size: var(--n-fz-2xl);
}
body[data-skin="noir"] .info-subtitle { color: var(--n-text-muted); }

body[data-skin="noir"] .info-block {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-sm);
}
body[data-skin="noir"] .info-block-icon,
body[data-skin="noir"] .info-icon { color: var(--n-accent); }
body[data-skin="noir"] .info-block-title {
  color: var(--n-fg);
  font-family: var(--n-font-display);
}
body[data-skin="noir"] .info-block-desc,
body[data-skin="noir"] .info-item { color: var(--n-text-muted); }
body[data-skin="noir"] .info-block-desc a,
body[data-skin="noir"] .info-item a { color: var(--n-fg); }
body[data-skin="noir"] .info-copyright { color: var(--n-text-dim); }


/* ---- Form panel --------------------------------------------------------- */

body[data-skin="noir"] .form-panel { background: var(--n-ink-1); }

body[data-skin="noir"] .tech-label {
  color: var(--n-text-dim);
  font-family: var(--n-font-display);
  letter-spacing: var(--n-tracking-wide);
}

body[data-skin="noir"] .tech-input {
  background: var(--n-surface-2);
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-sm);
  color: var(--n-text);
  -webkit-text-fill-color: var(--n-text);
  caret-color: var(--n-pink);
  font-size: max(16px, var(--n-fz-base));
  transition: border-color var(--n-dur) var(--n-ease), box-shadow var(--n-dur) var(--n-ease);
}
body[data-skin="noir"] .tech-input::placeholder {
  color: var(--n-text-dim);
  -webkit-text-fill-color: var(--n-text-dim);
  opacity: 1;
}
body[data-skin="noir"] .tech-input:focus {
  outline: none;
  border-color: var(--n-accent);
  box-shadow: 0 0 0 3px rgba(255, 61, 139, .18);
}

body[data-skin="noir"] .captcha-wrap img {
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-xs);
  background: var(--n-fg);
}

body[data-skin="noir"] .send-btn {
  background: var(--n-grad);
  color: var(--n-on-accent);
  -webkit-text-fill-color: var(--n-on-accent);
  border: 0;
  border-radius: var(--n-r-pill);
  font-family: var(--n-font-display);
  font-weight: var(--n-fw-bold);
  min-height: 48px;
  transition: filter var(--n-dur) var(--n-ease), box-shadow var(--n-dur) var(--n-ease);
}
body[data-skin="noir"] .send-btn:hover {
  filter: brightness(1.08);
  box-shadow: var(--n-glow);
}


/* ---- States ------------------------------------------------------------- */

body[data-skin="noir"] .contact-success {
  background: rgba(61, 217, 160, .10);
  border: 1px solid rgba(61, 217, 160, .35);
  color: var(--n-success);
  border-radius: var(--n-r-sm);
}
body[data-skin="noir"] .contact-success-icon { color: var(--n-success); }

body[data-skin="noir"] .contact-error {
  background: rgba(255, 92, 108, .10);
  border: 1px solid rgba(255, 92, 108, .35);
  color: var(--n-danger);
  border-radius: var(--n-r-sm);
}

body[data-skin="noir"] .contact-disabled {
  background: var(--n-surface-2);
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-md);
}
body[data-skin="noir"] .contact-disabled-icon { color: var(--n-fg-3); }
body[data-skin="noir"] .contact-disabled-title {
  color: var(--n-fg);
  font-family: var(--n-font-display);
}
body[data-skin="noir"] .contact-disabled-msg { color: var(--n-text-muted); }


/* ---- Mobile ------------------------------------------------------------- */

@media (max-width: 900px) {
  body[data-skin="noir"] .tech-card { border-radius: var(--n-r-md); }
  body[data-skin="noir"] .info-panel { border-inline-end: 0; border-bottom: 1px solid var(--n-border); }
  body[data-skin="noir"] .info-title { font-size: var(--n-fz-xl); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-skin="noir"] .tech-input,
  body[data-skin="noir"] .send-btn { transition: none; }
}