/* ============================================================
   FODDAL — components.css
   Buttons, loader, forms, chips, progress, toast, back-to-top
   ============================================================ */

/* =================== BUTTONS =================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  transition: all .35s cubic-bezier(.2,.8,.2,1);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary {
  background: var(--ink);
  color: var(--sand);
}
.btn-primary:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(200, 105, 26, .5);
}
.btn-primary:hover svg { transform: translateX(3px); }
.btn-primary svg { transition: transform .35s; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: var(--ink); color: var(--sand); border-color: var(--ink); }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-full { width: 100%; justify-content: center; padding: 16px 24px; }

/* =================== LOADER =================== */
.loader {
  position: fixed; inset: 0;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  transition: opacity .6s ease, visibility .6s;
}
.loader.hidden { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; color: var(--ink); }
.loader-mark {
  width: 70px; height: 70px;
  animation: loaderSpin 2s ease-in-out infinite;
}
.loader-text {
  margin-top: 18px;
  font-family: var(--ff-display);
  font-size: 22px;
  letter-spacing: .3em;
  font-weight: 500;
  animation: loaderPulse 2s ease-in-out infinite;
}
@keyframes loaderSpin {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.05); }
}
@keyframes loaderPulse {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}
/* CSS fallback: guarantees the loader hides even if JS never runs.
   The inline `animation: autoHide …` on #loader drives this. */
@keyframes autoHide {
  to { opacity: 0; visibility: hidden; }
}

/* =================== PROGRESS BAR =================== */
.progress {
  height: 8px;
  background: var(--sand-2);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 10px;
}
.progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent) 0%, var(--gold) 100%);
  border-radius: 100px;
  animation: progressFill 1.8s cubic-bezier(.2,.8,.2,1) .8s forwards;
}
@keyframes progressFill { to { width: var(--p); } }
.progress-meta {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--muted);
  margin-bottom: 24px;
}
.progress-meta strong { color: var(--ink); }

/* =================== FORM FIELDS =================== */
.form-field { margin-bottom: 22px; }
.form-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: .02em;
}
.form-field input:not([type="checkbox"]),
.form-field textarea,
.form-field select {
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--cream);
  font-size: 15px;
  transition: border-color .3s, box-shadow .3s;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--accent);
  background: var(--white);
}
.form-field textarea { resize: vertical; font-family: var(--ff-body); }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 0;
}
.form-row .form-field { margin-bottom: 22px; }

/* validation / error states */
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"],
.form-field select[aria-invalid="true"] {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}
.field-error {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: #c0392b;
}

/* =================== AMOUNT CHIPS =================== */
.amount-chips {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.chip {
  padding: 14px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  transition: all .3s;
}
.chip:hover { border-color: var(--ink); }
.chip.active {
  background: var(--ink);
  color: var(--sand);
  border-color: var(--ink);
}
.chip-custom { font-size: 13px; }

/* =================== FREQUENCY TOGGLE =================== */
.freq-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 4px;
  background: var(--sand-2);
  border-radius: 100px;
}
.freq-btn {
  padding: 10px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  transition: all .3s;
}
.freq-btn.active {
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* =================== DONATE TAX NOTE =================== */
.donate-tax {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: rgba(200,105,26,.08);
  border-radius: var(--radius);
  margin-bottom: 24px;
}
.donate-tax svg {
  width: 20px; height: 20px;
  color: var(--accent-text);
  flex-shrink: 0;
  margin-top: 2px;
}
.donate-tax p {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
.donate-tax strong { color: var(--accent-text); }

.form-secure {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px;
  text-align: center;
  justify-content: center;
}
.form-secure svg { width: 14px; height: 14px; color: var(--ink-soft); }

/* =================== CHECKBOX FIELD =================== */
.checkbox-field label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  font-weight: 400;
  letter-spacing: 0;
}
.checkbox-field input {
  width: 16px; height: 16px;
  margin-top: 2px;
  accent-color: var(--accent);
}

/* =================== FORM SUCCESS =================== */
.form-success {
  margin-top: 16px;
  padding: 16px;
  background: rgba(42, 107, 80, .1);
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-success svg { width: 18px; height: 18px; color: var(--ink-soft); }

/* =================== BACK TO TOP =================== */
.to-top {
  position: fixed;
  bottom: 30px; right: 30px;
  width: 48px; height: 48px;
  background: var(--ink);
  color: var(--sand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  z-index: 500;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: all .4s;
}
.to-top svg { width: 20px; height: 20px; }
.to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent); transform: translateY(-3px); }

/* =================== TOAST =================== */
.toast {
  position: fixed;
  bottom: 30px; left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--ink);
  color: var(--sand);
  padding: 14px 24px;
  border-radius: 100px;
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  font-weight: 500;
  z-index: 2000;
  opacity: 0;
  transition: all .4s cubic-bezier(.2,.8,.2,1);
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast::before {
  content: '✓';
  color: var(--gold);
  font-weight: 700;
}
.toast.toast-error::before { content: '!'; color: var(--accent-soft); }
.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}