/* =====================
   FORM SYSTEM (GLOBAL)
===================== */

.field {
  margin-bottom: 18px;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

input,
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
}

textarea {
  resize: vertical;
  min-height: 90px;
}

input::placeholder,
textarea::placeholder {
  color: #9ca3af;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.15);
}



/* =====================
   SECTION HEADINGS (SETTINGS)
===================== */

.card h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
}

.card p {
  font-size: 14px;
  color: var(--muted);
}

/* =====================
   DIVIDERS (OPTIONAL)
===================== */

.divider {
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}

/* =====================
   TOGGLE SWITCH
===================== */

.switch{
  position:relative;
  display:inline-block;
  width:44px;
  height:24px;
}

.switch input{
  opacity:0;
  width:0;
  height:0;
}

.slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background:#d1d5db;
  border-radius:999px;
  transition:.3s;
}

.slider:before{
  content:"";
  position:absolute;
  height:18px;
  width:18px;
  left:3px;
  bottom:3px;
  background:white;
  border-radius:50%;
  transition:.3s;
}

.switch input:checked + .slider{
  background:var(--primary);
}

.switch input:checked + .slider:before{
  transform:translateX(20px);
}