@charset "UTF-8";
/* ── "Adataim átemelése" ────────────────────────────────── */
.drkriza-feedback-app .fb-prefill {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 20px;
  background: var(--green-faint);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.drkriza-feedback-app .fb-prefill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: #fff;
  color: var(--green-dark);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  font-size: 0.87rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.drkriza-feedback-app .fb-prefill-btn:hover {
  border-color: var(--green);
  background: var(--green-pale);
}

.drkriza-feedback-app .fb-prefill-btn svg {
  width: 16px;
  height: 16px;
}

.drkriza-feedback-app .fb-prefill-note {
  font-size: 0.82rem;
  color: var(--text-light);
}

/* ── Attachment picker ──────────────────────────────────── */
/* The native input, dressed up: no hidden-input + label trickery, so the control
   keeps its own keyboard behaviour and its own accessible name. */
.drkriza-feedback-app input[type=file] {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--text-mid);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  cursor: pointer;
}

.drkriza-feedback-app input[type=file]:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(94, 160, 90, 0.15);
}

.drkriza-feedback-app input[type=file]::file-selector-button {
  margin-right: 12px;
  padding: 7px 16px;
  background: var(--green-pale);
  color: var(--green-dark);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
}

.drkriza-feedback-app input[type=file]::file-selector-button:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green-dark);
}

/* Older WebKit (notably iOS Safari < 16.4) only knows the legacy name. It has to be
   its OWN rule: a selector list containing a pseudo-element the browser doesn't
   recognise is dropped WHOLE, so merging the two would style neither. */
.drkriza-feedback-app input[type=file]::-webkit-file-upload-button {
  margin-right: 12px;
  padding: 7px 16px;
  background: var(--green-pale);
  color: var(--green-dark);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
}

.drkriza-feedback-app .fb-files-hint {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 6px;
}

/* ── Selected files ─────────────────────────────────────── */
.drkriza-feedback-app .fb-file-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.drkriza-feedback-app .fb-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin-bottom: 6px;
  background: var(--green-faint);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.87rem;
}

/* min-width:0 lets the long name shrink and ellipsise instead of pushing the size
   and the remove button out of the row. */
.drkriza-feedback-app .fb-file-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drkriza-feedback-app .fb-file-size {
  flex: 0 0 auto;
  color: var(--text-light);
  font-size: 0.82rem;
}

.drkriza-feedback-app .fb-file-remove {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--text-light);
  border: 1.5px solid var(--border);
  border-radius: 50%;
  font-size: 1.15rem;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
}

.drkriza-feedback-app .fb-file-remove:hover {
  border-color: var(--red);
  color: var(--red);
  background: #FDECEA;
}

.drkriza-feedback-app .fb-file-total {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-mid);
  margin-top: 8px;
}

/* Over the total budget: the field also turns red via .field.has-error (sicknote.css),
   this makes the number itself say why. */
.drkriza-feedback-app .fb-file-total.is-over {
  color: var(--red);
}

/* ── Message counter ────────────────────────────────────── */
.drkriza-feedback-app .fb-counter {
  font-size: 0.76rem;
  color: var(--text-light);
  margin-top: 5px;
  text-align: right;
}

.drkriza-feedback-app .fb-counter.is-full {
  color: var(--coral);
  font-weight: 600;
}

/* ── Summary: the message block ─────────────────────────── */
/* The message is the substance of the page, so the summary shows it as typed —
   line breaks preserved — rather than squeezed into a label/value row. */
.drkriza-feedback-app .review-message {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.88rem;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  max-height: 220px;
  overflow-y: auto;
}

/* ── Partial success notice ─────────────────────────────── */
/* Shown on the success screen when the feedback was stored but the CRM refused an
   attachment. Amber, not red: nothing was lost of what the visitor WROTE, so a red
   panel under a green tick would overstate it — but it must not look like decoration
   either, hence the left rule and the medium weight. */
.drkriza-feedback-app .fb-partial {
  margin: 14px 0 0;
  padding: 11px 14px;
  text-align: left;
  background: #FFF8E6;
  border: 1px solid #F0D8A0;
  border-left: 4px solid var(--coral, #E8975A);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text, #2C3A2C);
  word-break: break-word;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .drkriza-feedback-app .fb-prefill {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .drkriza-feedback-app .fb-prefill-btn {
    width: 100%;
    justify-content: center;
  }
  /* 16px keeps iOS from zooming the page when the control is focused (same reason
     sicknote.scss bumps inputs on small screens). */
  .drkriza-feedback-app input[type=file] {
    font-size: 16px;
  }
}