/* ==========================================================================
   e-Pragma "forms" component
   Scoped to .ep-form so it never leaks into the documentation pages.

   One component, two flavours:
     .ep-form--contact  the general contact form (name, e-mail, subject, message)
     .ep-form--inquiry  the detailed enquiry form (company, phone, budget, ...)

   The markup lives in the per-locale partials under docs/{el,en}/_forms/, the
   behaviour in docs/extra_javascript/ep-forms.js. A page uses a form by
   including the partial - nothing else is needed.
   ========================================================================== */

.ep-form {
  --epfm-bg: #ffffff;
  --epfm-fg: #12141f;
  --epfm-muted: #5a6178;
  --epfm-line: #e4e7f0;
  --epfm-card: #ffffff;
  --epfm-brand: #4051b5;
  --epfm-brand-2: #6c7bff;
  --epfm-accent: #ff7a1a;
  --epfm-ok: #1f8a4c;
  --epfm-error: #c0243c;
  --epfm-radius: 18px;
  --epfm-shadow: 0 1px 2px rgba(16, 20, 45, .06), 0 12px 32px rgba(16, 20, 45, .07);
  --epfm-shadow-lg: 0 2px 6px rgba(16, 20, 45, .08), 0 24px 60px rgba(16, 20, 45, .12);
}

[data-md-color-scheme="slate"] .ep-form {
  --epfm-bg: #14161f;
  --epfm-fg: #eef0f6;
  --epfm-muted: #a4abc0;
  --epfm-line: #2b2f3d;
  --epfm-card: #1b1e29;
  --epfm-ok: #4ade80;
  --epfm-error: #ff7a8a;
  --epfm-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
  --epfm-shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .45);
}

/* ---------- Card ---------- */

/* The enquiry form is a card of its own, so it can be dropped at the bottom
   of any page. The contact form sits inside the contact page's own card, so
   it does not bring one with it. */
.ep-form--inquiry {
  padding: 34px 34px 30px;
  border-radius: var(--epfm-radius);
  background: var(--epfm-card);
  border: 1px solid var(--epfm-line);
  box-shadow: var(--epfm-shadow-lg);
  margin: 56px 0 0;
}

/* ---------- Heading ---------- */

.md-typeset .ep-form__title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--epfm-fg);
  margin: 0 0 6px;
}

.md-typeset .ep-form__lead {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--epfm-muted);
  margin: 0 0 26px;
}

/* ---------- Layout ---------- */

.ep-form__form {
  margin: 0;
}

/* The enquiry form is a grid: two fields per row on a wide screen, one per
   row on a phone. The contact form is a single column - it has one field
   per row on every size. */
.ep-form--inquiry .ep-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
}

.ep-form__field {
  min-width: 0;
  margin: 0 0 18px;
}

.ep-form--inquiry .ep-form__field {
  margin: 0;
}

/* A field that spans the whole row. */
.ep-form--inquiry .ep-form__field--full {
  grid-column: 1 / -1;
}

/* ---------- Fields ---------- */

.md-typeset .ep-form__label {
  display: block;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--epfm-fg);
  margin: 0 0 7px;
}

.md-typeset .ep-form__input,
.md-typeset .ep-form__select,
.md-typeset .ep-form__textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--epfm-line);
  background: var(--epfm-bg);
  color: var(--epfm-fg);
  font-size: .96rem;
  /* The browser gives a form control its own font - monospace for a
     textarea - so the site font has to be asked for explicitly. */
  font-family: inherit;
  padding: .7em .85em;
  transition: border-color .18s ease, box-shadow .18s ease;
}

[data-md-color-scheme="slate"] .ep-form__input,
[data-md-color-scheme="slate"] .ep-form__select,
[data-md-color-scheme="slate"] .ep-form__textarea {
  background: rgba(255, 255, 255, .04);
}

.md-typeset .ep-form__input:focus,
.md-typeset .ep-form__select:focus,
.md-typeset .ep-form__textarea:focus {
  border-color: var(--epfm-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--epfm-brand) 18%, transparent);
  outline: none;
}

.md-typeset .ep-form__input::placeholder,
.md-typeset .ep-form__textarea::placeholder {
  color: var(--epfm-muted);
  opacity: .75;
}

/* The select keeps the native arrow - hiding it and drawing our own means
   every client has to agree on the drawing. */
.md-typeset .ep-form__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6178' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8em center;
  background-size: 1.05em auto;
  padding-right: 2.4em;
}

[data-md-color-scheme="slate"] .ep-form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4abc0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.ep-form__textarea {
  min-height: 140px;
  resize: vertical;
}

/* A field the visitor has to fill in is marked with a star. */
.ep-form__required {
  color: var(--epfm-accent);
  font-weight: 800;
}

/* ---------- Consent line ---------- */

.ep-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--epfm-muted);
}

.ep-form__consent input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--epfm-brand);
}

.md-typeset .ep-form__consent a {
  color: var(--epfm-brand);
  font-weight: 600;
  text-decoration: underline;
}

[data-md-color-scheme="slate"] .ep-form__consent a {
  color: var(--epfm-brand-2);
}

/* ---------- Note under the form ---------- */

.md-typeset .ep-form__note {
  font-size: .84rem;
  line-height: 1.55;
  color: var(--epfm-muted);
  margin: 14px 0 0;
}

/* ---------- Submit button ---------- */

.md-typeset .ep-form__submit {
  display: inline-block;
  width: 100%;
  padding: .82em 2em;
  border: none;
  border-radius: 999px;
  background: var(--epfm-accent);
  color: #1b1200;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(255, 122, 26, .3);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.md-typeset .ep-form__submit:hover {
  background: #ff8c3c;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 122, 26, .38);
}

.ep-form__submit:disabled {
  cursor: progress;
  opacity: .8;
  transform: none;
}

.ep-form__submit-spinner {
  display: none;
  width: 15px;
  height: 15px;
  margin-left: 10px;
  border: 2px solid rgba(27, 18, 0, .3);
  border-top-color: #1b1200;
  border-radius: 50%;
  animation: epfm-spin .7s linear infinite;
}

.md-typeset .ep-form__submit--busy .ep-form__submit-spinner {
  display: inline-block;
}

@keyframes epfm-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Inline status line ---------- */

.md-typeset .ep-form__status {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--epfm-muted);
  margin: 12px 0 0;
  min-height: 1.2em;
}

.md-typeset .ep-form__status--ok {
  color: var(--epfm-ok);
  font-weight: 600;
}

.md-typeset .ep-form__status--error {
  color: var(--epfm-error);
  font-weight: 600;
}

/* ---------- Success / error toast ---------- */

/* The toast is created by the script, so it is not inside .ep-form - it gets
   its own tokens, or every var() in its rules resolves to nothing and the
   panel renders fully transparent. */
.ep-toast {
  --epfm-bg: #ffffff;
  --epfm-fg: #12141f;
  --epfm-muted: #5a6178;
  --epfm-line: #e4e7f0;
  --epfm-card: #ffffff;
  --epfm-brand: #4051b5;
  --epfm-brand-2: #6c7bff;
  --epfm-accent: #ff7a1a;
  --epfm-radius: 18px;
  --epfm-shadow: 0 1px 2px rgba(16, 20, 45, .06), 0 12px 32px rgba(16, 20, 45, .07);
  --epfm-shadow-lg: 0 2px 6px rgba(16, 20, 45, .08), 0 24px 60px rgba(16, 20, 45, .12);
}

[data-md-color-scheme="slate"] .ep-toast {
  --epfm-bg: #14161f;
  --epfm-fg: #eef0f6;
  --epfm-muted: #a4abc0;
  --epfm-line: #2b2f3d;
  --epfm-card: #1b1e29;
  --epfm-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
  --epfm-shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .45);
}

.ep-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  max-width: 420px;
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

.ep-toast--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ep-toast__panel {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--epfm-card);
  border: 1px solid var(--epfm-line);
  border-left: 4px solid var(--epfm-accent);
  box-shadow: 0 18px 50px rgba(16, 20, 45, .22);
}

[data-md-color-scheme="slate"] .ep-toast__panel {
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

.ep-toast__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--epfm-accent) 16%, transparent);
}

.ep-toast__icon svg {
  width: 22px;
  height: 22px;
  fill: var(--epfm-accent);
}

.ep-toast__icon .ep-toast__icon-err {
  display: none;
}

.ep-toast__icon--error .ep-toast__icon-ok {
  display: none;
}

.ep-toast__icon--error .ep-toast__icon-err {
  display: block;
}

.ep-toast__icon--error {
  background: color-mix(in srgb, #e0344a 18%, transparent);
}

.ep-toast__icon--error svg {
  fill: #e0344a;
}

.ep-toast__body {
  flex: 1 1 auto;
  min-width: 0;
}

.md-typeset .ep-toast__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--epfm-fg);
  margin: 0 0 4px;
}

.md-typeset .ep-toast__text {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--epfm-muted);
  margin: 0;
}

.ep-toast__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.ep-toast__close svg {
  width: 18px;
  height: 18px;
  fill: var(--epfm-muted);
}

.ep-toast__close:hover {
  background: color-mix(in srgb, var(--epfm-muted) 14%, transparent);
}

/* ---------- Responsive ---------- */

@media screen and (max-width: 600px) {
  .ep-form--inquiry {
    padding: 24px 20px;
    margin-top: 40px;
  }

  .ep-form--inquiry .ep-form__grid {
    grid-template-columns: 1fr;
  }

  .ep-toast {
    right: 12px;
    left: 12px;
    bottom: 12px;
    max-width: none;
  }
}