/* Service upload pages — distinct medium page colors, no white margin fade. */

.hz-svc {
  --hz-ink: #0b1f2e;
  --hz-accent: #2563eb;
  --hz-accent-deep: #1d4ed8;
  --hz-accent-soft: #dbeafe;
  --hz-accent-mid: #93c5fd;
  --hz-accent-border: rgba(37, 99, 235, 0.35);
  --hz-accent-glow: rgba(37, 99, 235, 0.18);
  --hz-accent-ring: rgba(37, 99, 235, 0.28);
  --hz-page: #5b8def;
  --hz-page-deep: #3b6fd4;
  --hz-form-top: #eef4ff;
  --hz-file-bg: #f3f7ff;
  --hz-file-border: rgba(37, 99, 235, 0.32);
  --hz-select-border: rgba(37, 99, 235, 0.32);
  --hz-btn-shadow: rgba(29, 78, 216, 0.3);
  --hz-chip-border: rgba(37, 99, 235, 0.35);
  --hz-loading-border: rgba(37, 99, 235, 0.28);
  --hz-loading-text: #1e40af;

  overflow-x: clip;
  min-height: calc(100vh - 8rem);
  padding: 1.25rem 1rem 2.5rem;
  background:
    radial-gradient(ellipse 70% 45% at 12% 0%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(ellipse 55% 40% at 88% 100%, rgba(0, 0, 0, 0.08), transparent 50%),
    linear-gradient(165deg, var(--hz-page) 0%, var(--hz-page-deep) 100%);
}

/* Kein helles body-bg-slate um die farbige Seite herum */
body:has(.hz-svc--pdf) { background: #3b6fd4; }
body:has(.hz-svc--summarize) { background: #2f8f52; }
body:has(.hz-svc--translate) { background: #c9941f; }
body:has(.hz-svc--audio) { background: #6f4db0; }

/* PDF → medium blue */
.hz-svc--pdf {
  --hz-accent: #2563eb;
  --hz-accent-deep: #1d4ed8;
  --hz-accent-soft: #dbeafe;
  --hz-accent-mid: #93c5fd;
  --hz-accent-border: rgba(37, 99, 235, 0.35);
  --hz-accent-glow: rgba(37, 99, 235, 0.2);
  --hz-accent-ring: rgba(37, 99, 235, 0.3);
  --hz-page: #5b8def;
  --hz-page-deep: #3b6fd4;
  --hz-form-top: #eef4ff;
  --hz-file-bg: #f3f7ff;
  --hz-file-border: rgba(37, 99, 235, 0.32);
  --hz-select-border: rgba(37, 99, 235, 0.32);
  --hz-btn-shadow: rgba(29, 78, 216, 0.32);
  --hz-chip-border: rgba(37, 99, 235, 0.36);
  --hz-loading-border: rgba(37, 99, 235, 0.28);
  --hz-loading-text: #1e40af;
}

/* Summarize → medium green */
.hz-svc--summarize {
  --hz-accent: #16a34a;
  --hz-accent-deep: #15803d;
  --hz-accent-soft: #dcfce7;
  --hz-accent-mid: #86efac;
  --hz-accent-border: rgba(22, 163, 74, 0.35);
  --hz-accent-glow: rgba(22, 163, 74, 0.2);
  --hz-accent-ring: rgba(22, 163, 74, 0.3);
  --hz-page: #4caf6e;
  --hz-page-deep: #2f8f52;
  --hz-form-top: #eefbf2;
  --hz-file-bg: #f3fcf6;
  --hz-file-border: rgba(22, 163, 74, 0.32);
  --hz-select-border: rgba(22, 163, 74, 0.32);
  --hz-btn-shadow: rgba(21, 128, 61, 0.3);
  --hz-chip-border: rgba(22, 163, 74, 0.36);
  --hz-loading-border: rgba(22, 163, 74, 0.28);
  --hz-loading-text: #166534;
}

/* Translate → medium yellow */
.hz-svc--translate {
  --hz-accent: #ca8a04;
  --hz-accent-deep: #a16207;
  --hz-accent-soft: #fef9c3;
  --hz-accent-mid: #fde047;
  --hz-accent-border: rgba(202, 138, 4, 0.4);
  --hz-accent-glow: rgba(202, 138, 4, 0.22);
  --hz-accent-ring: rgba(202, 138, 4, 0.32);
  --hz-page: #e4b84a;
  --hz-page-deep: #c9941f;
  --hz-form-top: #fffbeb;
  --hz-file-bg: #fffdf3;
  --hz-file-border: rgba(202, 138, 4, 0.38);
  --hz-select-border: rgba(202, 138, 4, 0.38);
  --hz-btn-shadow: rgba(161, 98, 7, 0.3);
  --hz-chip-border: rgba(202, 138, 4, 0.4);
  --hz-loading-border: rgba(202, 138, 4, 0.32);
  --hz-loading-text: #854d0e;
}

/* Audio → medium purple */
.hz-svc--audio {
  --hz-accent: #7c3aed;
  --hz-accent-deep: #6d28d9;
  --hz-accent-soft: #ede9fe;
  --hz-accent-mid: #c4b5fd;
  --hz-accent-border: rgba(124, 58, 237, 0.35);
  --hz-accent-glow: rgba(124, 58, 237, 0.2);
  --hz-accent-ring: rgba(124, 58, 237, 0.3);
  --hz-page: #8b6cc9;
  --hz-page-deep: #6f4db0;
  --hz-form-top: #f5f0ff;
  --hz-file-bg: #f8f5ff;
  --hz-file-border: rgba(124, 58, 237, 0.32);
  --hz-select-border: rgba(124, 58, 237, 0.32);
  --hz-btn-shadow: rgba(109, 40, 217, 0.3);
  --hz-chip-border: rgba(124, 58, 237, 0.36);
  --hz-loading-border: rgba(124, 58, 237, 0.28);
  --hz-loading-text: #5b21b6;
}

.hz-svc__shell {
  width: min(720px, 100%);
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Tag-qualifizierte Selektoren (z.B. "form.hz-svc__form" statt ".hz-svc__form")
   statt !important: jede dieser Klassen kommt projektweit nur an genau einem
   HTML-Tag-Typ vor (verifiziert), die Typ-Qualifizierung erhoeht die Spezifitaet
   (0-1-0 → 0-1-1) gezielt genug, um Tailwind-Utility-Klassen auf demselben
   Element zu schlagen, ohne kuenftige, bewusste Overrides zu blockieren. */
form.hz-svc__form {
  border-radius: 18px;
  border: 1px solid var(--hz-accent-border);
  background: linear-gradient(180deg, var(--hz-form-top) 0%, #ffffff 48%);
  box-shadow: 0 10px 28px var(--hz-accent-glow);
}

h2.hz-svc__form-title {
  color: #0f172a;
}

p.hz-svc__form-desc {
  color: #64748b;
}

:is(div, label).hz-svc__label {
  color: #334155;
}

select.hz-svc__select,
form.hz-svc__form select {
  border-color: var(--hz-select-border);
}
form.hz-svc__form select:focus {
  border-color: var(--hz-accent-deep);
  outline: none;
  box-shadow: 0 0 0 3px var(--hz-accent-ring);
}

/* Custom file picker — Persian label only; native browser button text is locale-bound. */
.hz-svc__file-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  cursor: pointer;
  border: 2px dashed var(--hz-file-border);
  border-radius: 0.875rem;
  background: var(--hz-file-bg);
  padding: 1.5rem 1rem;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.hz-svc__file-pick:hover {
  border-color: var(--hz-accent);
  box-shadow: 0 0 0 3px var(--hz-accent-ring);
}
.hz-svc__file-pick:focus-within {
  border-color: var(--hz-accent-deep);
  box-shadow: 0 0 0 4px var(--hz-accent-ring);
}
.hz-svc__file-pick.has-file {
  border-style: solid;
  border-color: var(--hz-accent);
}
.hz-svc__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hz-svc__file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14rem;
  width: min(100%, 18rem);
  cursor: pointer;
  border: 0;
  border-radius: 0.75rem;
  background: var(--hz-accent-deep);
  padding: 1rem 2rem;
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
  box-shadow: 0 0 0 5px var(--hz-accent-ring), 0 8px 20px var(--hz-btn-shadow);
  animation: hz-file-btn-glow 2.2s ease-in-out infinite;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.hz-svc__file-pick:hover .hz-svc__file-btn {
  filter: brightness(1.06);
}
.hz-svc__file-pick:active .hz-svc__file-btn {
  transform: scale(0.98);
}
.hz-svc__file-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 0.875rem;
  color: #64748b;
}
.hz-svc__file-pick.has-file .hz-svc__file-name {
  color: #0f172a;
  font-weight: 600;
}

@keyframes hz-file-btn-glow {
  0%, 100% {
    box-shadow: 0 0 0 5px var(--hz-accent-ring), 0 8px 20px var(--hz-btn-shadow);
  }
  50% {
    box-shadow: 0 0 0 9px transparent, 0 10px 24px var(--hz-btn-shadow);
  }
}

button.hz-svc__btn {
  background: var(--hz-accent-deep);
  box-shadow: 0 6px 16px var(--hz-btn-shadow);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.hz-svc__btn:hover {
  filter: brightness(0.92);
}
.hz-svc__btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--hz-accent-ring);
}

div.hz-svc__loading {
  border-color: var(--hz-loading-border);
  background: var(--hz-accent-soft);
  color: var(--hz-loading-text);
}
.hz-svc__loading .hz-svc__spinner {
  border-color: var(--hz-accent-deep);
  border-top-color: transparent;
}

button.hz-svc__chip {
  border-color: var(--hz-chip-border);
  background: var(--hz-accent-soft);
  color: var(--hz-accent-deep);
}
.hz-svc__chip:hover {
  filter: brightness(0.97);
}

div.hz-svc__slot {
  border-color: var(--hz-file-border);
  background: var(--hz-file-bg);
}

/* انتخاب‌گر زبان (پاپ‌آپ ۱۴۰ زبانی) — همان زبان بصری .hz-svc__select/.hz-svc__chip. */
button.hz-lang-picker__trigger {
  border-color: var(--hz-select-border);
  background: #fff;
  text-align: right;
}
button.hz-lang-picker__trigger:focus {
  border-color: var(--hz-accent-deep);
  outline: none;
  box-shadow: 0 0 0 3px var(--hz-accent-ring);
}
button.hz-lang-picker__chip {
  border-color: var(--hz-chip-border);
  background: var(--hz-accent-soft);
  color: var(--hz-accent-deep);
}
.hz-lang-picker__chip:hover {
  filter: brightness(0.97);
}
button.hz-lang-picker__chip[aria-pressed="true"] {
  background: var(--hz-accent-deep);
  color: #fff;
}
button.hz-lang-picker__more {
  border-color: #15803d;
  background: #16a34a;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
button.hz-lang-picker__more:hover {
  background: #15803d;
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.45);
}
.hz-lang-picker__more:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.35);
}
.hz-lang-picker__more:active {
  transform: scale(0.98);
}
.hz-lang-picker__popup {
  display: none;
}
.hz-lang-picker__popup.is-open {
  display: flex;
}
input.hz-lang-picker__search {
  border-color: var(--hz-select-border);
}
input.hz-lang-picker__search:focus {
  border-color: var(--hz-accent-deep);
  outline: none;
  box-shadow: 0 0 0 3px var(--hz-accent-ring);
}
.hz-lang-picker__row[hidden] {
  display: none;
}
.hz-lang-picker__row:hover,
.hz-lang-picker__row:focus-visible {
  background: var(--hz-accent-soft);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .hz-svc__btn {
    transition: none;
  }
  .hz-svc__file-btn {
    animation: none;
  }
}