/*
 * ============================================================
 *  JUBILER TINA – pakiet poprawek CSS
 *  Plik: catalog/view/theme/jewelrythemes03/stylesheet/fixes.css
 *  Dołącz w OSTATNIEJ linii atstyle.min.css lub jako osobny link:
 *  <link href="...stylesheet/fixes.css?v=1.0" rel="stylesheet">
 * ============================================================
 */

/* ═══════════════════════════════════════════════════════════
   1. STOPKA – PEŁNA SZEROKOŚĆ
   ─────────────────────────────────────────────────────────
   PRZYCZYNA BŁĘDU: footer ma background:#f7f7f7, ale jest
   zagnieżdżony w strukturze Bootstrap gdzie div.container
   ogranicza szerokość do ~1170px. Tło renderuje się tylko
   na tej szerokości, nie na całym viewport.
   ROZWIĄZANIE: negative margin trick – wyciągamy footer
   poza ograniczenia rodzica za pomocą full-bleed pattern.
   ═══════════════════════════════════════════════════════════ */

footer {
    background-color: #f7f7f7;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-top: 20px;
    margin-top: 50px;
    /* Usuwamy margin-top z mobile mediaqueries (812px patch) */
    overflow: hidden; /* zabezpieczenie przed poziomym scrollem */
}

/* Wewnętrzny kontener stopki – wyśrodkowanie treści */
footer .footer_center {
    max-width: 1170px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    background-color: transparent; /* transparentny – tło z <footer> */
}

/* Dolny pasek stopki – ciemniejszy odcień dla wyraźnego podziału */
.footer_bottom_outer {
    background-color: #ebebeb; /* był #f7f7f7 – identyczny jak stopka = niewidoczny podział */
    width: 100%;
}

/* Fix dla mobile (812px override który ustawia margin-top:0) */
@media only screen and (max-width: 812px) {
    footer {
        margin-top: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   2. BŁĄD: tdvideo zamiast td, video (literówka w reset CSS)
   ─────────────────────────────────────────────────────────
   W oryginale linia: ...table td,video,tfoot,th...
   zawiera "tdvideo" zamiast "td, video" – brakuje spacji/przecinka.
   Dodajemy brakującą regułę dla elementu video.
   ═══════════════════════════════════════════════════════════ */

video {
    border: 0 none;
    margin: 0;
    padding: 0;
    outline: 0;
}

/* ═══════════════════════════════════════════════════════════
   3. BŁĄD: .list-inline li:nth-child(3) { display:none }
   ─────────────────────────────────────────────────────────
   Ta reguła ukrywa 3. element KAŻDEJ listy .list-inline
   na stronie (łącznie z nawigacją, stopką itd.).
   Prawdopodobnie chodziło o ukrycie konkretnego elementu
   w headerze (waluta/język). Zakres reguły jest zbyt szeroki.
   ═══════════════════════════════════════════════════════════ */

/* Przywracamy widoczność dla list-inline które NIE są w headerze */
.footer_column .list-unstyled li:nth-child(3),
.nav.nav-tabs li:nth-child(3),
.breadcrumb li:nth-child(3) {
    display: list-item !important;
}

/* ═══════════════════════════════════════════════════════════
   4. BŁĄD: container-fluid klasa bez selektora
   ─────────────────────────────────────────────────────────
   Linia: "container-fluid remove-padding15-left
   remove-padding15-right .f-8{font-size:...}"
   Brakuje kropki i hash przed nazwą klasy – reguła jest
   inwalidna i ignorowana przez przeglądarkę.
   ═══════════════════════════════════════════════════════════ */

/* Poprawna reguła (jeśli była intencjonalna): */
.container-fluid.remove-padding15-left.remove-padding15-right .f-8 {
    font-size: 0.571em;
}

/* ═══════════════════════════════════════════════════════════
   5. BRAK IKONY INSTAGRAM W STOPCE
   ─────────────────────────────────────────────────────────
   Instagram jest wymieniony w schema.org i w linku nawigacji
   ale brakuje go w ikonach social media w stopce (jest tylko
   Facebook + Google). Musisz dodać go w twig stopki, ale tu
   przygotowujemy styl.
   ═══════════════════════════════════════════════════════════ */

.social-link li a .fa-instagram:hover {
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   6. UX: IKONY SOCIAL MEDIA – powiększenie strefy klikalności
   ─────────────────────────────────────────────────────────
   Aktualne ikony mają 30x30px – za małe dla mobile (min 44x44px wg WCAG).
   ═══════════════════════════════════════════════════════════ */

footer .social-link li a i {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 1.3em;
    border-radius: 50%;
    transition: background-color 0.3s, color 0.3s;
}

footer .social-link li {
    margin-right: 5px;
}

/* ═══════════════════════════════════════════════════════════
   7. UX: PRZYCISK "DODAJ DO KOSZYKA" – poprawki
   ─────────────────────────────────────────────────────────
   Aktualny styl .btn-primary ma border: 1px solid #258BB3
   (niebieski) ale tło czarne – niespójność kolorystyczna.
   ═══════════════════════════════════════════════════════════ */

.btn-primary {
    border-color: #000 !important; /* zamiast niebieski #258BB3 */
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
}

/* ═══════════════════════════════════════════════════════════
   8. UX: ZAKŁADKI PRODUKTU – aktywna zakładka
   ─────────────────────────────────────────────────────────
   Aktualne tło aktywnej zakładki to #ddd – mało widoczne.
   Dodajemy wyraźny accent.
   ═══════════════════════════════════════════════════════════ */

#tabs_info .nav > li.active > a,
#tabs_info .nav > li.active > a:hover,
#tabs_info .nav > li.active > a:focus {
    border-top: 3px solid #bc8246 !important; /* złoty – główny kolor marki */
    background: #fff;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   9. UX: SEKCJA TAGÓW – czytelniejsze tagi jako "chips"
   ─────────────────────────────────────────────────────────
   Tagi są teraz zwykłymi linkami. Dodajemy styl pill/chip.
   ═══════════════════════════════════════════════════════════ */

.pro_tag p a {
    display: inline-block;
    padding: 3px 10px;
    margin: 3px 2px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 12px;
    color: #555;
    transition: background-color 0.2s, color 0.2s;
}

.pro_tag p a:hover {
    background-color: #bc8246;
    color: #fff;
    border-color: #bc8246;
}

/* ═══════════════════════════════════════════════════════════
   10. UX: PRICE – stare ceny kolorystycznie wyraźniejsze
   ─────────────────────────────────────────────────────────
   .price-old ma już text-decoration:line-through i color:#4d0000
   ale .price-new nie ma żadnego wyraźnego wyróżnienia.
   ═══════════════════════════════════════════════════════════ */

.price-new,
.price-new-live {
    color: #237a23 !important; /* ciemna zieleń – cena obniżona */
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   11. UX: CART DROPDOWN – mobilna szerokość
   ─────────────────────────────────────────────────────────
   W mobile CSS jest #cart .dropdown-menu {width:245px} ale
   na małych ekranach (np. 320px) to nadal za dużo.
   ═══════════════════════════════════════════════════════════ */

@media only screen and (max-width: 360px) {
    #cart .dropdown-menu {
        width: calc(100vw - 20px) !important;
        right: 0;
        left: auto;
    }
}

/* ═══════════════════════════════════════════════════════════
   12. UX: BREADCRUMB – ostatni element jako nieaktywny
   ─────────────────────────────────────────────────────────
   Ostatni element breadcrumb (aktywna strona) powinien
   wyglądać inaczej niż klikalne linki.
   ═══════════════════════════════════════════════════════════ */

.breadcrumb.product_page li:last-child a {
    color: #555;
    font-weight: 600;
    pointer-events: none;
    cursor: default;
}

/* ═══════════════════════════════════════════════════════════
   13. ACCESSIBILITY: focus widoczny (WCAG 2.1 AA)
   ─────────────────────────────────────────────────────────
   Oryginalne: :focus { outline: 0 } – całkowite usunięcie
   outline jest błędem dostępności. Przywracamy dla
   elementów interaktywnych.
   ═══════════════════════════════════════════════════════════ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #bc8246 !important;
    outline-offset: 2px !important;
}

/* ═══════════════════════════════════════════════════════════
   14. PERFORMANCE: Tawk.to fix
   ─────────────────────────────────────────────────────────
   Aktualny kod: .tawk-footer {z-index: -1; !important}
   "!important" wewnątrz wartości jest inwalidne.
   Poprawna składnia:
   ═══════════════════════════════════════════════════════════ */

.tawk-footer {
    z-index: -1 !important;
}

.tawk-router-view {
    margin-bottom: -31px !important;
}