/* File: assets/css/app.css */
/* FoxlySMS — shared design system */

:root {
  --fox-primary: #FE7211;
  --fox-primary-dark: #D95708;
  --fox-ink: #1A1A1A;
  --fox-bg: #FFFDF7;
}

body { font-family: 'Inter', sans-serif; background: var(--fox-bg); color: var(--fox-ink); }
h1, h2, h3, .font-display { font-family: 'Poppins', sans-serif; }

.grad-yellow {
  background: linear-gradient(135deg, #FFC94A 0%, var(--fox-primary) 55%, var(--fox-primary-dark) 100%);
}
.glow { box-shadow: 0 10px 25px -10px rgba(254, 114, 17, 0.45); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--fox-primary); border-radius: 10px; }

.dropdown-panel { display: none; }
.dropdown-panel.open { display: block; }
.drawer { transform: translateX(100%); }
.drawer.open { transform: translateX(0); }

.service-card.active { border-color: var(--fox-primary); background: #FFF8EA; }
.brand-first { color: var(--fox-ink); }
.brand-last  { color: var(--fox-primary-dark); }
.field-input:focus { border-color: var(--fox-primary); }

/* ─── Toast notifications ─────────────────────────────────── */
#foxToastContainer {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 9999;
  display: flex; flex-direction: column; gap: 0.5rem; max-width: 22rem;
}
.fox-toast {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.85rem 1rem; border-radius: 0.9rem; background: #fff;
  box-shadow: 0 15px 35px -10px rgba(0,0,0,0.25);
  font-size: 0.875rem; font-weight: 500;
  border-left: 4px solid var(--fox-primary);
  animation: foxToastIn .25s ease-out;
}
.fox-toast.success { border-left-color: #16a34a; }
.fox-toast.error   { border-left-color: #dc2626; }
.fox-toast.info    { border-left-color: var(--fox-primary); }
@keyframes foxToastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Custom modal (replaces alert/confirm/prompt) ──────────── */
#foxModalOverlay {
  position: fixed; inset: 0; background: rgba(26,26,26,0.55);
  display: none; align-items: center; justify-content: center;
  z-index: 9998; padding: 1rem;
}
#foxModalOverlay.open { display: flex; }
.fox-modal-box {
  background: #fff; border-radius: 1.25rem; max-width: 24rem; width: 100%;
  padding: 1.75rem; box-shadow: 0 25px 60px -15px rgba(0,0,0,0.35);
}

.country-row.active { border-color: var(--fox-primary); background: #FFF8EA; }