/* Card type choice ("korttype") in Contact Form 7 - one line, as compact as possible.
   The field is read by byggekort-firm-requirements.php: keep the four option texts exactly as they are.
   (No HTML comment in the form itself: Contact Form 7 turned it into an extra empty line.)
   Form tag: [radio korttype class:korttype use_label_element default:1 "Bygg" "Renhold" "Bilpleie" "Varetransport"]
   Loaded from the child theme's functions.php (file korttype-cf7.css next to style.css). */

.korttype {
  --korttype-farge: #3f3f3f;     /* border and icon of the selected box */
  --korttype-valgt-bg: #d4f6fb;  /* background of the selected box (same as the banner) */
  display: flex;
  flex-wrap: nowrap;             /* always one line */
  gap: 6px;
  margin-top: 4px;
}

.korttype .wpcf7-list-item {
  display: flex;
  flex: 1 1 auto;                /* each box is as wide as its text needs, the rest is shared */
  margin: 0;
}

.korttype label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid #e0e0e0;     /* same as the text fields */
  border-radius: 3px;            /* same as the text fields */
  background: #ffffff;
  color: #1f1f1f;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  cursor: pointer;
}

/* Hide the radio button itself, but keep it for keyboard and screen readers */
.korttype input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

/* The icon in front of the text, drawn as a mask so its colour can be changed */
.korttype label::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: var(--korttype-farge);
  -webkit-mask: var(--ikon) no-repeat center / contain;
  mask: var(--ikon) no-repeat center / contain;
}

/* Selected */
.korttype label:has(input:checked) {
  background: var(--korttype-valgt-bg);
  border-color: var(--korttype-farge);   /* 1 px, same thickness as the other boxes */
}

/* Hover and keyboard focus */
.korttype label:hover {
  border-color: var(--korttype-farge);
}
.korttype label:has(input:focus-visible) {
  outline: 2px solid var(--korttype-farge);
  outline-offset: 2px;
}

/* Icons (the order must match the order of the options in the form tag) */
.korttype .wpcf7-list-item:nth-child(1) label { /* Bygg (construction) */
  --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V4h9v17M14 10h5v11M8 8h3M8 12h3M8 16h3'/%3E%3C/svg%3E");
}
.korttype .wpcf7-list-item:nth-child(2) label { /* Renhold (cleaning) */
  --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h14l-1.6 11H6.6zM8 9a4 4 0 0 1 8 0M9 13h6'/%3E%3C/svg%3E");
}
.korttype .wpcf7-list-item:nth-child(3) label { /* Bilpleie (car care) */
  --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16v-3l2.2-5h13.6L21 13v3M3 13h18M3 16h2M19 16h2M9 16h6'/%3E%3Ccircle cx='7' cy='16.5' r='2'/%3E%3Ccircle cx='17' cy='16.5' r='2'/%3E%3C/svg%3E");
}
.korttype .wpcf7-list-item:nth-child(4) label { /* Varetransport (goods transport) */
  --ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h11v10H2zM13 10h4.5l3.5 3.5V16h-8'/%3E%3Ccircle cx='6' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E");
}

/* Tablet: a little smaller, so the four choices stay on one line in a narrower form */
@media (max-width: 781px) {
  .korttype label {
    padding: 0 8px;
    font-size: 14px;
  }
}

/* Mobile: text only, so the four choices stay on one line */
@media (max-width: 600px) {
  .korttype label {
    min-height: 40px;            /* easier to tap with a finger */
    padding: 0 7px;
    font-size: 12.5px;
  }
  .korttype label::before {
    display: none;
  }
}

/* The smallest phones: a little smaller text */
@media (max-width: 350px) {
  .korttype {
    gap: 4px;
  }
  .korttype label {
    padding: 0 4px;
    font-size: 11.5px;
  }
}

/* "Bransje" label above the choices, in the FIRMANAVN section (looks like the other field labels) */
.korttype-etikett {
  display: block;
}
.korttype-etikett + br {
  display: none;                 /* Contact Form 7 may add a line break here */
}

/* A little less space down to KONTAKTPERSON (the hidden address fields below add an empty line).
   Change -12px to adjust: a bigger negative number = less space. */
.wpcf7-form-control-wrap[data-name="korttype"] {
  display: block;
  margin-bottom: -12px;
}