/*
=========================================================
GUADESK — X-KOM INSPIRED GRAPHITE THEME
Nakładka wizualna ładowana jako ostatni arkusz.
Nie zmienia HTML, PHP ani JavaScriptu konfiguratora.
=========================================================
*/

:root {
    /* Główne tło — jaśniejszy, neutralny grafit */
    --sw-bg: #17191d;
    --sw-bg-soft: #1d2025;

    /* Powierzchnie kart */
    --sw-surface: #22262c;
    --sw-surface-2: #282d34;
    --sw-surface-3: #30363e;

    /* Linie i obramowania */
    --sw-border: #343a43;
    --sw-border-strong: #464e59;

    /* Tekst */
    --sw-text: #f6f7f8;
    --sw-text-soft: #c7ccd3;
    --sw-muted: #929aa5;

    /* Akcent GUADESK pozostaje pomarańczowy */
    --sw-accent: #ff6b00;
    --sw-accent-2: #ff8124;
    --sw-accent-soft: rgba(255, 107, 0, .10);

    /* Dodatkowe zmienne używane przez starsze style */
    --bg: #17191d;
    --card: #22262c;
    --card-light: #282d34;
    --border: #343a43;
    --accent: #ff6b00;
    --accent-hover: #ff8124;
    --text: #f6f7f8;
    --text-muted: #929aa5;
}

html {
    background: #17191d !important;
}

body {
    background:
        radial-gradient(
            circle at 12% -8%,
            rgba(255, 107, 0, .055),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(255, 255, 255, .025),
            transparent 28%
        ),
        #17191d !important;
    color: var(--sw-text);
}

/* Nagłówek */

.site-header {
    background: rgba(24, 27, 32, .94) !important;
    border-bottom-color: #343a43 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .20);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Stopka */

.site-footer {
    background: #15171b !important;
    border-top: 1px solid #343a43;
    color: #929aa5 !important;
}

/* Główne tło konfiguratora i sekcji */

.guadesk-home-main,
.site-main,
.product-configurator,
.single-product,
.woocommerce,
.real-components {
    background-color: transparent;
}

.real-components {
    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(255, 107, 0, .055),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .012),
            transparent 18%
        ),
        #17191d !important;
}

/* Główne karty */

.product-card,
.configurator,
.summary-box,
.price-box,
.image-box,
.real-component,
.monitor-system,
.monitor-variant,
.component-detail-card,
.sw-configurator-panel,
.sw-summary,
.sw-price-card {
    border-color: #343a43 !important;
}

.real-component,
.monitor-system,
.product-card,
.configurator,
.summary-box,
.price-box,
.sw-configurator-panel,
.sw-summary,
.sw-price-card {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .032),
            rgba(255, 255, 255, .008)
        ),
        #22262c !important;
    box-shadow:
        0 20px 58px rgba(0, 0, 0, .24) !important;
}

.monitor-variant,
.component-detail-card,
.component-features li,
.sw-option-card,
.sw-dimension-card {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .025),
            rgba(255, 255, 255, .006)
        ),
        #282d34 !important;
}

/* Delikatnie lżejsze obramowania kart wyboru */

.size-card,
.color-card,
.extra-card,
.option,
.sw-option-card,
.sw-dimension-card,
.sw-dimension-value,
.sw-dimension-step {
    border-color: #3a414b !important;
}

/* Czytelniejsze pola techniczne */

.component-specs > div {
    border-bottom-color: rgba(255, 255, 255, .075) !important;
}

.component-faq details {
    border-color: rgba(255, 255, 255, .09) !important;
    background: rgba(255, 255, 255, .018) !important;
}

.component-faq details:hover,
.component-faq details[open] {
    border-color: rgba(255, 107, 0, .34) !important;
    background: rgba(255, 107, 0, .05) !important;
}

/* Panele 3D i zdjęcia — zachowujemy kontrast */

.desk-3d,
.desk-3d-stage,
.desk-visualizer,
.image-box {
    border-color: #343a43 !important;
}

.component-gallery__main,
.component-gallery__thumb {
    background: #f7f7f8 !important;
}

/* Koszyk i checkout */

.woocommerce table.shop_table,
.woocommerce-cart-form,
.cart_totals,
.woocommerce-checkout-review-order,
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
    background: #22262c !important;
    border-color: #343a43 !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border-color: #343a43 !important;
}

/* Formularze */

input,
select,
textarea {
    border-color: #3a414b;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    background-color: #1d2025;
    color: #f6f7f8;
}

/* Naturalne przejścia */

.real-component,
.monitor-system,
.component-detail-card,
.sw-option-card,
.sw-dimension-card,
.size-card,
.color-card,
.extra-card {
    transition:
        border-color .22s ease,
        background-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

@media (hover: hover) {
    .real-component:hover,
    .monitor-system:hover {
        border-color: #414955 !important;
        box-shadow: 0 24px 66px rgba(0, 0, 0, .29) !important;
    }
}

/* Mobile — gradient mniej intensywny */

@media (max-width: 760px) {
    body {
        background:
            radial-gradient(
                circle at 20% 0,
                rgba(255, 107, 0, .04),
                transparent 24%
            ),
            #17191d !important;
    }
}