/* SealedMail brand skin v2 - overrides n8n form defaults */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Override n8n CSS variables ── */
:root {
  --font-family:            "Inter", system-ui, sans-serif;
  --font-size-body:         14px;
  --font-size-label:        13px;
  --font-size-input:        14px;
  --font-size-header:       20px;
  --font-size-paragraph:    13px;

  --color-background:       transparent;
  --color-card-bg:          transparent;
  --color-card-border:      transparent;
  --color-card-shadow:      none;
  --color-header:           #0F172A;
  --color-label:            #0F172A;
  --color-input-border:     #cbd5e1;
  --color-input-text:       #0F172A;
  --color-input-bg:         #ffffff;
  --color-focus-border:     #4F46E5;
  --color-submit-btn-bg:    #4F46E5;
  --color-submit-btn-text:  #ffffff;
  --color-error:            #dc2626;
  --color-required:         #4F46E5;
  --color-link:             #64748b;
  --color-html-link:        #4F46E5;

  --container-width:        560px;
  --border-radius-card:     10px;
  --border-radius-input:    8px;
  --padding-card:           20px;
  --padding-container-top:  14px;
  --margin-bottom-card:     0px;
  --padding-form-input:     9px;
  --submit-btn-height:      42px;
}

/* ── Base ── */
html, body {
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: transparent !important;
}

.container {
  background: transparent !important;
}

/* ── Compact layout overrides ── */
.container {
  padding-top: 0 !important;
  min-height: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Override n8n mobile styles that force min-height: 100vh */
@media only screen and (max-width: 500px) {
  .container {
    min-height: 0 !important;
    padding: 12px !important;
  }
  .card {
    padding: 16px !important;
  }
  hr {
    display: none !important;
  }
}

.form-group {
  margin-bottom: 12px !important;
}

.inputs-wrapper {
  padding-top: 10px !important;
  padding-bottom: 6px !important;
}

form textarea {
  min-height: 80px !important;
  max-height: 100px !important;
}

/* Hide the form description - contact page already has context above the iframe */
.form-header p {
  display: none !important;
}

.form-header h1 {
  margin-bottom: 0 !important;
}

/* ── Header ── */
.form-header h1 {
  font-weight: 600 !important;
  letter-spacing: -0.3px;
  color: #0F172A !important;
  font-family: "Inter", system-ui, sans-serif !important;
}

.form-header p {
  color: #64748b !important;
  font-family: "Inter", system-ui, sans-serif !important;
  line-height: 1.6;
}

/* ── Labels ── */
form label {
  font-weight: 600 !important;
  font-size: 13px;
  color: #0F172A !important;
  font-family: "Inter", system-ui, sans-serif !important;
}

/* ── Inputs ── */
form .form-input,
form input,
form textarea,
form select {
  font-family: "Inter", system-ui, sans-serif !important;
  color: #0F172A !important;
}

form textarea:focus,
form input:focus {
  border-color: #4F46E5 !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important;
}

/* ── Submit button - beat n8n #submit-btn specificity ── */
#submit-btn,
button[type="submit"] {
  background-color: #4F46E5 !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px;
  border-radius: 100px !important;
}

#submit-btn:hover,
button[type="submit"]:hover {
  background-color: #4338CA !important;
  opacity: 1 !important;
}

/* ── Checkbox ── */
.multiselect-checkbox:checked {
  background: #4F46E5 !important;
  border-color: #4F46E5 !important;
}

/* ── Required asterisk ── */
label.form-required::after {
  color: #4F46E5 !important;
}

/* ── Card - no background or border ── */
.card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Error ── */
.error-show {
  color: #dc2626;
}

/* ── Hide n8n branding ── */
.n8n-link {
  display: none !important;
}