/* =========================================================
   Claudio's Pizzeria - Angebote Page Modern V2
   Real-file package: injected from angebote.php by output buffer.
   ========================================================= */

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

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

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

/* First/intro section */
body.cp-angebote-page .heading-section,
body.cp-angebote-page .angebote-intro,
body.cp-angebote-page .special-angebote-intro {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

body.cp-angebote-page h1,
body.cp-angebote-page h2,
body.cp-angebote-page .heading-section h2 {
    color: #fff !important;
}

body.cp-angebote-page .heading-section h2,
body.cp-angebote-page h2:first-of-type,
body.cp-angebote-page .special-title {
    color: var(--cp-green) !important;
    font-size: clamp(28px, 4vw, 46px) !important;
    line-height: 1.08 !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 18px !important;
}

body.cp-angebote-page .heading-section p,
body.cp-angebote-page p {
    color: rgba(255,255,255,0.76) !important;
    line-height: 1.55 !important;
}

/* Coupon/code area if template includes same blocks as order page */
body.cp-angebote-page .cp-coupon-section-card,
body.cp-angebote-page #coupon1,
body.cp-angebote-page .cp-coupon-body {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.cp-angebote-page .cp-coupon-row {
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) 220px !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 76px !important;
    padding: 12px 16px !important;
    margin-bottom: 12px !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-coupon-icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 14px !important;
    background-size: cover !important;
    background-position: center !important;
}

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

/* Special Angebote old-card cleanup.
   Works with old board layout without requiring PHP structural changes. */
body.cp-angebote-page [class*="angebot"],
body.cp-angebote-page [class*="Angebot"],
body.cp-angebote-page [id*="angebot"],
body.cp-angebote-page [id*="Angebot"] {
    box-sizing: border-box;
}

/* JS adds cp-auto-angebot-card to the closest card-like parent of getAngebote links */
body.cp-angebote-page .cp-auto-angebot-card {
    position: relative !important;
    overflow: hidden !important;
    min-height: 360px !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.09), rgba(255,255,255,0.035)) !important;
    box-shadow: 0 24px 65px rgba(0,0,0,0.52) !important;
    padding: 24px !important;
}

/* Wood board: keep image if present but make content readable */
body.cp-angebote-page .cp-auto-angebot-card[style*="background"],
body.cp-angebote-page .cp-auto-angebot-card [style*="background"] {
    background-size: cover !important;
    background-position: center !important;
}

body.cp-angebote-page .cp-auto-angebot-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.30));
    pointer-events: none;
}

body.cp-angebote-page .cp-auto-angebot-card > * {
    position: relative;
    z-index: 1;
}

body.cp-angebote-page a[href*="getAngebote"] {
    text-decoration: none !important;
}

body.cp-angebote-page a[href*="getAngebote"] img,
body.cp-angebote-page .cp-auto-angebot-card img {
    width: 76px !important;
    height: 76px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,0.16) !important;
    background: rgba(255,255,255,0.08) !important;
}

body.cp-angebote-page .cp-auto-angebot-card,
body.cp-angebote-page .cp-auto-angebot-card p,
body.cp-angebote-page .cp-auto-angebot-card span,
body.cp-angebote-page .cp-auto-angebot-card div,
body.cp-angebote-page .cp-auto-angebot-card b {
    color: #fff !important;
}

body.cp-angebote-page .cp-auto-angebot-card [class*="preis"],
body.cp-angebote-page .cp-auto-angebot-card [class*="price"],
body.cp-angebote-page .cp-auto-angebot-card font[color="red"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(229,25,42,0.96) !important;
    color: #fff !important;
    padding: 7px 11px !important;
    border-radius: 10px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
}

body.cp-angebote-page .cp-auto-angebot-card a[href*="getAngebote"],
body.cp-angebote-page a.cp-angebot-order-link,
body.cp-angebote-page .cp-auto-angebot-card .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--cp-green), var(--cp-green-dark)) !important;
    color: #050505 !important;
    border: 0 !important;
    font-weight: 900 !important;
    padding: 10px 18px !important;
    box-shadow: 0 18px 35px rgba(100,255,50,0.18) !important;
}

/* Basket behavior, same approach as order page */
body.cp-angebote-page #loadTran.cartbody,
body.cp-angebote-page .cartbody {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !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;
}

/* 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;
}

/* getAngebote.php 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;
}

.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 .cp-angebote-popup-title {
    text-align: center !important;
    margin-bottom: 20px !important;
}

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

.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: 120px 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 {
    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 {
    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;
}

.mfp-content .cp-angebote-popup .btn[id^="add"],
.mfp-content .cp-angebote-popup button[id^="add"],
.mfp-content .cp-angebote-popup input[id^="add"] {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--cp-green), var(--cp-green-dark)) !important;
    color: #050505 !important;
    border: 0 !important;
    font-weight: 900 !important;
}

@media (max-width: 767px) {
    .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 label {
        font-size: 14px !important;
    }

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

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

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