@charset "UTF-8";
/* ==========================================================================
   Blok: Wycena — grafitowa karta, formularz Contact Form 7 na białym panelu
   Domyślny arkusz CF7 jest wyłączony (inc/cf7.php), więc całość stylu jest tutaj.
   ========================================================================== */

.wycena { background: var(--sec-bg, var(--bg)); }

.wycena__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;   /* clip nie tworzy kontenera przewijania, więc nie blokuje position: sticky */
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
  padding: clamp(1.25rem, 3.6vw, 3.5rem);
  border-radius: var(--radius-xl);
  background: var(--dark);
  color: var(--on-dark);
}
.wycena__card h2,
.wycena__card h3 { color: inherit; }

/* Łuk-kontur w lewym dolnym rogu wypełnia pusty grafit pod danymi kontaktowymi. */
.wycena__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -4rem;
  bottom: -10rem;
  width: clamp(16rem, 28vw, 24rem);
  aspect-ratio: 4 / 5;
  border: 2px solid var(--line-on-dark);
  border-radius: 999px 999px 0 0;
  pointer-events: none;
}

/* Kształty w rogu karty. */
.wycena__pill { width: 2.75rem; height: 6.5rem; left: 38%; top: -2.2rem; z-index: -1; --rot: 12deg; }
.wycena__star { width: 4.5rem; height: 4.5rem; right: 2.5rem; bottom: -1.25rem; z-index: -1; color: var(--blue); --rot: 0deg; }

/* --- Strona informacyjna -------------------------------------------------- */
.wycena__info .lead { color: var(--on-dark-muted); }

/* Lewa kolumna jedzie ze stroną, ale tylko w obrębie karty (formularz obok jest dłuższy). */
@media (min-width: 901px) and (min-height: 700px) {
  .wycena__info {
    position: sticky;
    top: calc(var(--header-h) + var(--admin-bar, 0px) + var(--space-6));
  }
}

.wycena__points {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.wycena__points li { display: flex; gap: var(--space-3); margin: 0; font-weight: 600; }
.wycena__points .icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.05rem;
  padding: 0.3rem;
  border-radius: 50%;
  background: var(--orange);
  color: var(--dark);
  stroke-width: 2.6;
}

.wycena__contact {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-on-dark);
  font-style: normal;
}
.wycena__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.375rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--orange);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.wycena__phone:hover { color: var(--on-dark); text-decoration: none; }
.wycena__phone .icon { width: 0.85em; height: 0.85em; flex: none; }
.wycena__line { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--on-dark-muted); }
.wycena__line .icon { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.2em; color: var(--orange); }
.wycena__line a { color: var(--on-dark); text-decoration: none; }
.wycena__line a:hover { color: var(--orange); text-decoration: none; }
.wycena__line span { min-width: 0; overflow-wrap: anywhere; }

/* --- Panel z formularzem -------------------------------------------------- */
.wycena__panel {
  position: relative;
  z-index: 1;
  padding: clamp(1.25rem, 2.8vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.wycena__panel h3 { color: var(--ink); }
.quote-form__title { margin: 0 0 var(--space-5); font-size: var(--fs-h3); line-height: 1.1; }
.quote-form__note { margin: var(--space-4) 0 0; font-size: var(--fs-sm); color: var(--muted); text-align: center; }
.quote-form__missing { margin: 0; padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface-2); }

/* --- Pola Contact Form 7 -------------------------------------------------- */
/* Pola ukryte CF7 leżą w <fieldset>: bez własnego arkusza wtyczki pokazałaby się jego ramka. */
.wpcf7 .hidden-fields-container { display: none; }
.wpcf7 .field { margin-bottom: var(--space-4); }
.wpcf7 .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); }
.wpcf7 .wpcf7-form-control-wrap { display: block; }

.wpcf7 .field > label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
}
.wpcf7 .field abbr { text-decoration: none; color: var(--orange-ink); cursor: help; }
.wpcf7 .field__opt { font-weight: 500; color: var(--muted); }
.wpcf7 .field__hint { margin: 0.45rem 0 0; font-size: var(--fs-xs); line-height: 1.45; color: var(--muted); }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  min-height: 3.4rem;
  padding: 0.8rem 1rem;
  border: 2px solid var(--line-strong);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  line-height: 1.35;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.wpcf7 textarea { min-height: 7rem; resize: vertical; }
.wpcf7 ::placeholder { color: var(--muted); opacity: 1; }   /* 4,5:1 także dla podpowiedzi */

.wpcf7 select {
  appearance: none;
  padding-right: 2.9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1714' stroke-width='2.4' 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 1rem center;
  background-size: 1.15rem;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: var(--orange-ink);
  box-shadow: 0 0 0 4px oklch(74.9% 0.169 54 / 0.3);
}

/* Plik: pole z przerywaną ramką i przyciskiem w kształcie pigułki. */
.wpcf7 input[type="file"] {
  width: 100%;
  padding: 0.65rem;
  border: 2px dashed var(--line-strong);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.wpcf7 input[type="file"]:hover { border-color: var(--ink); }
.wpcf7 input[type="file"]:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 3px; }
.wpcf7 input[type="file"]::file-selector-button {
  margin-right: 0.9rem;
  padding: 0.55rem 1.15rem;
  border: 0;
  border-radius: var(--pill);
  background: var(--dark);
  color: var(--on-dark);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.wpcf7 input[type="file"]::file-selector-button:hover { background: var(--dark-3); }

/* Zgoda RODO. */
.wpcf7 .field--check .wpcf7-list-item { display: block; margin: 0; }
.wpcf7 .field--check label {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  cursor: pointer;
}
.wpcf7 .field--check input[type="checkbox"] {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.05rem 0 0;
  accent-color: var(--orange-ink);
  cursor: pointer;
}
.wpcf7 .field--check a { font-weight: 700; }

/* Honeypot: poza ekranem, niewidoczny dla ludzi i czytników. */
.wpcf7 .hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Wysyłka. */
.wpcf7 input[type="submit"].btn { display: inline-flex; width: 100%; margin-top: var(--space-2); }
.wpcf7 input[type="submit"].btn:disabled { opacity: 0.6; cursor: progress; transform: none; box-shadow: none; }

.wpcf7-spinner { display: none; }
.wpcf7 form[data-status="submitting"] .wpcf7-spinner {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  margin: var(--space-3) auto 0;
  border: 3px solid var(--line-strong);
  border-top-color: var(--orange-ink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Błędy i potwierdzenia ------------------------------------------------ */
.wpcf7 .wpcf7-not-valid { border-color: var(--error); }
.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--error);
}

.wpcf7 .wpcf7-response-output {
  margin: var(--space-4) 0 0;
  padding: 0.9rem 1.1rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.45;
}
.wpcf7 .wpcf7-response-output:empty { display: none; }
.wpcf7 form[data-status="invalid"] .wpcf7-response-output,
.wpcf7 form[data-status="failed"] .wpcf7-response-output,
.wpcf7 form[data-status="spam"] .wpcf7-response-output,
.wpcf7 form[data-status="aborted"] .wpcf7-response-output,
.wpcf7 form[data-status="unaccepted"] .wpcf7-response-output {
  background: oklch(96.5% 0.025 29);
  border-color: var(--error);
  color: oklch(36% 0.13 29);
}

/* Po wysłaniu zostaje samo potwierdzenie: pola znikają, panel nie zostaje „pusty". */
.wpcf7 form[data-status="sent"] .field,
.wpcf7 form[data-status="sent"] .field-row,
.wpcf7 form[data-status="sent"] .wpcf7-submit,
.wpcf7 form[data-status="sent"] .wpcf7-spinner { display: none; }
.wpcf7 form[data-status="sent"] .wpcf7-response-output {
  margin: 0;
  padding: var(--space-6) var(--space-5);
  border-color: var(--ok);
  background: oklch(96% 0.045 150);
  color: var(--ok);
  font-size: var(--fs-lg);
  text-align: center;
}

.wpcf7 .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Węższe ekrany -------------------------------------------------------- */
@media (max-width: 900px) {
  .wycena__card { grid-template-columns: minmax(0, 1fr); }
  .wycena__pill { left: auto; right: 2rem; }
}
@media (max-width: 520px) {
  .wpcf7 .field-row { grid-template-columns: minmax(0, 1fr); }
  .wycena__card { padding: 0.75rem; border-radius: var(--radius-lg); }
  .wycena__info { padding: var(--space-4) var(--space-3) var(--space-3); }
  .wycena__panel { padding: var(--space-5) var(--space-4); border-radius: var(--radius); }
}

@media (prefers-reduced-motion: reduce) {
  .wpcf7 form[data-status="submitting"] .wpcf7-spinner { animation: none; }
}