/* === UrbanWear | forms.css (Dark Theme Aligned) | by FSB ===
   - Do NOT style ALL forms globally; it breaks tiny forms (newsletter/filter).
   - Use .standalone-form (or .site-form) for big page forms (login/register/contact/checkout).
   - Inputs/selects/textarea/buttons adapt to Neon Sunset variables from main.css. */

/* Fallback tokens if main.css isn't loaded (kept minimal) */
:root {
  --bg-0: #0b0f1a;                /* Darkest base background */
  --bg-1: #101626;                /* Slightly lighter for panels */
  --bg-2: #131b31;                /* Panel and input backgrounds */
  --text-0: #f5f7fb;              /* Brightest text */
  --text-1: #c6cbe1;              /* Muted/subtle text */
  --accent-1: #ff8a00;            /* Orange accent */
  --accent-2: #ff3d6e;            /* Pink accent */
  --accent-3: #7c3aed;            /* Purple accent */
  --accent-4: #00d1ff;            /* Blue/cyan accent for focus */
  --accent-5: #facc15;            /* Gold accent */
  --g-pill: linear-gradient(90deg, #ff8a00, #ff3d6e); /* Gradient for buttons */
}

/* ------------------------------------------------------------------
   1) PANEL STYLES — apply ONLY when you want a full-width form card
      Add class="standalone-form" (or "site-form") to your <form> tag.
   ------------------------------------------------------------------ */
.standalone-form,
.site-form {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); /* Subtle light vertical gradient for glassy effect */
  border: 1px solid rgba(255,255,255,.10);          /* Light border for definition */
  backdrop-filter: blur(12px);                      /* Glassmorphism blur */
  padding: 28px;                                    /* Spacious padding */
  border-radius: 16px;                              /* Rounded corners */
  max-width: 840px;                                 /* Max width for large forms */
  margin: 32px auto;                                /* Center horizontally with vertical margin */
  box-shadow: 0 18px 40px rgba(0,0,0,.35);          /* Deep shadow for elevation */
}

/* Spacing helpers inside larger forms */
.standalone-form .form-group,
.site-form .form-group {
  margin-bottom: 18px;                              /* Space between grouped fields */
}

/* Headings inside large forms */
.standalone-form h1, .standalone-form h2, .standalone-form h3,
.site-form h1, .site-form h2, .site-form h3 {
  color: var(--text-0);                             /* Bright text for headings */
  margin-bottom: 10px;
  font-weight: 800;
}

/* ------------------------------------------------------------------
   2) FIELD CONTROLS — works for both Bootstrap and plain HTML forms
   ------------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea,
.form-control,
.form-select {
  width: 100%;                                      /* Full width fields */
  padding: 12px 14px;                               /* Comfortable padding */
  border-radius: 12px;                              /* Rounded inputs */
  border: 1px solid rgba(255,255,255,0.18);         /* Light border for dark background */
  background: var(--bg-2);                          /* Input background matches dark card */
  color: #ffffff;                                   /* White text */
  font-size: 1rem;
  line-height: 1.25;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: none;
}

/* Placeholder visibility */
::placeholder {
  color: rgba(255,255,255,0.80);                    /* Bright placeholders */
}
input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,0.80);
}

/* Focus ring (theme glow) */
input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--accent-4);                    /* Blue/cyan border on focus */
  box-shadow: 0 0 0 4px rgba(0,209,255,0.18);       /* Cyan glow on focus */
  background: #0f172a;                              /* Slightly deeper background for contrast */
  color: #ffffff;
}

/* Disable default webkit decorations where needed */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
}

/* Textarea */
textarea {
  resize: vertical;                                 /* Allow only vertical resizing */
  min-height: 120px;
  font-family: 'Poppins', 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Labels & help text */
label, .form-label {
  color: var(--accent-1);                           /* Orange label for visibility */
  font-weight: 700;
  margin-bottom: 6px;
}
.form-text, .form-hint, small.text-muted {
  color: var(--text-1);                             /* Muted text for hints/help */
}

/* ------------------------------------------------------------------
   3) BUTTONS — native <button> and type="submit" (Bootstrap .btn still works)
   ------------------------------------------------------------------ */
button,
input[type="submit"],
input[type="button"] {
  padding: 12px 18px;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  width: 100%;
  background: var(--g-pill);                        /* Gradient background */
  color: #fff;                                      /* White text */
  box-shadow: 0 14px 26px rgba(255,138,0,.32);      /* Orange shadow for neon look */
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  transform: translateY(-2px) scale(1.01);          /* Lift effect on hover */
  filter: brightness(1.05);                         /* Brighten on hover */
}

/* When using Bootstrap buttons, don’t fight them—just ensure contrast */
.btn {
  font-weight: 700;
  border-radius: 999px;
}
.btn-dark, .btn-primary {
  background: var(--g-pill);
  border: 0;
  color: #fff;
}
.btn-outline-dark {
  border: 2px solid rgba(255,255,255,0.35);
  color: #fff;
}

/* ------------------------------------------------------------------
   4) INLINE / SMALL FORMS (newsletter, filters) — keep compact
   ------------------------------------------------------------------ */
.inline-form,
.footer form,
.filter-section form {
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
  max-width: none;
  margin: 0;
}

/* Make sure tiny inputs remain readable on dark background */
.footer input[type="email"] {
  background: #0f172a;
  border: 1px solid rgba(255,255,255,0.28);
  color: #ffffff;
}
.footer input[type="email"]::placeholder {
  color: rgba(255,255,255,0.92);
}

/* ------------------------------------------------------------------
   5) RESPONSIVE
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .standalone-form,
  .site-form {
    padding: 20px;
    border-radius: 14px;
    margin: 20px auto;
  }
}