/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Template: hello-elementor
Author: Elementor Team
Description: Hello Elementor Child Theme
Version: 3.4.4.1759061172
*/

/* ==========================================================================
   FH ALINA - STYLIZACJA WOOCOMMERCE & KONFIGURATOR (BEZ TŁA STRONY)
   ========================================================================== */

:root {
    /* Koszyk, kasa i konto stoja na JASNYM tle (od 07.09.2026, po zdjeciu
       Elementora). Ciemne pola formularzy z czasow ciemnego sklepu robily
       z inputow czarne prostokaty - stad jasna paleta. */
    --fha-bg-card: #ffffff;
    --fha-bg-input: #ffffff;
    --fha-bg-obrys: #d9d3c8;
    --fha-tekst-ciemny: #1a1a1a;
    --fha-gold: #e4b85f;
    --fha-gold-light: #f0c96f;
    --fha-gold-dark: #c9a050;
    --fha-gold-10: rgba(228, 184, 95, 0.1);
    --fha-gold-20: rgba(228, 184, 95, 0.2);
    --fha-white: #ffffff;
    --fha-gray: #888888;
    --fha-gray-light: #aaaaaa;
    --fha-gray-dark: #333333;
    --fha-font-heading: 'Gotu', serif;
    --fha-font-text: 'Public Sans', sans-serif;
    --fha-radius: 8px;
    --fha-radius-lg: 12px;
    --fha-transition: all 0.3s ease;
}

/* ==========================================================================
   FORMULARZE - TYLKO WOOCOMMERCE
   ========================================================================== */

body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="password"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout input[type="number"],
body.woocommerce-checkout textarea,
body.woocommerce-checkout select,
body.woocommerce-cart input[type="text"],
body.woocommerce-cart input[type="number"],
body.woocommerce-cart textarea,
body.woocommerce-cart select,
body.woocommerce-account input[type="text"],
body.woocommerce-account input[type="email"],
body.woocommerce-account input[type="password"],
body.woocommerce-account input[type="tel"],
body.woocommerce-account textarea,
body.woocommerce-account select {
    background-color: var(--fha-bg-input) !important;
    border: 1px solid var(--fha-bg-obrys) !important;
    border-radius: var(--fha-radius) !important;
    color: var(--fha-tekst-ciemny) !important;
    padding: 12px 16px !important;
    font-family: var(--fha-font-text) !important;
    transition: var(--fha-transition) !important;
}

/* Styl dla Select2 */
body.woocommerce-checkout .select2-container--default .select2-selection--single,
body.woocommerce-account .select2-container--default .select2-selection--single {
    background-color: var(--fha-bg-input) !important;
    border: 1px solid var(--fha-bg-obrys) !important;
    border-radius: var(--fha-radius) !important;
    height: 44px !important;
}

/* ==========================================================================
   PRZYCISKI (POZOSTAJĄ Z LEKKIM ZAOBLENIEM 8px)
   ========================================================================== */

body.woocommerce-checkout .woocommerce a.button,
body.woocommerce-checkout .woocommerce button.button,
body.woocommerce-checkout .woocommerce input.button,
body.woocommerce-checkout #place_order,
body.woocommerce-cart .woocommerce a.button,
body.woocommerce-cart .woocommerce button.button,
body.woocommerce-cart .checkout-button,
body.woocommerce-account .woocommerce a.button,
body.woocommerce-account .woocommerce button.button {
    background-color: var(--fha-gold) !important;
    color: #000000 !important;
    border: none !important;
    border-radius: var(--fha-radius) !important;
    font-family: var(--fha-font-text) !important;
    font-weight: 500 !important;
    padding: 12px 28px !important;
    transition: var(--fha-transition) !important;
}

/* ==========================================================================
   KARTY I KONTENERY (ZACHOWUJĄ WŁASNE TŁO DLA CZYTELNOŚCI)
   ========================================================================== */

body.woocommerce-checkout .woocommerce table.shop_table,
body.woocommerce-cart .woocommerce table.shop_table,
body.woocommerce-account .woocommerce table.shop_table,
body.woocommerce-cart .cart-collaterals .cart_totals,
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-payment {
    background-color: var(--fha-bg-card) !important;
    border: 1px solid var(--fha-bg-obrys) !important;
    border-radius: var(--fha-radius-lg) !important;
}

/* ==========================================================================
   KONFIGURATOR ZAMÓWIEŃ (TŁO USUNIĘTE Z GŁÓWNEJ KLASY)
   ========================================================================== */

.fhalina-configurator {
    --fc-card: #151515;
    --fc-input: #111111;
    --fc-border: #333333;
    --fc-gold: #e4b85f;
    --fc-text: #ffffff;
    
    font-family: 'Public Sans', sans-serif;
    color: var(--fc-text);
    padding: 2rem;
    border-radius: 12px;
    max-width: 1400px;
    margin: 0 auto;
    /* background: var(--fc-bg); <- USUNIĘTO */
}

.fc-option {
    background: var(--fc-card);
    border: 1px solid var(--fc-border);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
}

.fc-btn {
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.fc-btn-primary {
    background: var(--fc-gold);
    color: #000 !important;
}

/* ==========================================================================
   UKRYWANIE ELEMENTÓW
   ========================================================================== */

body.woocommerce-checkout .woocommerce-breadcrumb,
body.woocommerce-cart .woocommerce-breadcrumb,
body.woocommerce-account .woocommerce-breadcrumb {
    display: none !important;
}


/* ==========================================================================
   KONFIGURATOR FOTO - BUTTONY
   ========================================================================== */

/* Wspólny styl dla wszystkich buttonów (button i label) */
button.fhk3-foto-toggle-btn,
button.fhk3-foto-ubranie-btn,
label.fhk3-foto-btn.primary {
    padding: 14px 45px !important;
    background: #e4b85f !important;
    border: 1px solid #e4b85f !important;
    border-radius: 8px !important;
    color: #000 !important;
    font-size: 1rem !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    font-family: 'Public Sans', sans-serif !important;
    display: inline-block !important;
    text-align: center !important;
}

button.fhk3-foto-toggle-btn:hover,
button.fhk3-foto-ubranie-btn:hover,
label.fhk3-foto-btn.primary:hover {
    background: #000 !important;
    border-color: #e4b85f !important;
    color: #e4b85f !important;
}

button.fhk3-foto-toggle-btn.sel,
button.fhk3-foto-ubranie-btn.sel {
    background: #e4b85f !important;
    border-color: #e4b85f !important;
    color: #000 !important;
    font-weight: 300 !important;
}
/* ------------------------------------------------------------------
   07.09.2026 - widoczne zaznaczenie w kroku "Zdjęcie".
   Wyżej w tym pliku stan zwykły i stan wybrany (.sel) miały identyczne
   deklaracje (tło #e4b85f, czarny tekst), więc kupujący nie widział,
   czy wybrał zdjęcie pojedyncze czy podwójne - a różnica w cenie to 100 zł.
   Niewybrany dostaje obrys, wybrany zostaje wypełniony, tak jak kafelki
   na pozostałych krokach konfiguratora.
   ------------------------------------------------------------------ */
button.fhk3-foto-toggle-btn,
button.fhk3-foto-ubranie-btn {
    background: #151515 !important;
    border: 1px solid #e4b85f !important;
    color: #e4b85f !important;
    font-weight: 300 !important;
}

button.fhk3-foto-toggle-btn:not(.sel):hover,
button.fhk3-foto-ubranie-btn:not(.sel):hover {
    background: #2a2a2a !important;
    color: #e4b85f !important;
}

button.fhk3-foto-toggle-btn.sel,
button.fhk3-foto-ubranie-btn.sel {
    background: #e4b85f !important;
    border-color: #e4b85f !important;
    color: #000 !important;
    font-weight: 500 !important;
}

/* ------------------------------------------------------------------
   07.09.2026 - poprawki widoku na telefonie.

   1. Baner zgody na cookie mial sztywne width:444px z box-sizing:content-box,
      wiec na ekranie 390 px rozpychal cala strone do 446 px i ucinal przycisk
      "Akceptuj wszystko". Rozpychal tez konfigurator, bo to pierwszy ekran
      po wejsciu na /zamow/.
   2. Siatka konfiguratora miala kolumny szersze niz kontener (155+135+20 gap
      przy szerokosci 300), przez co podpisy "PORCELANA" i "KRYSZTAL" ladowaly
      obok kafelkow zamiast pod nimi, a drugi wychodzil poza ekran.
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
    .cky-consent-bar {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .cky-notice-btn-wrapper .cky-btn,
    .cky-consent-bar .cky-btn {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    .fhk3-grid,
    .fhk3-grid.g2,
    .fhk3-grid.g3,
    .fhk3-grid.g4,
    .fhk3-grid.g5 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .fhk3-opt {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* 07.09.2026, ciag dalszy: elementy WEWNATRZ banera cookie tez maja sztywne
   szerokosci w px (cky-notice 402, cky-title/des/btn-wrapper 354 + padding),
   wiec samo zwezenie paska nie wystarczylo - strona dalej rozpychala sie do 436 px. */
@media (max-width: 600px) {
    .cky-consent-bar,
    .cky-consent-bar *,
    .cky-modal,
    .cky-preference-center,
    .cky-preference-center * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .cky-notice,
    .cky-notice-group,
    .cky-notice-des,
    .cky-notice-btn-wrapper,
    .cky-title,
    .cky-preference-center,
    .cky-preference-header,
    .cky-preference-body-wrapper,
    .cky-preference-content-wrapper {
        width: 100% !important;
    }
}

/* 07.09.2026, domkniecie: width:100% liczy sie od rodzica, ktory sam byl za szeroki,
   wiec sztywne 402 px zostawalo. Wiazemy szerokosc z oknem (100vw) i pozwalamy
   elementom wewnetrznym dopasowac sie (auto). */
@media (max-width: 600px) {
    .cky-consent-container,
    .cky-consent-bar {
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: 0 !important;
    }
    .cky-notice,
    .cky-notice-group,
    .cky-notice-des,
    .cky-notice-btn-wrapper,
    .cky-title,
    .cky-preference-center,
    .cky-preference-header,
    .cky-preference-body-wrapper,
    .cky-preference-content-wrapper {
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* 07.09.2026: ukryte okno preferencji cookie tez ma sztywne szerokosci
   i mimo ze jest poza ekranem, rozpycha dokument. */
@media (max-width: 600px) {
    .cky-modal,
    .cky-footer-wrapper,
    .cky-prefrence-btn-wrapper,
    .cky-accordion-wrapper,
    .cky-accordion,
    .cky-accordion-item,
    .cky-accordion-header-wrapper,
    .cky-accordion-header,
    .cky-accordion-body {
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .cky-modal { max-width: 100vw !important; overflow-x: hidden !important; }
}