/**
 * WooCommerce Custom Checkout - Cart Isolated Styles
 * 
 * WICHTIG: Hohe Spezifität mit html body #wcc-cart-wrapper
 * Nur essenzielle Styles für den Warenkorb
 */

/* ========================================
   0. WOOCOMMERCE NOTICES
   ======================================== */

/* WooCommerce Notices Styling */
.woocommerce-notices-wrapper {
    margin-bottom: 20px;
}

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    padding: 15px 20px !important;
    margin: 0 0 20px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    list-style: none !important;
    position: relative !important;
    background-color: #f7f7f7 !important;
    border-left: 4px solid #0071a1 !important;
}

.woocommerce-error {
    background-color: #fef5f5 !important;
    border-left-color: #d32f2f !important;
    color: #721c24 !important;
}

.woocommerce-info {
    background-color: #f0f8ff !important;
    border-left-color: #0071a1 !important;
    color: #004085 !important;
}

.woocommerce-message {
    background-color: #f0fff0 !important;
    border-left-color: #4caf50 !important;
    color: #155724 !important;
}

/* Notice Icons */
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 10px;
    font-size: 16px;
}

.woocommerce-error::before {
    content: "\f057"; /* times-circle */
}

.woocommerce-info::before {
    content: "\f05a"; /* info-circle */
}

.woocommerce-message::before {
    content: "\f058"; /* check-circle */
}

/* ========================================
   1. WRAPPER & CONTAINER
   ======================================== */

/* Verstecke WooCommerce Standard Cart Header und leere Warenkorb Nachricht */
.woocommerce-cart .woocommerce-cart-form > h2,
.woocommerce-cart h1.page-title,
.woocommerce-cart .ppcp-messages,
.woocommerce-cart > .woocommerce > .cart-empty,
.woocommerce-cart > .woocommerce > p.cart-empty,
.woocommerce-cart .woocommerce > .return-to-shop {
    display: none !important;
}

/* Wichtig: Notices NICHT verstecken - diese Zeilen wurden entfernt:
   .woocommerce-cart .woocommerce-info,
   .woocommerce-cart .woocommerce-notices-wrapper,
*/

/* WICHTIG: Deaktiviere das alte Expand-System komplett */
html body #wcc-cart-wrapper .wcc-expand-bar {
    display: none !important;
}

html body #wcc-cart-wrapper .wcc-cart-items-wrapper {
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
}

/* Entferne has-many-items Klasse Effekte */
html body #wcc-cart-wrapper .wcc-cart-items.has-many-items {
    overflow: visible !important;
}

/* Basis Container - Boxed Layout */
html body #wcc-cart-wrapper {
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Grid layout NUR wenn Cart nicht leer ist */
html body #wcc-cart-wrapper .wcc-checkout-container {
    display: grid !important;
    grid-template-columns: 1fr 450px !important; /* Rechte Spalte breiter für einzeiligen Text */
    gap: 40px !important;
    max-width: 100%;
    margin: 20px 0;
    padding: 0;
}

/* Sicherstellen dass die Grid-Kinder sich richtig verhalten */
html body #wcc-cart-wrapper .wcc-checkout-form-section,
html body #wcc-cart-wrapper .wcc-order-summary-section {
    display: block !important;
    width: 100% !important;
}

/* WICHTIG: Wenn kein wcc-cart-wrapper vorhanden (leerer Warenkorb), dann kein Grid */
.woocommerce-cart:not(.has-cart-items) .wcc-checkout-container {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Override grid for empty cart - target the main woocommerce div directly */
.woocommerce-cart:not(.has-cart-items) .woocommerce {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* When cart is empty, override ALL container styles */
.woocommerce-cart .woocommerce > .cart-empty {
    display: block !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Hide the grid wrapper when cart is empty */
.woocommerce-cart #wcc-cart-wrapper:empty,
.woocommerce-cart #wcc-cart-wrapper:not(:has(.wcc-checkout-form-section)) {
    display: none !important;
}

/* ========================================
   2. LINKE SPALTE - BESTELLÜBERSICHT
   ======================================== */

html body #wcc-cart-wrapper .wcc-checkout-form-section {
    /* Keine Box, kein Schatten, keine Umrandung */
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* Summary Header - nur Titel */
html body #wcc-cart-wrapper .wcc-summary-header {
    margin-bottom: 24px;
}

html body #wcc-cart-wrapper .wcc-summary-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    color: #1a1a1a;
}

/* Toggle Container unter den Produkten */
html body #wcc-cart-wrapper .wcc-cart-toggle-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    position: relative;
    z-index: 20; /* Über dem Gradient */
    background: #fff; /* Weißer Hintergrund damit es nicht transparent ist */
}

html body #wcc-cart-wrapper .wcc-cart-toggle-left {
    font-size: 14px;
    color: #666;
}

html body #wcc-cart-wrapper .wcc-cart-toggle-right {
    display: flex;
    align-items: center;
}

html body #wcc-cart-wrapper .wcc-show-all-link {
    background: none;
    border: none;
    color: #0071a1;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    padding: 0;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

html body #wcc-cart-wrapper .wcc-show-all-link:hover {
    color: #005a87;
}

html body #wcc-cart-wrapper .wcc-show-all-link .toggle-arrow {
    transition: transform 0.3s ease;
}

html body #wcc-cart-wrapper .wcc-show-all-link.expanded .toggle-arrow {
    transform: rotate(90deg);
}

/* ========================================
   3. CART ITEMS
   ======================================== */

html body #wcc-cart-wrapper .wcc-cart-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

/* Collapsed State - Container mit korrekter Höhe */
html body #wcc-cart-wrapper .wcc-cart-items.collapsed {
    max-height: 495px; /* Exakt 3.5 Produkte: (100px Bild + 30px padding + 1px border) * 3.5 + 3 * 16px gaps = 495px */
    overflow: hidden;
    position: relative;
}

/* Gradient Overlay NUR wenn wirklich mehr als 3.5 Produkte sichtbar wären */
html body #wcc-cart-wrapper .wcc-cart-items.collapsed.show-gradient .wcc-cart-items-wrapper::after,
html body #wcc-cart-wrapper .wcc-cart-items.collapsed.show-gradient:not(.has-many-items)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.7) 40%, 
        rgba(255,255,255,0.95) 70%, 
        rgba(255,255,255,1) 100%);
    pointer-events: none;
    z-index: 10;
}

/* WICHTIG: Wrapper muss korrekt positioniert sein */
html body #wcc-cart-wrapper .wcc-cart-items.collapsed .wcc-cart-items-wrapper {
    max-height: 495px !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Entferne Gradient vom Hauptcontainer wenn Wrapper vorhanden */
html body #wcc-cart-wrapper .wcc-cart-items.collapsed.has-many-items::after {
    display: none;
}

/* Smooth transition beim Toggle */
html body #wcc-cart-wrapper .wcc-cart-items {
    transition: max-height 0.3s ease;
}

html body #wcc-cart-wrapper .wcc-cart-items:not(.collapsed) {
    max-height: none; /* Keine Begrenzung - zeigt alle Produkte */
}

html body #wcc-cart-wrapper .wcc-cart-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 15px;
    background: transparent; /* Kein Hintergrund */
    border-radius: 0;
    position: relative;
    border-bottom: 1px solid #e0e0e0;
}

html body #wcc-cart-wrapper .wcc-cart-item:last-child {
    border-bottom: none;
}

/* Remove Button - Im Produktbild positioniert */
html body #wcc-cart-wrapper .wcc-item-image {
    position: relative; /* Für absolute Positionierung des X-Buttons */
}

html body #wcc-cart-wrapper .wcc-remove-item {
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ddd;
    border-radius: 50%;
    cursor: pointer;
    color: #ff0000;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.2s;
    z-index: 100; /* Erhöht von 10 auf 100 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

html body #wcc-cart-wrapper .wcc-remove-item:hover {
    background: #ff0000;
    color: #fff;
    border-color: #000;
    transform: scale(1.1);
}

/* Font Awesome X anpassen */
html body #wcc-cart-wrapper .wcc-remove-item .fa-times {
    font-size: 12px;
}

/* Product Image */
html body #wcc-cart-wrapper .wcc-item-image {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    overflow: visible; /* X-Button darf überstehen */
}

html body #wcc-cart-wrapper .wcc-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: block;
}

/* Product Details */
html body #wcc-cart-wrapper .wcc-item-details {
    flex: 1;
    min-width: 0;
}

html body #wcc-cart-wrapper .wcc-item-name {
    font-size: 16px;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 4px;
    line-height: 1.4;
}

html body #wcc-cart-wrapper .wcc-item-meta {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

html body #wcc-cart-wrapper .wcc-item-meta dl {
    margin: 0;
}

html body #wcc-cart-wrapper .wcc-item-meta dt,
html body #wcc-cart-wrapper .wcc-item-meta dd {
    display: inline;
    margin: 0;
}

/* Right Column - Price & Quantity */
html body #wcc-cart-wrapper .wcc-item-right-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

html body #wcc-cart-wrapper .wcc-item-price {
    text-align: right;
}

html body #wcc-cart-wrapper .wcc-price-amount {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

html body #wcc-cart-wrapper .wcc-price-tax-info {
    font-size: 12px;
    color: #999;
}

/* Quantity Controls */
html body #wcc-cart-wrapper .wcc-item-quantity {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border-radius: 4px;
    padding: 0;
}

html body #wcc-cart-wrapper .wcc-qty-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    background: #f7f7f7;
    color: #333;
    font-size: 18px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

html body #wcc-cart-wrapper .wcc-qty-btn:hover {
    background: #e0e0e0;
    border-color: #999;
}

html body #wcc-cart-wrapper .wcc-qty-display {
    min-width: 40px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}

/* ========================================
   4. LEERER WARENKORB
   ======================================== */

html body #wcc-cart-wrapper .wcc-empty-cart {
    text-align: center;
    padding: 60px 20px;
}

html body #wcc-cart-wrapper .wcc-empty-cart-icon {
    margin-bottom: 24px;
}

html body #wcc-cart-wrapper .wcc-empty-cart-title {
    font-size: 28px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 12px;
}

html body #wcc-cart-wrapper .wcc-empty-cart-text {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 32px;
}

html body #wcc-cart-wrapper .wcc-continue-shopping-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    background: #0071a1;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    transition: background 0.2s;
}

html body #wcc-cart-wrapper .wcc-continue-shopping-btn:hover {
    background: #005a87;
    color: #fff;
}

/* Popular Categories */
html body #wcc-cart-wrapper .wcc-popular-categories {
    margin-top: 60px;
}

html body #wcc-cart-wrapper .wcc-popular-categories h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px;
    color: #1a1a1a;
}

html body #wcc-cart-wrapper .wcc-category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

html body #wcc-cart-wrapper .wcc-category-pill {
    padding: 8px 20px;
    background: #f0f0f0;
    color: #333;
    text-decoration: none;
    border-radius: 20px;
    font-size: 14px;
    transition: all 0.2s;
}

html body #wcc-cart-wrapper .wcc-category-pill:hover {
    background: #0071a1;
    color: #fff;
}

/* ========================================
   5. RECHTE SPALTE - ORDER SUMMARY
   ======================================== */

html body #wcc-cart-wrapper .wcc-order-summary-section {
    position: relative;
}

html body #wcc-cart-wrapper .wcc-order-summary-sticky {
    position: sticky;
    top: 20px;
}

html body #wcc-cart-wrapper .wcc-order-summary-wrapper {
    /* Keine Box, kein Schatten */
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* ========================================
   6. FREE SHIPPING SECTION
   ======================================== */

html body #wcc-cart-wrapper .wcc-free-shipping-section {
    margin-bottom: 24px;
}

html body #wcc-cart-wrapper .wcc-free-shipping-progress,
html body #wcc-cart-wrapper .wcc-free-shipping-achieved {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f0f8ff;
    border-radius: 8px;
}

html body #wcc-cart-wrapper .wcc-free-shipping-achieved {
    background: #f0fff0;
}

html body #wcc-cart-wrapper .wcc-shipping-icon {
    font-size: 24px;
    flex-shrink: 0;
}

html body #wcc-cart-wrapper .wcc-shipping-content {
    flex: 1;
}

html body #wcc-cart-wrapper .wcc-progress-text {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

html body #wcc-cart-wrapper .wcc-progress-bar {
    width: 100%;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

html body #wcc-cart-wrapper .wcc-progress-fill {
    height: 100%;
    background: #4caf50;
    transition: width 0.3s ease;
}

/* ========================================
   7. ORDER TOTALS - WIE IM SCREENSHOT
   ======================================== */

html body #wcc-cart-wrapper .wcc-order-totals {
    margin-top: 24px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
}

html body #wcc-cart-wrapper .wcc-order-totals table {
    width: 100%;
    border-collapse: collapse;
}

html body #wcc-cart-wrapper .wcc-order-totals tr {
    border: none;
}

html body #wcc-cart-wrapper .wcc-order-totals th,
html body #wcc-cart-wrapper .wcc-order-totals td {
    padding: 10px 0;
    text-align: left;
    vertical-align: top;
    border: none;
}

html body #wcc-cart-wrapper .wcc-order-totals th {
    font-weight: 400;
    color: #000;
    font-size: 15px;
    width: 50%;
}

html body #wcc-cart-wrapper .wcc-order-totals td {
    text-align: right;
    font-weight: 500;
    color: #000;
    font-size: 15px;
    width: 50%;
}

/* Zwischensumme */
html body #wcc-cart-wrapper .wcc-order-totals .cart-subtotal th,
html body #wcc-cart-wrapper .wcc-order-totals .cart-subtotal td {
    font-size: 14px;
    padding-bottom: 12px;
}

/* Versand */
html body #wcc-cart-wrapper .wcc-order-totals .woocommerce-shipping-totals th,
html body #wcc-cart-wrapper .wcc-order-totals .woocommerce-shipping-totals td {
    font-size: 14px;
    padding-bottom: 16px;
}

/* Gesamt - mit Trennlinie */
html body #wcc-cart-wrapper .wcc-order-totals .order-total {
    border-top: 1px solid #e0e0e0;
}

html body #wcc-cart-wrapper .wcc-order-totals .order-total th,
html body #wcc-cart-wrapper .wcc-order-totals .order-total td {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    padding-top: 20px;
    padding-bottom: 0;
}

/* Strong tag in Gesamt entfernen */
html body #wcc-cart-wrapper .wcc-order-totals .order-total td strong {
    font-weight: inherit;
}

/* MwSt Info - kleiner und unter dem Betrag */
html body #wcc-cart-wrapper .wcc-order-totals .includes_tax,
html body #wcc-cart-wrapper .wcc-order-totals small {
    display: block;
    font-size: 12px;
    color: #666;
    font-weight: 400;
    margin-top: 4px;
    text-align: right;
}

/* Gutschein-Zeilen */
html body #wcc-cart-wrapper .wcc-order-totals .cart-discount th,
html body #wcc-cart-wrapper .wcc-order-totals .cart-discount td {
    color: #333;
    font-size: 14px;
    padding-bottom: 8px;
    padding-top: 8px;
}

html body #wcc-cart-wrapper .wcc-order-totals .cart-discount td {
    color: #d32f2f;
    font-weight: 500;
}

/* Gutschein entfernen Button (Span) */
html body #wcc-cart-wrapper .wcc-remove-coupon {
    display: inline-block;
    cursor: pointer;
    transition: transform 0.2s;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

html body #wcc-cart-wrapper .wcc-remove-coupon:hover {
    transform: scale(1.2);
}

/* Legacy Unterstützung für Links */
html body #wcc-cart-wrapper .woocommerce-remove-coupon {
    text-decoration: none !important;
    display: inline-block;
    transition: transform 0.2s;
    border: none !important;
    outline: none !important;
}

html body #wcc-cart-wrapper .woocommerce-remove-coupon:hover {
    transform: scale(1.2);
    text-decoration: none !important;
}

/* Entferne Unterstrich auch bei Focus */
html body #wcc-cart-wrapper .woocommerce-remove-coupon:focus,
html body #wcc-cart-wrapper .woocommerce-remove-coupon:active {
    text-decoration: none !important;
    outline: none !important;
}


/* ========================================
   8. COUPON SECTION - BESSER GESTYLT
   ======================================== */

html body #wcc-cart-wrapper .wcc-coupon-section {
    margin-top: 24px;
    margin-bottom: 24px; /* Abstand zum Button */
    padding: 16px;
    background: #f9f9f9;
    border-radius: 8px;
}

html body #wcc-cart-wrapper .wcc-coupon-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
    user-select: none; /* Verhindert Text-Selektion beim Klicken */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

html body #wcc-cart-wrapper .wcc-coupon-toggle:hover {
    color: #0071a1;
}

html body #wcc-cart-wrapper .wcc-coupon-icon {
    font-size: 16px;
}

html body #wcc-cart-wrapper .wcc-coupon-arrow {
    margin-left: auto;
    transition: transform 0.2s;
    font-size: 12px;
}

html body #wcc-cart-wrapper .wcc-coupon-form.active .wcc-coupon-arrow {
    transform: rotate(180deg);
}

html body #wcc-cart-wrapper .wcc-coupon-form {
    margin-top: 12px;
}

html body #wcc-cart-wrapper .wcc-coupon-input-group {
    display: flex;
    gap: 8px;
}

html body #wcc-cart-wrapper .wcc-coupon-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
}

html body #wcc-cart-wrapper .wcc-coupon-apply-btn {
    padding: 10px 20px;
    background: #666;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

html body #wcc-cart-wrapper .wcc-coupon-apply-btn:hover {
    background: #333;
}

/* Coupon Messages */
html body #wcc-cart-wrapper .wcc-coupon-message {
    margin-top: 10px;
    font-size: 13px;
    padding: 10px;
    border-radius: 4px;
}

html body #wcc-cart-wrapper .wcc-coupon-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

html body #wcc-cart-wrapper .wcc-coupon-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ========================================
   9. ACTION BUTTONS
   ======================================== */

html body #wcc-cart-wrapper .wcc-checkout-button-wrapper {
    margin-top: 24px;
}

html body #wcc-cart-wrapper .wcc-place-order-btn {
    width: 100%;
    padding: 12px 20px; /* Reduzierte Höhe */
    background: var(--wcc-primary-color, #0071a1); /* Primärfarbe aus Plugin */
    color: #fff !important;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    display: block;
    text-align: center;
    text-decoration: none;
    line-height: 1.4;
    box-sizing: border-box;
}

html body #wcc-cart-wrapper .wcc-place-order-btn:hover {
    background: var(--wcc-primary-hover, #005a87);
}

html body #wcc-cart-wrapper .wcc-place-order-btn svg {
    width: 20px;
    height: 20px;
}

/* Express Checkout */
html body #wcc-cart-wrapper .wcc-express-divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

html body #wcc-cart-wrapper .wcc-express-divider span {
    background: #fff;
    padding: 0 12px;
    color: #999;
    font-size: 14px;
    position: relative;
    z-index: 1;
}

html body #wcc-cart-wrapper .wcc-express-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0e0e0;
}

/* Express Buttons einheitliche Größe */
html body #wcc-cart-wrapper .wcc-express-checkout-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Google Pay Button Fix */
html body #wcc-cart-wrapper .gpay-button,
html body #wcc-cart-wrapper .googlepay-button-container,
html body #wcc-cart-wrapper .wc-payment-method-googlepay {
    width: 100% !important;
    max-width: 100% !important;
}

html body #wcc-cart-wrapper .gpay-button button {
    width: 100% !important;
    min-height: 48px !important;
}

/* PayPal Button */
html body #wcc-cart-wrapper .paypal-buttons,
html body #wcc-cart-wrapper #paypal-button-container {
    width: 100% !important;
    min-height: 48px !important;
}

/* WooCommerce Payments Express Buttons */
html body #wcc-cart-wrapper .wcpay-express-checkout-element {
    width: 100% !important;
}

html body #wcc-cart-wrapper .wcpay-express-checkout-element iframe {
    width: 100% !important;
    min-height: 48px !important;
}

/* ========================================
   10. CART EMPTY STYLES
   ======================================== */

/* Cart Empty Container - Full Width Boxed Layout */
.woocommerce-cart .wcc-empty-cart-container {
    width: 100% !important;
    max-width: 600px !important;
    margin: 60px auto !important;
    padding: 40px 20px !important;
    text-align: center !important;
}

/* Force full width on parent containers */
.woocommerce-cart.woocommerce-page .site-content,
.woocommerce-cart.woocommerce-page .content-area,
.woocommerce-cart.woocommerce-page .elementor-section-boxed > .elementor-container,
.woocommerce-cart.woocommerce-page .elementor-widget-container,
.woocommerce-cart.woocommerce-page article.page {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Inner container for cart empty */
.woocommerce-cart.woocommerce-page .woocommerce .cart-empty-wrapper {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

.woocommerce-cart .cart-empty {
    text-align: center !important;
    padding: 80px 40px !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.woocommerce-cart .cart-empty::before {
    content: "🛒" !important;
    display: block !important;
    font-size: 64px !important;
    margin-bottom: 20px !important;
    opacity: 0.3 !important;
}

.woocommerce-cart .cart-empty {
    font-size: 18px !important;
    color: #666 !important;
    line-height: 1.6 !important;
}

.woocommerce-cart .return-to-shop {
    margin-top: 40px !important;
}

.woocommerce-cart .return-to-shop .button,
.woocommerce-cart .wcc-empty-cart-buttons .button {
    background: var(--wcc-primary-color, #007cba) !important;
    color: white !important;
    padding: 16px 40px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
    margin: 0 auto !important;
}

.woocommerce-cart .return-to-shop .button:hover,
.woocommerce-cart .wcc-empty-cart-buttons .button:hover {
    background: var(--wcc-primary-hover, #005a87) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Button SVG Styling */
.woocommerce-cart .wcc-empty-cart-buttons .button svg,
.woocommerce-cart .return-to-shop .button svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

.woocommerce-cart .wcc-empty-cart-buttons,
.woocommerce-cart .return-to-shop {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Beliebte Kategorien Section */
.woocommerce-cart.woocommerce-page .popular-categories {
    margin-top: 60px !important;
    text-align: center !important;
    width: 100% !important;
}

.woocommerce-cart.woocommerce-page .popular-categories h3 {
    font-size: 24px !important;
    margin-bottom: 30px !important;
    color: #333 !important;
    font-weight: 600 !important;
}

.woocommerce-cart.woocommerce-page .category-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 20px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.woocommerce-cart.woocommerce-page .category-item {
    background: #f8f9fa !important;
    padding: 20px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    display: block !important;
}

.woocommerce-cart.woocommerce-page .category-item:hover {
    background: #e9ecef !important;
    transform: translateY(-2px) !important;
}

/* ========================================
   11. RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    html body #wcc-cart-wrapper .wcc-checkout-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    html body #wcc-cart-wrapper .wcc-order-summary-sticky {
        position: static;
    }
}

/* ============================================
   MOBILE RESPONSIVE STYLES - SIDECART STYLE
   ============================================ */

@media (max-width: 768px) {
    /* Tablet - Grid entfernen ERST AB 768px */
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-checkout-container {
        display: block !important;
        grid-template-columns: unset !important;
        gap: 0 !important;
    }
    
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-checkout-form-section,
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-order-summary-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* Tablet Landscape - NOCH NEBENEINANDER */
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-checkout-container {
        display: grid !important;
        grid-template-columns: 1.2fr 1fr !important;
        gap: 20px !important;
    }
    
    /* Kleinere Abstände für Tablets */
    html body.woocommerce-cart #wcc-cart-wrapper {
        padding: 30px 20px !important;
    }
}

@media (max-width: 768px) {
    /* Mobile - Kompaktes Sidecart-Layout */
    html body.woocommerce-cart #wcc-cart-wrapper {
        padding: 20px 15px !important;
    }
    
    /* PayPal Express Buttons 100% Breite auf Mobile */
    html body.woocommerce-cart #ppc-button,
    html body.woocommerce-cart .ppcp-button,
    html body.woocommerce-cart .ppc-button-wrapper,
    html body.woocommerce-cart #ppcp-messages,
    html body.woocommerce-cart .paypal-buttons,
    html body.woocommerce-cart #paypal-button-container,
    html body.woocommerce-cart .paypal-button,
    html body.woocommerce-cart .paypal-button-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
    
    /* PayPal Button Container und alle inneren Divs */
    html body.woocommerce-cart #ppc-button .paypal-buttons,
    html body.woocommerce-cart #ppc-button .paypal-button,
    html body.woocommerce-cart #ppc-button > div,
    html body.woocommerce-cart #ppc-button div[style],
    html body.woocommerce-cart .ppcp-button-container,
    html body.woocommerce-cart .ppcp-button-container > div {
        width: 100% !important;
        min-width: 100% !important;
    }
    
    /* Überschreibe inline styles */
    html body.woocommerce-cart #ppc-button[style],
    html body.woocommerce-cart .paypal-buttons[style] {
        width: 100% !important;
    }
    
    /* Order Summary Wrapper - kein Padding auf Mobile */
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-order-summary-wrapper {
        padding: 0px !important;
    }
    
    /* Cart Items wie Sidecart */
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item {
        display: flex !important;
        flex-direction: row !important; /* WICHTIG: Horizontal, nicht vertikal! */
        align-items: center !important;
        gap: 10px !important;
        padding: 10px 0 10px 5px !important; /* Weniger padding nötig da X bei left: 5px */
        border-bottom: 1px solid #f0f0f0 !important;
        text-align: left !important;
        margin-bottom: 0 !important;
    }
    
    /* Produktbild - Klein links */
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item .wcc-item-image {
        width: 50px !important;
        height: 50px !important;
        flex-shrink: 0 !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        order: 1 !important;
        overflow: visible !important; /* Wichtig damit X-Button nicht abgeschnitten wird */
    }
    
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item .wcc-item-image img {
        width: 50px !important;
        height: 50px !important;
        object-fit: cover !important;
        border-radius: 4px !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Remove Button - Roter Kreis oben links DIREKT auf Bildecke */
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item .wcc-remove-item {
        position: absolute !important;
        top: 14px !important;
        left: 5px !important;
        right: auto !important; /* Nicht rechts! */
        width: 20px !important;
        height: 20px !important;
        background: rgba(231, 76, 60, 0.95) !important;
        color: #fff !important;
        border-radius: 50% !important;
        font-size: 12px !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        z-index: 2 !important;
    }
    
    /* Produktdetails - Mittig */
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item .wcc-item-details {
        flex: 1 !important;
        order: 2 !important;
        min-width: 0 !important;
    }
    
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item .wcc-item-name {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-bottom: 3px !important;
    }
    
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item .wcc-item-meta {
        font-size: 11px !important;
        color: #666 !important;
    }
    
    /* Rechte Spalte - Preis und Menge */
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item .wcc-item-right-column {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 5px !important;
        width: auto !important;
        order: 3 !important;
        flex-shrink: 0 !important;
    }
    
    /* Preis kompakt */
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item .wcc-price-amount {
        font-size: 12px !important;
        font-weight: 600 !important;
    }
    
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item .wcc-price-tax-info {
        font-size: 10px !important;
        color: #999 !important;
    }
    
    /* Quantity Controls kompakt */
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item .wcc-item-quantity {
        display: flex !important;
        align-items: center !important;
        background: #f5f5f5 !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 4px !important;
        padding: 1px !important;
    }
    
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item .wcc-qty-btn {
        width: 20px !important;
        height: 20px !important;
        font-size: 12px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        line-height: 1 !important;
    }
    
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item .wcc-qty-display {
        min-width: 25px !important;
        text-align: center !important;
        font-size: 12px !important;
        padding: 0 4px !important;
    }
    
    /* Summary kompakt */
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-summary-title {
        font-size: 18px !important;
        margin-bottom: 15px !important;
    }
    
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-order-summary-wrapper {
        padding: 0px !important;
    }
}

@media (max-width: 480px) {
    /* Sehr kleine Geräte - noch kompakter */
    html body.woocommerce-cart #wcc-cart-wrapper {
        padding: 15px 10px !important;
    }
    
    /* Cart Items brauchen padding-left für X-Button */
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item {
        padding-left: 5px !important;
    }
    
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item .wcc-item-name {
        font-size: 12px !important;
    }
    
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item .wcc-price-amount {
        font-size: 11px !important;
    }
    
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-place-order-btn {
        font-size: 16px !important;
        padding: 14px 24px !important;
    }
    
    /* X-Button bleibt in der linken oberen Ecke */
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item .wcc-remove-item {
        top: 14px !important;
        left: 5px !important;
        width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
    }
    
    /* Bild-Container overflow visible für X-Button */
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item .wcc-item-image {
        overflow: visible !important;
    }
}

/* Mobile S und M - Extra padding für X-Button */
@media (max-width: 375px) {
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item {
        padding-left: 5px !important;
    }
}

@media (max-width: 320px) {
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-item {
        padding-left: 5px !important;
    }
    
    /* "X Produkte im Warenkorb" und "Alle anzeigen" jeweils in eigener Zeile */
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-toggle-container {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-toggle-left {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    html body.woocommerce-cart #wcc-cart-wrapper .wcc-cart-toggle-right {
        width: 100% !important;
    }
}

/* Font Awesome Icons in Sidecart Buttons */
#wcc-sidecart-container .wcc-sidecart-btn i {
    margin: 0 5px;
    font-size: 16px;
    vertical-align: middle;
}

#wcc-sidecart-container .wcc-sidecart-btn i:first-child {
    margin-left: 0;
}

#wcc-sidecart-container .wcc-sidecart-btn i:last-child {
    margin-right: 0;
}