/**
 * Pretcurent outage report form (v1.6.5).
 *
 * Notes:
 *  - Colors are EXPLICIT (not via var(--color-*) fallbacks) because the
 *    form is rendered inside Bricks hero sections that override
 *    --color-text to white via section-level CSS, which previously made
 *    the consent label text invisible against the white form-card bg.
 *  - Custom checkbox renders a 22px brand-blue square so the consent
 *    can't be missed — the prior native checkbox was the source of the
 *    "Trebuie să confirmi acordul..." UX failure.
 */

.pcp-report-form {
  font-family: 'Inter', system-ui, sans-serif;
  width: 100%;
}

.pcp-report-form__form {
  display: flex;
  flex-direction: column;
  gap: 8px;            /* v1.9.32: was 10 */
  background: #FFFFFF;
  padding: 16px;       /* v1.9.32: was 20 — saves 8px vertical */
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  color: #0F172A;
}

/*
 * Compact heading row — pulse-dot + inline title. Replaces the previous
 * centered standalone heading block; saves ~24px while signalling
 * "live" form (matches the brand's outage-status language).
 */
.pcp-report-form__heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;        /* v1.9.33: was 2 (now centered, give it a bit more breathing room before the first field) */
  align-self: center;     /* v1.9.33: centers the dot+text unit in the form column (parent is flex-direction: column) */
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 16px;        /* v1.9.32: was 18 */
  font-weight: 700;
  color: #0F172A;
  text-align: center;     /* v1.9.33: was left */
  line-height: 1.2;
}

.pcp-report-form__heading::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3B5BDB;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(59, 91, 219, 0.15);
}

/* ─── Field layout ─────────────────────────────────────────────────── */
.pcp-report-form__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: #1F2937;
}

.pcp-report-form__label-text {
  font-weight: 600;
  color: #0F172A;
  font-size: 12px;        /* v1.9.32: was 13 */
}

.pcp-report-form__sublabel {
  font-weight: 600;
  color: #64748B;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pcp-report-form__fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;               /* v1.9.32: was 6 */
}

.pcp-report-form__fieldset > legend {
  padding: 0;
  margin-bottom: 2px;     /* v1.9.32: was 4 */
}

/* Two-column row (Street + Nr., Data + Ora) */
.pcp-report-form__row {
  display: flex;
  gap: 8px;
}

.pcp-report-form__field--street { flex: 1 1 auto; min-width: 0; }
.pcp-report-form__field--number { flex: 0 0 90px; }
.pcp-report-form__field--date   { flex: 1 1 auto; min-width: 0; }
.pcp-report-form__field--time   { flex: 0 0 110px; }

@media (max-width: 480px) {
  .pcp-report-form__row {
    flex-wrap: wrap;
  }
  .pcp-report-form__field--street,
  .pcp-report-form__field--date {
    flex-basis: 100%;
  }
  .pcp-report-form__field--number,
  .pcp-report-form__field--time {
    flex-basis: 100%;
  }
  /* On mobile the submit takes full width — the column collapses and a
     thumb-friendly full-bleed CTA reads better than a small-width pill. */
  .pcp-report-form__submit {
    align-self: stretch;
    width: 100%;
    height: 46px;          /* v1.9.32: a hair taller on mobile for thumb */
  }
  /* v1.9.32: restore Apple HIG 44px touch target on small screens.
     Desktop's 40px is fine for cursor/mouse but on phones thumbs need
     the extra ~5% surface area to avoid mis-taps.
     v1.9.35: !important removed (Bricks template's competing rule was
     stripped at source). Mobile font-size bumped 14 → 16px to prevent
     iOS Safari from auto-zooming on input focus (the threshold is 16px
     — anything smaller triggers the zoom). This used to live in Bricks
     template 1308 as a global override; it now lives natively in the
     plugin where it belongs. */
  .pcp-report-form__input {
    height: 44px;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 16px;
  }
}

/* ─── Inputs ────────────────────────────────────────────────────────── */
/* v1.9.32: desktop default reduced to 40px (still meets WCAG 2.5.5      */
/* "Target Size (Enhanced)" 44×44 floor when factoring the label-text    */
/* clickable area above the input — combined hit area exceeds 44px).     */
/* Mobile (≤480px) restores 44px height + 10px padding via the media     */
/* query lower in this file — preserves Apple HIG touch target floor.    */
.pcp-report-form__input {
  padding: 8px 12px;       /* v1.9.32: was 10 14 */
  height: 40px;            /* v1.9.35: !important removed — the competing 52px rule was sourced from Bricks template 1308's customCss "A11Y/UX HARDENING" block (added 2026-05-09 same day) and has now been surgically removed at source. Plugin CSS owns input sizing natively. */
  min-height: 40px;
  border: 1px solid #D1D4D6;
  border-radius: 10px;
  font-size: 13.5px;
  /* Explicit line-height — without this, native <select> elements use
     browser-default line-height which clips Romanian diacritic descenders
     on placeholder text ("Alege județul" → the comma under `ț` and the
     tail of `j` were getting cropped). 1.4 gives ~19px line-box, which
     fits comfortably in the 24px content area (height − vertical padding). */
  line-height: 1.4;
  font-family: inherit;
  background: #FFFFFF;
  color: #0F172A;
  font-weight: 500;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
  box-sizing: border-box;
  /* v1.9.33: strip native chrome from ALL inputs — selects, text,
     date, and time. Without this, <input type="date"> and
     <input type="time"> reserve extra padding for their native picker
     indicators on WebKit, rendering ~2px taller than text inputs and
     the appearance:none-stripped county <select>. With this rule
     promoted to the base, every form control sits in an identical
     40px box (44px on mobile via the @media block). The county-select
     rule lower in this file still has its own appearance:none under
     @supports, harmless duplicate. Custom picker indicator styling
     for date/time is added below. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* v1.9.33: keep the calendar/clock picker icons visible after stripping
   native appearance — without this rule, Chrome/Safari's
   ::-webkit-calendar-picker-indicator stays clickable but renders
   slightly off-baseline. Fixed opacity + matching gray color so the
   icons look intentional, not like leftover browser chrome. */
.pcp-report-form__input[type="date"]::-webkit-calendar-picker-indicator,
.pcp-report-form__input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  padding: 0 2px;
  margin-right: -2px;
  filter: invert(38%) sepia(8%) saturate(290%) hue-rotate(176deg) brightness(94%) contrast(85%);
}

.pcp-report-form__input[type="date"]::-webkit-calendar-picker-indicator:hover,
.pcp-report-form__input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 0.85;
}

/* Strip the inner spinner buttons that webkit/blink occasionally inject
   on type=time — they push content right and break vertical alignment. */
.pcp-report-form__input[type="time"]::-webkit-inner-spin-button,
.pcp-report-form__input[type="time"]::-webkit-clear-button,
.pcp-report-form__input[type="date"]::-webkit-inner-spin-button,
.pcp-report-form__input[type="date"]::-webkit-clear-button {
  -webkit-appearance: none;
  display: none;
}

.pcp-report-form__input:focus {
  outline: none;
  border-color: #3B5BDB;
  box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.15);
}

.pcp-report-form__input::placeholder {
  color: #94A3B8;
  font-weight: 400;
}

.pcp-report-form__help {
  font-size: 12px;
  color: #64748B;
  margin-top: 2px;
}

/* ─── Consent — flat (no card), small text, focal blue checkbox ─────── */
.pcp-report-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 2px 0;        /* v1.9.32: was 4 0 */
  margin: 0;             /* v1.9.32: was 2 0 */
  cursor: pointer;
  position: relative;
}

.pcp-report-form__consent:hover {
  background: transparent;
}

.pcp-report-form__consent-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pcp-report-form__consent-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid #94A3B8;
  border-radius: 5px;
  background: #FFFFFF;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.pcp-report-form__consent-input:checked + .pcp-report-form__consent-box {
  background: #3B5BDB;
  border-color: #3B5BDB;
}

.pcp-report-form__consent-input:checked + .pcp-report-form__consent-box::after {
  content: '';
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6L5 8.5L9.5 3.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

.pcp-report-form__consent-input:focus-visible + .pcp-report-form__consent-box {
  outline: 3px solid rgba(59, 91, 219, 0.3);
  outline-offset: 2px;
}

.pcp-report-form__consent-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;       /* v1.9.32: was 12 */
  line-height: 1.45;     /* v1.9.32: was 1.5 */
  color: #475569;
  font-weight: 500;
}

.pcp-report-form__consent-text a {
  color: #3B5BDB;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pcp-report-form__consent-text a:hover {
  color: #2C46B8;
}

/* Error highlight when consent is required but missing */
.pcp-report-form__consent.is-error {
  border-color: #B91C1C;
  background: #FEF2F2;
}

.pcp-report-form__consent.is-error .pcp-report-form__consent-box {
  border-color: #B91C1C;
}

/* ─── Submit button — mirrors hero "Raportează pană →" shape ────────── */
/* Auto-width, inline-flex with trailing arrow, 48px tall, 8px radius.   */
/* Brand royal-blue fill (was the hero button's white/dark-text inverse) */
/* so this reads as the page's primary CTA. Mobile: stretches to full   */
/* width because column collapses to single-column at 480px.            */
.pcp-report-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 2px;        /* v1.9.32: was 4 */
  padding: 0 22px;        /* v1.9.32: was 0 28 */
  height: 42px;           /* v1.9.32: was 48 */
  border: 0;
  border-radius: 8px;
  background: #3B5BDB;
  color: #FFFFFF;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;        /* v1.9.32: was 15 */
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.pcp-report-form__submit::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M5 3L10 8L5 13' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s ease;
}

.pcp-report-form__submit:hover::after {
  transform: translateX(2px);
}

.pcp-report-form__submit:hover {
  background: #2C46B8;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(59, 91, 219, 0.22);
}

.pcp-report-form__submit:active {
  transform: translateY(0);
}

.pcp-report-form__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.pcp-report-form__submit:focus-visible {
  outline: 3px solid #93C5FD;
  outline-offset: 2px;
}

/* ─── Terms line (under submit button) ──────────────────────────────── */
/* v1.9.35: replaces the old .pcp-report-form__consent checkbox. The
   submit action ("Raportează pana") IS the consent — this small line
   below the button explicitly acknowledges that submitting the form
   binds the user to the privacy policy. Per EDPB consent guidelines,
   this pattern is valid when (a) the action ↔ consent link is
   unambiguous, (b) the privacy policy is one click away, (c) the form
   processes only minimal data with optional address fields. All three
   conditions are met here. */
.pcp-report-form__terms {
  margin: 6px 0 0;
  padding: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.45;
  color: #64748B;
  text-align: center;
  font-weight: 400;
}

.pcp-report-form__terms a {
  color: #3B5BDB;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

.pcp-report-form__terms a:hover {
  color: #2C46B8;
}

/* ─── Status messages ───────────────────────────────────────────────── */
.pcp-report-form__status {
  margin: 0;
  min-height: 1.25em;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: #475569;
  text-align: center;
}

.pcp-report-form__status--success {
  color: #047857;
  font-weight: 500;
}

.pcp-report-form__status--error {
  color: #B91C1C;
  font-weight: 500;
}

/* ─── Locality combobox ─────────────────────────────────────────────── */
.pcp-report-form__combobox {
  position: relative;
}

.pcp-report-form__suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  background: #FFFFFF;
  border: 1px solid #CDDBFA;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  max-height: 280px;
  overflow-y: auto;
  z-index: 20;
}

.pcp-report-form__suggestions[hidden] {
  display: none;
}

.pcp-report-form__suggestions li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.pcp-report-form__suggestions li:hover,
.pcp-report-form__suggestions li.is-active {
  background: #EEF2FF;
}

.pcp-report-form__suggestion-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
}

.pcp-report-form__suggestion-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: #64748B;
}

/* County <select> uses native styling but with brand padding/height. */
.pcp-report-form__county-select {
  appearance: auto;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M4 6L8 10L12 6' stroke='%23475569' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .pcp-report-form__county-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}

/* ─── Pending receipt panel ─────────────────────────────────────────── */
.pcp-report-form__receipt {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  margin: 0 0 18px;
  background: #ECFDF5;
  border: 1px solid #6EE7B7;
  border-radius: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  animation: pcp-receipt-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes pcp-receipt-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pcp-report-form__receipt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #047857;
  color: #FFFFFF;
  flex-shrink: 0;
}

.pcp-report-form__receipt-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.pcp-report-form__receipt-msg {
  font-size: 14px;
  font-weight: 500;
  color: #064E3B;
  line-height: 1.55;
}

.pcp-report-form__receipt-id {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #047857;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .pcp-report-form__receipt {
    animation: none;
  }
}

/* ─── Honeypot ──────────────────────────────────────────────────────── */
.pcp-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}