/* assets/css/pages/cart.css */

/* --- Import der Montserrat-Schriftart --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--shop-dark-text);
}

.shop-content.cart-page {
    padding: 60px 20px;
    background-color: var(--shop-secondary-color);
}

.container {
    max-width: 1200px; /* Breiterer Container für die 2-Spalten-Anordnung */
    margin: 0 auto;
}

/* --- Leerer Warenkorb --- */
.empty-cart-message-elegant {
    text-align: center;
    margin: 4em auto 6em auto;
    max-width: 700px;
    background-color: var(--shop-light-text);
    padding: 40px;
    border-radius: var(--shop-border-radius-soft);
    box-shadow: var(--shop-box-shadow-medium);
}

.empty-cart-message-elegant p {
    font-size: 1.4em;
    color: var(--shop-dark-text) !important;
    margin-bottom: 2em;
    line-height: 1.6;
}

.cart-actions-empty .button-elegant {
    background: linear-gradient(45deg, var(--shop-primary-color), var(--shop-secondary-color-dark));
    color: var(--shop-light-text);
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1em;
    transition: all 0.3s ease-in-out;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(var(--shop-primary-color-rgb), 0.2);
    display: inline-block;
}

.cart-actions-empty .button-elegant:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(var(--shop-primary-color-rgb), 0.3);
    background: linear-gradient(45deg, var(--shop-secondary-color-dark), var(--shop-primary-color));
}

/* --- Überschrift "Ihr Warenkorb" --- */
.elegant-cart-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5em; /* Grösser und prominenter */
    color: var(--shop-primary-color);
    text-align: center;
    margin-bottom: 50px;
    letter-spacing: 2px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.05);
    font-weight: 700;
}

/* --- Haupt-Layout für Warenkorb-Inhalt und Zusammenfassung (Desktop) --- */
.cart-content-layout {
    display: grid;
    grid-template-columns: 1fr; /* Standard: eine Spalte für Mobile */
    gap: 40px; /* Abstand zwischen den Sektionen */
    margin: 30px auto;
}

@media (min-width: 992px) { /* Zwei Spalten auf grösseren Bildschirmen */
    .cart-content-layout {
        grid-template-columns: 2fr 1fr; /* Warenkorb-Items breiter, Zusammenfassung schmaler */
        gap: 60px;
    }
}


/* --- Warenkorb-Items Sektion (die "Liste" der Produkte) --- */
.cart-items-section {
    background-color: var(--shop-light-text);
    border-radius: var(--shop-border-radius-soft);
    box-shadow: var(--shop-box-shadow-medium);
    padding: 30px;
}

.cart-form-elegant {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Abstand zwischen Tabelle und Aktionen */
}

/* --- Warenkorb Tabelle (als Liste gestylt) --- */
.cart-table-elegant {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent; /* Wird vom Eltern-Wrapper gesetzt */
}

.cart-table-elegant thead {
    display: none; /* Überschriftenzeile ausblenden */
}

.cart-table-elegant tbody {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Noch viel grösserer Abstand zwischen den "Karten" */
}

.cart-item-card { /* Jede TR wird zu einer Karte */
    display: grid; /* Grid für die innere Anordnung der Item-Details */
    grid-template-columns: 1fr; /* Standard: gestapelt auf Mobile */
    gap: 30px; /* Grösserer Gap intern auf Mobile */
    padding: 30px; /* Grösseres internes Padding (seitlich und oben/unten) */
    border: 1px solid var(--shop-border-color);
    border-radius: var(--shop-border-radius-soft);
    background-color: var(--shop-light-text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtiler Schatten für jede Karte */
    transition: transform 0.2s ease;
}

.cart-item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

@media (min-width: 600px) { /* Spalten-Layout für Items auf Tablets */
    .cart-item-card {
        /* NEU: Angepasste Spalten für mehr Platz und bessere Verteilung */
        /* Bild | Produktinfos | Einheitspreis | Menge | Gesamtpreis + Entfernen */
        grid-template-columns: 100px 1.8fr 1fr 1fr 1.2fr;
        align-items: center;
        padding: 30px; /* Gleichbleibendes Padding */
        gap: 30px; /* Erhöhter Gap intern für Tablet */
    }
}
@media (min-width: 768px) { /* Für grössere Desktops */
    .cart-item-card {
        /* NEU: Feinere Anpassung für noch mehr Platz auf Desktop */
        /* Bild | Produktinfos | Einheitspreis | Menge | Gesamtpreis + Entfernen */
        grid-template-columns: 120px 2fr 1fr 1fr 1.2fr;
        gap: 60px; /* Noch grösserer Gap für Desktop (seitliche Abstände) */
    }
}

/* --- Einzelne Zellen-Stile --- */
.cart-item-card td {
    border-bottom: none; /* Keine Linien zwischen den Zellen */
    padding: 0; /* Padding wird von der Karte gesteuert */
    display: flex; /* Flex für Label/Value-Paare */
    flex-direction: column; /* Standard: Label über Wert */
    justify-content: center; /* Vertikale Zentrierung des Inhalts in der Zelle */
}

@media (min-width: 600px) {
    .cart-item-card td {
        flex-direction: row; /* Label und Wert nebeneinander */
        align-items: center;
        text-align: left; /* Standard: Links ausgerichtet */
    }
    .cart-item-card .price-label,
    .cart-item-card .total-label {
        display: none; /* Labels auf Desktop ausblenden, da Spaltenüberschriften fehlen */
    }
    .cart-item-cell-type {
        display: none; /* Typ-Zelle ausblenden, da Typ nun im Produkt-Info-Feld ist */
    }
}


.cart-product-info-elegant {
    display: flex;
    align-items: center;
    gap: 30px; /* Noch grösserer Abstand zwischen Bild und Text-Infos */
    grid-column: 1 / -1; /* Nimmt auf Mobile volle Breite */
    justify-content: flex-start; /* Links ausrichten */
}
@media (min-width: 600px) {
    .cart-product-info-elegant {
        grid-column: auto; /* Zurücksetzen auf Auto im Grid */
    }
}

.cart-product-info-elegant img {
    width: 100px; /* Noch grösseres Bild im Warenkorb-Item */
    height: 100px;
    object-fit: contain; /* Bild in den Rahmen bringen, ohne es zu beschneiden */
    border: 1px solid var(--shop-border-color);
    border-radius: var(--shop-border-radius-image);
    padding: 5px; /* Kleines Padding um das Bild, damit es Luft zum Rand hat */
    box-sizing: border-box; /* Padding innerhalb der Breite/Höhe */
    flex-shrink: 0; /* Bild soll nicht schrumpfen, wenn Platz eng wird */
}

.product-details-elegant {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.product-name-elegant {
    font-weight: 700;
    font-size: 0.9em; /* SCHRIFT NOCH KLEINER */
    color: var(--shop-dark-text);
    margin-bottom: 6px; /* Etwas weniger Abstand zum Typ */
    line-height: 1.3;
}
.product-type-elegant {
    font-size: 0.75em; /* SCHRIFT NOCH KLEINER */
    color: var(--shop-medium-text);
}

/* --- Individuelle Zellen für Preis, Menge, Gesamt --- */
/* NEU: Einheitspreis Zelle (links vom Mengenfeld) */
.cart-item-cell-price {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--shop-dark-text);
    display: flex;
    flex-direction: column; /* Vertikal auf Mobile */
    align-items: center; /* Zentriert Preis auf Mobile */
    justify-content: center;
    text-align: center; /* Text in der Zelle zentrieren auf Mobile */
}

@media (min-width: 600px) {
    .cart-item-cell-price {
        flex-direction: row; /* Nebeneinander auf Desktop */
        justify-content: center; /* NEU: Zentrierung des Einheitspreises */
        text-align: center; /* Text in der Zelle zentrieren */
    }
}

.cart-item-cell-price .price-value-elegant {
    font-size: 1em; /* SCHRIFT NOCH KLEINER (etwas größer als Mobile) */
    color: var(--shop-primary-color-dark);
}

/* NEU: Mengen-Zelle */
.cart-item-cell-quantity {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--shop-dark-text);
    display: flex;
    flex-direction: column; /* Vertikal auf Mobile */
    align-items: center; /* Menge auf Mobile zentrieren */
    justify-content: center;
    text-align: center; /* Text in der Zelle zentrieren auf Mobile */
}

@media (min-width: 600px) {
    .cart-item-cell-quantity {
        flex-direction: row; /* Nebeneinander auf Desktop */
        justify-content: center; /* Menge auf Desktop zentrieren */
        text-align: center;
    }
}

/* NEU: Gesamtpreis Zelle (ganz rechts) */
.cart-item-cell-total {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: var(--shop-dark-text);
    display: flex;
    flex-direction: column; /* Vertikal auf Mobile */
    align-items: center; /* Gesamt auf Mobile zentrieren */
    justify-content: center;
    text-align: center; /* Text in der Zelle zentrieren auf Mobile */
}

@media (min-width: 600px) {
    .cart-item-cell-total {
        flex-direction: row; /* Nebeneinander auf Desktop */
        justify-content: center; /* NEU: Zentrierung des Gesamtpreises */
        text-align: center; /* Text in der Zelle zentrieren */
    }
}

.cart-item-cell-total .total-value-elegant {
    font-size: 1.1em; /* SCHRIFT NOCH KLEINER (etwas größer als Mobile) */
    color: var(--shop-primary-color);
    font-weight: 700;
}


/* --- Mengensteuerung im Warenkorb (elegant) --- */
.quantity-control-cart-elegant {
    display: flex;
    align-items: center;
    border: 1px solid var(--shop-border-color);
    border-radius: var(--shop-border-radius-soft);
    overflow: hidden;
    width: fit-content;
    margin-top: 5px; /* Abstand zum Label auf Mobile */
}
@media (min-width: 600px) {
    .quantity-control-cart-elegant {
        margin-top: 0; /* Kein Margin auf Desktop */
    }
}


.quantity-control-cart-elegant .quantity-btn-cart-elegant {
    background-color: var(--shop-secondary-color);
    color: var(--shop-dark-text);
    border: none;
    padding: 6px 10px; /* SCHRIFT UND PADDING KLEINER */
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color var(--shop-transition-speed);
}

.quantity-control-cart-elegant .quantity-btn-cart-elegant:hover {
    background-color: #e0e0e0;
}

.cart-quantity-input-display-elegant {
    border: none;
    text-align: center;
    font-size: 0.9em; /* SCHRIFT KLEINER */
    width: 35px; /* SCHMALER */
    padding: 6px 0; /* PADDING KLEINER */
    background-color: var(--shop-light-text);
    color: var(--shop-dark-text);
    -moz-appearance: textfield; /* Für Firefox entfernen der Pfeile */
}
.cart-quantity-input-display-elegant::-webkit-outer-spin-button,
.cart-quantity-input-display-elegant::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Für Chrome/Safari entfernen der Pfeile */
    margin: 0;
}

/* --- Entfernen Button im Item --- */
.button-remove-item-elegant {
    /* NEU: Styling für sichtbaren und eleganten Entfernen-Button */
    background-color: var(--shop-light-text); /* Hellerer Hintergrund */
    color: var(--shop-danger-color); /* Rote Farbe für "Entfernen" */
    border: 1px solid var(--shop-danger-color); /* Roter Rahmen */
    padding: 6px 12px; /* Grosszügigeres Padding, SCHRIFT KLEINER */
    font-size: 0.8em; /* Etwas kleiner */
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 50px; /* Abgerundeter Button */
    font-weight: 600;
    text-decoration: none; /* Keine Unterstreichung standardmässig */
    box-shadow: 0 2px 5px rgba(var(--shop-danger-color-rgb), 0.1);
    margin-top: 15px; /* Mehr Abstand auf Mobile */
    align-self: center; /* Zentriert auf Mobile */
}

.button-remove-item-elegant:hover {
    background-color: var(--shop-danger-color); /* Roter Hintergrund beim Hover */
    color: var(--shop-light-text); /* Weisser Text beim Hover */
    box-shadow: 0 5px 15px rgba(var(--shop-danger-color-rgb), 0.2);
    transform: translateY(-2px);
}
@media (min-width: 600px) {
    .button-remove-item-elegant {
        margin-top: 0; /* Kein Margin auf Desktop */
    }
}


/* --- Aktionen Buttons am unteren Rand der Item-Liste --- */
.cart-actions-bottom {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    flex-wrap: wrap;
    padding-top: 10px; /* Abstand zur letzten Karte */
    border-top: 1px solid var(--shop-border-color); /* Dezente Trennlinie */
}

.cart-actions-bottom .button-elegant {
    padding: 10px 20px;
    font-size: 0.95em;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.cart-actions-bottom .button-secondary-elegant {
    background-color: var(--shop-secondary-color);
    color: var(--shop-dark-text);
    border: 1px solid var(--shop-border-color);
}
.cart-actions-bottom .button-secondary-elegant:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}


/* --- Warenkorb-Zusammenfassung Sektion --- */
.cart-summary-elegant {
    background-color: var(--shop-light-text);
    border-radius: var(--shop-border-radius-soft);
    padding: 30px;
    box-shadow: var(--shop-box-shadow-medium);
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Inhalte verteilen */
}

.cart-summary-elegant h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8em;
    color: var(--shop-primary-color);
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--shop-border-color); /* Dezente Trennlinie */
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.summary-details {
    margin-bottom: 20px; /* Abstand zur Gesamtsumme */
}

.summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1em;
    color: var(--shop-dark-text);
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dashed var(--shop-border-color); /* Dezente Strichlinie */
}
.summary-line:last-of-type {
    border-bottom: none; /* Keine Linie bei letzter Zeile */
    margin-bottom: 0;
    padding-bottom: 0;
}

.summary-value {
    font-weight: 600;
    color: var(--shop-primary-color-dark);
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5em; /* Grössere Gesamtsumme */
    font-weight: 700;
    color: var(--shop-primary-color);
    padding-top: 15px;
    border-top: 2px solid var(--shop-primary-color); /* Dickere Trennlinie */
    margin-top: 20px; /* Abstand zur oberen Sektion */
    margin-bottom: 30px; /* Abstand zum Checkout-Button */
}

.summary-value-total {
    font-weight: 800; /* Noch fetter */
    color: var(--shop-primary-color); /* Akzentfarbe */
}


.button-checkout-primary {
    background: linear-gradient(45deg, var(--shop-primary-color), var(--shop-secondary-color-dark));
    color: var(--shop-light-text);
    padding: 15px 25px; /* VERKLEINERTES PADDING FÜR SCHMALEREN BUTTON */
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2em;
    transition: all 0.3s ease-in-out;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(var(--shop-primary-color-rgb), 0.2);
    display: block; /* Volle Breite */
    width: auto; /* Ermöglicht, dass der Button schmaler wird */
    max-width: 250px; /* MAX BREITE HINZUGEFÜGT, DAMIT ER NICHT ZU BREIT WIRD */
    margin-left: auto; /* Zentrierung, wenn width auto */
    margin-right: auto; /* Zentrierung, wenn width auto */
    text-align: center;
}

.button-checkout-primary:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 12px 30px rgba(var(--shop-primary-color-rgb), 0.3);
    background: linear-gradient(45deg, var(--shop-secondary-color-dark), var(--shop-primary-color));
}


/* --- Responsive Anpassungen für Warenkorb-Seite --- */
@media (max-width: 991px) { /* Anpassung für Mobile und Tablets */
    .elegant-cart-heading {
        font-size: 2.8em;
        margin-bottom: 40px;
    }
    .cart-content-layout {
        gap: 30px;
        margin: 20px auto;
    }
    .cart-items-section {
        padding: 20px;
    }
    .cart-table-elegant tbody {
        gap: 20px; /* Angepasster Abstand zwischen Karten auf Mobile */
    }
    .cart-item-card {
        padding: 20px; /* Angepasstes Padding für Mobile */
        gap: 15px; /* Angepasster Gap für Mobile */
    }
    .cart-product-info-elegant img {
        width: 70px; /* Bildgrösse auf Mobile angepasst */
        height: 70px;
    }
    .product-name-elegant {
        font-size: 0.9em; /* SCHRIFT NOCH KLEINER */
    }
    .product-type-elegant {
        font-size: 0.75em; /* SCHRIFT NOCH KLEINER */
    }
    .cart-item-cell-price .price-value-elegant,
    .cart-item-cell-total .total-value-elegant {
        font-size: 1em; /* SCHRIFT NOCH KLEINER */
    }
    .quantity-control-cart-elegant .quantity-btn-cart-elegant {
        padding: 6px 10px;
    }
    .cart-quantity-input-display-elegant {
        width: 35px;
    }
    .button-remove-item-elegant {
        font-size: 0.75em; /* SCHRIFT NOCH KLEINER */
        padding: 5px 10px;
    }
    .cart-actions-bottom {
        justify-content: center;
        gap: 10px;
        padding-top: 15px;
    }
    .cart-actions-bottom .button-elegant {
        padding: 8px 15px;
        font-size: 0.85em;
    }
    .cart-summary-elegant {
        padding: 25px;
    }
    .cart-summary-elegant h3 {
        font-size: 1.5em;
        margin-bottom: 20px;
        padding-bottom: 10px;
    }
    .summary-line {
        font-size: 1em;
    }
    .summary-total {
        font-size: 1.3em;
        padding-top: 10px;
        margin-bottom: 20px;
    }
    .button-checkout-primary {
        padding: 12px 25px;
        font-size: 1.1em;
        max-width: 250px;
    }
}

@media (max-width: 599px) { /* Sehr kleine Bildschirme, nur für cart-item-card */
    .cart-item-card td {
        flex-direction: column; /* Wieder untereinander auf sehr kleinen Bildschirmen */
        align-items: center; /* Zentriert */
        text-align: center;
    }
    .cart-item-card .price-label,
    .cart-item-card .total-label {
        display: block; /* Labels wieder anzeigen */
        margin-bottom: 5px;
    }
    .cart-product-info-elegant {
        flex-direction: column; /* Bild über Text */
        text-align: center;
    }
    .cart-product-info-elegant img {
        margin-bottom: 10px;
    }
    .product-details-elegant {
        align-items: center;
    }
    .quantity-control-cart-elegant {
        margin-left: 0;
        margin-top: 5px;
    }
    .button-remove-item-elegant {
        align-self: center; /* Zentriert */
        margin-top: 15px;
    }
    /* Grid-Layout für Mobile, damit Spalten nicht ganz kollabieren */
    .cart-item-card {
        grid-template-columns: 1fr; /* Einzelne Spalte */
        gap: 15px; /* Abstand zwischen Elementen */
        padding: 15px; /* Kleineres Padding */
    }
    .cart-item-cell-price,
    .cart-item-cell-quantity,
    .cart-item-cell-total {
        flex-direction: column; /* Sicherstellen, dass sie auf Mobil gestapelt sind */
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .elegant-cart-heading {
        font-size: 2.2em;
        margin-bottom: 30px;
    }
    .empty-cart-message-elegant {
        padding: 25px;
    }
    .empty-cart-message-elegant p {
        font-size: 1.1em;
    }
    .cart-actions-empty .button-elegant {
        padding: 10px 20px;
        font-size: 1em;
    }
    .cart-items-section {
        padding: 15px;
    }
    .cart-item-card {
        padding: 10px;
        gap: 10px;
    }
    .cart-product-info-elegant img {
        width: 50px;
        height: 50px;
    }
    .product-name-elegant {
        font-size: 0.85em; /* SCHRIFT NOCH KLEINER */
    }
    .product-type-elegant {
        font-size: 0.7em; /* SCHRIFT NOCH KLEINER */
    }
    .cart-summary-elegant {
        padding: 20px;
    }
    .cart-summary-elegant h3 {
        font-size: 1.3em;
        margin-bottom: 15px;
        padding-bottom: 8px;
    }
    .summary-line {
        font-size: 0.9em;
    }
    .summary-total {
        font-size: 1.1em;
    }
    .button-checkout-primary {
        padding: 10px 20px;
        font-size: 1em;
    }
}