#mimsafe-configurator {
  margin: 20px auto;       /* centrera blocket */
  text-align: center;      /* se till att barnen centreras */
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center; /* centrera fälten i blocket */
}


.mimsafe-select {

  flex: 1 1 200px; /* alla delar lika på rad, min 200px */
}

.mimsafe-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #333;
  border-radius: 5px;
  padding: 10px 15px;
  font-size: 16px;
  width: 100%;          /* fyller sin container */
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

/* Aktiv (ej disabled) */
.mimsafe-select select:enabled {
  background-color: #f8d12f; /* gul */
  color: #000;
}

/* Disabled */
.mimsafe-select select:disabled {
  background-color: #bfbfbf; /* grå */
  color: #333;
  cursor: not-allowed;
}





/* ===============================
   MIMsafe Configurator – Products
   Endast CSS (ingen ändring i JS)
   =============================== */

#mimsafe-configurator #products {
  margin-top: 1.25rem;
}

/* Grid för korten */
#mimsafe-configurator #products > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Kortcontainer */
#mimsafe-configurator #products > ul > li {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(2,6,23,.04), 0 8px 24px rgba(2,6,23,.06);
  padding: 14px;
  display: grid;
  grid-auto-rows: max-content;
  gap: 10px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#mimsafe-configurator #products > ul > li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(2,6,23,.08), 0 18px 36px rgba(2,6,23,.10);
  border-color: #d1d5db;
}

/* Bild – skriv över inline maxWidth från JS */
#mimsafe-configurator #products > ul > li > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none !important; /* överstyr JS inline 200px */
  aspect-ratio: 4 / 3;        /* håller proportioner jämna */
  object-fit: contain;
/*  background: #f8fafc;*/
  border-radius: 10px;
  border: 1px solid #eef2f7;
  padding: 8px;
}

/* Första <p> innehåller titel + SKU */
#mimsafe-configurator #products > ul > li > p:first-of-type {
  margin: 2px 0 0 0;
  line-height: 1.35;
  color: #0f172a;
}

/* Namnet (ligger i <strong> i första <p>) */
#mimsafe-configurator #products > ul > li > p:first-of-type > strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 2px;
}

/* “Artikelnummer: …” raden efter <br> */
#mimsafe-configurator #products > ul > li > p:first-of-type br + * {
  display: inline-block;
  margin-top: 2px;
  font-size: .9rem;
  color: #475569;
}

/* Beskrivningen (kommer som <div> med HTML från API) */
#mimsafe-configurator #products > ul > li > div {
  font-size: .95rem;
  color: #1f2937;
}

/* Snygga listor i beskrivningen om HTML innehåller <ul>/<li> */
#mimsafe-configurator #products > ul > li > div ul {
  margin: 6px 0 0 18px;
  padding: 0;
}

#mimsafe-configurator #products > ul > li > div li {
  margin: 4px 0;
  list-style: disc;
}

/* Produktspecifikation (andra <p> med <strong>Produktspecifikation:</strong>) */
#mimsafe-configurator #products > ul > li > p:nth-of-type(2) {
  background: #f7f8fb;
  border: 1px dashed #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0;
  font-size: .94rem;
  color: #0f172a;
  line-height: 1.4;
}

/* Rubriken i spec */
#mimsafe-configurator #products > ul > li > p:nth-of-type(2) > strong {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}

/* Radbrytningar i spec (dina <br>) får små mellanrum */
#mimsafe-configurator #products > ul > li > p:nth-of-type(2) br {
  content: "";
  margin-bottom: 2px;
  display: block;
}

/* Bilspecifik info (tredje <p> om den finns) */
#mimsafe-configurator #products > ul > li > p:nth-of-type(3) {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #78350f;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0;
  font-size: .94rem;
}

#mimsafe-configurator #products > ul > li > p:nth-of-type(3) > strong {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}

/* Pris (du skapar ett <div> med <strong>Pris:</strong>) */
#mimsafe-configurator #products > ul > li > div:has(> strong:nth-child(1)) {
  /* generellt prisblock – mjuk highlight */
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #0c4a6e;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: .96rem;
}

/* WooCommerce-knappen (markup kommer från REST) */
#mimsafe-configurator #products > ul > li a.button,
#mimsafe-configurator #products > ul > li a.wp-element-button,
#mimsafe-configurator #products > ul > li .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5ch;
  padding: 10px 14px;
  border-radius: 999px;
  background: #0ea5e9;
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(2,6,23,.08), 0 6px 14px rgba(14,165,233,.28);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

#mimsafe-configurator #products > ul > li a.button:hover,
#mimsafe-configurator #products > ul > li a.wp-element-button:hover,
#mimsafe-configurator #products > ul > li .button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(14,165,233,.34);
  background: #0284c7;
}

#mimsafe-configurator #products > ul > li a.button:active,
#mimsafe-configurator #products > ul > li a.wp-element-button:active,
#mimsafe-configurator #products > ul > li .button:active {
  transform: translateY(0);
}

/* Avstånd före/efter pris + knapp (knappen renderas i ett eget <div>) */
#mimsafe-configurator #products > ul > li > div + div {
  margin-top: 6px;
}

/* Felmeddelanden (du sätter inline röd färg, men gör det jämnt ändå) */
#mimsafe-configurator #products > ul > li > p[style*="red"],
#mimsafe-configurator #products > ul > li > p:contains("Fel") {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fef2f2;
  color: #991b1b !important;
  border: 1px solid #fecaca;
  font-size: .92rem;
}

/* Små typografiska putsningar */
#mimsafe-configurator #products > ul > li p,
#mimsafe-configurator #products > ul > li div {
  word-wrap: break-word;
}

#mimsafe-configurator #products > ul > li strong {
  font-weight: 700;
}

/* Mörkt läge (om OS föredrar) */
@media (prefers-color-scheme: dark) {
  #mimsafe-configurator #products > ul > li {
    background: #0b1220;
    border-color: #1f2a44;
    box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 10px 22px rgba(0,0,0,.35);
  }
  #mimsafe-configurator #products > ul > li > img {
    background: #0e1628;
    border-color: #1c2741;
  }
  #mimsafe-configurator #products > ul > li > p:first-of-type { color: #e5e7eb; }
  #mimsafe-configurator #products > ul > li > p:first-of-type br + * { color: #94a3b8; }
  #mimsafe-configurator #products > ul > li > div { color: #e2e8f0; }
  #mimsafe-configurator #products > ul > li > p:nth-of-type(2) {
    background: #0e172a;
    border-color: #1f2a44;
    color: #e5e7eb;
  }
  #mimsafe-configurator #products > ul > li > p:nth-of-type(3) {
    background: #2b1d0b;
    border-color: #8b5d18;
    color: #fde68a;
  }
  #mimsafe-configurator #products > ul > li > div:has(> strong:nth-child(1)) {
    background: #06253a;
    border-color: #164e63;
    color: #cbeafe;
  }
}

/* Liten skärm: lite tajtare gap och padding */
@media (max-width: 420px) {
  #mimsafe-configurator #products > ul { gap: 12px; }
  #mimsafe-configurator #products > ul > li { padding: 12px; }
}

/*Detta tar bort den gråa ramen kring köpknappen*/
#mimsafe-configurator #products .product.woocommerce.add_to_cart_inline {
    border: none !important;
}

/*Detta snurrar när man klickar på köp knappen*/
/* Loading-state för Woo-knappen */
#mimsafe-configurator #products .button.is-loading,
#mimsafe-configurator #products a.wp-element-button.is-loading,
#mimsafe-configurator #products .add_to_cart_button.is-loading {
  position: relative;
  pointer-events: none;
  opacity: .9;
  padding-right: 2.2rem !important; /* plats för spinnern */
}

/* Snurran */
#mimsafe-configurator #products .button.is-loading::after,
#mimsafe-configurator #products a.wp-element-button.is-loading::after,
#mimsafe-configurator #products .add_to_cart_button.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: mimsafe-spin .6s linear infinite;
}

@keyframes mimsafe-spin {
  to { transform: rotate(360deg); }
}




/* Gör wrappern kolumn när den innehåller knapp + "View cart" */
#mimsafe-configurator #products > ul > li > div:has(> .added_to_cart) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Själva "View cart"-länken under knappen */
#mimsafe-configurator #products .added_to_cart {
  display: block !important;     /* bryt rad */
  margin: 0 !important;
  text-align: center !important;
  font-size: .92rem;
  text-decoration: underline;
  color: #0ea5e9;
}

/* Liten luft under knappen så länken inte klistrar */
#mimsafe-configurator #products a.button + .added_to_cart,
#mimsafe-configurator #products a.wp-element-button + .added_to_cart,
#mimsafe-configurator #products .add_to_cart_button + .added_to_cart {
  margin-top: 2px !important;
}



/*Extra css october 16*/


/* Se till att både vår klass och Woo's .loading har positionerings-kontekst */
.add_to_cart_button.is-loading,
.single_add_to_cart_button.is-loading,
.add_to_cart_button.loading,
.single_add_to_cart_button.loading,
button.is-loading { position: relative; }

/* Vår egen inline-spinner (barnnod, inte ::after) */
.wc-inline-spinner {
  position: absolute;
  right: 0.75em;
  top: 50%;
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  border: 0.2em solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: wc-spin 0.7s linear infinite;
  pointer-events: none;
}

/* Om temat visar egen spinner vid .loading men gömmer den – visa ändå vår */
.add_to_cart_button.loading .wc-inline-spinner,
.single_add_to_cart_button.loading .wc-inline-spinner { display: block; }

@keyframes wc-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* “Visa varukorg”/“Ver carrito” ska synas */
.added_to_cart { display: inline-block !important; margin-left: .5rem; }






/* --- Form max 700px + products full width --- */

/* Se till att containern är flex + wrap */
#mimsafe-configurator {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center; /* centrera fälten inom max-bredden */
}

/* Pseudoelement som bildar vänster/höger "gutter" runt formuläret på första raden */
#mimsafe-configurator::before,
#mimsafe-configurator::after {
  content: "";
  /* Gör så att första raden (formuläret) maxar vid 700px men är responsiv under */
  flex: 1 1 max(0px, calc((100% - 700px) / 2));
  order: 0; /* lägg dem före selects */
}

/* Formfälten ligger på första raden mellan gutter-elementen */
#mimsafe-configurator > .mimsafe-select {
  order: 1;
  flex: 1 1 200px; /* radbryt snyggt inom 700px */
  max-width: none; /* ingen per-element maxbredd – styrs av 700px total */
}

/* Gör att produkterna hamnar på nästa rad och tar full bredd */
#mimsafe-configurator > #products {
  order: 2;
  flex: 1 1 100%;
  width: 100%;
}

/* Valfritt: få select-elementen att fylla sina kort snyggt */
.mimsafe-select select {
  width: 100%;
  max-width: none;
}

/* Container – låt barnen styra sina egna layouter */
#mimsafe-configurator {
  margin: 20px auto;
  text-align: center;
  display: block;
}

/* FORM: max 700px och centrerat, med wrap */
#mimsafe-configurator .mimsafe-form {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* Fältkorten får flexa inom 700px */
.mimsafe-form .mimsafe-select { 
  flex: 1 1 200px;
}

/* Selecten fyller sitt kort */
.mimsafe-form .mimsafe-select select {
  width: 100%;
  max-width: none; /* styrs av wrappern nu */
}

/* PRODUKTER: alltid full bredd och på egen rad */
#mimsafe-configurator #products {
  margin-top: 1.25rem;
  width: 100%;
	padding: 20px;
}