/*
 * Główny arkusz stylów dla strony
 * Wersja: 1.9 (dodano style dla responsywnych tabel w treści)
 * Data: 16.09.2025
 */

/* --- Ustawienia Globalne i Ciało Strony --- */
html { 
    scroll-behavior: smooth; 
}

body { 
    font-family: 'Montserrat', sans-serif; 
}

/* --- Sekcja Hero --- */
.hero-section {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* --- Nawigacja --- */
.nav-link { 
    position: relative; 
}

.nav-link::after { 
    content: ''; 
    position: absolute; 
    width: 0; 
    height: 2px; 
    bottom: -2px; 
    left: 0; 
    background-color: var(--color-primary); /* Użycie zmiennej */
    transition: width 0.3s ease; 
}

.nav-link:hover::after, 
.active::after { 
    width: 100%; 
}

/* --- Komponenty Interaktywne (Karty, Galeria) --- */
.blog-card:hover .blog-image, 
.service-card:hover .service-image,
.gallery-item:hover img { 
    transform: scale(1.05); 
}

.blog-image, 
.service-image,
.gallery-item img { 
    transition: transform 0.5s ease; 
}

.gallery-item { 
    overflow: hidden; 
}

/* --- Sekcja Bloga --- */
.blog-card { 
    opacity: 0; 
    transform: translateY(20px); 
    transition: all 0.5s ease; 
}

.blog-card.show { 
    opacity: 1; 
    transform: translateY(0); 
}

/* === STYLE DLA SEKCJI USŁUGI === */
.service-card {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.service-card.show {
    opacity: 1;
    transform: translateY(0);
}

.load-more-btn { 
    transition: all 0.3s ease; 
}

.load-more-btn:disabled { 
    opacity: 0.5; 
    cursor: not-allowed; 
}

/* --- Animacje --- */
.loading-spinner { 
    display: none; 
    width: 20px; 
    height: 20px; 
    border: 2px solid #ffffff; 
    border-top: 2px solid transparent; 
    border-radius: 50%; 
    animation: spin 1s linear infinite; 
}

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

/* --- Sekcja Kontakt i Mapa --- */
.map-container iframe {
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
}

/* === Uniwersalne logo w stopce === */
.footer-logo-universal img {
    filter: grayscale(1) invert(1) brightness(2);
    transition: opacity 0.3s ease;
}

.footer-logo-universal:hover img {
    opacity: 0.8;
}

/* === STYLE: Baner Cookies === */
#cookie-consent-banner.show {
    transform: translateY(0);
}

/* === STYLE: Gadżet kontaktowy === */
#contact-widget-options.show {
    display: block;
    opacity: 1;
    transform: scale(1);
}

#contact-widget-toggle #contact-widget-icon {
    font-size: 1.5rem; /* 24px */
    line-height: 2rem; /* 32px */
}

#contact-widget-options .fab {
    font-size: 1.25rem; /* Dopasowuje rozmiar ikon brandowych */
}

#contact-widget-toggle.shake {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* === NOWE STYLE: Pływająca ikona do otwierania ustawień cookies === */
#cookie-reopen-icon {
    opacity: 0;
    transform: scale(0.8) rotate(-45deg);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#cookie-reopen-icon.show {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
/* === NOWE STYLE: Płynna animacja dla akordeonu faktury w koszyku === */
.invoice-details-container {
    transition: max-height 0.4s ease-in-out;
}

/* === NOWE STYLE: Pole-pułapka (Honeypot) dla formularzy === */
.fax-field {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}
/*
 * ===============================================
 * Sekcja: Style dla Artykułów Blogowych (.prose)
 * Wersja: 1.0
 * Opis: Poprawa czytelności i UX dla treści wpisów.
 * ===============================================
*/

/* --- Ogólne ustawienia dla kontenera z treścią --- */
.prose {
    color: #4A5568; /* Używamy koloru --color-dark */
    line-height: 1.75;
}

/* --- Nagłówki --- */
.prose h1, .prose h2, .prose h3, .prose h4 {
    color: var(--color-dark);
    font-weight: 700;
    margin-bottom: 1em; /* Zapewnia odstęp pod nagłówkiem */
    margin-top: 2em;   /* Zapewnia odstęp nad nagłówkiem */
}

.prose h3 {
    font-size: 1.5em; /* 24px */
    padding-bottom: 0.5em;
    border-bottom: 2px solid var(--color-secondary);
}

/* --- Akapity --- */
.prose p {
    margin-bottom: 1.25em; /* Standardowy odstęp między akapitami */
}

/* --- Listy (kluczowe dla skanowania treści) --- */
.prose ul {
    list-style: none; /* Usuwamy domyślne kropki */
    padding-left: 0;
    margin-bottom: 1.5em;
}

.prose ul > li {
    padding-left: 2em;
    position: relative;
    margin-bottom: 0.75em;
}

/* Tworzymy niestandardowy, stylowy punktor */
.prose ul > li::before {
    content: '✓'; /* Można zmienić na '•', '→' lub ikonę z FontAwesome */
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1.2em;
}

/* --- Linki i Wytłuszczenia --- */
.prose a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.prose a:hover {
    border-bottom-color: var(--color-primary);
}

.prose strong {
    color: var(--color-dark);
    font-weight: 700;
}
/*
 * ===============================================
 * Sekcja: Ulepszone Style dla Treści Wpisów (Prose v2.0)
 * ===============================================
*/

/* --- Lepsza Hierarchia Nagłówków --- */
.prose h2 {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700;
    color: var(--color-dark);
    margin-top: 2.5rem; /* mt-10 */
    margin-bottom: 1.5rem; /* mb-6 */
    padding-bottom: 1rem; /* pb-4 */
    border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
}

.prose h3 {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700;
    color: var(--color-dark);
    margin-top: 2rem; /* mt-8 */
    margin-bottom: 1rem; /* mb-4 */
    display: flex;
    align-items: center;
}

/* --- Listy niestandardowe (np. z ikonami) --- */
.prose .custom-list {
    list-style: none;
    padding-left: 0;
}

/* --- Tabela --- */
.prose table {
    width: 100%;
    margin-top: 1.5rem;
    border-collapse: collapse;
}
.prose th, .prose td {
    padding: 0.75rem 1rem; /* py-3 px-4 */
    border: 1px solid #e5e7eb;
    text-align: left;
}
.prose thead {
    background-color: #f9fafb; /* bg-gray-50 */
}
.prose tbody tr:hover {
    background-color: #f9fafb;
}

/* --- Podświetlenie tekstu --- */
.prose mark {
    background-color: rgba(210, 180, 140, 0.4); /* color-secondary z przezroczystością */
    padding: 0.1em 0.3em;
    border-radius: 4px;
    color: inherit;
}

/*
 * ===============================================
 * Sekcja: Dedykowane Bloki Treści
 * ===============================================
*/

/* --- Blok informacyjny (Case Study) --- */
.info-box {
    background-color: var(--color-light);
    padding: 2rem;
    border-radius: 0.5rem;
    border-left: 4px solid var(--color-primary);
}

.info-box h3 {
    border-bottom: none; /* Usuwamy globalny styl dla nagłówków wewnątrz tego bloku */
    padding-bottom: 0;
    margin-top: 0;
}

/* --- Blok Podsumowania --- */
.summary-box {
    background-color: var(--color-dark);
    color: #ffffff;
    padding: 2.5rem;
    border-radius: 0.5rem;
}
.summary-box p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
}

/* --- Blok Wezwania do Działania (CTA) --- */
.cta-box {
    text-align: center;
    background-color: var(--color-light);
    padding: 3rem 1.5rem;
    border-radius: 0.5rem;
}

.cta-box h2 {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700;
    color: var(--color-dark);
    border-bottom: none;
    padding-bottom: 0;
    margin: 0;
}
.cta-box p {
    color: #4A5568; /* text-gray-700 */
    max-width: 42rem; /* max-w-2xl */
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.cta-box .btn-cta {
    display: inline-block;
    background-color: var(--color-primary);
    color: white;
    font-weight: 700;
    padding: 0.75rem 2rem; /* py-3 px-8 */
    border-radius: 0.5rem;
    transition: background-color 0.3s;
    text-decoration: none;
    font-size: 1.125rem; /* text-lg */
}

.cta-box .btn-cta:hover {
    background-color: #6d3a17; /* Ciemniejszy wariant primary, można dostosować */
}
/*
 * ===============================================
 * Sekcja: Ulepszenia Bloków Treści v2.1
 * ===============================================
*/

/* --- Poprawiony styl dla podświetlenia <mark> --- */
.prose mark {
    background-color: rgba(var(--color-primary-rgb), 0.3); /* Użycie koloru primary z przezroczystością */
    padding: 0.1em 0.3em;
    border-radius: 4px;
    color: inherit;
}

/* --- Styl dla podświetlonego tekstu w nagłówkach --- */
.summary-box .highlighted-text {
    background-color: var(--color-primary);
    color: white;
    padding: 0.25rem 0.75rem; /* dostosuj padding do własnych preferencji */
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
/*
 * ===============================================
 * Sekcja: Nowe Bloki Treści v1.0
 * ===============================================
*/

/* --- Blok Ostrzeżenia --- */
.warning-box {
    background-color: #fef2f2; /* bg-red-50 */
    border-left: 4px solid #ef4444; /* border-red-500 */
    color: #991b1b; /* text-red-800 */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem;
}
.warning-box ul {
    list-style: none;
    padding-left: 0;
}
.warning-box strong {
    color: #b91c1c; /* text-red-700 */
}

/* --- Blok Podsumowania/Wniosków --- */
.conclusion-box {
    background-color: #f9fafb; /* bg-gray-50 */
    padding: 2rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb; /* border-gray-200 */
}
.conclusion-box h3 {
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 0;
}

/* --- Modyfikator Ciemny dla Bloku CTA --- */
.cta-box.cta-dark {
    background-color: var(--color-dark);
}
.cta-box.cta-dark h2 {
    color: #ffffff;
}
.cta-box.cta-dark p {
    color: rgba(255, 255, 255, 0.8);
}
/*
 * ===============================================
 * Sekcja: Nowe Bloki Treści v1.1
 * ===============================================
*/

/* --- Komponent: Lista Cech (ikona + tekst) --- */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* odstęp między elementami */
}
.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}
.feature-item i {
    font-size: 1.875rem; /* text-3xl */
    color: var(--color-primary);
    width: 3rem; /* w-12 */
    text-align: center;
    margin-top: 0.25rem;
}
.feature-item h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 0.5rem 0; /* reset marginesów */
    padding: 0;
    border: none;
}
.feature-item p {
    color: #4A5568; /* text-gray-700 */
    margin: 0;
}

/* --- Komponent: Siatka Kart (np. Zastosowania) --- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
}
@media (min-width: 768px) {
    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.feature-card {
    background-color: var(--color-light);
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}
.feature-card h3 {
    font-size: 1.125rem; /* text-lg */
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 0.5rem 0;
    padding: 0;
    border: none;
}
.feature-card p {
    color: #4b5563; /* text-gray-600 */
    margin: 0;
}

/* --- Modyfikator Koloru Wtórnego dla Bloku CTA --- */
.cta-box.cta-secondary {
    background-color: var(--color-secondary);
}
.cta-box.cta-secondary h2 {
    color: var(--color-dark); /* Ciemny tekst na jasnym tle */
}
.cta-box.cta-secondary p {
    color: rgba(var(--color-dark-rgb), 0.8); /* Ciemny tekst z przezroczystością */
}
/*
 * ===============================================
 * Sekcja: Ulepszenia Komponentów Treści v1.2
 * ===============================================
*/

/* --- Reset stylów nagłówków wewnątrz komponentów --- */
.summary-box h2, .summary-box h3,
.info-box h2, .info-box h3,
.conclusion-box h2, .conclusion-box h3,
.feature-card h3 {
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 0;
}

/* --- Specyficzne kolory dla nagłówków w ciemnym bloku --- */
.summary-box h2, .summary-box h3 {
    color: #ffffff;
}
.hero-section {
    position: relative; /* Umożliwia pozycjonowanie wideo w tle */
    height: 100vh; /* Przykładowa wysokość sekcji hero - np. cała wysokość widoku */
    overflow: hidden; /* Ukrywa ewentualne paski przewijania */
    display: flex; /* Do centrowania zawartości */
    align-items: center; /* Do centrowania zawartości w pionie */
    justify-content: center; /* Do centrowania zawartości w poziomie */
    color: white; /* Kolor tekstu dla lepszej czytelności na tle wideo */
    text-align: center;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1; /* Upewnij się, że wideo jest pod treścią */
}

.video-background iframe {
    width: 100%;
    height: 100%;
    /* Te style są kluczowe, aby wideo pokryło cały obszar i było responsywne */
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translate(-50%, -50%); /* Centruje wideo */
    object-fit: cover; /* Ważne, aby wideo pokrywało cały obszar bez zniekształceń */
}

.hero-content {
    position: relative;
    z-index: 2; /* Upewnij się, że zawartość jest nad wideo */
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.4); /* Lekkie przyciemnienie, aby tekst był bardziej czytelny */
    border-radius: 10px;
}
/*
 * ===============================================
 * Sekcja: Tło wideo dla Hero (YTPlayer)
 * ===============================================
*/

#YTPlayer {
    /* Ustawienie obrazka tła jako fallback, gdyby wideo się nie załadowało */
    background-image: url('../img/hero-fallback.jpg'); /* Zmień na ścieżkę do swojego obrazka */
    background-size: cover;
    background-position: center;
}

/* Lekkie przyciemnienie wideo dla lepszego kontrastu tekstu */
.mbYTP_wrapper {
    filter: brightness(0.8);
}
/*
 * ===============================================
 * Komponent: Interaktywny Slider Przed/Po v1.0
 * ===============================================
 */
.comparison-slider { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1); touch-action: pan-y; }
.comparison-slider img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; }
.comparison-slider .image-after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); }
.comparison-slider .slider-handle { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background-color: white; transform: translateX(-50%); cursor: ew-resize; z-index: 10; }
.comparison-slider .slider-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; background: white; border-radius: 50%; transform: translate(-50%, -50%); border: 3px solid var(--color-primary); display: flex; align-items: center; justify-content: center; background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M8.5 17.5L3.5 12.5L8.5 7.5M15.5 17.5L20.5 12.5L15.5 7.5" stroke="%233C2A1E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E'); background-size: 60%; background-repeat: no-repeat; background-position: center; }
/*
 * ===============================================
 * Sekcja: Ulepszona Stopka Karty Produktu v1.0
 * ===============================================
 */

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem; /* 16px */
    border-top: 1px solid #f3f4f6; /* border-gray-100 */
    gap: 1rem; /* Odstęp między ceną a przyciskiem */
}

.card-price {
    flex-shrink: 0; /* Zapobiega zmniejszaniu się bloku z ceną */
}

.card-footer .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    background-color: var(--color-primary);
    color: white;
    font-weight: 500;
    padding: 0.5rem 1rem; /* py-2 px-4 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.card-footer .cta-button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Kiedy nie ma ceny, przycisk zajmuje całą dostępną przestrzeń */
.card-price:empty + .cta-button {
    margin-left: auto;
}

/*
 * ===============================================
 * Sekcja: Responsywne Tabele w Treści Strony v1.0
 * ===============================================
 */

/* Kontener, który umożliwia przewijanie tabeli w poziomie */
.prose .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Płynne przewijanie na iOS */
    border: 1px solid #e5e7eb; /* border-gray-200 */
    border-radius: 0.5rem; /* rounded-lg */
    margin-top: 2em;
    margin-bottom: 1.5em;
}

/* Upewniamy się, że tabela wewnątrz kontenera nie jest zwężana */
.prose .table-wrapper table {
    margin-top: 0; /* Resetujemy margines, bo jest na wrapperze */
    margin-bottom: 0;
    border: none; /* Usuwamy podwójne obramowanie */
    border-radius: 0;
}

.prose .table-wrapper th,
.prose .table-wrapper td {
    white-space: nowrap; /* Zapobiega łamaniu tekstu w komórkach */
    border-top: none;
    border-left: none;
    border-right: none;
}

.prose .table-wrapper th:last-child,
.prose .table-wrapper td:last-child {
    border-right: none;
}
/* 
 * ===============================================
 * Sekcja: Zarządzanie Kolizjami Widgetów (Mobile)
 * ===============================================
*/

/* 1. Zapewniamy płynne przejścia (animacje) dla wszystkich pływających elementów */
#floating-elements-wrapper,
#orders-cart-btn,
.smart-contact-widget-wrapper, 
#contact-widget-toggle {
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease, opacity 0.3s ease !important;
}

/* 2. Reakcja na pojawienie się paska Sticky Cart (Tylko na mobile) */
@media (max-width: 768px) {
    /* Podnosimy Widget Handlowca (lewa strona) */
    body.has-sticky-cart #floating-elements-wrapper {
        bottom: 85px !important; 
    }

    /* Podnosimy brązową ikonę czatu (prawa strona) */
    body.has-sticky-cart .smart-contact-widget-wrapper,
    body.has-sticky-cart #contact-widget-toggle {
        bottom: 85px !important;
    }

    /* Podnosimy pomarańczowy koszyk (prawa strona) - musi być nad czatem i sticky cartem */
    body.has-sticky-cart #orders-cart-btn {
        bottom: 175px !important; /* 85px (sticky) + 90px (przestrzeń standardowa) */
    }
}
/* cms/assets/css/style.css */
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}