/* Extracted from the inline <style> block in pages/benefit.php.
   Part of the Bootstrap migration: page-specific CSS that isn't reused
   anywhere else gets its own file instead of living inline.

   Dead-code audit (2026-09-08): this template has exactly 2 live rows (SK id 2166,
   CZ id 2169). .gift/.relex/.zlasik/.femto/.password/.no-break/.bez-countera are
   leftover from the same "new-discount" template family as new-discount.php - none of
   them appear anywhere in this page's own markup or its CMS content (checked var3/5/7/
   9/11/13/15/17 on both live rows). .section-1 h2 was also dead: SK's var3 content uses
   an <h3>, not <h2>, and CZ's var3 field is empty (that section doesn't render there at
   all). .linkuj was kept - confirmed live in CMS content on both rows. */

#bannerTop h1 {
    font-size: 56px;
}

#bannerTop .container {
    max-width: 970px;
}

/* .benefit-wrap's own .container width (everywhere except #bannerTop) - production still
   runs pre-migration (col-sm-* grid, /css/grid.css, no real Bootstrap CDN), whose own
   .container has no tier past 1200px (1140px, unlike the shared #pocket .container rule's
   1220px at >=1366px, built for other pages). Verified via breakpoint sweep against
   production, 2026-09-08: matches at 800/1000/1200/1300px, mismatches (1220 vs 1140) at
   1366px+. !important + max-width:none needed for the same reasons as the identical fix
   on css/new-discount-page.css - Bootstrap's own .container sets max-width per breakpoint,
   which caps width regardless of !important on width alone. */
.benefit-wrap .container:not(#bannerTop .container) {
    width: 1140px !important;
    max-width: none !important;
    margin: 0 auto !important;
}
@media (max-width: 991px) {
    .benefit-wrap .container:not(#bannerTop .container) {
        width: 95% !important;
        max-width: none !important;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .benefit-wrap .container:not(#bannerTop .container) {
        width: 970px !important;
        max-width: none !important;
    }
}

/* line-height:30px added 2026-09-08: previously relied on inheriting this value from
   the parent .new-discount{line-height:30px} rule below, but an inherited value always
   loses to ANY rule that matches the element directly, regardless of specificity - the
   shared css/theme.css line-height:normal fix (for Bootstrap's own line-height:1.5 leak
   elsewhere) directly targets `p` inside #pocket, silently overriding the inherited 30px
   and shrinking these paragraphs' line spacing (found via bounding-box comparison against
   production - section-4/6/8 all measured 60-115px shorter locally). Restoring it here
   directly gives this rule enough specificity (a real class, not theme.css's zero-
   specificity :where()) to win outright. */
.new-discount p {
    margin-bottom: 30px;
    line-height: 30px;
}

.new-discount {
    padding: 60px 0px;
    font-size: 18px;
}

.new-discount h2 {
    color: #1e607d;
    font-family: 'Open Sans',sans-serif;
    font-weight: 700;
    text-transform: initial;
    font-size: 36px;
    line-height: 40px;
    margin-bottom: 30px;
}

.new-discount h3 {
    font-family: 'Open Sans',sans-serif;
    font-size: 24px;
    text-transform: initial;
    font-weight: 700;
    margin-bottom: 20px;
    color: #36c2b2;
    line-height: 30px;
}

.linkuj a:hover {
    color: #36c2b2;
}

.new-discount a:hover {
    color: #36c2b2;
}

.yellow-button a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f9b400;
    color: #FFF;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 5px;
}

.yellow-button a:hover {
    color: #fff;
}

.yellow-button a:after {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    color: #fff;
    position: relative;
    left: 5px;
}

.new-discount {
    color: #5e5e5e;
    line-height: 30px;
}

.new-discount.section-1 {
    background-size: cover;
    background-position: center center;
}

.new-discount.section-2 {
    background-size: cover;
    background-position: center center;
}

.new-discount.section-3 {
    background-size: cover;
    background-position: center center;
}

.new-discount.section-4 {
    background-size: cover;
     background-position: center center;
}

.new-discount.section-5 {
    background-size: cover;
     background-position: center center;
}

.new-discount.section-6 {
    background-size: cover;
     background-position: center center;
}

.new-discount.section-7 {
    background-size: cover;
     background-position: center center;
}

.new-discount.section-8 {
    background-size: cover;
     background-position: center center;
}

@media (max-width: 1440px){

    .new-discount.section-2 {
        background-size: cover;
    }

    .new-discount.section-3 {
        background-size: cover;
    }

    .new-discount.section-4 {
        background-size: cover;
    }

    .new-discount.section-5 {
        background-size: cover;
    }

    .new-discount.section-6 {
        background-size: cover;
    }

    .new-discount.section-7 {
        background-size: cover;
    }

    .new-discount.section-8 {
        background-size: cover;
    }

}

@media (max-width: 420px){

    .yellow-button a {
        font-size: 14px;
    }

}

@media(max-width: 420px){

    .new-discount.section-1 {
        background-size: cover;
        background-position: -150px center;
    }

}