@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,400&display=swap');

:root {
  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --color-orange: #f08216;
  --color-purple: #5c1160;
  --color-magenta: #e0157e;
  --color-card: #f6f5f2;
  --color-ink: #0c0a08;
  --color-secondary: #55606f;
  --color-panel: #080705;
  --radius-pill: 9999px;
  --transition-smooth: all 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

body, html, input, button, select, textarea {
  font-family: var(--font-family) !important;
  letter-spacing: -0.02em !important;
}

body {
  background-color: var(--color-card) !important;
  color: var(--color-ink) !important;
}

.wrap, .container {
  max-width: 480px !important;
}

/* Header Logo */
.header .logo img {
  display: none !important;
}
.header .logo a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}
.header .logo a::before {
  content: "" !important;
  display: inline-block !important;
  width: 44px !important;
  height: 44px !important;
  background: url('/uploads/logo.png') no-repeat center / contain !important;
}
.header .logo a::after {
  content: "mail-eliasretamales.cl" !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
  color: #0c0a08 !important;
  text-transform: uppercase !important;
}

/* Buttons */
.button, button[type="submit"] {
  font-family: var(--font-family) !important;
  background-color: var(--color-orange) !important;
  color: #ffffff !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(240, 130, 22, 0.35) !important;
  padding: 13px 24px !important;
  transition: var(--transition-smooth) !important;
  cursor: pointer !important;
}
.button:hover, button[type="submit"]:hover {
  background-color: #d9700d !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(240, 130, 22, 0.45) !important;
}

/* Inputs */
input[type="text"], input[type="password"], input[type="email"] {
  font-family: var(--font-family) !important;
  border-radius: 12px !important;
  border: 1.5px solid #e2e8f0 !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  transition: var(--transition-smooth) !important;
}
input:focus {
  border-color: var(--color-orange) !important;
  box-shadow: 0 0 0 3px rgba(240, 130, 22, 0.15) !important;
}

/* Form Container Card */
.content, .form, form {
  background-color: #ffffff !important;
  border-radius: 24px !important;
  padding: 32px !important;
  box-shadow: 0 4px 25px rgba(12, 10, 8, 0.05) !important;
  border: 1px solid rgba(12, 10, 8, 0.05) !important;
}

footer {
  font-family: var(--font-family) !important;
  color: var(--color-secondary) !important;
  font-size: 12px !important;
  text-align: center !important;
  margin-top: 2rem !important;
}