/**
 * ŚCIEŻKA: /wcm-ipricelist/assets/css/frontend-customer.css
 * CEL: Pola dynamiczne klienta (dane kontaktowe, adresowe) wewnątrz fieldset.
 * ZMIANA: Pełna responsywność z szerokim użyciem clamp() dla czcionek, odstępów i wymiarów.
 */

/* =================================================
   1. WRAPPER: CUSTOMER FIELDS
================================================= */

#wcm-customer-fields-wrapper {
  width: 100% !important;
  display: block !important;
}

/* =================================================
   2. FIELDSET GRUPY KLIENTA
================================================= */

fieldset.wcm-customer-group {
  display: block !important;
  border: 1px solid var(--border-color-light) !important;
  padding: clamp(12px, 2.4vw, var(--space-4, 16px)) !important;
  margin-bottom: clamp(16px, 3vw, var(--space-5, 20px)) !important;
  border-radius: var(--radius-md, 12px) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: var(--shadow-1) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Tytuł grupy (legend) */
fieldset.wcm-customer-group legend {
  width: auto !important;
  font-weight: 900 !important;
  font-size: clamp(0.85rem, 1.7vw, 0.95rem) !important;
  color: var(--ae-white) !important;
  padding: 0 clamp(4px, 0.9vw, var(--space-2, 8px)) !important;
  margin-bottom: clamp(4px, 1.2vw, var(--space-2, 8px)) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: none !important;
  float: none !important;
  display: block !important;
}

/* =================================================
   3. ODSTĘPY MIĘDZY POLAMI
================================================= */

fieldset.wcm-customer-group .wcm-customer-data-field {
  margin-bottom: clamp(8px, 1.8vw, var(--space-3, 12px)) !important;
}

fieldset.wcm-customer-group .wcm-customer-data-field:last-child {
  margin-bottom: 0 !important;
}

/* =================================================
   4. WRAPPER POJEDYNCZEGO POLA
================================================= */

.wcm-customer-data-field {
  margin-bottom: clamp(8px, 1.8vw, 14px) !important;
  width: 100% !important;
  display: block !important;
}

/* Etykiety pól */
.wcm-customer-data-field label {
  display: block !important;
  margin-bottom: clamp(4px, 1.1vw, 6px) !important;
  font-weight: 600 !important;
  color: var(--ae-gray-200, #D9DEE7) !important;
  font-size: clamp(0.82rem, 1.6vw, 0.9rem) !important;
  font-family: 'Poppins', sans-serif !important;
}

/* =================================================
   5. POLA INPUT / TEXTAREA (DYNAMIKA + EMAIL SECTION)
================================================= */

.wcm-ipricelist-email-quote-section textarea,
.wcm-ipricelist-email-quote-section input[type="text"],
.wcm-ipricelist-email-quote-section input[type="tel"],
.wcm-ipricelist-email-quote-section input[type="email"],
.wcm-customer-data-field input[type="text"],
.wcm-customer-data-field input[type="email"],
.wcm-customer-data-field input[type="tel"],
.wcm-customer-data-field input[type="number"],
.wcm-customer-data-field textarea {
  width: 100% !important;
  max-width: 100% !important;
  font-family: 'Quicksand', sans-serif !important;
  padding: clamp(10px, 1.7vw, 12px) clamp(12px, 2.4vw, 16px) !important;
  border: 1px solid var(--border-color-light, rgba(255, 255, 255, 0.15)) !important;
  border-radius: var(--radius-md, 12px) !important;
  font-size: clamp(0.86rem, 1.9vw, 0.95rem) !important;
  min-height: clamp(44px, 6vh, 52px) !important; /* komfort dotykowy */
  font-weight: 600 !important;
  background: var(--field-color, rgba(0, 0, 0, 0.2)) !important;
  color: var(--ae-white, #fff) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.06s ease !important;
  resize: vertical !important;
  white-space: pre-wrap !important;
  box-sizing: border-box !important;
  margin-top: clamp(4px, 1.1vw, 8px) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* =================================================
   6. STAN FOCUS
================================================= */

.wcm-ipricelist-email-quote-section input:focus,
.wcm-ipricelist-email-quote-section textarea:focus,
.wcm-customer-data-field input:focus,
.wcm-customer-data-field textarea:focus {
  outline: none !important;
  border-color: var(--ae-green, #9AD300) !important;
  box-shadow: 0 0 0 3px rgba(154, 211, 0, 0.3) !important;
  background: #FFFFFF !important;
  color: #000000 !important;           /* Czarna czcionka w trakcie pisania */
  caret-color: #000000 !important;      /* Czarny kursor */
  transform: translateY(-1px);
}

/* =================================================
   7. FIX DLA AUTOFILL (Chrome / Edge)
================================================= */

.wcm-customer-data-field input:-webkit-autofill,
.wcm-customer-data-field input:-webkit-autofill:hover,
.wcm-customer-data-field input:-webkit-autofill:focus,
.wcm-customer-data-field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #FFFFFF inset !important;
  -webkit-text-fill-color: #000000 !important;
  color: #437050 !important;
  transition: background-color 5000s ease-in-out 0s !important;
  caret-color: #000000 !important;
  background: #d1d1d1 !important;
}

/* =================================================
   8. PLACEHOLDER
================================================= */

.wcm-customer-data-field input::placeholder,
.wcm-customer-data-field textarea::placeholder {
  color: #8f8f8f !important;
  opacity: 1 !important;
}

/* =================================================
   9. DROBNE DOSTOSOWANIA DLA BARDZO MAŁYCH EKRANÓW
================================================= */

@media (max-width: 480px) {
  fieldset.wcm-customer-group {
    padding: clamp(10px, 4vw, 14px) !important;
    margin-bottom: clamp(12px, 4vw, 16px) !important;
  }

  .wcm-customer-data-field label {
    font-size: clamp(0.8rem, 3.2vw, 0.86rem) !important;
  }

  .wcm-ipricelist-email-quote-section textarea,
  .wcm-ipricelist-email-quote-section input[type="text"],
  .wcm-ipricelist-email-quote-section input[type="tel"],
  .wcm-ipricelist-email-quote-section input[type="email"],
  .wcm-customer-data-field input[type="text"],
  .wcm-customer-data-field input[type="email"],
  .wcm-customer-data-field input[type="tel"],
  .wcm-customer-data-field input[type="number"],
  .wcm-customer-data-field textarea {
    font-size: clamp(0.88rem, 3.4vw, 0.94rem) !important;
    min-height: clamp(42px, 6.5vh, 50px) !important;
  }
}