/* ============================================================
   Complaints / requests form — new design reskin.
   Tokens come from home.css (linked before this file). Markup &
   all JS hooks are unchanged — this is a pure CSS restyle.
   ============================================================ */

.hidden { display: none !important; }

body { background: var(--bg); color: var(--text); font-family: 'Cairo', system-ui, sans-serif; }

.container {
  max-width: 440px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  background-image: var(--app-grad);
  background-repeat: no-repeat;
  padding: 0 16px 40px;
}

/* ---------- Header ---------- */
.header { text-align: center; padding: 26px 0 6px; }
.header .logo { width: 66px; height: 66px; border-radius: 18px; object-fit: cover; box-shadow: var(--shadow-md); }
.header h1 { font-size: 22px; font-weight: 800; color: var(--text); margin-top: 12px; }
.header p { font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.6; }

/* ---------- Logged-in user bar ---------- */
.user-info-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface-grad); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 14px; margin: 14px 0 16px; box-shadow: var(--inset-hi);
  font-size: 13px; font-weight: 700; color: var(--text);
}
.btn-logout {
  background: var(--danger-l); color: var(--danger); border: 1px solid transparent;
  border-radius: 10px; padding: 8px 14px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}

/* ---------- Form sections as cards ---------- */
.form-section {
  background: var(--surface-grad); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-card), var(--inset-hi); padding: 16px; margin-bottom: 16px;
}
.form-section h2 {
  font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 14px;
  display: flex; align-items: center; gap: 9px;
}
.form-section h2::before { content: ''; width: 4px; height: 16px; border-radius: 3px; background: var(--accent-bar); flex-shrink: 0; }

.form-group { margin-bottom: 14px; }
.form-group:last-child { margin-bottom: 0; }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }
.form-group > label { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.required { color: var(--danger); }

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 13px;
  padding: 13px 14px; font-family: inherit; font-size: 14px; color: var(--text); box-shadow: var(--inset-hi);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--primary-400); box-shadow: 0 0 0 3px var(--primary-50); }
.form-group textarea { min-height: 112px; resize: vertical; line-height: 1.6; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--nav-off); }
.form-group select { appearance: none; -webkit-appearance: none; background-image: none; }

.char-count { display: block; text-align: left; font-size: 11px; color: var(--muted); margin-top: 6px; }

/* Voice-dictation button (overrides the element's inline styles) */
#detailsVoiceBtn {
  background: var(--primary-50) !important; color: var(--primary-700) !important;
  border: 1px solid var(--primary-200) !important; border-radius: 11px !important;
  padding: 9px 14px !important; font-weight: 700 !important;
}
#detailsVoiceStatus { color: var(--muted) !important; }

/* Attachment file input (overrides inline styles) */
#attachment {
  border: 1.5px dashed var(--border) !important; border-radius: 13px !important;
  background: var(--card) !important; padding: 12px !important;
}

/* ---------- Priority as choice chips ---------- */
.radio-group { display: flex; gap: 9px; flex-wrap: wrap; }
.radio-label {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--card);
  font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.radio-label input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio-custom { display: none; }
.radio-label:has(input:checked) { border-color: var(--primary-500); background: var(--primary-50); color: var(--primary-700); }
.radio-label.priority-urgent:has(input:checked) { border-color: var(--danger); background: var(--danger-l); color: var(--danger); }
.radio-label.priority-medium:has(input:checked) { border-color: var(--warning); background: var(--warning-l); color: var(--warning); }
.radio-label.priority-normal:has(input:checked) { border-color: var(--success); background: var(--success-l); color: var(--success); }

/* ---------- Actions ---------- */
.form-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.btn-submit {
  width: 100%; border: none; border-radius: 16px; padding: 15px; font-family: inherit;
  font-size: 16px; font-weight: 800; color: #fff; background: var(--grad-primary);
  box-shadow: var(--shadow-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-submit:disabled { opacity: .7; cursor: default; }
.btn-back, .btn-dashboard { display: block; text-align: center; font-size: 14px; font-weight: 700; color: var(--primary-600); padding: 11px; }

/* ---------- Success message ---------- */
.success-message {
  background: var(--surface-grad); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-card), var(--inset-hi); padding: 34px 22px; text-align: center; margin-top: 16px;
}
.success-icon {
  width: 66px; height: 66px; border-radius: 50%; background: var(--success-l); color: var(--success);
  font-size: 34px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.success-message h2 { font-size: 19px; font-weight: 800; color: var(--text); }
.success-message p { font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.btn-new {
  margin-top: 16px; width: 100%; border: none; border-radius: 14px; padding: 13px;
  background: var(--grad-primary); color: #fff; font-weight: 800; font-family: inherit; font-size: 15px; cursor: pointer;
}
.btn-dashboard { margin-top: 10px; }