/* === Slovenská typografia. === */
body,
body * {
    text-transform: none !important;
}
/* `::placeholder` je pseudo-element — nedosiahne ho `body *` selector vyššie */
::placeholder,
input::placeholder,
textarea::placeholder,
.select2-search__field::placeholder {
    text-transform: none !important;
}

/* === Form validation — červený border na neplatných poliach.
   Kit má `.contact__form .form-grp input { border: none }`, takže nestačí
   meniť len border-color — treba explicit border + !important. === */
.contact__form .form-grp input.is-invalid,
.contact__form .form-grp textarea.is-invalid,
.contact__form .form-grp select.is-invalid {
    border: 2px solid #B22222 !important;
    background-color: #fff5f5 !important;
}
.contact__form .form-grp input.is-invalid:focus,
.contact__form .form-grp textarea.is-invalid:focus,
.contact__form .form-grp select.is-invalid:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(178, 34, 34, 0.15);
}
/* Checkbox (GDPR `#f_sou`) — výrazný červený outline namiesto border */
.contact__form input[type="checkbox"].is-invalid {
    outline: 2px solid #B22222;
    outline-offset: 2px;
}

/* === iOS Safari fix: `background-attachment: fixed` spôsobuje rozmazaný/pixelovaný
   bg-image na mobile (známy WebKit bug). Kit má override pre `.cta__bg` ale chýba
   pre `.video__bg` a `.cta__bg-two`. Tu doplníme. === */
@media (max-width: 991.98px) {
    .video__bg,
    .cta__bg-two {
        background-attachment: scroll !important;
    }
}

/* === iOS Safari fix: hero slider (swiper fade effect) na mobile downsample-uje
   bg-image cez GPU compositing. Force-create vlastnú GPU vrstvu + skry backface
   aby sa rendering nezhoršoval počas fade prechodu medzi slidemi. === */
.slider__active .swiper-slide.slider__bg-five {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-perspective: 1000;
    perspective: 1000;
}

/* === Smooth scroll pre in-page anchory (napr. CTA "Objednať odvoz" → #objednavka-formular) === */
html {
    scroll-behavior: smooth;
}
#objednavka-formular {
    scroll-margin-top: 120px;     /* offset pre sticky-header (cca 100-130px) */
}

/* === Experience circle rotating text — väčšie uppercase písmená
   (prebíja SK typografia rule `body * { text-transform: none !important }`) === */
.experience-content .circle,
.experience-content .circle span {
    font-size: 16px !important;
    text-transform: uppercase !important;
}

/* === O firme — CTA pod textom na mobile/tablet:
   centrovať tlačidlo + spacing od obrázka pod ním === */
@media (max-width: 991.98px) {
    .about__area .about__content .tg-btn {
        display: flex;
        width: fit-content;
        margin: 30px auto 50px;
    }
}

/* ===================================================================
   odvozodpadu.eu — project-level overrides nad assets/css/main.css
   ZERO inline styles policy: všetky tunable presunuté sem.
   =================================================================== */

/* Žltý accent (P + K brand colour) */
:root {
    --pk-yellow: #ffd700;
    --pk-yellow-dark: #e6c200;
}

/* ===== Hero slider — slider__content-four (kit má biely text na dark gradient, OK) ===== */
.slider__content-four .sub-title {
    color: var(--pk-yellow);
}

/* ===== about__img-two — main + side foto layout ===== */
.about__img-two .main-img {
    border-radius: 8px;
    width: 100%;
    height: auto;
}
.about__img-two .img-two {
    border-radius: 8px;
    position: absolute;
    bottom: -30px;
    right: -30px;
    max-width: 50%;
    border: 8px solid #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.about__img-two {
    position: relative;
}

/* experience-year-two — žltý badge "30 rokov skúseností" */
.about__img-two .experience-year-two {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--pk-yellow);
    color: #000;
    padding: 18px 22px;
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
    z-index: 2;
}
.about__img-two .experience-year-two span {
    display: block;
    font-size: 0.85rem;
    line-height: 1.1;
    margin-bottom: 4px;
}
.about__img-two .experience-year-two .counter-number {
    font-size: 2.4rem;
    margin: 0;
    line-height: 1;
    color: #000;
}

/* ===== services__item — biela karta s tieňom (about/services 3-col grid) ===== */
.services__item {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    height: 100%;
    margin-bottom: 24px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.services__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}
.services__item .title {
    margin-bottom: 16px;
}
/* Stacked list variant — prepíše height:100% z grid-card defaultu */
.services__list-item {
    height: auto;
}

/* === Cennik podstránka — nadpisy o ~1/3 menšie ===
   Scope: LEN .cennik__item (main content bloky, NIE sidebar widget-y).
   Kit default: h2 ~32-40px, h3 ~24-26px, h4 ~20-22px → 2/3 hodnoty. */
.cennik__item h2,
.cennik__item h2.title,
.cennik__item h3,
.cennik__item h3.title,
.cennik__item h4,
.cennik__item h4.title {
    line-height: 1.3 !important;
}
.cennik__item h2,
.cennik__item h2.title {
    font-size: 1.6rem !important;
}
.cennik__item h3,
.cennik__item h3.title {
    font-size: 1.2rem !important;
}
.cennik__item h4,
.cennik__item h4.title {
    font-size: 1rem !important;
}

/* === Kontakt karty — od základu, žiadne kit overrides ===
   Desktop: flex (text vľavo 58%, mapa vpravo 38%, gap 24px)
   Mobile: stack (text hore, mapa dole)
   Mapa iframe: force 100% width/300px height (prebíja p-k DB attributes) */
.kontakt-card {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    margin-bottom: 30px;
}
.kontakt-card__text {
    flex: 1 1 58%;
    min-width: 0;
}
.kontakt-card__title {
    margin-bottom: 16px;
    font-size: 22px;
}
.kontakt-card__note {
    margin-top: 12px;
}
.kontakt-card__map {
    flex: 1 1 38%;
    min-width: 0;
}
.kontakt-card__map iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 320px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 6px;
    display: block;
    margin: 0;
}
@media (max-width: 767.98px) {
    .kontakt-card {
        flex-direction: column;
    }
    .kontakt-card__text,
    .kontakt-card__map {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* ===== services__list — kit default je SVG checkmark, my potrebujeme aj numbered varianta ===== */
.services__list--numbered .icon {
    background: var(--pk-yellow);
    color: #000;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 10px;
}
.services__list--numbered .icon .step-num {
    font-size: 0.9rem;
    line-height: 1;
}
.services__list--numbered {
    list-style: none;
    padding-left: 0;
}
.services__list--numbered li {
    display: flex;
    align-items: center;
    padding: 8px 0;
}

/* ===== choose__img-three — kontajner foto v choose sekcii ===== */
.choose__img-three img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ===== Utility — margin top helpers ===== */
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-50 { margin-top: 50px !important; }

/* ===== CTA — green-dumpster background needs dark overlay aby bol biely text čitateľný ===== */
.cta__area-three .cta__bg-three {
    background-size: cover;
    background-position: center;
    position: absolute;
    inset: 0;
    z-index: -1;
}
.cta__area-three .cta__bg-three::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.cta__area-three .cta__content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 100px 0;
}
.cta__area-three .cta__content .title {
    color: #fff;
}
.cta__area-three .cta__content .title span {
    color: var(--pk-yellow);
}

/* ===== Breadcrumb hero — biely text + dark overlay nad foto ===== */
.breadcrumb__area.breadcrumb__bg {
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 140px 0 100px;
    z-index: 1;
}
.breadcrumb__area.breadcrumb__bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
}
.breadcrumb__area.breadcrumb__bg .breadcrumb__content .title {
    color: #fff;
}
.breadcrumb__area.breadcrumb__bg .breadcrumb a {
    color: var(--pk-yellow);
}
.breadcrumb__area.breadcrumb__bg .breadcrumb,
.breadcrumb__area.breadcrumb__bg .breadcrumb-separator,
.breadcrumb__area.breadcrumb__bg .breadcrumb span[property] {
    color: #fff;
}

/* ===== Section padding utility presahy ako v kit-e ===== */
.section-py-130 {
    padding: 100px 0;
}
.grey-bg {
    background: #f7f7f7;
}

/* ===== Pricing tables ===== */
.pricing-table-wrap {
    margin-top: 30px;
}
.pricing-table-wrap .pricing-heading {
    margin-top: 30px;
    margin-bottom: 16px;
}
.pricing-table-wrap .table {
    background: #fff;
}
.pricing-table-wrap .table thead tr {
    background: var(--pk-yellow);
    color: #000;
}
.pricing-table-wrap .table thead th {
    border-color: var(--pk-yellow-dark);
}

/* about__img — 3-foto grid s rounded rohy (cennik intro) */
.about__img-grid img,
.about__img img {
    border-radius: 8px;
    width: 100%;
    height: auto;
}

/* CTA stack mb buttons spacing */
.cta-buttons .tg-btn + .tg-btn {
    margin-left: 10px;
}

/* ===== Form helpers ===== */
.dnstyle {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}
/* === Kit `.contact__form` scope extensions ===
   Kit `contact.html` form (single-col, no selects, no checkbox) sa rozširuje pre
   objednávkový modul: 2-col grid (col-md-6), selecty, checkbox súhlas.
   Pravidlá replikujú existujúce kit patterny z `.contact__form-two` ale matchujú
   `.contact__form` background (gray-3, kit input default). */

/* 2-col grid gutter — kit ma `.contact__form-two .row { --bs-gutter-x: 10px }` */
.contact__form .row {
    --bs-gutter-x: 10px;
}

/* Select-grp v .contact__form scope — kit má styling len pre .contact__form-two .select-grp.
   Tu replikujeme s gray-3 background (matchuje .contact__form input). */
.contact__form .form-grp.select-grp {
    position: relative;
}
.contact__form .form-grp.select-grp select {
    background-color: var(--tg-color-gray-3);
    border: none;
    color: var(--tg-heading-color);
    font-weight: 400;
    font-size: 15px;
    border-radius: 6px;
    outline: none;
    padding: 15px 40px 15px 23px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    line-height: 1.2;
    height: 50px;
    cursor: pointer;
}
.contact__form .form-grp.select-grp::after {
    content: "\f078";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    right: 22px;
    font-size: 14px;
    color: var(--tg-heading-color);
    line-height: 1;
    pointer-events: none;
}

/* Checkbox-grp — kit má len v `.comment-form` scope, replikujeme pre `.contact__form`. */
.contact__form .form-grp.checkbox-grp {
    display: flex;
    align-items: flex-start;
    margin: 10px 0 25px;
}
.contact__form .form-grp.checkbox-grp input {
    width: 22px;
    height: 22px;
    margin-right: 9px;
    margin-top: 3px;
    cursor: pointer;
    flex: 0 0 auto;
}
.contact__form .form-grp.checkbox-grp label {
    font-weight: 400;
    font-size: 16px;
    color: var(--tg-body-color);
    user-select: none;
    cursor: pointer;
}
@media (max-width: 767.98px) {
    .contact__form .form-grp.checkbox-grp input {
        width: 16px;
        height: 16px;
        margin-top: 6px;
    }
}

/* ===== Contact-specific ===== */
.contact__info-item p {
    margin-bottom: 12px;
}
.contact__note {
    font-size: 0.9rem;
    color: #666;
}
.contact__map-area {
    padding: 0;
}
.contact__map-iframe {
    border: 0;
    display: block;
}
.invoicing__box {
    background: #f7f7f7;
    padding: 30px;
    border-radius: 8px;
}

/* ===== FAQ bottom CTA — yellow accent on links ===== */
.faq__bottom-cta a {
    color: var(--pk-yellow-dark);
    font-weight: 600;
}
.faq__bottom-cta a:hover {
    text-decoration: underline;
}

/* ===== Accordion buttons — žltá akcent when expanded ===== */
/* Kit FAQ pattern: pri otvorenej otázke len text/icon žltý, pozadie ostáva
   biele (sledujeme kit's `.faq__wrap .accordion-button:not(.collapsed) { color: var(--tg-theme-primary) }`) */
.faq__wrap-four .accordion-button:not(.collapsed) {
    color: var(--pk-yellow);
    background-color: transparent;
}
.faq__wrap-four .accordion-button:focus {
    box-shadow: none;
}

/* ===== Phase 5: choose__badge — žltý overlay na fotke v Choose sekcii ===== */
.choose__img-three {
    position: relative;
}
.choose__badge {
    position: absolute;
    top: 24px;
    left: 24px;
    background: var(--pk-yellow);
    color: #000;
    padding: 14px 22px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 17px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    z-index: 2;
}
.choose__badge span {
    display: block;
}
@media (max-width: 575px) {
    .choose__badge {
        top: 12px;
        left: 12px;
        padding: 10px 16px;
        font-size: 14px;
    }
}

/* ===== Phase 5: about__img-three-photo — 3-foto layout v O firme modul 1 ===== */
.about__img-three-photo {
    position: relative;
}
.about__img-three-photo .main-img {
    width: 100%;
    border-radius: 8px;
}
.about__img-three-photo .img-two,
.about__img-three-photo .img-three {
    position: absolute;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    border: 4px solid #fff;
}
.about__img-three-photo .img-two {
    bottom: -30px;
    right: -30px;
    width: 45%;
}
.about__img-three-photo .img-three {
    top: -30px;
    right: 8%;
    width: 35%;
}
@media (max-width: 991px) {
    .about__img-three-photo .img-two,
    .about__img-three-photo .img-three {
        position: static;
        width: 48%;
        display: inline-block;
        margin-top: 16px;
    }
    .about__img-three-photo .img-three {
        margin-left: 4%;
    }
}

/* ===== Phase 5: about__img-stacked — 2-foto stacked layout v O firme modul 2 ===== */
.about__img-stacked {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.about__img-stacked img {
    width: 100%;
    border-radius: 8px;
}

/* ===== Phase 5: services__intro — uvádzacia veta nad bullet list ===== */
.services__intro {
    margin-top: 12px;
    margin-bottom: 0;
    font-weight: 500;
}

/* ===== Phase 10: services__area single widescreen photo (Bootstrap col-lg-10 handluje 10/12 narrowing) ===== */
.services__area .row.mt-50 .about__img {
    border-radius: 8px;
    overflow: hidden;
}
.services__area .row.mt-50 .about__img img {
    width: 100%;
    height: auto;
    display: block;
}

/* === Phase 10: header tweaks (index-3.html style) ===
   Kit má .slider__area-four { margin-top: 105px } predpokladajúc transparent fixed header overlay.
   Naše header__area-two je static — odstránime nadbytočný top gap.
   Logo .logo-two image kit nemá max-height — zvýrazníme image. */

.slider__area-four {
    margin-top: 0;
    position: relative;        /* nutné aby .slider-pagination (position: absolute) bola
                                  ukotvená dovnútra slidera, nie voči viewport.
                                  Kit používa .swiper-container HTML triedu (staršia Swiper API),
                                  ale swiper-bundle.min.css má position:relative len na novej .swiper
                                  triede → bez tohto override-u pagination skočí mimo slider. */
}

.tgmenu__wrap-two .logo-two img {
    max-height: 90px;
    width: auto;
}
@media (max-width: 991.98px) {
    .tgmenu__wrap-two .logo-two img {
        max-height: 70px;
    }
}