/*
 * Drukara Calculator – overrides
 *
 * Cel:
 * - ustabilizować wygląd input/select w kalkulatorze na stronach produktowych,
 * - wygrać z bardziej specyficznymi globalnymi stylami (np. .woocommerce input/select),
 * - działać niezależnie od Tailwind @layer/@property (minifikatory czasem to psują).
 */

/* Inputs */
.drukara-calculator .drukara-calculator__input,
.woocommerce .drukara-calculator .drukara-calculator__input {
  display: block !important;
  width: 100% !important;
  margin-top: 0.25rem !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: #1a1a1a !important;
  background-color: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 0.25rem !important;
}

.drukara-calculator .drukara-calculator__input:focus,
.woocommerce .drukara-calculator .drukara-calculator__input:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Selects */
.drukara-calculator .drukara-calculator__select,
.woocommerce .drukara-calculator .drukara-calculator__select {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: #1a1a1a !important;
  background-color: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 0.25rem !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='6' viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 0.5L5.5 5.5L0.5 0.5' stroke='%23757575' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
}

.drukara-calculator .drukara-calculator__select:focus,
.woocommerce .drukara-calculator .drukara-calculator__select:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}