/* ============================================================
   IranTranzit — Independent Services Forms (Task 12)
   Scoped: #inspectForm, #installForm and descendants only.
   Palette: warm ivory / forest-green premium.
   RTL inherited from app shell; no global resets.
   ============================================================ */

/* ---------- Design tokens (scoped via custom properties) ---------- */
#inspectForm,
#installForm {
  --it-ivory:        #FAF7F0;
  --it-ivory-deep:   #F3EEE4;
  --it-forest:       #2E5A3A;
  --it-forest-dark:  #1F3D26;
  --it-forest-mid:   #3A7248;
  --it-forest-light: #E8F0E9;
  --it-forest-glow:  #D4E5D8;
  --it-text:         #2C2C2C;
  --it-text-muted:   #6B6B6B;
  --it-border:       #D6CFC2;
  --it-border-focus: #2E5A3A;
  --it-error:        #B5423A;
  --it-error-bg:     #FDF0EF;
  --it-success:      #2E5A3A;
  --it-radius:       10px;
  --it-radius-sm:    6px;
  --it-shadow-sm:    0 1px 3px rgba(46, 90, 58, 0.08);
  --it-shadow-md:    0 4px 12px rgba(46, 90, 58, 0.10);
  --it-transition:   180ms ease;

  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 28px;
  background: var(--it-ivory);
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius);
  box-shadow: var(--it-shadow-sm);
  color: var(--it-text);
  font-size: 15px;
  line-height: 1.7;
  box-sizing: border-box;
}

#inspectForm *,
#installForm *,
#inspectForm *::before,
#installForm *::after {
  box-sizing: border-box;
}

/* ---------- Headings inside form scope ---------- */
#inspectForm h2,
#installForm h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--it-forest-dark);
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

#inspectForm .muted,
#installForm .muted {
  margin: 0 0 16px;
  font-size: 0.875rem;
  color: var(--it-text-muted);
  line-height: 1.65;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

#inspectForm .muted a,
#installForm .muted a {
  color: var(--it-forest);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#inspectForm .muted a:hover,
#installForm .muted a:hover {
  color: var(--it-forest-dark);
}

/* ---------- Picked vehicle line ---------- */
#inspectForm .picked,
#installForm .picked {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--it-forest-light);
  border-right: 3px solid var(--it-forest);
  border-radius: var(--it-radius-sm);
  font-size: 0.9rem;
  color: var(--it-text);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

#inspectForm .picked b,
#installForm .picked b {
  font-weight: 600;
  color: var(--it-forest-dark);
}

/* ---------- Label + input pairs ---------- */
#inspectForm label,
#installForm label {
  display: block;
  margin-bottom: 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--it-text);
  line-height: 1.5;
}

#inspectForm label input,
#installForm label input,
#inspectForm label select,
#installForm label select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  min-height: 44px;
  font-size: 16px;
  font-family: inherit;
  color: var(--it-text);
  background: #FFFFFF;
  border: 1.5px solid var(--it-border);
  border-radius: var(--it-radius-sm);
  outline: none;
  transition: border-color var(--it-transition), box-shadow var(--it-transition);
  -webkit-appearance: none;
  appearance: none;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

#inspectForm label input::placeholder,
#installForm label input::placeholder {
  color: #A0A0A0;
  font-size: 0.875rem;
}

#inspectForm label input:focus,
#installForm label input:focus,
#inspectForm label select:focus,
#installForm label select:focus {
  border-color: var(--it-border-focus);
  box-shadow: 0 0 0 3px rgba(46, 90, 58, 0.15);
}

#inspectForm label input:focus-visible,
#installForm label input:focus-visible,
#inspectForm label select:focus-visible,
#installForm label select:focus-visible {
  border-color: var(--it-border-focus);
  box-shadow: 0 0 0 3px rgba(46, 90, 58, 0.22);
}

/* Disabled state */
#inspectForm label input:disabled,
#installForm label input:disabled,
#inspectForm label select:disabled,
#installForm label select:disabled {
  background: var(--it-ivory-deep);
  color: #999999;
  border-color: var(--it-border);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ---------- Select dropdown styling ---------- */
#inspectForm label select,
#installForm label 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='%236B6B6B' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  padding-left: 34px;
  cursor: pointer;
}

#inspectForm label select:disabled,
#installForm label select:disabled {
  background-image: none;
  padding-left: 12px;
}

/* ---------- Two-column grid (.two) ---------- */
#inspectForm .two,
#installForm .two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
  margin-bottom: 2px;
}

#inspectForm .two > label,
#installForm .two > label {
  margin-bottom: 14px;
}

/* ---------- Textarea ---------- */
#inspectForm label textarea,
#installForm label textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  min-height: 88px;
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  color: var(--it-text);
  background: #FFFFFF;
  border: 1.5px solid var(--it-border);
  border-radius: var(--it-radius-sm);
  outline: none;
  resize: vertical;
  line-height: 1.6;
  transition: border-color var(--it-transition), box-shadow var(--it-transition);
  -webkit-appearance: none;
  appearance: none;
}

#inspectForm label textarea::placeholder,
#installForm label textarea::placeholder {
  color: #A0A0A0;
  font-size: 0.875rem;
}

#inspectForm label textarea:focus,
#installForm label textarea:focus {
  border-color: var(--it-border-focus);
  box-shadow: 0 0 0 3px rgba(46, 90, 58, 0.15);
}

#inspectForm label textarea:focus-visible,
#installForm label textarea:focus-visible {
  border-color: var(--it-border-focus);
  box-shadow: 0 0 0 3px rgba(46, 90, 58, 0.22);
}

#inspectForm label textarea:disabled,
#installForm label textarea:disabled {
  background: var(--it-ivory-deep);
  color: #999999;
  border-color: var(--it-border);
  cursor: not-allowed;
  opacity: 0.7;
  resize: none;
}

/* ---------- Submit button (.solid) ---------- */
#inspectForm button.solid,
#installForm button.solid {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 12px 20px;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: #FFFFFF;
  background: var(--it-forest);
  border: none;
  border-radius: var(--it-radius-sm);
  cursor: pointer;
  text-align: center;
  transition: background var(--it-transition), box-shadow var(--it-transition), transform var(--it-transition);
  box-shadow: var(--it-shadow-sm);
}

#inspectForm button.solid:hover,
#installForm button.solid:hover {
  background: var(--it-forest-dark);
  box-shadow: var(--it-shadow-md);
}

#inspectForm button.solid:active,
#installForm button.solid:active {
  background: var(--it-forest-dark);
  transform: translateY(1px);
  box-shadow: var(--it-shadow-sm);
}

#inspectForm button.solid:focus-visible,
#installForm button.solid:focus-visible {
  outline: 3px solid var(--it-forest);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(46, 90, 58, 0.25);
}

#inspectForm button.solid:disabled,
#installForm button.solid:disabled {
  background: #B0B0B0;
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
  transform: none;
}

/* ---------- Quote box (#installQuote) ---------- */
#installForm output.quote-box {
  display: block;
  width: 100%;
  margin: 4px 0 18px;
  padding: 14px 16px;
  background: var(--it-forest-light);
  border: 1.5px solid var(--it-forest-glow);
  border-right: 4px solid var(--it-forest);
  border-radius: var(--it-radius-sm);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--it-forest-dark);
  line-height: 1.65;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-height: 44px;
}

#installForm output.quote-box b {
  font-weight: 700;
  color: var(--it-forest-dark);
}

#installForm output.quote-box small{display:block;margin-top:6px;color:var(--it-text-muted)}
#inspectForm [hidden],#installForm [hidden]{display:none!important}#inspectForm,#installForm{min-width:0;overflow-wrap:anywhere}#inspectForm .two,#installForm .two{display:grid;grid-template-columns:minmax(0,1fr)}#inspectForm label,#installForm label{min-width:0}#inspectForm input,#installForm input,#inspectForm select,#installForm select{min-width:0;max-width:100%}@media(min-width:480px){#inspectForm .two,#installForm .two{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){#inspectForm *,#installForm *{transition:none!important;animation:none!important}}