/**
 * ═══════════════════════════════════════════════════════════════════════════
 * SEKCJA "BOUNCER" – Z KIM OSIĄGAM NAJLEPSZE EFEKTY?
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * WERSJA: 1.2.0
 * KOLORYSTYKA: Białe tło + ciemne karty
 * 
 * LOKALIZACJA PLIKU:
 * /wp-content/themes/blocksy-child/bouncer-section.css
 * 
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════
   ZMIENNE CSS
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Tło sekcji = białe */
  --bouncer-bg: #FFFFFF;
  
  /* Karty = ciemne */
  --bouncer-card-bg: #0F0F12;
  
  /* Akcent */
  --bouncer-accent: #F36816;
  --bouncer-accent-light: #FF9147;
  
  /* Kolory semantyczne */
  --bouncer-positive: #22C55E;
  --bouncer-negative: #EF4444;
  
  /* Tekst na jasnym tle (nagłówki) */
  --bouncer-text-dark: #0F0F12;
  --bouncer-text-muted: #6B7280;
  
  /* Tekst na ciemnym tle (karty) */
  --bouncer-text-light: #FFFFFF;
  --bouncer-text-light-muted: rgba(255, 255, 255, 0.7);
  --bouncer-text-light-dim: rgba(255, 255, 255, 0.5);
  
  /* Obramowania */
  --bouncer-border-light: rgba(0, 0, 0, 0.08);
  --bouncer-border-card: rgba(255, 255, 255, 0.06);
  
  /* Rozmiary */
  --bouncer-max-width: 1000px;
  --bouncer-radius: 12px;
  --bouncer-radius-sm: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEKCJA GŁÓWNA — BIAŁE TŁO
   ═══════════════════════════════════════════════════════════════════════════ */
.bouncer-section {
  background-color: var(--bouncer-bg);
  padding: 80px 24px 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bouncer-container {
  max-width: var(--bouncer-max-width);
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAGŁÓWEK — CIEMNY TEKST NA BIAŁYM TLE
   ═══════════════════════════════════════════════════════════════════════════ */
.bouncer-header {
  text-align: center;
  margin-bottom: 56px;
}

.bouncer-title {
  color: var(--bouncer-text-dark);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 18px;
}

.bouncer-title span {
  color: var(--bouncer-accent);
}

.bouncer-subtitle {
  color: var(--bouncer-text-muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  max-width: 500px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BENTO GRID
   ═══════════════════════════════════════════════════════════════════════════ */
.bouncer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 720px) {
  .bouncer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KARTY — CIEMNE TŁO
   ═══════════════════════════════════════════════════════════════════════════ */
.bouncer-card {
  background-color: var(--bouncer-card-bg);
  border-radius: var(--bouncer-radius);
  padding: 36px 32px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KARTA POZYTYWNA — POMARAŃCZOWE OBRAMOWANIE
   ═══════════════════════════════════════════════════════════════════════════ */
.bouncer-card--positive {
  border: 1.5px solid var(--bouncer-accent);
}

.bouncer-card--positive::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bouncer-accent) 0%, var(--bouncer-accent-light) 100%);
}

.bouncer-card--positive:hover {
  transform: translateY(-6px);
  box-shadow: 
    0 24px 48px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(243, 104, 22, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   KARTA NEGATYWNA — BEZ OBRAMOWANIA, SUBTELNIEJSZA
   ═══════════════════════════════════════════════════════════════════════════ */
.bouncer-card--negative {
  border: 1px solid var(--bouncer-border-card);
}

.bouncer-card--negative:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ELEMENTY KART — JASNY TEKST NA CIEMNYM TLE
   ═══════════════════════════════════════════════════════════════════════════ */
.bouncer-card__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.bouncer-card--positive .bouncer-card__label {
  color: var(--bouncer-accent);
}

.bouncer-card--negative .bouncer-card__label {
  color: var(--bouncer-text-light-dim);
}

.bouncer-card__title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 28px;
}

.bouncer-card--positive .bouncer-card__title {
  color: var(--bouncer-text-light);
}

.bouncer-card--negative .bouncer-card__title {
  color: var(--bouncer-text-light-muted);
}

.bouncer-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0;
  margin: 0;
}

.bouncer-card__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 14px;
  line-height: 1.6;
}

.bouncer-card--positive .bouncer-card__item {
  color: var(--bouncer-text-light-muted);
}

.bouncer-card--negative .bouncer-card__item {
  color: var(--bouncer-text-light-dim);
}

/* ═══════════════════════════════════════════════════════════════════════════
   IKONY
   ═══════════════════════════════════════════════════════════════════════════ */
.bouncer-card__icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  margin-top: 1px;
}

.bouncer-card__icon--check {
  background: rgba(34, 197, 94, 0.2);
  color: var(--bouncer-positive);
}

.bouncer-card__icon--x {
  background: rgba(239, 68, 68, 0.15);
  color: rgba(239, 68, 68, 0.7);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRUST BAR — JASNE TŁO, CIEMNY TEKST
   ═══════════════════════════════════════════════════════════════════════════ */
.bouncer-trust {
  margin-top: 32px;
  background: #F9FAFB;
  border: 1px solid var(--bouncer-border-light);
  border-radius: var(--bouncer-radius-sm);
  padding: 28px 32px;
  text-align: center;
}

.bouncer-trust__label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bouncer-text-muted);
  margin-bottom: 22px;
}

.bouncer-trust__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}

@media (max-width: 500px) {
  .bouncer-trust__logos {
    gap: 32px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGOTYPY — HOVER EFFECT
   ═══════════════════════════════════════════════════════════════════════════ */
.bouncer-trust__logo {
  height: 50px;
  opacity: 0.5;
  filter: grayscale(1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.bouncer-trust__logo:hover {
  opacity: 1;
  filter: grayscale(0);
  transform: scale(1.08);
}

.bouncer-trust__logo img {
  height: 100%;
  width: auto;
  display: block;
  border-radius: 4px;
}

.bouncer-trust__logo--square {
  height: 55px;
}

.bouncer-trust__logo--wide {
  height: 42px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .bouncer-card,
  .bouncer-trust__logo {
    transition: none;
  }
  
  .bouncer-card:hover,
  .bouncer-card--positive:hover,
  .bouncer-card--negative:hover {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMULARZ KONTAKTOWY — NAGŁÓWEK (POZA BOKSEM)
   ═══════════════════════════════════════════════════════════════════════════ */
.bouncer-form-header {
  text-align: center;
  margin-top: 64px;
  margin-bottom: 48px;
}

.bouncer-form-title {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  color: var(--bouncer-text-dark);
  margin-bottom: 18px;
  letter-spacing: -0.025em;
}

.bouncer-form-title span {
  color: #f86818;
}

.bouncer-form-subtitle {
  font-size: 16px;
  color: var(--bouncer-text-muted);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMULARZ KONTAKTOWY — WRAPPER (BOKS)
   ═══════════════════════════════════════════════════════════════════════════ */
.bouncer-form-wrapper {
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 0;
  padding: 48px;
  background: var(--bouncer-card-bg);
  border-radius: var(--bouncer-radius);
  border: 1.5px solid var(--bouncer-accent);
  position: relative;
  overflow: hidden;
}

.bouncer-form-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bouncer-accent) 0%, var(--bouncer-accent-light) 100%);
}

@media (max-width: 680px) {
  .bouncer-form-wrapper {
    padding: 32px 24px;
  }
}

/* Grid formularza — POJEDYNCZA KOLUMNA */
.bouncer-form-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bouncer-form-grid > .wpcf7-form-control-wrap,
.bouncer-form-grid > p,
.bouncer-form-grid > br {
  margin: 0;
  display: block;
}

.bouncer-form-grid br {
  display: none;
}

/* Grupa telefonu z kierunkowym */
.bouncer-form-phone-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}

.bouncer-form-phone-group > span:first-child,
.bouncer-form-phone-group > .wpcf7-form-control-wrap:first-child {
  flex: 0 0 auto;
  width: auto;
  min-width: 120px;
  max-width: 140px;
}

.bouncer-form-phone-group > span:last-child,
.bouncer-form-phone-group > .wpcf7-form-control-wrap:last-child {
  flex: 1;
}

@media (max-width: 480px) {
  .bouncer-form-phone-group {
    flex-direction: column !important;
  }
  
  .bouncer-form-phone-group > span:first-child,
  .bouncer-form-phone-group > .wpcf7-form-control-wrap:first-child {
    max-width: none;
    width: 100%;
  }
}

/* Pola formularza — BIAŁY TEKST */
.bouncer-form input[type="text"],
.bouncer-form input[type="email"],
.bouncer-form input[type="tel"],
.bouncer-form select,
.bouncer-form textarea {
  width: 100%;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--bouncer-radius-sm);
  color: #FFFFFF !important;
  font-size: 15px;
  font-family: inherit;
  transition: all 0.3s ease;
  -webkit-text-fill-color: #FFFFFF;
}

.bouncer-form input[type="text"]::placeholder,
.bouncer-form input[type="email"]::placeholder,
.bouncer-form input[type="tel"]::placeholder,
.bouncer-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.bouncer-form input[type="text"]:focus,
.bouncer-form input[type="email"]:focus,
.bouncer-form input[type="tel"]:focus,
.bouncer-form select:focus,
.bouncer-form textarea:focus {
  outline: none;
  border-color: var(--bouncer-accent);
  background: rgba(255, 255, 255, 0.08);
}

.bouncer-form textarea {
  min-height: 140px;
  resize: vertical;
}

/* Autofill fix */
.bouncer-form input:-webkit-autofill,
.bouncer-form input:-webkit-autofill:hover,
.bouncer-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-box-shadow: 0 0 0px 1000px #1a1a1f inset !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Select */
.bouncer-form select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' fill-opacity='0.5' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* Submit button */
.bouncer-form-submit-wrapper {
  display: flex !important;
  justify-content: center !important;
  margin-top: 8px;
  width: 100%;
  text-align: center !important;
}

.bouncer-form input[type="submit"],
.bouncer-form .wpcf7-submit {
  background: var(--bouncer-accent) !important;
  color: #FFFFFF !important;
  font-size: 16px;
  font-weight: 600;
  padding: 18px 48px;
  border: none !important;
  border-radius: var(--bouncer-radius-sm);
  cursor: pointer;
  transition: all 0.3s ease;
  width: auto !important;
  min-width: 220px;
  margin: 0 auto !important;
  display: block !important;
  float: none !important;
}

.bouncer-form input[type="submit"]:hover,
.bouncer-form .wpcf7-submit:hover {
  background: var(--bouncer-accent-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(243, 104, 22, 0.3);
}

/* CF7 response messages */
.bouncer-form .wpcf7-response-output {
  margin: 16px 0 0 0;
  padding: 12px 16px;
  border-radius: var(--bouncer-radius-sm);
  font-size: 14px;
}

.bouncer-form .wpcf7-mail-sent-ok {
  background: rgba(34, 197, 94, 0.1);
  border-color: var(--bouncer-positive);
  color: var(--bouncer-positive);
}

.bouncer-form .wpcf7-validation-errors,
.bouncer-form .wpcf7-spam-blocked {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--bouncer-negative);
  color: var(--bouncer-negative);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX: Usunięcie automatycznych marginesów Blocksy między sekcjami
   ═══════════════════════════════════════════════════════════════════════════ */
.bouncer-section {
  margin-bottom: 0 !important;
}

/* Kontakt-dane bezpośrednio po bouncer — usuń gap */
.bouncer-section + .kontakt-dane,
.bouncer-section ~ .kontakt-dane {
  margin-top: 0 !important;
}

/* Nadpisanie Blocksy spacing dla kontenerów */
.entry-content .bouncer-section,
.is-layout-constrained .bouncer-section {
  margin-block-end: 0 !important;
}