/*
  WPressWartung – WooCommerce Custom Styles
  Abgestimmt auf Elementor Global Variables (Kit ID 4)
  Primär: #5424D6 | Trust-Grün: #62A93C | Navy: #10152B
  Fonts: Manrope (Headings) / Inter (Body)
*/

/* ─── CSS Custom Properties (aus Elementor Global Variables) ─── */
:root {
  --wpw-primary:        #5424D6;
  --wpw-primary-hover:  #4419BE;
  --wpw-primary-light:  #F3F0FE;
  --wpw-primary-soft:   #C9BCF7;
  --wpw-green:          #62A93C;
  --wpw-green-deep:     #4E8C2F;
  --wpw-green-light:    #EEF6E6;
  --wpw-navy:           #10152B;
  --wpw-navy-deep:      #0B0F1F;
  --wpw-body-text:      #4B5565;
  --wpw-muted:          #9AA1B1;
  --wpw-bg-alt:         #F7F8FC;
  --wpw-bg-soft:        #FAFAFC;
  --wpw-white:          #FFFFFF;
  --wpw-border:         #E5E7EF;
  --wpw-border-light:   #EEF0F6;
  --wpw-star-gold:      #F5A623;
  --wpw-radius-card:    12px;
  --wpw-radius-btn:     8px;
  --wpw-radius-input:   8px;
  --wpw-btn-h:          54px;
  --wpw-font-head:      'Manrope', sans-serif;
  --wpw-font-body:      'Inter', sans-serif;
}

/* ─── GLOBALE WOO-BASIS ─── */
.woocommerce,
.woocommerce-page {
  font-family: var(--wpw-font-body);
  color: var(--wpw-body-text);
}

/* ─── BUTTONS ─── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  font-family: var(--wpw-font-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  height: var(--wpw-btn-h);
  line-height: var(--wpw-btn-h);
  padding: 0 28px;
  border-radius: var(--wpw-radius-btn);
  background: var(--wpw-primary);
  color: var(--wpw-white);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  box-shadow: 0 2px 8px rgba(84,36,214,0.18);
  text-decoration: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--wpw-primary-hover);
  color: var(--wpw-white);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(84,36,214,0.28);
}

.woocommerce a.button:active,
.woocommerce button.button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(84,36,214,0.18);
}

/* Sekundär-Button (Ghost) */
.woocommerce a.button.secondary,
.woocommerce .return-to-shop a {
  background: transparent;
  color: var(--wpw-primary);
  border: 1.5px solid var(--wpw-primary);
  box-shadow: none;
}
.woocommerce a.button.secondary:hover,
.woocommerce .return-to-shop a:hover {
  background: var(--wpw-primary-light);
  color: var(--wpw-primary-hover);
}

/* ─── INPUTS & FORMULARE ─── */
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce-page input.input-text,
.woocommerce-page textarea,
.woocommerce-page select {
  font-family: var(--wpw-font-body);
  font-size: 15px;
  color: var(--wpw-navy);
  background: var(--wpw-white);
  border: 1.5px solid var(--wpw-border);
  border-radius: var(--wpw-radius-input);
  padding: 12px 16px;
  height: auto;
  min-height: 50px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.woocommerce input.input-text:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.woocommerce-page input.input-text:focus {
  border-color: var(--wpw-primary);
  box-shadow: 0 0 0 3px rgba(84,36,214,0.12);
}

.woocommerce label {
  font-family: var(--wpw-font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--wpw-navy);
  letter-spacing: 0.01em;
  margin-bottom: 6px;
  display: block;
}

/* Select2 */
.woocommerce .select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  height: 50px;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal;
  padding-left: 0;
  color: var(--wpw-navy);
  font-size: 15px;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 48px;
}

/* ─── CHECKOUT-SEITE ─── */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
  background: var(--wpw-white);
  border: 1.5px solid var(--wpw-border-light);
  border-radius: var(--wpw-radius-card);
  padding: 32px;
  margin-bottom: 24px;
}

.woocommerce h3#order_review_heading {
  font-family: var(--wpw-font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--wpw-navy);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--wpw-border-light);
}

/* Checkout – Spalten-Layout bei Desktop */
.woocommerce-checkout .col2-set {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 769px) {
  .woocommerce-checkout .col2-set {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Checkout – Sektions-Titel */
.woocommerce .woocommerce-billing-fields h3,
.woocommerce .woocommerce-shipping-fields h3,
.woocommerce .woocommerce-additional-fields h3 {
  font-family: var(--wpw-font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--wpw-navy);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--wpw-border-light);
}

/* Bestellübersicht-Tabelle */
.woocommerce-checkout-review-order table.shop_table {
  border: none;
  border-radius: var(--wpw-radius-card);
  overflow: hidden;
  font-size: 14px;
}

.woocommerce table.shop_table {
  border-collapse: collapse;
  width: 100%;
}

.woocommerce table.shop_table th {
  font-family: var(--wpw-font-head);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wpw-muted);
  background: var(--wpw-bg-alt);
  padding: 12px 16px;
  border: none;
}

.woocommerce table.shop_table td {
  padding: 14px 16px;
  border-top: 1px solid var(--wpw-border-light);
  color: var(--wpw-body-text);
  font-size: 14px;
  vertical-align: middle;
}

.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
  font-weight: 600;
  font-size: 14px;
}

.woocommerce table.shop_table tr.order-total td,
.woocommerce table.shop_table tr.order-total th {
  font-family: var(--wpw-font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--wpw-navy);
  border-top: 2px solid var(--wpw-border);
  padding-top: 18px;
}

/* Zahlungsmethoden */
#payment {
  background: var(--wpw-bg-alt) !important;
  border-radius: var(--wpw-radius-card) !important;
  border: 1.5px solid var(--wpw-border-light) !important;
  padding: 24px !important;
}

#payment ul.payment_methods {
  padding: 0;
  margin: 0 0 20px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#payment ul.payment_methods li {
  background: var(--wpw-white);
  border: 1.5px solid var(--wpw-border);
  border-radius: 10px;
  padding: 14px 18px;
  transition: border-color 0.15s ease;
  cursor: pointer;
}

#payment ul.payment_methods li:has(input:checked) {
  border-color: var(--wpw-primary);
  box-shadow: 0 0 0 3px rgba(84,36,214,0.10);
  background: var(--wpw-primary-light);
}

#payment ul.payment_methods label {
  font-size: 14px;
  font-weight: 600;
  color: var(--wpw-navy);
  cursor: pointer;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

#payment ul.payment_methods img {
  max-height: 24px;
  width: auto;
}

#payment .payment_box {
  background: transparent;
  border: none;
  padding: 10px 0 0 28px;
  font-size: 13px;
  color: var(--wpw-muted);
  line-height: 1.6;
}

/* Platzierbutton */
#payment #place_order {
  width: 100%;
  height: 58px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: var(--wpw-radius-btn);
  background: var(--wpw-primary);
  color: var(--wpw-white);
  box-shadow: 0 4px 16px rgba(84,36,214,0.25);
  transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}
#payment #place_order:hover {
  background: var(--wpw-primary-hover);
  box-shadow: 0 8px 24px rgba(84,36,214,0.32);
  transform: translateY(-1px);
}

/* Trust-Badges unter Place Order */
.woocommerce-checkout .wpw-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--wpw-muted);
  flex-wrap: wrap;
}
.woocommerce-checkout .wpw-trust-row span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ─── PRODUKTSEITE (Single Product) ─── */
.single-product div.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 769px) {
  .single-product div.product {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }
}

.woocommerce div.product .product_title {
  font-family: var(--wpw-font-head);
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 800;
  color: var(--wpw-navy);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--wpw-font-head);
  font-size: 32px;
  font-weight: 800;
  color: var(--wpw-primary);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  display: block;
}

.woocommerce div.product p.price .amount bdi,
.woocommerce div.product span.price .amount bdi {
  font-size: inherit;
}

/* Abo-Preis */
.woocommerce div.product .subscription-details {
  font-size: 14px;
  color: var(--wpw-muted);
  margin-top: -10px;
  margin-bottom: 18px;
}

.woocommerce div.product .product-short-description {
  font-size: 16px;
  line-height: 1.7;
  color: var(--wpw-body-text);
  margin-bottom: 24px;
}

/* Add-to-Cart Bereich */
.woocommerce div.product form.cart {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
  width: 100%;
  height: 58px;
  font-size: 16px;
  font-weight: 700;
}

/* Produkt-Meta (SKU, Kategorie) */
.woocommerce div.product .product_meta {
  font-size: 13px;
  color: var(--wpw-muted);
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--wpw-border-light);
}
.woocommerce div.product .product_meta a {
  color: var(--wpw-primary);
  text-decoration: none;
}

/* ─── SHOP-SEITE / PRODUKT-KARTEN ─── */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce ul.products li.product {
  background: var(--wpw-white);
  border: 1.5px solid var(--wpw-border-light);
  border-radius: var(--wpw-radius-card);
  padding: 28px;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.woocommerce ul.products li.product:hover {
  box-shadow: 0 8px 32px rgba(84,36,214,0.12);
  border-color: var(--wpw-primary-soft);
  transform: translateY(-2px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wpw-font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--wpw-navy);
  line-height: 1.3;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.woocommerce ul.products li.product .price {
  font-family: var(--wpw-font-head);
  font-size: 22px;
  font-weight: 800;
  color: var(--wpw-primary);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.woocommerce ul.products li.product a.button {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

/* Featured-Badge auf Produktkarte */
.woocommerce ul.products li.product.featured::before {
  content: 'Empfohlen';
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--wpw-primary);
  color: #fff;
  font-family: var(--wpw-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
}

/* ─── WARENKORB ─── */
.woocommerce table.cart td,
.woocommerce table.cart th {
  padding: 18px 16px;
  border-top: 1px solid var(--wpw-border-light);
  vertical-align: middle;
}

.woocommerce .cart_item td.product-name a {
  font-family: var(--wpw-font-head);
  font-weight: 600;
  color: var(--wpw-navy);
  font-size: 15px;
  text-decoration: none;
}
.woocommerce .cart_item td.product-name a:hover {
  color: var(--wpw-primary);
}

.woocommerce .cart-collaterals .cart_totals {
  background: var(--wpw-bg-alt);
  border: 1.5px solid var(--wpw-border-light);
  border-radius: var(--wpw-radius-card);
  padding: 28px;
}

.woocommerce .cart_totals h2 {
  font-family: var(--wpw-font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--wpw-navy);
  margin-bottom: 16px;
}

.woocommerce a.checkout-button {
  width: 100%;
  justify-content: center;
  height: 58px;
  font-size: 16px;
  font-weight: 700;
  margin-top: 16px;
}

/* ─── MEIN KONTO (My Account) ─── */
.woocommerce-MyAccount-navigation {
  background: var(--wpw-bg-alt);
  border: 1.5px solid var(--wpw-border-light);
  border-radius: var(--wpw-radius-card);
  padding: 8px;
  margin-bottom: 24px;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 10px 16px;
  border-radius: 8px;
  font-family: var(--wpw-font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--wpw-body-text);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--wpw-primary);
  color: var(--wpw-white);
}

/* ─── BENACHRICHTIGUNGEN ─── */
.woocommerce-message,
.woocommerce-info {
  background: var(--wpw-primary-light) !important;
  border-top-color: var(--wpw-primary) !important;
  color: var(--wpw-navy) !important;
  border-radius: 0 0 var(--wpw-radius-card) var(--wpw-radius-card) !important;
  font-family: var(--wpw-font-body);
  font-size: 14px;
}

.woocommerce-error {
  background: #FEF2F2 !important;
  border-top-color: #DC2626 !important;
  color: #991B1B !important;
  border-radius: 0 0 var(--wpw-radius-card) var(--wpw-radius-card) !important;
}

/* ─── SUBSCRIPTION-SPEZIFISCH ─── */
.woocommerce-subscriptions-product-details,
.subscription-details {
  background: var(--wpw-green-light);
  border: 1.5px solid var(--wpw-green);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--wpw-green-deep);
  font-weight: 500;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Abo-Status-Badges im Konto */
.woocommerce-subscriptions .subscription-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.woocommerce-subscriptions .subscription-status.active {
  background: var(--wpw-green-light);
  color: var(--wpw-green-deep);
}
.woocommerce-subscriptions .subscription-status.cancelled {
  background: #FEF2F2;
  color: #991B1B;
}
.woocommerce-subscriptions .subscription-status.on-hold {
  background: #FFFBEB;
  color: #92400E;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    padding: 20px;
  }

  #payment {
    padding: 16px !important;
  }

  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }

  .woocommerce div.product .product_title {
    font-size: 24px;
  }

  .woocommerce-MyAccount-navigation ul {
    flex-direction: column;
  }
}