/* Minimal custom styles for polish */
:root {
  --ring: 0 0% 0%;
}

input, select, textarea {
  appearance: none;
  outline: none;
  border-width: 1px;
  border-color: #e5e7eb; /* neutral */
  padding: 0.85rem 1rem; /* bigger, comfy */
  border-radius: 0.625rem; /* balanced */
  background: #ffffff; /* clean */
  color: #111827;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease;
  font-size: 1.0625rem; /* ~17px for readability */
}
input::placeholder, textarea::placeholder { color: #a0a7b4; }
input:hover, select:hover, textarea:hover { border-color: #d1d5db; }
input:focus, select:focus, textarea:focus {
  border-color: #f97316; /* brand */
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.18);
  background: #ffffff;
  transform: none;
}
input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%2399A1AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 18px 18px;
  padding-right: 2rem;
}

/* Comfortable control heights */
input, select { min-height: 2.875rem; } /* ~46px */
textarea { min-height: 14rem; resize: vertical; }

label { display: block; font-size: 0.875rem; color: #374151; font-weight: 600; margin-bottom: 0.25rem; }
.req { color: #ef4444; margin-left: 0.25rem; }

img { pointer-events: none; }

/* Subtle animated gradient line for aesthetic */
header::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,106,0,0) 0%, rgba(255,122,24,0.6) 50%, rgba(255,106,0,0) 100%);
}

/* App background: premium orange/white theme */
.bg-app {
  /* Wavy orange gradient with a bright white band */
  background:
    /* subtle top-right orange */
    radial-gradient(900px 580px at 100% -10%, rgba(255,153,51,0.18), rgba(255,153,51,0) 60%),
    /* subtle bottom-left orange */
    radial-gradient(820px 460px at -10% 110%, rgba(255,136,0,0.14), rgba(255,136,0,0) 60%),
    /* soft inner glow */
    radial-gradient(1200px 800px at 50% 50%, rgba(255,122,24,0.06), rgba(255,122,24,0) 65%),
    /* the wide white wave band */
    linear-gradient(170deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.0) 28%, rgba(255,255,255,0.92) 40%, rgba(255,255,255,0.98) 50%, rgba(255,255,255,0.92) 60%, rgba(255,255,255,0.0) 72%, rgba(255,255,255,0) 100%),
    /* base warm orange wash */
    linear-gradient(180deg, #fffaf5 0%, #ffe9d6 40%, #ffd0a6 100%);
  min-height: 100dvh;
  background-attachment: fixed, fixed, fixed, fixed;
}

/* Navbar pill: white base with subtle orange accents */
.nav-pill {
  border-color: #ffe2c6;
  box-shadow: inset 0 0 0 1px rgba(255,122,24,0.10), 0 6px 22px rgba(255,122,24,0.12);
}
.nav-pill a:hover {
  background: rgba(255,122,24,0.14) !important;
  color: #9a3412 !important; /* deeper orange */
}

/* Primary buttons: richer orange + soft glow */
button.bg-brand-500,
a.bg-brand-500 {
  box-shadow: 0 8px 24px rgba(255,122,24,0.25);
}
button.bg-brand-500:hover,
a.bg-brand-500:hover {
  box-shadow: 0 10px 28px rgba(255,122,24,0.35);
}