/* =========================
   Simple Shop – CART styles
   (fix: Warenkorb schön + Formular funktioniert sicher)
   ========================= */

/* Warenkorb-Button */
#simple-shop-cart-icon{
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  background-color: #fff !important;
  color: #372d2b !important;
  border: 2px solid rgba(0,0,0,.18) !important;
  border-radius: 50px !important;
  padding: 10px 16px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  z-index: 9999 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
#simple-shop-cart-icon:hover{
  background-color: #f3f3f3 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.14) !important;
}
#simple-shop-cart-count{
  font-weight: 900 !important;
  font-size: 0.9rem !important;
}

/* =========================
   Wrapper / Layout
   ========================= */
.shopping-cart-wrapper{
  width: min(92%, 1100px) !important;
  margin: 40px auto !important;
  padding: 18px 14px !important;
  background: transparent !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}

/* Falls du irgendwo ein h2 "Warenkorb" ausgibst */
.shopping-cart-wrapper h2{
  font-size: 2rem !important;
  margin-bottom: 24px !important;
  color: #372d2b !important;
  text-align: center !important;
}

/* Produktliste */
.cart-products{
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

/* =========================
   Produktkarte (Grid statt Flex → kein Riesenspace)
   ========================= */
.cart-product-card{
  display: grid !important;
  grid-template-columns: 110px 1fr auto 40px !important; /* Bild | Text | +/- | Trash */
  gap: 16px !important;
  align-items: center !important;

  padding: 18px 18px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.06) !important;
  transition: box-shadow .25s ease, transform .25s ease !important;
  box-sizing: border-box !important;
}
.cart-product-card:hover{
  box-shadow: 0 14px 34px rgba(0,0,0,.10) !important;
  transform: translateY(-1px) !important;
}

/* Bildslot fix → egal wie groß Originalbilder sind */
.cart-product-image{
  width: 110px !important;
  height: 150px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  background: rgba(0,0,0,.02) !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}

/* Produktinfo */
.cart-product-info{
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.cart-product-info h3{
  margin: 0 !important;
  font-size: 1.12rem !important;
  line-height: 1.2 !important;
  color: #372d2b !important;
  font-weight: 900 !important;
}
.cart-product-info p{
  margin: 0 !important;
  font-size: 0.92rem !important;
  color: #333 !important;
  line-height: 1.35 !important;
}

/* Preiszeile aus PHP hat inline-flex – wir machen es hübscher */
.cart-product-info .price-row{
  gap: 12px !important;
}
.cart-product-info .price{
  color: #372d2b !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* Nährwert Link */
.cart-nutrition-link{
  color: #372d2b !important;
  font-weight: 900 !important;
  text-decoration: underline !important;
}
.cart-nutrition-link:hover{
  color: #57433f !important;
}

/* Menge ändern */
.cart-quantity-controls-horizontal{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  justify-self: end !important;
}
.cart-quantity-controls-horizontal button{
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  border-radius: 10px !important;
  background-color: #372d2b !important;
  color: #fff !important;
  font-size: 18px !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: opacity .2s ease, transform .2s ease !important;
}
.cart-quantity-controls-horizontal button:hover{
  opacity: .92 !important;
  transform: translateY(-1px) !important;
}
.quantity-input{
  width: 40px !important;
  height: 32px !important;
  text-align: center !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-weight: 900 !important;
  font-size: 0.95rem !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Trash */
.delete-product-button{
  justify-self: end !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  background: rgba(255,255,255,.9) !important;
  color: #372d2b !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.delete-product-button:hover{
  background: rgba(55,45,43,.06) !important;
}

/* =========================
   Summary (Versand & Summe)
   ========================= */
.cart-summary{
  margin-top: 24px !important;
  padding: 18px 18px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.75) !important;
  text-align: right !important;
  color: #372d2b !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.05) !important;
  box-sizing: border-box !important;
  font-weight: 600 !important;
}
.cart-summary p{
  margin: 0 0 10px !important;
  font-size: .95rem !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}
.cart-summary strong{ font-weight: 900 !important; }

/* Buttons (Basis) */
.empty-cart-button,
.simple-shop-submit-btn{
  margin-top: 10px !important;
  padding: 12px 18px !important;
  background: #372d2b !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  transition: opacity .2s ease, transform .2s ease !important;
}
.empty-cart-button:hover,
.simple-shop-submit-btn:hover{
  opacity: .92 !important;
  transform: translateY(-1px) !important;
}

/* =========================
   Checkout Formular (WICHTIG)
   fix: form wird in p/label ausgegeben → wir stylen genau diese Struktur
   ========================= */
.cart-checkout-form{
  width: min(92%, 900px) !important;
  margin: 34px auto 0 !important;
  padding: 22px 20px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.08) !important;
  box-sizing: border-box !important;
}
.cart-checkout-form h3{
  margin: 0 0 16px !important;
  text-align: center !important;
  color: #372d2b !important;
  font-weight: 950 !important;
  letter-spacing: .2px !important;
}

/* Form als Grid */
.cart-checkout-form .simple-shop-form{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px 16px !important;
  margin: 0 !important;
}

/* Du hast jedes Feld als <p><label>...<br><input>...</label></p> */
.cart-checkout-form .simple-shop-form p{
  margin: 0 !important;
}
.cart-checkout-form .simple-shop-form label{
  display: block !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  color: #372d2b !important;
}
.cart-checkout-form .simple-shop-form label br{
  display: none !important; /* verhindert komische Abstände durch <br> */
}

/* Inputs */
.cart-checkout-form input[type="text"],
.cart-checkout-form input[type="email"],
.cart-checkout-form textarea{
  display: block !important;
  width: 100% !important;
  margin-top: 8px !important;
  padding: 12px 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.16) !important;
  background: #fff !important;
  outline: none !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}
.cart-checkout-form textarea{
  min-height: 92px !important;
  resize: vertical !important;
}

/* Full-width Felder: Email + Adresse + Submit */
.cart-checkout-form input[name="customer_email"],
.cart-checkout-form textarea[name="customer_address"],
.cart-checkout-form p:has(.simple-shop-submit-btn){
  grid-column: 1 / -1 !important;
}

/* Falls :has() im Browser nicht greift → zusätzliche sichere Regel */
.cart-checkout-form .simple-shop-submit-btn{
  grid-column: 1 / -1 !important;
  width: 100% !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  margin-top: 6px !important;
}

/* =========================
   Empty cart + Success
   ========================= */
.empty-cart-box{
  text-align: center !important;
  padding: 40px 20px !important;
  margin: 20px 0 !important;
  border: 2px dashed rgba(0,0,0,.18) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.65) !important;
  color: #555 !important;
}
.empty-cart-box h3{
  margin: 0 0 10px !important;
  font-size: 1.4rem !important;
  color: #333 !important;
}
.empty-cart-box p{
  margin: 0 !important;
  font-size: 1rem !important;
  color: #777 !important;
}
.order-success-banner{
  display:none;
  padding: 12px 16px;
  margin: 16px 0;
  border: 1px solid #198754;
  background: #d1e7dd;
  color: #0f5132;
  border-radius: 10px;
  font-weight: 700;
}

/* =========================
   Mobile
   ========================= */
@media (max-width: 900px){
  .cart-product-card{
    grid-template-columns: 90px 1fr auto 40px !important;
  }
  .cart-product-image{
    width: 90px !important;
    height: 130px !important;
  }
}

@media (max-width: 768px){
  .shopping-cart-wrapper{
    width: 92% !important;
    padding: 16px 10px !important;
  }

  .cart-product-card{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    text-align: center !important;
  }

  .cart-product-image{
    width: 140px !important;
    height: 190px !important;
    margin: 0 auto !important;
  }

  .cart-quantity-controls-horizontal{
    justify-self: center !important;
  }

  .delete-product-button{
    justify-self: center !important;
  }

  .cart-summary{
    text-align: center !important;
  }

  .empty-cart-button{
    width: 100% !important;
  }

  .cart-checkout-form .simple-shop-form{
    grid-template-columns: 1fr !important;
  }
}