/* Claudio's Angebote isolated design v1.0.0
   Scope: Angebote page and getAngebote popup only.
   Does not target order/menu/bestellen pages. */

:root {
    --cp-green: #64ff32;
    --cp-green-dark: #45df29;
    --cp-gold: #f7c95a;
    --cp-red: #e5192a;
    --cp-dark: #050505;
}

/* Page shell */
body.cp-angebote-page {
    background:
        radial-gradient(circle at top left, rgba(156, 0, 18, 0.22), transparent 24rem),
        radial-gradient(circle at bottom right, rgba(100, 255, 50, 0.08), transparent 22rem),
        #050505 !important;
    color: #fff !important;
    overflow-x: hidden !important;
}

body.cp-angebote-page .cp-angebote-section {
    padding-top: 24px !important;
}

body.cp-angebote-page .cp-angebote-section > .container {
    width: min(100% - 40px, 1500px) !important;
    max-width: 1500px !important;
}

/* Keep first image/header compact but do not remove it */
body.cp-angebote-page .menu-header,
body.cp-angebote-page .hero-wrap,
body.cp-angebote-page .slider-item {
    max-height: 360px !important;
}

body.cp-angebote-page .cp-angebote-products-column {
    padding-right: 34px !important;
}

@media (min-width: 992px) {
    body.cp-angebote-page .cp-angebote-products-column {
        flex: 0 0 72% !important;
        max-width: 72% !important;
    }

    body.cp-angebote-page .cp-angebote-cart-column {
        flex: 0 0 28% !important;
        max-width: 28% !important;
    }
}

/* Coupon */
body.cp-angebote-page .cp-angebote-coupon-card,
body.cp-angebote-page .cp-angebote-coupon-card .card-header,
body.cp-angebote-page .cp-angebote-coupon-body {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.cp-angebote-page .cp-angebote-coupon-card .mainCategory button,
body.cp-angebote-page .cp-angebote-category-card .mainCategory button {
    display: block !important;
    width: min(520px, 100%) !important;
    text-align: left !important;
    padding: 16px 22px !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

body.cp-angebote-page .cp-angebote-coupon-intro,
body.cp-angebote-page .cp-angebote-category-desc {
    margin: 0 0 16px 0 !important;
    color: rgba(255,255,255,0.74) !important;
    font-style: italic !important;
    line-height: 1.55 !important;
}

body.cp-angebote-page .cp-angebote-coupon-row {
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) 210px !important;
    gap: 18px !important;
    align-items: center !important;
    padding: 14px 18px !important;
    margin-bottom: 18px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.025) !important;
}

body.cp-angebote-page .cp-angebote-coupon-icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 14px !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: rgba(255,255,255,0.06) !important;
}

body.cp-angebote-page .cp-angebote-coupon-main input.cop {
    width: min(100%, 300px) !important;
    height: 42px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    background: rgba(0,0,0,0.25) !important;
    color: #fff !important;
    padding: 0 14px !important;
    box-shadow: none !important;
}

body.cp-angebote-page .cp-angebote-coupon-link {
    display: block !important;
    margin-top: 8px !important;
    color: var(--cp-green) !important;
}

body.cp-angebote-page .cp-angebote-coupon-action .sub {
    width: 190px !important;
    min-height: 42px !important;
    border-radius: 12px !important;
    border: 0 !important;
    background: linear-gradient(135deg, var(--cp-green), var(--cp-green-dark)) !important;
    color: #050505 !important;
    font-weight: 900 !important;
}

/* Angebot cards */
body.cp-angebote-page .cp-angebote-category-card,
body.cp-angebote-page .cp-angebote-category-card .card-header,
body.cp-angebote-page .cp-angebote-category-body {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.cp-angebote-page .cp-angebote-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)) !important;
    gap: 22px !important;
    margin-bottom: 26px !important;
}

body.cp-angebote-page .cp-angebot-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 26px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background:
        radial-gradient(circle at top right, rgba(100,255,50,0.08), transparent 12rem),
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.045)) !important;
    box-shadow: 0 24px 65px rgba(0,0,0,0.52) !important;
    padding: 22px !important;
    color: #fff !important;
}

body.cp-angebote-page .cp-angebot-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

body.cp-angebote-page .cp-angebot-badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.10) !important;
    color: #fff !important;
    font-weight: 900 !important;
}

body.cp-angebote-page .cp-angebot-price {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 8px 13px !important;
    border-radius: 12px !important;
    background: rgba(229,25,42,0.96) !important;
    color: #fff !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

body.cp-angebote-page .cp-angebot-items {
    display: grid !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
}

body.cp-angebote-page .cp-angebot-items-two-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.cp-angebote-page .cp-angebot-item {
    display: grid !important;
    grid-template-columns: 46px 34px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 54px !important;
    padding: 8px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.055) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

body.cp-angebote-page .cp-angebot-item img {
    width: 46px !important;
    height: 46px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.08) !important;
}

body.cp-angebote-page .cp-angebot-count {
    color: var(--cp-gold) !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

body.cp-angebote-page .cp-angebot-name {
    color: rgba(255,255,255,0.88) !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
}

body.cp-angebote-page .cp-angebot-add-button {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    border: 0 !important;
    background: linear-gradient(135deg, var(--cp-green), var(--cp-green-dark)) !important;
    color: #050505 !important;
    font-weight: 900 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

/* Basket: same behavior as fixed order page, scoped to Angebote only */
body.cp-angebote-page #loadTran.cartbody {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 22px !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at top right, rgba(129,255,62,0.08), transparent 14rem),
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.055)) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
}

@media (min-width: 992px) {
    body.cp-angebote-page .fixedElement,
    body.cp-angebote-page .fixedElement2 {
        display: none;
        position: fixed !important;
        bottom: 14px !important;
        z-index: 999 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 14px !important;
        border-radius: 16px !important;
        background:
            radial-gradient(circle at top right, rgba(129,255,62,0.08), transparent 10rem),
            rgba(18,18,18,0.96) !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        box-shadow: 0 20px 50px rgba(0,0,0,0.55) !important;
        backdrop-filter: blur(12px) !important;
    }

    body.cp-angebote-page .fixedElement.is-visible {
        display: block !important;
    }

    body.cp-angebote-page .fixedElement2 {
        display: none !important;
    }
}

body.cp-angebote-page .fixedElement .checkout,
body.cp-angebote-page .fixedElement2 .checkout,
body.cp-angebote-page #findPOS .checkout {
    width: 100% !important;
    min-height: 54px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--cp-green), var(--cp-green-dark)) !important;
    color: #050505 !important;
    font-weight: 900 !important;
    padding: 13px 16px !important;
}

body.cp-angebote-page #loadTran.cartbody .plus,
body.cp-angebote-page #loadTran.cartbody .minus,
body.cp-angebote-page #loadTran.cartbody .minus_coupon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 3px !important;
    float: none !important;
    line-height: 1 !important;
}

body.cp-angebote-page #loadTran.cartbody .plus {
    background: var(--cp-green) !important;
    color: #050505 !important;
}

body.cp-angebote-page #loadTran.cartbody .minus,
body.cp-angebote-page #loadTran.cartbody .minus_coupon {
    background: rgba(255,255,255,0.10) !important;
    color: #fff !important;
}

/* Popup */
.mfp-bg { z-index: 20000 !important; }
.mfp-wrap { z-index: 20001 !important; }
.mfp-content { z-index: 20002 !important; }

.mfp-content .cp-angebote-popup {
    max-width: 920px !important;
    width: min(920px, calc(100vw - 24px)) !important;
    margin: 0 auto !important;
    text-align: left !important;
}

.mfp-content .cp-angebote-popup .modal-content {
    background:
        radial-gradient(circle at top right, rgba(100,255,50,0.08), transparent 18rem),
        linear-gradient(180deg, #fff 0%, #f7f7f7 100%) !important;
    border: 0 !important;
    border-radius: 22px !important;
    color: #282828 !important;
    box-shadow: 0 34px 95px rgba(0,0,0,0.65) !important;
    overflow: hidden !important;
}

.mfp-content .cp-angebote-popup .modal-body {
    padding: 26px !important;
}

.mfp-content .cp-angebote-popup-title {
    text-align: center !important;
    margin-bottom: 20px !important;
}

.mfp-content .cp-angebote-popup-title span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 8px 15px !important;
    border-radius: 999px !important;
    background: rgba(100,255,50,0.14) !important;
    color: #19490b !important;
    font-weight: 900 !important;
}

.mfp-content .cp-angebote-popup .cp-angebote-popup-row,
.mfp-content .cp-angebote-popup .form-group.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 14px !important;
    display: grid !important;
    grid-template-columns: 140px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
}

.mfp-content .cp-angebote-popup label {
    margin: 0 !important;
    color: #555 !important;
    font-weight: 800 !important;
}

.mfp-content .cp-angebote-popup .col-sm-10,
.mfp-content .cp-angebote-popup .col-sm-2,
.mfp-content .cp-angebote-popup-control {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
}

.mfp-content .cp-angebote-popup select,
.mfp-content .cp-angebote-popup input[type="text"],
.mfp-content .cp-angebote-popup .form-control {
    min-height: 42px !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 12px !important;
    padding: 9px 13px !important;
    background: #fff !important;
    color: #333 !important;
    box-shadow: none !important;
}

.mfp-content .cp-angebote-popup input[type="radio"],
.mfp-content .cp-angebote-popup input[type="checkbox"] {
    accent-color: var(--cp-green);
}

.mfp-content .cp-angebote-popup #myb,
.mfp-content .cp-angebote-popup .cp-angebote-submit {
    min-height: 48px !important;
    min-width: 190px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, var(--cp-green), var(--cp-green-dark)) !important;
    color: #050505 !important;
    font-weight: 900 !important;
    box-shadow: 0 16px 32px rgba(100,255,50,0.22) !important;
}

.mfp-content .cp-angebote-popup #close,
.mfp-content .cp-angebote-popup .btn-secondary {
    min-height: 48px !important;
    min-width: 120px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: #6c757d !important;
    color: #fff !important;
    font-weight: 900 !important;
}

/* Footer protection */
body.cp-angebote-page footer,
body.cp-angebote-page .ftco-footer,
body.cp-angebote-page #footer {
    position: relative !important;
    z-index: 1 !important;
    clear: both !important;
    margin-top: 70px !important;
}

/* Mobile */
@media (max-width: 991px) {
    body.cp-angebote-page .cp-angebote-section > .container {
        width: calc(100% - 20px) !important;
    }

    body.cp-angebote-page .cp-angebote-products-column {
        padding-right: 15px !important;
    }

    body.cp-angebote-page .cp-angebote-cart-column,
    body.cp-angebote-page #loadTran.cartbody {
        max-width: 100% !important;
        margin-top: 24px !important;
        position: static !important;
    }

    body.cp-angebote-page .cp-angebote-coupon-row {
        grid-template-columns: 58px minmax(0, 1fr) !important;
    }

    body.cp-angebote-page .cp-angebote-coupon-action {
        grid-column: 2 !important;
        justify-content: flex-start !important;
    }

    body.cp-angebote-page .cp-angebote-coupon-action .sub {
        width: min(100%, 260px) !important;
    }

    body.cp-angebote-page .cp-angebote-grid {
        grid-template-columns: 1fr !important;
    }

    body.cp-angebote-page .cp-angebot-items-two-cols {
        grid-template-columns: 1fr !important;
    }

    .mfp-content .cp-angebote-popup {
        width: calc(100vw - 14px) !important;
    }

    .mfp-content .cp-angebote-popup .modal-body {
        padding: 16px !important;
    }

    .mfp-content .cp-angebote-popup .cp-angebote-popup-row,
    .mfp-content .cp-angebote-popup .form-group.row {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        margin-bottom: 12px !important;
    }

    .mfp-content .cp-angebote-popup #myb,
    .mfp-content .cp-angebote-popup #close {
        width: 100% !important;
        margin: 5px 0 !important;
    }
}


/* =========================================================
   V5 FIXES FROM V3 BASE ONLY
   Scope: Angebote page only.
   Fixes:
   - Angebots items each in one line
   - Button aligned at same bottom level
   - Popup dark/red style
   - Popup buttons same line on web
   ========================================================= */

/* Offer grid: keep nice cards, but enough width */
body.cp-angebote-page .cp-angebote-grid {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
    align-items: stretch !important;
}

/* Make every Angebot card a vertical flex card so the Bestellung button is aligned */
body.cp-angebote-page .cp-angebot-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
}

/* Important fix: every item must be one full line, not two columns */
body.cp-angebote-page .cp-angebot-items,
body.cp-angebote-page .cp-angebot-items-two-cols {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 18px !important;
}

/* Item row: image + count + name in one line */
body.cp-angebote-page .cp-angebot-item {
    display: grid !important;
    grid-template-columns: 52px 44px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 11px !important;
    min-height: 62px !important;
    width: 100% !important;
    padding: 9px 12px !important;
    border-radius: 15px !important;
    overflow: hidden !important;
}

/* The name must never become vertical letters */
body.cp-angebote-page .cp-angebot-name,
body.cp-angebote-page .cp-angebot-count {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    min-width: 0 !important;
}

body.cp-angebote-page .cp-angebot-name {
    font-size: 15px !important;
    line-height: 1.25 !important;
}

body.cp-angebote-page .cp-angebot-count {
    color: var(--cp-gold) !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

/* Same button level in every card */
body.cp-angebote-page .cp-angebot-add-button {
    margin-top: auto !important;
}

/* Wide Jumbo Angebot cards can still look wider, but item rows remain one line */
@media (min-width: 1200px) {
    body.cp-angebote-page .cp-angebot-card-large {
        grid-column: span 2;
    }
}

/* Popup dark red theme, like the order popup */
.mfp-content .cp-angebote-popup {
    max-width: 920px !important;
    width: min(920px, calc(100vw - 24px)) !important;
    margin: 0 auto !important;
    text-align: left !important;
}

.mfp-content .cp-angebote-popup .modal-content {
    background:
        radial-gradient(circle at top right, rgba(255, 88, 88, 0.18), transparent 18rem),
        linear-gradient(180deg, #331010 0%, #1b0b0b 100%) !important;
    border: 1px solid rgba(255, 105, 105, 0.35) !important;
    border-radius: 22px !important;
    color: #fff !important;
    box-shadow: 0 40px 100px rgba(0,0,0,0.75) !important;
    overflow: hidden !important;
}

.mfp-content .cp-angebote-popup .modal-body {
    padding: 26px !important;
}

.mfp-content .cp-angebote-popup-title span {
    background: rgba(100,255,50,0.14) !important;
    color: #dfffd5 !important;
}

.mfp-content .cp-angebote-popup label,
.mfp-content .cp-angebote-popup .col-form-label {
    color: rgba(255,255,255,0.90) !important;
}

.mfp-content .cp-angebote-popup select,
.mfp-content .cp-angebote-popup input[type="text"],
.mfp-content .cp-angebote-popup .form-control {
    background: rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
    color: #fff !important;
}

.mfp-content .cp-angebote-popup select option {
    color: #111 !important;
}

.mfp-content .cp-angebote-popup input[type="radio"],
.mfp-content .cp-angebote-popup input[type="checkbox"] {
    accent-color: var(--cp-green) !important;
}

/* Popup buttons in same line on web */
.mfp-content .cp-angebote-popup .form-group.row:last-of-type .cp-angebote-popup-control,
.mfp-content .cp-angebote-popup .form-group.row:last-of-type .col-sm-10 {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.mfp-content .cp-angebote-popup #myb,
.mfp-content .cp-angebote-popup .cp-angebote-submit {
    flex: 0 0 auto !important;
    min-width: 210px !important;
    min-height: 50px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, var(--cp-green), var(--cp-green-dark)) !important;
    color: #050505 !important;
    font-weight: 900 !important;
}

.mfp-content .cp-angebote-popup #close,
.mfp-content .cp-angebote-popup .btn-secondary {
    flex: 0 0 auto !important;
    min-width: 140px !important;
    min-height: 50px !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    font-weight: 900 !important;
}

/* Mobile */
@media (max-width: 991px) {
    body.cp-angebote-page .cp-angebote-grid {
        grid-template-columns: 1fr !important;
    }

    body.cp-angebote-page .cp-angebot-card-large {
        grid-column: auto !important;
    }

    body.cp-angebote-page .cp-angebot-item {
        grid-template-columns: 48px 40px minmax(0, 1fr) !important;
    }

    .mfp-content .cp-angebote-popup {
        width: calc(100vw - 14px) !important;
    }

    .mfp-content .cp-angebote-popup .modal-body {
        padding: 16px !important;
    }

    .mfp-content .cp-angebote-popup .form-group.row {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        margin-bottom: 12px !important;
    }

    .mfp-content .cp-angebote-popup .form-group.row:last-of-type .cp-angebote-popup-control,
    .mfp-content .cp-angebote-popup .form-group.row:last-of-type .col-sm-10 {
        flex-direction: column !important;
    }

    .mfp-content .cp-angebote-popup #myb,
    .mfp-content .cp-angebote-popup #close {
        width: 100% !important;
        min-width: 100% !important;
    }
}


/* =========================================================
   V6 EQUAL ANGEBOTE CARD WIDTH + BUTTON ALIGNMENT
   Scope: Angebote page only.
   No PHP/SQL/cart/order logic changes.
   ========================================================= */

/* All Angebot boxes must use the same grid width. */
body.cp-angebote-page .cp-angebote-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
    width: 100% !important;
}

/* Remove previous "large card spans 2 columns" behavior. */
body.cp-angebote-page .cp-angebot-card,
body.cp-angebote-page .cp-angebot-card-large,
body.cp-angebote-page .cp-angebot-card-small {
    grid-column: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Keep header fixed at the top and button fixed at the bottom. */
body.cp-angebote-page .cp-angebot-card-header {
    flex: 0 0 auto !important;
}

body.cp-angebote-page .cp-angebot-items,
body.cp-angebote-page .cp-angebot-items-two-cols {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-content: start !important;
    width: 100% !important;
    margin-bottom: 18px !important;
}

/* Each item is always one full row. */
body.cp-angebote-page .cp-angebot-item {
    display: grid !important;
    grid-template-columns: 52px 44px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 11px !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Prevent product name from forcing card width or becoming vertical. */
body.cp-angebote-page .cp-angebot-name {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

/* Button always at the same bottom level inside equal-height cards. */
body.cp-angebote-page .cp-angebot-add-button {
    margin-top: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
}

/* Desktop large screens: still exactly two identical boxes per row. */
@media (min-width: 1200px) {
    body.cp-angebote-page .cp-angebote-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.cp-angebote-page .cp-angebot-card-large,
    body.cp-angebote-page .cp-angebot-card-small {
        grid-column: auto !important;
    }
}

/* Medium/tablet: one box per row so it does not become squeezed. */
@media (max-width: 991px) {
    body.cp-angebote-page .cp-angebote-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   V7 REMOVE OLD TOP BANNER + USE ORDER-PAGE INTRO STYLE
   Scope: Angebote page only.
   ========================================================= */

/* Remove the old image/contact/payment banner at the top of Angebote only. */
body.cp-angebote-page > section.img,
body.cp-angebote-page section.img .menu-header,
body.cp-angebote-page .menu-header {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Remove the big gap that the old banner created. */
body.cp-angebote-page .cp-angebote-section {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Make Angebote intro match the current order-page intro area. */
body.cp-angebote-page .cp-angebote-menu-intro,
body.cp-angebote-page .cp-angebote-section .heading-section {
    margin-top: 0 !important;
    padding-top: 42px !important;
    margin-bottom: 34px !important;
    padding-bottom: 0 !important;
}

body.cp-angebote-page .cp-angebote-menu-intro .heading-section,
body.cp-angebote-page .cp-angebote-section .heading-section {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.cp-angebote-page .cp-angebote-menu-intro h2,
body.cp-angebote-page .cp-angebote-section .heading-section h2 {
    color: #fff !important;
    font-size: clamp(28px, 2.7vw, 42px) !important;
    line-height: 1.1 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}

body.cp-angebote-page .cp-angebote-menu-intro .flip,
body.cp-angebote-page .cp-angebote-section .heading-section .flip {
    margin: 8px auto 18px auto !important;
}

body.cp-angebote-page .cp-angebote-menu-intro p,
body.cp-angebote-page .cp-angebote-section .heading-section p {
    color: rgba(255,255,255,0.72) !important;
    line-height: 1.55 !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
}

body.cp-angebote-page .cp-angebote-menu-intro a,
body.cp-angebote-page .cp-angebote-section .heading-section a {
    color: var(--cp-green) !important;
    font-weight: 700 !important;
}

/* Bell image same as order page, but compact. */
body.cp-angebote-page .cp-angebote-menu-intro img[src*="bell"],
body.cp-angebote-page .cp-angebote-section .heading-section img[src*="bell"] {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
    margin: 8px auto 2px auto !important;
}

/* Remove any old payment logo accidentally displayed near the heading. */
body.cp-angebote-page .cp-angebote-section .heading-section img[src*="paypal"],
body.cp-angebote-page .cp-angebote-section .heading-section img[src*="PayPal"],
body.cp-angebote-page .cp-angebote-section .heading-section img[src*="visa"],
body.cp-angebote-page .cp-angebote-section .heading-section img[src*="master"] {
    display: none !important;
}

/* Mobile header spacing */
@media (max-width: 767px) {
    body.cp-angebote-page .cp-angebote-menu-intro,
    body.cp-angebote-page .cp-angebote-section .heading-section {
        padding-top: 26px !important;
        margin-bottom: 24px !important;
    }

    body.cp-angebote-page .cp-angebote-menu-intro h2,
    body.cp-angebote-page .cp-angebote-section .heading-section h2 {
        font-size: 24px !important;
        letter-spacing: 0.12em !important;
    }

    body.cp-angebote-page .cp-angebote-menu-intro p,
    body.cp-angebote-page .cp-angebote-section .heading-section p {
        font-size: 14px !important;
    }
}


/* =========================================================
   V8 FOOTER LIKE ORDER PAGE
   Scope: Angebote page only.
   Goal: make footer compact and prevent floating checkout from covering it.
   ========================================================= */

/* Compact footer only on Angebote page */
body.cp-angebote-page footer,
body.cp-angebote-page .ftco-footer,
body.cp-angebote-page #footer {
    position: relative !important;
    z-index: 1 !important;
    clear: both !important;
    margin-top: 42px !important;
    padding-top: 42px !important;
    padding-bottom: 24px !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* Keep footer container same comfortable width as order page */
body.cp-angebote-page footer .container,
body.cp-angebote-page .ftco-footer .container,
body.cp-angebote-page #footer .container {
    width: min(100% - 40px, 1140px) !important;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Footer columns should not become huge */
body.cp-angebote-page footer .row,
body.cp-angebote-page .ftco-footer .row,
body.cp-angebote-page #footer .row {
    align-items: flex-start !important;
    min-height: 0 !important;
}

/* Footer headings smaller and professional */
body.cp-angebote-page footer h2,
body.cp-angebote-page footer h3,
body.cp-angebote-page footer .ftco-heading-2,
body.cp-angebote-page .ftco-footer h2,
body.cp-angebote-page .ftco-footer h3,
body.cp-angebote-page .ftco-footer .ftco-heading-2 {
    color: #fff !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 18px !important;
    text-transform: uppercase !important;
}

/* Footer text smaller */
body.cp-angebote-page footer p,
body.cp-angebote-page footer li,
body.cp-angebote-page footer a,
body.cp-angebote-page footer span,
body.cp-angebote-page .ftco-footer p,
body.cp-angebote-page .ftco-footer li,
body.cp-angebote-page .ftco-footer a,
body.cp-angebote-page .ftco-footer span {
    font-size: 14px !important;
    line-height: 1.55 !important;
    letter-spacing: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* Fix the LOCATION title which was extremely large */
body.cp-angebote-page footer h2:has(+ iframe),
body.cp-angebote-page footer h3:has(+ iframe),
body.cp-angebote-page .ftco-footer h2:has(+ iframe),
body.cp-angebote-page .ftco-footer h3:has(+ iframe) {
    font-size: 17px !important;
    letter-spacing: 0.12em !important;
}

/* Map should be compact */
body.cp-angebote-page footer iframe,
body.cp-angebote-page .ftco-footer iframe,
body.cp-angebote-page #footer iframe {
    width: 100% !important;
    max-width: 280px !important;
    height: 160px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Social icons compact */
body.cp-angebote-page footer .ftco-footer-social,
body.cp-angebote-page .ftco-footer .ftco-footer-social {
    margin-top: 16px !important;
}

body.cp-angebote-page footer .ftco-footer-social li,
body.cp-angebote-page .ftco-footer .ftco-footer-social li {
    margin-right: 8px !important;
}

body.cp-angebote-page footer .ftco-footer-social li a,
body.cp-angebote-page .ftco-footer .ftco-footer-social li a {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Copyright area compact */
body.cp-angebote-page footer .text-center,
body.cp-angebote-page .ftco-footer .text-center {
    margin-top: 24px !important;
    padding-top: 10px !important;
}

/* Hide floating checkout/payment blocks when footer is reached */
body.cp-angebote-page .fixedElement.is-in-footer,
body.cp-angebote-page .fixedElement2.is-in-footer,
body.cp-angebote-page #myBtn.is-in-footer {
    display: none !important;
}

/* Fallback: if footer is visible, never let floating order button cover it */
body.cp-angebote-page footer ~ .fixedElement,
body.cp-angebote-page footer ~ .fixedElement2,
body.cp-angebote-page footer ~ #myBtn {
    pointer-events: none !important;
}

/* Mobile footer */
@media (max-width: 767px) {
    body.cp-angebote-page footer,
    body.cp-angebote-page .ftco-footer,
    body.cp-angebote-page #footer {
        margin-top: 34px !important;
        padding-top: 34px !important;
        padding-bottom: 20px !important;
    }

    body.cp-angebote-page footer .container,
    body.cp-angebote-page .ftco-footer .container,
    body.cp-angebote-page #footer .container {
        width: calc(100% - 28px) !important;
    }

    body.cp-angebote-page footer h2,
    body.cp-angebote-page footer h3,
    body.cp-angebote-page footer .ftco-heading-2,
    body.cp-angebote-page .ftco-footer h2,
    body.cp-angebote-page .ftco-footer h3,
    body.cp-angebote-page .ftco-footer .ftco-heading-2 {
        font-size: 16px !important;
        margin-bottom: 12px !important;
    }

    body.cp-angebote-page footer iframe,
    body.cp-angebote-page .ftco-footer iframe,
    body.cp-angebote-page #footer iframe {
        max-width: 100% !important;
        height: 150px !important;
    }
}


/* =========================================================
   V9 ANGEBOTE POPUP RED THEME + NO ACCIDENTAL CLOSE
   Scope: getAngebote popup only.
   ========================================================= */

/* Strong selector because Bootstrap/order popup CSS may override the normal .modal-content selector */
body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup,
.mfp-content #custom-content.cp-angebote-popup,
.mfp-content .cp-angebote-popup {
    max-width: 920px !important;
    width: min(920px, calc(100vw - 24px)) !important;
    margin: 0 auto !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
}

/* Red/dark popup surface */
body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup .modal-content,
.mfp-content #custom-content.cp-angebote-popup .modal-content,
.mfp-content .cp-angebote-popup .modal-content {
    background:
        radial-gradient(circle at top right, rgba(255, 88, 88, 0.18), transparent 18rem),
        linear-gradient(180deg, #351010 0%, #1b0909 100%) !important;
    border: 1px solid rgba(255, 105, 105, 0.35) !important;
    border-radius: 22px !important;
    color: #ffffff !important;
    box-shadow: 0 40px 100px rgba(0,0,0,0.78) !important;
    overflow: hidden !important;
}

/* Remove white Bootstrap backgrounds inside the Angebot popup */
body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup .modal-body,
.mfp-content #custom-content.cp-angebote-popup .modal-body,
.mfp-content .cp-angebote-popup .modal-body,
body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup .form-group,
.mfp-content #custom-content.cp-angebote-popup .form-group,
.mfp-content .cp-angebote-popup .form-group {
    background: transparent !important;
    color: #ffffff !important;
}

/* Title badge */
body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup .cp-angebote-popup-title span,
.mfp-content #custom-content.cp-angebote-popup .cp-angebote-popup-title span,
.mfp-content .cp-angebote-popup .cp-angebote-popup-title span {
    background: rgba(100,255,50,0.14) !important;
    color: #dfffd5 !important;
    border: 1px solid rgba(100,255,50,0.18) !important;
}

/* Labels */
body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup label,
body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup .col-form-label,
.mfp-content #custom-content.cp-angebote-popup label,
.mfp-content #custom-content.cp-angebote-popup .col-form-label,
.mfp-content .cp-angebote-popup label,
.mfp-content .cp-angebote-popup .col-form-label {
    color: rgba(255,255,255,0.92) !important;
    font-weight: 800 !important;
}

/* Inputs/selects */
body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup select,
body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup input[type="text"],
body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup .form-control,
.mfp-content #custom-content.cp-angebote-popup select,
.mfp-content #custom-content.cp-angebote-popup input[type="text"],
.mfp-content #custom-content.cp-angebote-popup .form-control,
.mfp-content .cp-angebote-popup select,
.mfp-content .cp-angebote-popup input[type="text"],
.mfp-content .cp-angebote-popup .form-control {
    background: rgba(0,0,0,0.28) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup select option,
.mfp-content #custom-content.cp-angebote-popup select option,
.mfp-content .cp-angebote-popup select option {
    background: #ffffff !important;
    color: #111111 !important;
}

/* Radio/check options */
body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup input[type="radio"],
body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup input[type="checkbox"],
.mfp-content #custom-content.cp-angebote-popup input[type="radio"],
.mfp-content #custom-content.cp-angebote-popup input[type="checkbox"],
.mfp-content .cp-angebote-popup input[type="radio"],
.mfp-content .cp-angebote-popup input[type="checkbox"] {
    accent-color: var(--cp-green) !important;
}

/* Button row */
body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup .form-group.row:last-of-type .cp-angebote-popup-control,
body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup .form-group.row:last-of-type .col-sm-10,
.mfp-content #custom-content.cp-angebote-popup .form-group.row:last-of-type .cp-angebote-popup-control,
.mfp-content #custom-content.cp-angebote-popup .form-group.row:last-of-type .col-sm-10,
.mfp-content .cp-angebote-popup .form-group.row:last-of-type .cp-angebote-popup-control,
.mfp-content .cp-angebote-popup .form-group.row:last-of-type .col-sm-10 {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Primary and close buttons */
body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup #myb,
.mfp-content #custom-content.cp-angebote-popup #myb,
.mfp-content .cp-angebote-popup #myb {
    flex: 0 0 auto !important;
    min-width: 210px !important;
    min-height: 50px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, var(--cp-green), var(--cp-green-dark)) !important;
    color: #050505 !important;
    font-weight: 900 !important;
    box-shadow: 0 16px 32px rgba(100,255,50,0.22) !important;
}

body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup #close,
body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup .cp-angebote-close,
.mfp-content #custom-content.cp-angebote-popup #close,
.mfp-content #custom-content.cp-angebote-popup .cp-angebote-close,
.mfp-content .cp-angebote-popup #close,
.mfp-content .cp-angebote-popup .cp-angebote-close {
    flex: 0 0 auto !important;
    min-width: 140px !important;
    min-height: 50px !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
}

/* Mobile: stack only on mobile */
@media (max-width: 767px) {
    body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup,
    .mfp-content #custom-content.cp-angebote-popup,
    .mfp-content .cp-angebote-popup {
        width: calc(100vw - 14px) !important;
    }

    body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup .form-group.row:last-of-type .cp-angebote-popup-control,
    body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup .form-group.row:last-of-type .col-sm-10,
    .mfp-content #custom-content.cp-angebote-popup .form-group.row:last-of-type .cp-angebote-popup-control,
    .mfp-content #custom-content.cp-angebote-popup .form-group.row:last-of-type .col-sm-10,
    .mfp-content .cp-angebote-popup .form-group.row:last-of-type .cp-angebote-popup-control,
    .mfp-content .cp-angebote-popup .form-group.row:last-of-type .col-sm-10 {
        flex-direction: column !important;
    }

    body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup #myb,
    body.cp-angebote-page .mfp-content #custom-content.cp-angebote-popup #close,
    .mfp-content #custom-content.cp-angebote-popup #myb,
    .mfp-content #custom-content.cp-angebote-popup #close,
    .mfp-content .cp-angebote-popup #myb,
    .mfp-content .cp-angebote-popup #close {
        width: 100% !important;
        min-width: 100% !important;
    }
}


/* =========================================================
   V14 EXTRA SELECT DESIGN FIX
   Scope: Angebote popup extra rows only.
   Purpose: make dynamically added + extra select rows clean and professional.
   No PHP logic / SQL / cart / order changes.
   ========================================================= */

.mfp-content .cp-angebote-popup [id^="extraP"],
.mfp-content .cp-angebote-popup [id^="extraN"],
.mfp-content .cp-angebote-popup [id^="extraSS"] {
    grid-column: 2 / 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: -4px 0 4px 0 !important;
    display: grid !important;
    gap: 9px !important;
}

.mfp-content .cp-angebote-popup [id^="extraP"] > div,
.mfp-content .cp-angebote-popup [id^="extraN"] > div,
.mfp-content .cp-angebote-popup [id^="extraSS"] > div,
.mfp-content .cp-angebote-popup .cp-angebote-extra-row {
    width: min(100%, 430px) !important;
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 46px !important;
    padding: 6px 8px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.055) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}

.mfp-content .cp-angebote-popup .cp-angebote-extra-plus {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--cp-green), var(--cp-green-dark)) !important;
    color: #050505 !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.mfp-content .cp-angebote-popup .cp-angebote-extra-select,
.mfp-content .cp-angebote-popup [id^="extraP"] select,
.mfp-content .cp-angebote-popup [id^="extraN"] select,
.mfp-content .cp-angebote-popup [id^="extraSS"] select {
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
    padding: 7px 38px 7px 12px !important;
    margin: 0 !important;
    background-color: rgba(0,0,0,0.26) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.mfp-content .cp-angebote-popup input[id^="addEP"],
.mfp-content .cp-angebote-popup input[id^="addEN"],
.mfp-content .cp-angebote-popup input[id^="addESS"] {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 0 !important;
    background: linear-gradient(135deg, var(--cp-green), var(--cp-green-dark)) !important;
    color: #050505 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 42px !important;
    box-shadow: 0 10px 22px rgba(100,255,50,0.18) !important;
}

.mfp-content .cp-angebote-popup input[id^="addEP"]:hover,
.mfp-content .cp-angebote-popup input[id^="addEN"]:hover,
.mfp-content .cp-angebote-popup input[id^="addESS"]:hover {
    filter: brightness(1.06) !important;
}

@media (max-width: 991px) {
    .mfp-content .cp-angebote-popup [id^="extraP"],
    .mfp-content .cp-angebote-popup [id^="extraN"],
    .mfp-content .cp-angebote-popup [id^="extraSS"] {
        grid-column: 1 / -1 !important;
    }

    .mfp-content .cp-angebote-popup [id^="extraP"] > div,
    .mfp-content .cp-angebote-popup [id^="extraN"] > div,
    .mfp-content .cp-angebote-popup [id^="extraSS"] > div,
    .mfp-content .cp-angebote-popup .cp-angebote-extra-row {
        width: 100% !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
    }
}

/* =========================================================
   V15 EXTRA SELECT ROW POLISH
   Scope: Angebote popup dynamic extra rows only.
   Purpose: keep the first option visibly selected and replace the small + marker
   beside each select with a clear "Mit Extra:" label.
   ========================================================= */

.mfp-content .cp-angebote-popup [id^="extraP"] > div,
.mfp-content .cp-angebote-popup [id^="extraN"] > div,
.mfp-content .cp-angebote-popup [id^="extraSS"] > div {
    width: min(100%, 430px) !important;
    display: block !important;
    min-height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.mfp-content .cp-angebote-popup .cp-angebote-extra-row {
    width: min(100%, 430px) !important;
    display: grid !important;
    grid-template-columns: 96px minmax(190px, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 52px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.mfp-content .cp-angebote-popup .cp-angebote-extra-label {
    min-width: 86px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(100,255,50,0.13) !important;
    border: 1px solid rgba(100,255,50,0.28) !important;
    color: var(--cp-green) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.mfp-content .cp-angebote-popup .cp-angebote-extra-select,
.mfp-content .cp-angebote-popup [id^="extraP"] select,
.mfp-content .cp-angebote-popup [id^="extraN"] select,
.mfp-content .cp-angebote-popup [id^="extraSS"] select {
    width: 100% !important;
    min-width: 190px !important;
    min-height: 40px !important;
    height: 40px !important;
    border-radius: 11px !important;
    padding: 8px 38px 8px 13px !important;
    margin: 0 !important;
    background-color: rgba(0,0,0,0.28) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    color: #fff !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    appearance: auto !important;
}

.mfp-content .cp-angebote-popup .cp-angebote-extra-select option,
.mfp-content .cp-angebote-popup [id^="extraP"] select option,
.mfp-content .cp-angebote-popup [id^="extraN"] select option,
.mfp-content .cp-angebote-popup [id^="extraSS"] select option {
    background: #2b080b !important;
    color: #fff !important;
}

.mfp-content .cp-angebote-popup input[id^="addEP"],
.mfp-content .cp-angebote-popup input[id^="addEN"],
.mfp-content .cp-angebote-popup input[id^="addESS"] {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(100,255,50,0.45) !important;
    background: linear-gradient(135deg, var(--cp-green), var(--cp-green-dark)) !important;
    color: #081002 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 44px !important;
    text-align: center !important;
    box-shadow: 0 8px 18px rgba(100,255,50,0.22), inset 0 1px 0 rgba(255,255,255,0.26) !important;
    cursor: pointer !important;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease !important;
}

.mfp-content .cp-angebote-popup input[id^="addEP"]:hover,
.mfp-content .cp-angebote-popup input[id^="addEN"]:hover,
.mfp-content .cp-angebote-popup input[id^="addESS"]:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 11px 24px rgba(100,255,50,0.28), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

@media (max-width: 575px) {
    .mfp-content .cp-angebote-popup .cp-angebote-extra-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .mfp-content .cp-angebote-popup .cp-angebote-extra-label {
        width: fit-content !important;
    }

    .mfp-content .cp-angebote-popup .cp-angebote-extra-select,
    .mfp-content .cp-angebote-popup [id^="extraP"] select,
    .mfp-content .cp-angebote-popup [id^="extraN"] select,
    .mfp-content .cp-angebote-popup [id^="extraSS"] select {
        min-width: 100% !important;
    }
}

/* =========================================================
   V16 EXTRA SELECT ROW CLEANUP
   Scope: Angebote popup dynamic extra rows only.
   Purpose: remove the boxed label/container look and display:
   Mit Extra:  [select]
   ========================================================= */

.mfp-content .cp-angebote-popup [id^="extraP"],
.mfp-content .cp-angebote-popup [id^="extraN"],
.mfp-content .cp-angebote-popup [id^="extraSS"] {
    grid-column: 2 / 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: -2px 0 8px 0 !important;
    display: grid !important;
    gap: 8px !important;
}

.mfp-content .cp-angebote-popup [id^="extraP"] > div,
.mfp-content .cp-angebote-popup [id^="extraN"] > div,
.mfp-content .cp-angebote-popup [id^="extraSS"] > div {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.mfp-content .cp-angebote-popup .cp-angebote-extra-row {
    width: min(100%, 520px) !important;
    max-width: 100% !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.mfp-content .cp-angebote-popup .cp-angebote-extra-label {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 86px !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--cp-green) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.mfp-content .cp-angebote-popup .cp-angebote-extra-select,
.mfp-content .cp-angebote-popup [id^="extraP"] select,
.mfp-content .cp-angebote-popup [id^="extraN"] select,
.mfp-content .cp-angebote-popup [id^="extraSS"] select {
    flex: 0 1 260px !important;
    width: 260px !important;
    max-width: 100% !important;
    min-width: 220px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 8px 38px 8px 13px !important;
    border-radius: 11px !important;
    background-color: rgba(0,0,0,0.32) !important;
    border: 1px solid rgba(255,255,255,0.24) !important;
    color: #fff !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    appearance: auto !important;
}

@media (max-width: 991px) {
    .mfp-content .cp-angebote-popup [id^="extraP"],
    .mfp-content .cp-angebote-popup [id^="extraN"],
    .mfp-content .cp-angebote-popup [id^="extraSS"] {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 575px) {
    .mfp-content .cp-angebote-popup .cp-angebote-extra-row {
        width: 100% !important;
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 7px !important;
    }

    .mfp-content .cp-angebote-popup .cp-angebote-extra-label {
        min-width: 0 !important;
    }

    .mfp-content .cp-angebote-popup .cp-angebote-extra-select,
    .mfp-content .cp-angebote-popup [id^="extraP"] select,
    .mfp-content .cp-angebote-popup [id^="extraN"] select,
    .mfp-content .cp-angebote-popup [id^="extraSS"] select {
        width: 100% !important;
        min-width: 100% !important;
        flex-basis: auto !important;
    }
}


/* =========================================================
   V17 MOBILE FINAL FIXES
   Scope: Angebote page and Angebot popup only.
   Fixes:
   1) Allow clicking the popup background to close the popup.
   2) Remove unnecessary mobile card whitespace before the Bestellung button.
   3) Make mobile popup select text fully visible.
   No PHP logic / SQL / cart / order changes.
   ========================================================= */

/* Mobile Angebot cards: because mobile has one card per row, do not force equal-height spacing. */
@media (max-width: 991px) {
    body.cp-angebote-page .cp-angebote-section > .container {
        width: calc(100% - 24px) !important;
    }

    body.cp-angebote-page .cp-angebote-grid {
        align-items: start !important;
        gap: 18px !important;
    }

    body.cp-angebote-page .cp-angebot-card,
    body.cp-angebote-page .cp-angebot-card-large,
    body.cp-angebote-page .cp-angebot-card-small {
        height: auto !important;
        min-height: 0 !important;
        padding: 18px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body.cp-angebote-page .cp-angebot-items,
    body.cp-angebote-page .cp-angebot-items-two-cols {
        flex: 0 0 auto !important;
        margin-bottom: 14px !important;
        align-content: start !important;
    }

    body.cp-angebote-page .cp-angebot-add-button {
        margin-top: 4px !important;
        width: 100% !important;
        flex: 0 0 auto !important;
    }
}

@media (max-width: 575px) {
    body.cp-angebote-page .cp-angebot-card,
    body.cp-angebote-page .cp-angebot-card-large,
    body.cp-angebote-page .cp-angebot-card-small {
        padding: 16px !important;
    }

    body.cp-angebote-page .cp-angebot-item {
        grid-template-columns: 56px 42px minmax(0, 1fr) !important;
        min-height: 68px !important;
        padding: 9px 12px !important;
    }
}

/* Mobile popup: give selects enough height and font size so selected text is not clipped. */
@media (max-width: 767px) {
    .mfp-content .cp-angebote-popup .modal-body {
        padding: 18px !important;
    }

    .mfp-content .cp-angebote-popup .cp-angebote-popup-row,
    .mfp-content .cp-angebote-popup .form-group.row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        align-items: stretch !important;
        margin-bottom: 14px !important;
    }

    .mfp-content .cp-angebote-popup .col-sm-10,
    .mfp-content .cp-angebote-popup .col-sm-2,
    .mfp-content .cp-angebote-popup-control {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .mfp-content .cp-angebote-popup select,
    .mfp-content .cp-angebote-popup .form-control,
    .mfp-content .cp-angebote-popup input[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 12px 36px 12px 14px !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .mfp-content .cp-angebote-popup .cp-angebote-extra-select,
    .mfp-content .cp-angebote-popup [id^="extraP"] select,
    .mfp-content .cp-angebote-popup [id^="extraN"] select,
    .mfp-content .cp-angebote-popup [id^="extraSS"] select {
        width: 100% !important;
        min-width: 0 !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 11px 36px 11px 14px !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    .mfp-content .cp-angebote-popup label,
    .mfp-content .cp-angebote-popup .col-form-label {
        line-height: 1.25 !important;
    }
}


/* =========================================================
   V18 FINAL MOBILE + POPUP SAFETY
   Scope: Angebote page only.
   - Mobile offer cards must shrink to their real content height.
   - Bestellung button follows directly after items on mobile.
   - Popup background closes manually via JS; content clicks stay functional.
   ========================================================= */
@media (max-width: 991px) {
    body.cp-angebote-page .cp-angebote-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        align-items: start !important;
        gap: 16px !important;
    }

    body.cp-angebote-page .cp-angebot-card,
    body.cp-angebote-page .cp-angebot-card-large,
    body.cp-angebote-page .cp-angebot-card-small,
    body.cp-angebote-page article.cp-angebot-card.pricing-entry {
        align-self: start !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: block !important;
        padding: 16px !important;
        margin-bottom: 0 !important;
    }

    body.cp-angebote-page .cp-angebot-card-header {
        margin-bottom: 12px !important;
    }

    body.cp-angebote-page .cp-angebot-items,
    body.cp-angebote-page .cp-angebot-items-two-cols {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        align-content: start !important;
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-bottom: 12px !important;
        padding-bottom: 0 !important;
    }

    body.cp-angebote-page .cp-angebot-item {
        height: auto !important;
        min-height: 62px !important;
    }

    body.cp-angebote-page .cp-angebot-add-button {
        margin-top: 0 !important;
        flex: none !important;
        width: 100% !important;
    }
}

@media (max-width: 575px) {
    body.cp-angebote-page .cp-angebote-section > .container {
        width: calc(100% - 18px) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.cp-angebote-page .cp-angebot-card,
    body.cp-angebote-page .cp-angebot-card-large,
    body.cp-angebote-page .cp-angebot-card-small,
    body.cp-angebote-page article.cp-angebot-card.pricing-entry {
        border-radius: 22px !important;
    }
}


/* =========================================================
   V19 MOBILE CHECKOUT BUTTON FIX
   Scope: Angebote page only.
   Purpose: On mobile, the checkout button is no longer a floating
   element that covers the Angebote cards while scrolling. It becomes
   a normal full-width button under the Angebote content/cart area.
   ========================================================= */
@media (max-width: 991px) {
    body.cp-angebote-page #loadTran.cartbody {
        position: static !important;
        margin: 18px 0 0 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        overflow: visible !important;
    }

    body.cp-angebote-page #loadTran.cartbody > hr,
    body.cp-angebote-page #loadTran.cartbody #cart > hr {
        display: none !important;
    }

    body.cp-angebote-page #loadTran.cartbody #cart {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.cp-angebote-page #loadTran.cartbody #findPOS.onlyWeb {
        display: none !important;
    }

    body.cp-angebote-page #loadTran.cartbody .fixedElement,
    body.cp-angebote-page #loadTran.cartbody .fixedElement2 {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 14px 0 0 0 !important;
        padding: 0 !important;
        z-index: auto !important;
        display: block !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    body.cp-angebote-page #loadTran.cartbody .fixedElement .checkout,
    body.cp-angebote-page #loadTran.cartbody .fixedElement2 .checkout,
    body.cp-angebote-page #loadTran.cartbody #findPOS .checkout {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 58px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 12px 14px !important;
        border-radius: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.15 !important;
    }

    body.cp-angebote-page #loadTran.cartbody .fixedElement .checkout img,
    body.cp-angebote-page #loadTran.cartbody .fixedElement2 .checkout img,
    body.cp-angebote-page #loadTran.cartbody #findPOS .checkout img {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        object-fit: contain !important;
        margin: 0 !important;
    }

    body.cp-angebote-page #loadTran.cartbody .fixedElement .checkout span,
    body.cp-angebote-page #loadTran.cartbody .fixedElement .checkout font,
    body.cp-angebote-page #loadTran.cartbody .fixedElement .checkout b,
    body.cp-angebote-page #loadTran.cartbody .fixedElement2 .checkout span,
    body.cp-angebote-page #loadTran.cartbody .fixedElement2 .checkout font,
    body.cp-angebote-page #loadTran.cartbody .fixedElement2 .checkout b,
    body.cp-angebote-page #loadTran.cartbody #findPOS .checkout span,
    body.cp-angebote-page #loadTran.cartbody #findPOS .checkout font,
    body.cp-angebote-page #loadTran.cartbody #findPOS .checkout b {
        font-size: clamp(14px, 3.8vw, 17px) !important;
        line-height: 1.15 !important;
        white-space: normal !important;
    }
}