/*
Theme Name: Frietzakjes Child
Theme URI: https://frietzakjes.nl/
Description: Hello Elementor child theme voor Frietzakjes.nl - v3.0 Tegelwerk design
Author: Katama
Author URI: https://katama.nl/
Template: hello-elementor
Version: 0.1.0
Text Domain: frietzakjes-child
*/

/* ============================================================
   Offerte-formulier: maat- en papierkeuze met productfoto's
   (parity met prod frietzakjes.nl/offerte-aanvragen/, 16 jul 2026).
   De Elementor-radiogroepen worden visuele keuzekaarten; de foto's
   komen uit de eigen uploads (relatief pad = werkt op alle 4 domeinen).
   Field-IDs: gewenste_puntzakmaat (8 maten), papier_soort (2 soorten).
   ============================================================ */
.elementor-field-group-gewenste_puntzakmaat .elementor-field-subgroup,
.elementor-field-group-papier_soort .elementor-field-subgroup {
  /* !important: Elementor's widget-form CSS zet display:flex op de subgroup */
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.elementor-field-group-papier_soort .elementor-field-subgroup {
  grid-template-columns: repeat(2, minmax(0, 220px));
}
.elementor-field-group-gewenste_puntzakmaat .elementor-field-option,
.elementor-field-group-papier_soort .elementor-field-option {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.elementor-field-group-gewenste_puntzakmaat .elementor-field-option:hover,
.elementor-field-group-papier_soort .elementor-field-option:hover {
  border-color: #1C8341;
}
.elementor-field-group-gewenste_puntzakmaat .elementor-field-option:has(input:checked),
.elementor-field-group-papier_soort .elementor-field-option:has(input:checked) {
  border-color: #1C8341;
  box-shadow: 0 0 0 2px rgba(28, 131, 65, 0.25);
}
.elementor-field-group-gewenste_puntzakmaat .elementor-field-option label,
.elementor-field-group-papier_soort .elementor-field-option label {
  /* !important + width: Elementor rendert de labels inline op tekstbreedte,
     waardoor de foto (::before, aspect-ratio op labelbreedte) piepklein werd */
  display: block !important;
  width: 100%;
  cursor: pointer;
  font-weight: 600;
}
.elementor-field-group-gewenste_puntzakmaat .elementor-field-option label::before,
.elementor-field-group-papier_soort .elementor-field-option label::before {
  content: "";
  display: block;
  aspect-ratio: 1;
  margin-bottom: 8px;
  /* longhands, geen shorthand: 'background:' reset background-image en wint
     door hogere specificiteit (0,2,1) van de per-label url-regels (0,1,1) */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 8px;
}
label[for="form-field-gewenste_puntzakmaat-0"]::before { background-image: url("/wp-content/uploads/2019/02/PZ10.jpg"); }
label[for="form-field-gewenste_puntzakmaat-1"]::before { background-image: url("/wp-content/uploads/2019/02/PZ13.jpg"); }
label[for="form-field-gewenste_puntzakmaat-2"]::before { background-image: url("/wp-content/uploads/2019/02/PZ15.jpg"); }
label[for="form-field-gewenste_puntzakmaat-3"]::before { background-image: url("/wp-content/uploads/2019/02/PZ17.jpg"); }
label[for="form-field-gewenste_puntzakmaat-4"]::before { background-image: url("/wp-content/uploads/2019/02/PZ19.jpg"); }
label[for="form-field-gewenste_puntzakmaat-5"]::before { background-image: url("/wp-content/uploads/2019/02/PZ21.jpg"); }
label[for="form-field-gewenste_puntzakmaat-6"]::before { background-image: url("/wp-content/uploads/2019/02/PZ23.jpg"); }
label[for="form-field-gewenste_puntzakmaat-7"]::before { background-image: url("/wp-content/uploads/2019/02/PZ26.jpg"); }
label[for="form-field-papier_soort-0"]::before { background-image: url("/wp-content/uploads/2018/08/Klein-Ongebleekt1.jpg"); }
label[for="form-field-papier_soort-1"]::before { background-image: url("/wp-content/uploads/2018/08/Puntzak-gebleekt-klein.jpg"); }
@media (max-width: 640px) {
  .elementor-field-group-gewenste_puntzakmaat .elementor-field-subgroup { grid-template-columns: repeat(2, 1fr); }
}