/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* Compactere layout */
.woocommerce-billing-fields__field-wrapper .form-row {
  margin-bottom: 12px !important;
}

/* Bold labels voor betere leesbaarheid */
.woocommerce-billing-fields label {
  font-weight: 600;
  color: #000; /* of pas aan naar je gewenste kleur */
}

/* Inputs stylen: consistent uiterlijk, padding en rand */
.woocommerce-billing-fields input.input-text,
.woocommerce-billing-fields select {
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  transition: border-color 0.3s, box-shadow 0.3s;
  font-size: 16px;
}

/* Grid layout met aparte gaps */
[class*="__field-wrapper"] {
  --wd-cols: 4;
  --wd-col-gap: 20px;
  --wd-row-gap: 12px;

  display: grid;
  grid-template-columns: repeat(var(--wd-cols), minmax(0, 1fr));
  column-gap: var(--wd-col-gap);
  row-gap: var(--wd-row-gap);
}

/* Ingevuld veld krijgt groene rand */
.woocommerce-billing-fields input.input-text.has-value,
.woocommerce-billing-fields select.has-value {
  border-color: #28a745;
  box-shadow: 0 0 0 1px rgba(40, 167, 69, 0.3);
}

/* Validatie-icoontje bij ingevuld veld */
.woocommerce-billing-fields input.input-text.has-value {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%2328a745" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M13.485 1.929l-7.071 7.071-3.535-3.535-1.414 1.414 4.95 4.95 8.485-8.485z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
  padding-right: 36px;
}

/* Mobiel: zorg dat velden niet te breed worden */
@media (max-width: 480px) {
  .woocommerce-billing-fields input.input-text,
  .woocommerce-billing-fields select {
    font-size: 15px;
    padding: 10px;
  }
}

/* Pak alle productafbeeldingen aan */
.product-image-link img {
  display: block;           /* Verwijdert ongewenste witruimte onder de afbeelding */
  width: 100%;              /* Vul de container horizontaal */
  aspect-ratio: 1 / 1;      /* Houdt een 1:1 verhouding (vierkant) */
  object-fit: cover;        /* Snijdt bij zodat de afbeelding de container vult */
}