/* team-cobras-override.css
   Strong override stylesheet for Team Cobras components.
   - Intentionally high specificity + !important on visual properties to win over other styles.
   - Scope: everything inside .tc-container only (minimizes global leakage).
   - Place this file AFTER all other stylesheets (or include its contents at the end of your main CSS).
   NOTE: This is an aggressive override. Use sparingly and remove !important where no longer required.
*/

/* Ensure .tc-container baseline (high specificity) */
html body .tc-container {
  max-width: var(--tc-max-width) !important;
  margin: 24px auto !important;
  padding: var(--tc-container-padding) !important;
  background: var(--tc-bg) !important;
  border-radius: var(--tc-radius) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,0.06) !important;
  color: var(--tc-text) !important;
  line-height: 1.6 !important;
  font-family: var(--ui-font-family) !important;
}

/* Sections & headings */
html body .tc-container .tc-section { margin: var(--tc-gap) 0 !important; }
html body .tc-container .tc-heading { margin: 0 0 8px 0 !important; font-size: 1.875rem !important; color: var(--tc-text) !important; }
html body .tc-container .tc-subtitle { margin: 0 0 12px 0 !important; font-size: 1.25rem !important; color: var(--tc-text) !important; }
html body .tc-container .tc-h3 { margin: 0 0 8px 0 !important; font-size: 1.0625rem !important; color: var(--tc-text) !important; }

html body .tc-container .tc-lead { margin: 0 !important; color: var(--tc-text) !important; }
html body .tc-container .tc-text { margin: 0 0 8px 0 !important; font-size: 1.125rem !important; color: var(--tc-text) !important; }

html body .tc-container .tc-link { color: var(--tc-accent) !important; text-decoration: underline !important; }

html body .tc-container .tc-quick {
  padding: 12px !important;
  background: var(--tc-panel-bg) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
  color: var(--tc-text) !important;
}

/* Lists */
html body .tc-container .tc-list,
html body .tc-container .tc-ol {
  margin: 0 !important;
  font-size: 1.125rem !important;
  padding-left: 20px !important;
  color: var(--tc-text) !important;
}

/* Small responsive tweaks (override potential theme overrides) */
@media (max-width: 720px) {
  html body .tc-container { padding: 20px !important; margin: 18px !important; }
  html body .tc-container .tc-h3 { font-size: 1rem !important; }
  html body .tc-container .tc-subtitle { font-size: 1.125rem !important; }
}

/* ========================================================================
   Form field overrides (aggressive)
   - 2px border (configurable), white text, 20px radius
   - Scoped to .tc-container to avoid global conflicts
   ======================================================================== */

/* Force field variable fallbacks (if not set elsewhere) */
html body .tc-container {
  --tc-field-border-color: var(--tc-field-border-color, #ffffff) !important;
  --tc-field-border-width: var(--tc-field-border-width, 2px) !important;
  --tc-field-radius: var(--tc-field-radius, 20px) !important;
  --tc-field-padding-y: var(--tc-field-padding-y, 0.6rem) !important;
  --tc-field-padding-x: var(--tc-field-padding-x, 0.9rem) !important;
  --tc-field-bg: var(--tc-field-bg, transparent) !important;
  --tc-field-text: var(--tc-text, #ffffff) !important;
  --tc-field-placeholder: var(--tc-field-placeholder, rgba(255,255,255,0.75)) !important;
  --tc-field-font-size: var(--tc-field-font-size, 1rem) !important;
  --tc-field-focus-ring: var(--tc-field-focus-ring, rgba(255,255,255,0.08)) !important;
}

/* Strong selector to override competing input rules */
html body .tc-container input.text-field,
html body .tc-container input[type="text"],
html body .tc-container input[type="email"],
html body .tc-container input[type="tel"],
html body .tc-container input[type="url"],
html body .tc-container input[type="number"],
html body .tc-container textarea,
html body .tc-container select,
html body .tc-container .text-field {
  box-sizing: border-box !important;
  width: 100% !important;
  display: block !important;
  background-color: var(--tc-field-bg) !important;
  color: var(--tc-field-text) !important;
  border: var(--tc-field-border-width) solid var(--tc-field-border-color) !important;
  border-radius: var(--tc-field-radius) !important;
  padding: var(--tc-field-padding-y) var(--tc-field-padding-x) !important;
  font-size: var(--tc-field-font-size) !important;
  line-height: 1.3 !important;
  transition: border-color .12s ease, box-shadow .12s ease, transform .06s ease !important;
  outline: none !important;
}

/* Ensure single-line controls are touch-friendly */
html body .tc-container input[type="text"],
html body .tc-container input[type="email"],
html body .tc-container input[type="tel"],
html body .tc-container select {
  min-height: 48px !important;
}

/* Placeholder contrast forced */
html body .tc-container input::placeholder,
html body .tc-container textarea::placeholder,
html body .tc-container select::placeholder {
  color: var(--tc-field-placeholder) !important;
  opacity: 1 !important;
}

/* Focus state visible and forced */
html body .tc-container input:focus,
html body .tc-container textarea:focus,
html body .tc-container select:focus {
  border-color: var(--tc-field-border-color) !important;
  box-shadow: 0 0 0 6px var(--tc-field-focus-ring) !important;
  transform: translateY(-0.08rem) !important;
}

/* Invalid state enforcement */
html body .tc-container input:invalid,
html body .tc-container textarea:invalid,
html body .tc-container select:invalid {
  border-color: var(--wf-invalid, #d9534f) !important;
  box-shadow: 0 0 0 6px rgba(217,83,79,0.06) !important;
}

/* Disabled / readonly */
html body .tc-container input[disabled],
html body .tc-container input[readonly],
html body .tc-container textarea[disabled],
html body .tc-container textarea[readonly],
html body .tc-container select[disabled],
html body .tc-container select[readonly] {
  background: rgba(255,255,255,0.03) !important;
  color: rgba(255,255,255,0.6) !important;
  cursor: not-allowed !important;
  opacity: 0.95 !important;
}

/* Size modifiers */
html body .tc-container .text-field.small,
html body .tc-container input.small,
html body .tc-container select.small {
  padding: 0.35rem 0.6rem !important;
  font-size: 0.9rem !important;
  border-radius: 12px !important;
}

html body .tc-container .text-field.large,
html body .tc-container input.large,
html body .tc-container select.large,
html body .tc-container textarea.large {
  padding: 0.9rem 1.1rem !important;
  font-size: 1.125rem !important;
  border-radius: 24px !important;
}

/* Inline layout helper */
html body .tc-container .tc-field-inline {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
}
html body .tc-container .tc-field-inline > label { width: 160px !important; flex: 0 0 160px !important; }
html body .tc-container .tc-field-inline > *:not(label) { flex: 1 1 auto !important; min-width: 0 !important; }

/* Actions / submit button (btn-solid) */
html body .tc-container .tc-form-actions {
  margin-top: 12px !important;
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

html body .tc-container .btn-solid,
html body .tc-container button.btn-solid {
  background: var(--btn-bg, #000000) !important;
  color: var(--btn-text, #ffffff) !important;
  border: 2px solid var(--btn-border, #ffffff) !important;
  border-radius: var(--btn-radius, 20px) !important;
  padding: 0.55rem 1.1rem !important;
  font-size: var(--btn-font-size, 1rem) !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

/* Reduced-motion preference honored but still forced to remove animations */
@media (prefers-reduced-motion: reduce) {
  html body .tc-container input,
  html body .tc-container textarea,
  html body .tc-container select,
  html body .tc-container .btn-solid {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Responsive: stack inline fields on small screens */
@media (max-width: 720px) {
  html body .tc-container .tc-form-row { gap: 10px !important; }
  html body .tc-container .tc-field-inline { flex-direction: column !important; align-items: stretch !important; }
  html body .tc-container .tc-field-inline > label { width: auto !important; flex: none !important; }
}

/* Final fallback: if inline styles set color:black, override those (very aggressive) */
html body .tc-container *[style*="color:black"] {
  color: var(--tc-text) !important;
}