.supra-configurator,
.supra-configurator * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.supra-configurator {
  --navy: #152238;
  --red: #ef233c;
  --white: #ffffff;
  --bg: #f7f8fa;
  --g100: #f0f1f4;
  --g200: #e2e4ea;
  --g400: #6b7280;
  --g500: #4b5563;
  --green: #047857;
  --red-light: rgba(239, 35, 60, 0.06);
  --navy-light: rgba(21, 34, 56, 0.06);
}
.supra-configurator {
  font-family: "Outfit", sans-serif;

  color: var(--navy);
  padding: 24px 14px;
  min-height: 100vh;
}
.supra-configurator .mono {
  font-family: "JetBrains Mono", monospace;
}
.supra-configurator .wrap {
  max-width: 1200px;
  margin: 0 auto;
}
.supra-configurator .header {
  text-align: center;
  margin-bottom: 28px;
}
.supra-configurator .header img {
  height: 36px;
  object-fit: contain;
  margin-bottom: 12px;
}
.supra-configurator .header h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--navy);
}
.supra-configurator .header p {
  font-size: 15px;
  color: var(--g500);
  margin-top: 4px;
}
.supra-configurator .step-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.supra-configurator .step-item {
  font-size: 16px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
  color: var(--g400);
  background: transparent;
  white-space: nowrap;
}
.supra-configurator .step-item:hover {
  border-color: var(--red);
  color: var(--navy);
}
.supra-configurator .step-item:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
.supra-configurator .step-item.active {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.supra-configurator .step-item.done,
.supra-configurator .step-item.has {
  color: var(--navy);
  border-color: var(--navy);
  background: var(--navy-light);
}
.supra-configurator .step-item.locked {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.supra-configurator .step-sep {
  color: var(--navy);
  font-size: 24px;
  font-weight: 700;
  user-select: none;
  line-height: 1;
}
.supra-configurator .price-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--white);
  border: 2px solid var(--g200);
  border-radius: 14px;
  padding: 14px 24px;
  margin-bottom: 22px;
}
.supra-configurator .badge {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  background: rgba(4, 120, 87, 0.08);
  padding: 3px 10px;
  border-radius: 6px;
  display: inline-block;
}
.supra-configurator .card {
  background: var(--white);
  border: 2px solid var(--g200);
  border-radius: 14px;
  padding: 20px 22px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
  position: relative;
}
.supra-configurator .card:hover {
  border-color: var(--red);
}
.supra-configurator .card:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
.supra-configurator .card.sel {
  border-color: var(--red);
  background: var(--red-light);
}
.supra-configurator .card .pop {
  position: absolute;
  top: -1px;
  right: 20px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 0 0 8px 8px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.supra-configurator .card .chk {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.supra-configurator .feat {
  display: inline-block;
  font-size: 12px;
  color: var(--g500);
  background: var(--g100);
  padding: 3px 10px;
  border-radius: 6px;
  margin: 2px 2px 0 0;
}
.supra-configurator .detail-link {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
  margin-top: 8px;
  transition: opacity 0.15s;
}
.supra-configurator .detail-link:hover {
  opacity: 0.7;
}
.supra-configurator .skip-opt {
  padding: 16px 20px;
  border-radius: 14px;
  border: 2px solid var(--g200);
  cursor: pointer;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--g400);
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
  margin-top: 10px;
}
.supra-configurator .skip-opt:hover {
  border-color: var(--red);
  color: var(--navy);
}
.supra-configurator .skip-opt:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
.supra-configurator .skip-opt.active {
  border-color: var(--red);
  background: var(--red-light);
  color: var(--red);
}
.supra-configurator .config-missing {
  background: var(--white);
  border: 2px dashed var(--g200);
  border-radius: 14px;
  color: var(--g500);
  font-size: 14px;
  font-weight: 600;
  padding: 16px 20px;
}
.supra-configurator .choice {
  flex: 1;
  min-width: 130px;
  background: var(--white);
  border: 2px solid var(--g200);
  border-radius: 14px;
  padding: 28px 20px;
  cursor: pointer;
  text-align: center;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.supra-configurator .choice:hover {
  border-color: var(--red);
}
.supra-configurator .choice:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
.supra-configurator .choice.sel {
  background: var(--navy);
  border-color: var(--navy);
}
.supra-configurator .choice.sel .ch-label,
.supra-configurator .choice.sel .ch-icon {
  color: #fff;
}
.supra-configurator .choice.sel .ch-sub {
  color: rgba(255, 255, 255, 0.75);
}
.supra-configurator .choice.disabled {
  cursor: not-allowed;
  background: var(--g100);
  border-color: var(--g200);
  opacity: 0.7;
}
.supra-configurator .choice.disabled:hover {
  border-color: var(--g200);
}
.supra-configurator .choice.disabled .ch-label {
  color: var(--g500);
}
.supra-configurator .ch-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--g200);
  color: var(--g500);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Compact variant used only for the Rechnungsversand choice cards. */
.supra-configurator .choice-sm {
  min-width: 110px;
  padding: 14px 16px;
  border-radius: 10px;
}
.supra-configurator .choice-sm .ch-label {
  font-size: 14px;
  margin-bottom: 2px;
}
.supra-configurator .choice-sm .ch-sub {
  font-size: 12px;
}
.supra-configurator .ch-icon {
  font-size: 28px;
  margin-bottom: 8px;
  text-align: center;
  display: flex;
  justify-content: center;
}
.supra-configurator .ch-icon .ch-flag {
  display: block;
  width: 42px;
  height: 28px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.supra-configurator .ch-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.supra-configurator .ch-sub {
  font-size: 13px;
  color: var(--g500);
}
.supra-configurator .sub-bars {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  margin-top: 14px;
}
.supra-configurator .sub-bar {
  flex: 1;
}
.supra-configurator .sub-bar .track {
  height: 4px;
  border-radius: 2px;
  transition: background 0.3s;
}
.supra-configurator .sub-bar .sub-lbl {
  font-size: 11px;
  font-weight: 600;
  margin-top: 5px;
  text-align: center;
}
.supra-configurator .info-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 2px solid transparent;
  white-space: nowrap;
  transition: border-color 0.15s;
}
.supra-configurator .info-link:hover {
  border-color: var(--red);
}
.supra-configurator .summary-box {
  background: var(--white);
  border: 2px solid var(--g200);
  border-radius: 18px;
  padding: 28px;
}
.supra-configurator .sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--g100);
}
.supra-configurator .sum-cat {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--red-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--red);
  flex-shrink: 0;
}
.supra-configurator .btn {
  padding: 13px 30px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  border: 2px solid transparent;
}
.supra-configurator .btn:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
.supra-configurator .btn-back {
  background: var(--white);
  color: var(--g500);
  border-color: var(--g200);
  margin-bottom: 20px;
}
.supra-configurator .btn-back:hover {
  border-color: var(--red);
  color: var(--navy);
}
.supra-configurator .btn-next {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.supra-configurator .btn-next:hover {
  background: #1a2d4d;
}
.supra-configurator .btn-next.dis {
  background: var(--g200);
  color: var(--g400);
  border-color: var(--g200);
  cursor: not-allowed;
  pointer-events: none;
}
.supra-configurator .btn-order {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.supra-configurator .btn-order:hover {
  background: #d91e35;
}
.supra-configurator .content-slide {
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease;
}
.supra-configurator .footer {
  text-align: center;
  margin-top: 36px;
  font-size: 12px;
  color: var(--g400);
}
.supra-configurator .tv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 600px) {
  .supra-configurator .tv-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.supra-configurator .toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 14px 20px;
  border: 2px solid var(--g200);
  border-radius: 14px;
  background: var(--white);
  transition: border-color 0.15s;
}
.supra-configurator .toggle-row:hover {
  border-color: var(--red);
}
.supra-configurator .toggle-row.on {
  border-color: var(--navy);
  background: var(--navy-light);
}
.supra-configurator .toggle-track {
  width: 48px;
  height: 26px;
  border-radius: 13px;
  background: var(--g200);
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.supra-configurator .toggle-track.on {
  background: var(--navy);
}
.supra-configurator .toggle-knob {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: left 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.supra-configurator .toggle-track.on .toggle-knob {
  left: 25px;
}
.supra-configurator .form-group {
  margin-bottom: 18px;
}
.supra-configurator .form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}
.supra-configurator .form-label .req {
  color: var(--red);
  margin-left: 2px;
}
.supra-configurator .form-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--g200);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  color: var(--navy);
  background: var(--white);
  transition: border-color 0.15s;
  outline: none;
}
.supra-configurator .form-input:hover {
  border-color: var(--red);
}
.supra-configurator .form-input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(21, 34, 56, 0.1);
}
.supra-configurator .form-input.err {
  border-color: var(--red);
}
.supra-configurator .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 500px) {
  .supra-configurator .form-row {
    grid-template-columns: 1fr;
  }
}
.supra-configurator .form-hint {
  font-size: 12px;
  color: var(--g400);
  margin-top: 4px;
}
.supra-configurator .phone-row {
  display: flex;
  gap: 8px;
}
.supra-configurator .phone-prefix {
  width: 90px;
  flex-shrink: 0;
}
.supra-configurator .cb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  cursor: pointer;
  border-radius: 6px;
}
.supra-configurator .cb-row:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
.supra-configurator .cb-box {
  width: 22px;
  height: 22px;
  border: 2px solid var(--g200);
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  margin-top: 1px;
}
.supra-configurator .cb-box.checked {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.supra-configurator .cb-box.err-cb {
  border-color: var(--red);
}
.supra-configurator .cb-label {
  font-size: 14px;
  color: var(--g500);
  line-height: 1.4;
}
.supra-configurator .cb-label a {
  color: var(--red);
  text-decoration: none;
  font-weight: 600;
}
.supra-configurator .urg-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--g100);
  border-radius: 10px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--g500);
}

/* ─── Gravity Forms order form (Bestellung step) ─── */
.supra-configurator__order-form {
  margin: 0 auto;
}
.supra-configurator__order-form .gform_wrapper {
  font-family: inherit;
}
.supra-configurator__order-form .gform_fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.supra-configurator__order-form .gfield {
  grid-column: 1 / -1;
  margin-bottom: 18px !important;
  border: 0;
  padding: 0;
  min-width: 0;
}
.supra-configurator__order-form .gfield.supra-half {
  grid-column: auto;
}
@media (max-width: 500px) {
  .supra-configurator__order-form .gform_fields {
    grid-template-columns: 1fr;
  }
  .supra-configurator__order-form .gfield.supra-half {
    grid-column: 1 / -1;
  }
}
.supra-configurator__order-form .gfield_label,
.supra-configurator__order-form legend.gfield_label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px !important;
  padding: 0;
}
.supra-configurator__order-form .gfield_required_text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.supra-configurator__order-form .gfield_required::before {
  content: "*";
  color: var(--red);
  margin-left: 2px;
}
.supra-configurator__order-form .gform_wrapper input[type="text"],
.supra-configurator__order-form .gform_wrapper input[type="email"],
.supra-configurator__order-form .gform_wrapper input[type="tel"],
.supra-configurator__order-form .gform_wrapper select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--g200);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  color: var(--navy);
  background: var(--white);
  transition: border-color 0.15s;
  outline: none;
}
.supra-configurator__order-form .gform_wrapper input[type="text"]:hover,
.supra-configurator__order-form .gform_wrapper input[type="email"]:hover,
.supra-configurator__order-form .gform_wrapper input[type="tel"]:hover,
.supra-configurator__order-form .gform_wrapper select:hover {
  border-color: var(--red);
}
.supra-configurator__order-form .gform_wrapper input[type="text"]:focus,
.supra-configurator__order-form .gform_wrapper input[type="email"]:focus,
.supra-configurator__order-form .gform_wrapper input[type="tel"]:focus,
.supra-configurator__order-form .gform_wrapper select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(21, 34, 56, 0.1);
}
.supra-configurator__order-form .gfield_checkbox {
  list-style: none;
  margin: 0;
  padding: 0;
}
.supra-configurator__order-form .gfield_checkbox .gchoice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.supra-configurator__order-form .gfield_checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex-shrink: 0;
  border: 2px solid var(--g200);
  border-radius: 6px;
  margin: 1px 0 0;
  cursor: pointer;
  position: relative;
  background: var(--white);
  transition: all 0.15s;
}
.supra-configurator__order-form .gfield_checkbox input[type="checkbox"]:hover {
  border-color: var(--red);
}
.supra-configurator__order-form
  .gfield_checkbox
  input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
.supra-configurator__order-form
  .gfield_checkbox
  input[type="checkbox"]:checked {
  background: var(--navy);
  border-color: var(--navy);
}
.supra-configurator__order-form
  .gfield_checkbox
  input[type="checkbox"]:checked::after {
  content: "\2713";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.supra-configurator__order-form .gfield_checkbox label {
  font-size: 14px;
  color: var(--g500);
  line-height: 1.4;
  cursor: pointer;
}
.supra-configurator__order-form .validation_error,
.supra-configurator__order-form .gfield_description.validation_message {
  color: var(--red);
}
.supra-configurator__order-form .gform_footer {
  margin-top: 8px !important;
  padding: 0 !important;
}
.supra-configurator__order-form .gform_button {
  padding: 13px 30px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  border: 2px solid var(--red);
  background: var(--red);
  color: #fff;
}
.supra-configurator__order-form .gform_button:hover {
  background: #d91e35;
}

/* ─── Gravity Forms – international phone field (flag + country dropdown) ───
   gform_disable_css is on for this page, so the widget ships with no CSS
   at all; this replicates just enough of GF's own foundation theme styles
   (incl. the flag sprite positions below) to match the rest of the form. */
.supra-configurator__order-form .gform-phone {
  position: relative;
}
.supra-configurator__order-form .gform-phone__input-wrapper {
  display: flex;
  align-items: stretch;
}
.supra-configurator__order-form .ginput_country-selector_container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-shrink: 0;
}
.supra-configurator__order-form .ginput_phone_container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}
.supra-configurator__order-form .gform-phone .gform-field-label--type-sub {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}
.supra-configurator__order-form .gform-phone__country-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 12px 14px;
  border: 2px solid var(--g200);
  border-right: none;
  border-radius: 10px 0 0 10px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.supra-configurator__order-form .gform-phone__country-selector:hover,
.supra-configurator__order-form .gform-phone__country-selector:focus {
  border-color: var(--red);
  outline: none;
}
.supra-configurator__order-form .gform-phone__country-selector::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 6px;
  background: url("/wp-content/plugins/gravityforms/images/theme/international-phone/select.svg")
    center / contain no-repeat;
}
.supra-configurator__order-form .gform-phone__flag-icon {
  display: inline-block;
  width: 30px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: auto 20px;
  background-image: url("/wp-content/plugins/gravityforms/images/theme/international-phone/flags-sprite.webp");
  background-image: image-set(
    url("/wp-content/plugins/gravityforms/images/theme/international-phone/flags-sprite.webp")
      1x,
    url("/wp-content/plugins/gravityforms/images/theme/international-phone/flags-sprite@2x.webp")
      2x
  );
}
.supra-configurator__order-form .gform-phone__dial-code {
  font-size: 14px;
}
.supra-configurator__order-form .gform-phone__input {
  border-radius: 0 10px 10px 0 !important;
  width: 100%;
  margin-left: -2px;
}
.supra-configurator__order-form .gform-phone__input:focus {
  position: relative;
  z-index: 1;
}
.supra-configurator__order-form .gform-phone__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  z-index: 1010;
  background: var(--white);
  border: 2px solid var(--g200);
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(21, 34, 56, 0.12);
  overflow: hidden;
}
.supra-configurator__order-form .gform-phone__dropdown--hidden {
  display: none;
}
.supra-configurator__order-form .gform-phone__search-wrapper {
  padding: 12px;
  border-bottom: 1px solid var(--g200);
}
.supra-configurator__order-form .gform-phone__search {
  width: 100%;
  padding: 10px 12px 10px 34px;
  border: 2px solid var(--g200);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--navy);
  background:
    url("/wp-content/plugins/gravityforms/images/theme/international-phone/search.svg")
      10px center / 16px no-repeat,
    var(--white);
  outline: none;
}
.supra-configurator__order-form .gform-phone__search:focus {
  border-color: var(--navy);
}
.supra-configurator__order-form .gform-phone__country-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  max-height: 240px;
  overflow-y: auto;
}
.supra-configurator__order-form .gform-phone__country-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--navy);
  cursor: pointer;
}
.supra-configurator__order-form .gform-phone__country-item:hover,
.supra-configurator__order-form .gform-phone__country-item--focused {
  background: var(--g100);
}
.supra-configurator__order-form .gform-phone__country-item--active {
  background: var(--red-light);
}
.supra-configurator__order-form .gform-phone__country-code {
  margin-left: auto;
  font-size: 12px;
  color: var(--g400);
}

/* Flag sprite positions (generated from Gravity Forms' own foundation theme CSS) */
.supra-configurator__order-form .gform-phone__flag-icon--ac {
  background-position: calc(12 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ad {
  background-position: calc(5 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ae {
  background-position: calc(229 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--af {
  background-position: calc(0 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ag {
  background-position: calc(8 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ai {
  background-position: calc(7 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--al {
  background-position: calc(2 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--am {
  background-position: calc(10 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ao {
  background-position: calc(6 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ar {
  background-position: calc(9 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--as {
  background-position: calc(4 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--at {
  background-position: calc(14 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--au {
  background-position: calc(13 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--aw {
  background-position: calc(11 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ax {
  background-position: calc(1 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--az {
  background-position: calc(15 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ba {
  background-position: calc(27 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--bb {
  background-position: calc(19 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--bd {
  background-position: calc(18 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--be {
  background-position: calc(21 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--bf {
  background-position: calc(34 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--bg {
  background-position: calc(33 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--bh {
  background-position: calc(17 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--bi {
  background-position: calc(35 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--bj {
  background-position: calc(23 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--bl {
  background-position: calc(200 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--bm {
  background-position: calc(24 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--bn {
  background-position: calc(32 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--bo {
  background-position: calc(26 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--bq {
  background-position: calc(40 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--br {
  background-position: calc(29 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--bs {
  background-position: calc(16 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--bt {
  background-position: calc(25 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--bw {
  background-position: calc(28 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--by {
  background-position: calc(20 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--bz {
  background-position: calc(22 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ca {
  background-position: calc(38 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--cc {
  background-position: calc(47 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--cd {
  background-position: calc(51 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--cf {
  background-position: calc(42 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--cg {
  background-position: calc(50 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ch {
  background-position: calc(211 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ci {
  background-position: calc(54 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ck {
  background-position: calc(52 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--cl {
  background-position: calc(44 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--cm {
  background-position: calc(37 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--cn {
  background-position: calc(45 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--co {
  background-position: calc(48 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--cr {
  background-position: calc(53 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--cu {
  background-position: calc(56 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--cv {
  background-position: calc(39 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--cw {
  background-position: calc(57 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--cx {
  background-position: calc(46 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--cy {
  background-position: calc(58 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--cz {
  background-position: calc(59 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--de {
  background-position: calc(82 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--dj {
  background-position: calc(61 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--dk {
  background-position: calc(60 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--dm {
  background-position: calc(62 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--do {
  background-position: calc(63 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--dz {
  background-position: calc(3 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ec {
  background-position: calc(64 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ee {
  background-position: calc(69 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--eg {
  background-position: calc(65 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--eh {
  background-position: calc(240 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--er {
  background-position: calc(68 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--es {
  background-position: calc(198 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--et {
  background-position: calc(71 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--fi {
  background-position: calc(75 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--fj {
  background-position: calc(74 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--fk {
  background-position: calc(72 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--fm {
  background-position: calc(140 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--fo {
  background-position: calc(73 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--fr {
  background-position: calc(76 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ga {
  background-position: calc(79 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--gb {
  background-position: calc(230 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--gd {
  background-position: calc(87 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ge {
  background-position: calc(81 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--gf {
  background-position: calc(77 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--gg {
  background-position: calc(91 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--gh {
  background-position: calc(83 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--gi {
  background-position: calc(84 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--gl {
  background-position: calc(86 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--gm {
  background-position: calc(80 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--gn {
  background-position: calc(92 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--gp {
  background-position: calc(88 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--gq {
  background-position: calc(67 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--gr {
  background-position: calc(85 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--gt {
  background-position: calc(90 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--gu {
  background-position: calc(89 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--gw {
  background-position: calc(93 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--gy {
  background-position: calc(94 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--hk {
  background-position: calc(97 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--hn {
  background-position: calc(96 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--hr {
  background-position: calc(55 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ht {
  background-position: calc(95 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--hu {
  background-position: calc(98 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--id {
  background-position: calc(101 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ie {
  background-position: calc(104 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--il {
  background-position: calc(106 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--im {
  background-position: calc(105 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--in {
  background-position: calc(100 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--io {
  background-position: calc(30 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--iq {
  background-position: calc(103 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ir {
  background-position: calc(102 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--is {
  background-position: calc(99 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--it {
  background-position: calc(107 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--je {
  background-position: calc(110 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--jm {
  background-position: calc(108 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--jo {
  background-position: calc(111 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--jp {
  background-position: calc(109 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ke {
  background-position: calc(113 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--kg {
  background-position: calc(117 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--kh {
  background-position: calc(36 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ki {
  background-position: calc(114 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--km {
  background-position: calc(49 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--kn {
  background-position: calc(202 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--kp {
  background-position: calc(160 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--kr {
  background-position: calc(196 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--kw {
  background-position: calc(116 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ky {
  background-position: calc(41 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--kz {
  background-position: calc(112 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--la {
  background-position: calc(118 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--lb {
  background-position: calc(120 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--lc {
  background-position: calc(203 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--li {
  background-position: calc(124 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--lk {
  background-position: calc(199 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--lr {
  background-position: calc(122 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ls {
  background-position: calc(121 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--lt {
  background-position: calc(125 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--lu {
  background-position: calc(126 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--lv {
  background-position: calc(119 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ly {
  background-position: calc(123 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ma {
  background-position: calc(146 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--mc {
  background-position: calc(142 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--md {
  background-position: calc(141 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--me {
  background-position: calc(144 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--mf {
  background-position: calc(204 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--mg {
  background-position: calc(128 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--mh {
  background-position: calc(134 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--mk {
  background-position: calc(161 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ml {
  background-position: calc(132 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--mm {
  background-position: calc(148 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--mn {
  background-position: calc(143 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--mo {
  background-position: calc(127 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--mp {
  background-position: calc(162 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--mq {
  background-position: calc(135 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--mr {
  background-position: calc(136 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ms {
  background-position: calc(145 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--mt {
  background-position: calc(133 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--mu {
  background-position: calc(137 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--mv {
  background-position: calc(131 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--mw {
  background-position: calc(129 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--mx {
  background-position: calc(139 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--my {
  background-position: calc(130 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--mz {
  background-position: calc(147 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--na {
  background-position: calc(149 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--nc {
  background-position: calc(153 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ne {
  background-position: calc(156 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--nf {
  background-position: calc(159 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ng {
  background-position: calc(157 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ni {
  background-position: calc(155 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--nl {
  background-position: calc(152 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--no {
  background-position: calc(163 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--np {
  background-position: calc(151 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--nr {
  background-position: calc(150 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--nu {
  background-position: calc(158 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--nz {
  background-position: calc(154 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--om {
  background-position: calc(164 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--pa {
  background-position: calc(168 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--pe {
  background-position: calc(171 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--pf {
  background-position: calc(78 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--pg {
  background-position: calc(169 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ph {
  background-position: calc(172 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--pk {
  background-position: calc(165 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--pl {
  background-position: calc(173 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--pm {
  background-position: calc(205 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--pr {
  background-position: calc(175 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ps {
  background-position: calc(167 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--pt {
  background-position: calc(174 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--pw {
  background-position: calc(166 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--py {
  background-position: calc(170 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--qa {
  background-position: calc(176 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--re {
  background-position: calc(177 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ro {
  background-position: calc(178 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--rs {
  background-position: calc(186 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ru {
  background-position: calc(179 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--rw {
  background-position: calc(180 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--sa {
  background-position: calc(184 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--sb {
  background-position: calc(193 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--sc {
  background-position: calc(187 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--sd {
  background-position: calc(207 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--se {
  background-position: calc(210 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--sg {
  background-position: calc(189 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--sh {
  background-position: calc(201 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--si {
  background-position: calc(192 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--sj {
  background-position: calc(209 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--sk {
  background-position: calc(191 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--sl {
  background-position: calc(188 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--sm {
  background-position: calc(182 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--sn {
  background-position: calc(185 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--so {
  background-position: calc(194 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--sr {
  background-position: calc(208 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ss {
  background-position: calc(197 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--st {
  background-position: calc(183 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--sv {
  background-position: calc(66 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--sx {
  background-position: calc(190 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--sy {
  background-position: calc(212 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--sz {
  background-position: calc(70 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--tc {
  background-position: calc(225 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--td {
  background-position: calc(43 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--tg {
  background-position: calc(218 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--th {
  background-position: calc(216 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--tj {
  background-position: calc(214 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--tk {
  background-position: calc(219 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--tl {
  background-position: calc(217 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--tm {
  background-position: calc(224 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--tn {
  background-position: calc(222 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--to {
  background-position: calc(220 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--tr {
  background-position: calc(223 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--tt {
  background-position: calc(221 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--tv {
  background-position: calc(226 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--tw {
  background-position: calc(213 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--tz {
  background-position: calc(215 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ua {
  background-position: calc(228 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ug {
  background-position: calc(227 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--us {
  background-position: calc(231 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--uy {
  background-position: calc(232 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--uz {
  background-position: calc(234 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--va {
  background-position: calc(236 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--vc {
  background-position: calc(206 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ve {
  background-position: calc(237 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--vg {
  background-position: calc(31 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--vi {
  background-position: calc(233 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--vn {
  background-position: calc(238 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--vu {
  background-position: calc(235 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--wf {
  background-position: calc(239 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ws {
  background-position: calc(181 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--xk {
  background-position: calc(115 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--ye {
  background-position: calc(241 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--yt {
  background-position: calc(138 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--za {
  background-position: calc(195 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--zm {
  background-position: calc(242 * -30px) 0;
}
.supra-configurator__order-form .gform-phone__flag-icon--zw {
  background-position: calc(243 * -30px) 0;
}

/* ─── Mobile responsiveness ─────────────────────────────── */

/* ≤ 640 px — tablets in portrait / large phones */
@media (max-width: 640px) {
  .supra-configurator {
    padding: 0px;
  }

  /* Header */
  .supra-configurator .header {
    margin-bottom: 20px;
  }
  .supra-configurator .header h1 {
    font-size: 20px;
  }
  .supra-configurator .header p {
    font-size: 13px;
  }

  /* Step nav: shrink items, hide separators */
  .supra-configurator .step-nav {
    gap: 4px;
    margin-bottom: 18px;
  }
  .supra-configurator .step-item {
    font-size: 12px;
    padding: 7px 10px;
  }
  .supra-configurator .step-sep {
    display: none;
  }

  /* Price bar: tighter padding, allow badge to wrap */
  .supra-configurator .price-bar {
    padding: 12px 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Cards: slightly less padding */
  .supra-configurator .card {
    padding: 16px 16px;
  }

  /* Choice buttons (flag / Neu / Portierung) */
  .supra-configurator .choice {
    padding: 20px 12px;
    min-width: 90px;
  }

  /* Summary box */
  .supra-configurator .summary-box {
    padding: 18px 16px;
    border-radius: 14px;
  }

  /* Summary rows: allow price + edit to stay in line but reduce gap */
  .supra-configurator .sum-row {
    gap: 10px;
    padding: 12px 0;
    align-items: flex-start;
  }

  /* Summary total price: reduce from 30px so "CHF 145.00" doesn't wrap */
  .supra-configurator .summary-brutto {
    font-size: 22px !important;
  }

  /* One-time total price: reduce from 26px */
  .supra-configurator .summary-onetime {
    font-size: 20px !important;
  }

  /* Navigation buttons: full-width on very small viewports */
  .supra-configurator .btn {
    padding: 12px 20px;
    font-size: 14px;
  }
}

/* ≤ 400 px — small phones */
@media (max-width: 400px) {
  .supra-configurator .step-item {
    font-size: 11px;
    padding: 6px 7px;
  }
  .product__information__header {
    flex-direction: column;
  }
  .supra-configurator .info-link {
    border-color: var(--red);
  }
  .supra-configurator .card {
    padding: 26px 12px;
  }
  /* Keep summary price legible but not overflowing */
  .supra-configurator .sum-row {
    flex-wrap: wrap;
  }
  /* Make buttons fill available width on tiny screens */
  .supra-configurator .btn-back,
  .supra-configurator .btn-next {
    padding: 11px 16px;
    font-size: 13px;
  }
}