/* ==========================================================================
   MY10 MASTERS — WooCommerce Checkout/Cart Theme.
   Wird nur auf Kasse & Warenkorb geladen. Deckt klassische Kasse
   (Shortcode) und Block-Kasse ab. !important, um Theme/WooCommerce zu übersteuern.
   ========================================================================== */

:root{
  --my10-red:#e2392c; --my10-red-light:#f2483b; --my10-red-dark:#b71f15; --my10-red-tint:#fdeae8;
  --my10-line:#e6e8ea; --my10-ink:#141414; --my10-muted:#5a5f66;
}

/* -------------------------------- Brand-Leiste ------------------------- */
.my10-checkout-brand{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  max-width:1040px;margin:0 auto 26px;padding:14px 18px;background:#fff;
  border:1px solid var(--my10-line);border-radius:14px;box-shadow:0 8px 24px rgba(20,20,20,.06);
}
.my10-checkout-brand img{height:40px;width:auto;display:block;background:#141414;padding:9px 13px;border-radius:11px}
.my10-checkout-brand .mcb-sec{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--my10-muted)}
.my10-checkout-brand .mcb-sec b{color:var(--my10-ink)}

/* ---------------------------------- Buttons ---------------------------- */
.woocommerce #payment #place_order,
.woocommerce-checkout #place_order,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-components-button.contained,
.wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button{
  background-image:linear-gradient(180deg,var(--my10-red-light),var(--my10-red)) !important;
  background-color:var(--my10-red) !important;color:#fff !important;border:none !important;
  border-radius:10px !important;font-weight:800 !important;letter-spacing:-.01em !important;
  padding:14px 26px !important;box-shadow:0 6px 18px rgba(226,57,44,.34) !important;
  transition:filter .15s, box-shadow .2s !important;text-transform:none !important;
}
.woocommerce #payment #place_order:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button.contained:hover,
.wc-block-cart__submit-button:hover{
  filter:brightness(.96) !important;box-shadow:0 8px 26px rgba(226,57,44,.46) !important;
}

/* --------------------------- Eingabefelder (klassisch) ----------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout .form-row select,
.select2-container--default .select2-selection--single{
  border:1.5px solid var(--my10-line) !important;border-radius:10px !important;
  padding:12px 14px !important;min-height:46px;font-size:15px;color:var(--my10-ink) !important;
  transition:border-color .15s, box-shadow .15s !important;box-shadow:none !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus,
.select2-container--default.select2-container--focus .select2-selection--single{
  /* Neutraler Fokus-Ring (nicht rot) — rot suggeriert sonst einen Eingabefehler. */
  border-color:var(--my10-ink) !important;box-shadow:0 0 0 3px rgba(20,20,20,.10) !important;outline:none !important;
}
.select2-container--default .select2-selection--single{display:flex;align-items:center}

/* ----------------------------- Eingabefelder (Block) ------------------- */
.wc-block-components-text-input input[type=text],
.wc-block-components-text-input input[type=email],
.wc-block-components-text-input input[type=tel],
.wc-block-components-address-form input,
.wc-block-components-select select{
  border-radius:10px !important;
}
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus{
  box-shadow:0 0 0 2px var(--my10-ink) !important;
}
.wc-block-components-text-input.is-active label{color:var(--my10-ink) !important}
.wc-block-components-checkout-step.is-highlighted,
.wc-block-checkout__form .wc-block-components-checkout-step{--wc-block-components-checkout-step-highlight:var(--my10-red)}

/* --------------------------- Bestellübersicht / Karten ----------------- */
.woocommerce-checkout-review-order,
.woocommerce .cart-collaterals .cart_totals,
.wc-block-checkout__sidebar .wc-block-components-panel,
.wp-block-woocommerce-checkout-order-summary-block{
  background:#fff !important;border:1px solid var(--my10-line) !important;border-radius:16px !important;
  padding:20px !important;box-shadow:0 8px 24px rgba(20,20,20,.05) !important;
}
.woocommerce-checkout #payment{background:transparent !important}
.woocommerce-checkout #payment ul.payment_methods{
  border:1px solid var(--my10-line) !important;border-radius:12px !important;background:#fff !important;
}
.woocommerce-checkout #payment div.payment_box{background:#faf9f7 !important;border-radius:10px !important}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:#faf9f7 !important}

/* Beträge / Summe hervorheben */
.order-total .amount,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  color:var(--my10-red) !important;font-weight:800 !important;
}

/* Hinweise / Coupons / Links */
.woocommerce-info,.woocommerce-message,.woocommerce-error{border-top-color:var(--my10-red) !important}
.woocommerce-info::before,.woocommerce-message::before{color:var(--my10-red) !important}
.woocommerce-info a,.woocommerce a.showcoupon,.woocommerce-form-coupon-toggle a{color:var(--my10-red) !important}
.wc-block-components-button:not(.contained){color:var(--my10-red) !important}

/* Radiobuttons / Checkboxen im Markenrot */
.woocommerce-checkout input[type=radio],
.woocommerce-checkout input[type=checkbox],
.wc-block-checkout input[type=radio],
.wc-block-checkout input[type=checkbox]{accent-color:var(--my10-red)}

/* Überschriften etwas ruhiger */
.woocommerce-checkout h3,.woocommerce-billing-fields h3,.wc-block-components-title{
  letter-spacing:-.01em !important;
}

/* --------------------------- AGB-Pflichtakzeptanz --------------------- */
.my10-agb{margin:14px 0 6px;padding:14px 16px;background:#fff;border:1px solid var(--my10-line);border-radius:12px}
.my10-agb .form-row{margin:0 0 8px !important;padding:0 !important}
.my10-agb .form-row:last-child{margin-bottom:0 !important}
.my10-agb label.checkbox,
.my10-agb .woocommerce-form__label-for-checkbox{display:flex !important;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--my10-ink);cursor:pointer;margin:0}
.my10-agb input[type=checkbox]{margin-top:2px;accent-color:var(--my10-red);flex:none}
.my10-agb a{color:var(--my10-red) !important;font-weight:700;text-decoration:underline}
.my10-agb .required{color:var(--my10-red);font-weight:700}
/* Klickbare AGB-Links unter der Block-Checkbox */
.my10-agb-links{margin:2px 0 10px 26px;font-size:12.5px;color:var(--my10-muted)}
.my10-agb-links a{color:var(--my10-red) !important;font-weight:600;text-decoration:underline}

/* --------------------------- Zahlungsmethoden ------------------------- */
.woocommerce-checkout #payment ul.payment_methods{padding:4px !important}
.woocommerce-checkout #payment ul.payment_methods li{
  list-style:none !important;padding:13px 14px !important;margin:0 !important;
  border-bottom:1px solid var(--my10-line) !important;transition:background .12s;
}
.woocommerce-checkout #payment ul.payment_methods li:last-child{border-bottom:none !important}
.woocommerce-checkout #payment ul.payment_methods li label{font-weight:700 !important;color:var(--my10-ink) !important;cursor:pointer}
.woocommerce-checkout #payment ul.payment_methods li input[type=radio]:checked+label{color:var(--my10-red) !important}
.woocommerce-checkout #payment div.payment_box{margin:8px 0 2px !important;padding:14px 16px !important;font-size:13.5px !important;line-height:1.5;color:var(--my10-muted) !important}
.woocommerce-checkout #payment .wc-terms-and-conditions,
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper{margin-top:12px}

/* ------------------- Zahlungsseite (order-pay einer Bestellung) ------- */
.woocommerce-order-pay #order_review{
  background:#fff !important;border:1px solid var(--my10-line) !important;border-radius:16px !important;
  padding:22px !important;box-shadow:0 8px 24px rgba(20,20,20,.05) !important;max-width:560px;margin:0 auto !important;
}
.woocommerce-order-pay table.shop_table{border:none !important;margin:0 0 14px !important}
.woocommerce-order-pay table.shop_table td,
.woocommerce-order-pay table.shop_table th{border-top:1px solid var(--my10-line) !important;padding:12px 8px !important}
.woocommerce-order-pay table.shop_table tfoot .order-total .amount{font-size:20px !important}

/* ------------------------------- Mobile ------------------------------- */
@media(max-width:768px){
  /* klassische Kasse: zweispaltig → gestapelt */
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #order_review_heading{width:100% !important;float:none !important}
  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2{width:100% !important;float:none !important}
}
@media(max-width:600px){
  .my10-checkout-brand{margin-bottom:18px;padding:12px 14px;border-radius:12px}
  .my10-checkout-brand img{height:32px}
  .my10-checkout-brand .mcb-sec{font-size:12px}
  /* ≥16px verhindert das automatische Zoomen von iOS beim Fokus */
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce-checkout .form-row select,
  .wc-block-components-text-input input,
  .wc-block-components-address-form input,
  .wc-block-components-select select{font-size:16px !important}
  .woocommerce-checkout-review-order,
  .woocommerce .cart-collaterals .cart_totals,
  .wc-block-checkout__sidebar .wc-block-components-panel,
  .wp-block-woocommerce-checkout-order-summary-block,
  .woocommerce-order-pay #order_review{padding:16px !important;border-radius:14px !important}
  .woocommerce #payment #place_order,
  .woocommerce-checkout #place_order,
  .woocommerce a.button.alt,.woocommerce button.button.alt,
  .wc-block-cart__submit-button,
  .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button{width:100% !important;padding:15px 20px !important;font-size:16px !important}
  .woocommerce-checkout #payment ul.payment_methods li{padding:12px !important}
}

/* ------------------- Block-Checkout: Textdarstellung ------------------- */
/* Die zusätzlichen Felder (AGB-Zustimmung) rendert WooCommerce Blocks mit
   eigenen Klassen — die Regeln für die klassische Kasse (.my10-agb) greifen
   dort NICHT. Ohne diese Angaben steht der lange Zustimmungssatz auf schmalen
   Displays gedrängt und schlecht lesbar neben der Checkbox. */
.wc-block-components-checkbox__label{
  font-size:13.5px;line-height:1.5;color:var(--my10-ink);
  overflow-wrap:anywhere;hyphens:auto;
}
.wc-block-components-checkbox{align-items:flex-start}
.wc-block-components-checkbox .wc-block-components-checkbox__input{
  margin-top:2px;flex:none;accent-color:var(--my10-red);
}
/* Lange, umbruchlose Zeichenketten (E-Mail, Zugangscode, Bestellnummer)
   dürfen die Zusammenfassung nicht seitlich aus dem Bild schieben. */
.wc-block-components-order-summary-item__description,
.wc-block-components-product-name,
.wc-block-components-product-metadata,
.wc-block-components-totals-item__label,
.wc-block-components-address-card{overflow-wrap:anywhere}

@media(max-width:600px){
  .wc-block-components-checkbox__label{font-size:13px;line-height:1.45}
  /* Zusammenfassung: Bezeichnung und Betrag nicht ineinanderlaufen lassen */
  .wc-block-components-totals-item{gap:10px}
  .wc-block-components-totals-item__value{white-space:nowrap}
  .wc-block-components-order-summary-item__total-price{white-space:nowrap}
  /* Überschriften auf kleinen Displays etwas ruhiger setzen */
  .wc-block-components-title,
  .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title{
    font-size:17px !important;line-height:1.3 !important;
  }
  /* Produktname darf umbrechen statt abgeschnitten zu werden */
  .wc-block-components-product-name{display:block;white-space:normal}
}