/* =========================================================
   DealRadar - gedeelde site styling
   Centrale header + footer
   ========================================================= */

/* DealRadar top navigation */

        .site-header {
            position: relative;
            z-index: 10;
            width: 100%;
            margin-bottom: 22px;

            border-bottom: 1px solid rgba(96, 165, 250, 0.10);

            background:
                linear-gradient(
                    180deg,
                    rgba(5, 12, 25, 0.96),
                    rgba(3, 9, 19, 0.92)
                );

            box-shadow:
                0 10px 32px rgba(0, 0, 0, 0.18),
                inset 0 -1px 0 rgba(255, 255, 255, 0.015);

            backdrop-filter: blur(16px);
        }

        .site-nav {
            width: min(1400px, calc(100% - 48px));
            min-height: 66px;
            margin: 0 auto;

            display: flex;
            align-items: center;
            gap: 22px;
        }

        .site-brand {
            display: flex;
            align-items: center;
            gap: 9px;
            flex: 0 0 auto;

            text-decoration: none;
            white-space: nowrap;
        }

        .site-brand-logo {
            display: block;
            width: 34px;
            height: 34px;
            flex: 0 0 34px;

            filter:
                drop-shadow(0 0 8px rgba(249, 115, 22, 0.08));
        }

        .site-brand-wordmark {
            display: inline-flex;
            align-items: baseline;

            font-size: 1.32rem;
            font-weight: 850;
            line-height: 1;
            letter-spacing: -0.035em;
        }

        .site-brand-prefix {
            color: #28a7ff;
        }

        .site-brand-deal {
            color: #f8fafc;
        }

        .site-brand-radar {
            color: #f97316;
        }

        .site-links {
            display: flex;
            align-items: center;
            gap: 6px;
            flex: 0 0 auto;
        }

        .site-links a {
            padding: 8px 10px;
            border-radius: 8px;

            color: #a9b8ca;
            font-size: 0.84rem;
            font-weight: 500;
            text-decoration: none;
            white-space: nowrap;

            transition:
                color 150ms ease,
                background 150ms ease;
        }

        .site-links a:hover {
            color: #f8fafc;
            background: rgba(59, 130, 246, 0.08);
        }

        .site-menu-toggle {
            display: none;
        }

        .site-nav-spacer {
            flex: 1 1 auto;
            min-width: 10px;
        }

        .site-search {
            width: min(270px, 22vw);
            min-height: 38px;
            padding: 8px 12px;

            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex: 0 1 270px;

            border: 1px solid rgba(100, 116, 139, 0.30);
            border-radius: 9px;

            background: rgba(7, 17, 33, 0.82);

            color: #71849c;
            font-size: 0.80rem;

            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.018);

            transition:
                border-color 150ms ease,
                background 150ms ease,
                box-shadow 150ms ease;
        }

        .site-search:hover {
            border-color: rgba(56, 189, 248, 0.30);
            background: rgba(10, 23, 43, 0.90);

            box-shadow:
                0 0 18px rgba(14, 165, 233, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.025);
        }

        .site-search-icon {
            position: relative;

            width: 14px;
            height: 14px;
            flex: 0 0 14px;

            border: 1.5px solid #71849c;
            border-radius: 50%;
        }

        .site-search-icon::after {
            content: "";
            position: absolute;
            right: -4px;
            bottom: -3px;

            width: 6px;
            height: 1.5px;

            border-radius: 999px;
            background: #71849c;

            transform: rotate(45deg);
            transform-origin: center;
        }

        .site-notifications {
            position: relative;

            width: 38px;
            height: 38px;
            flex: 0 0 38px;

            display: flex;
            align-items: center;
            justify-content: center;

            border: 1px solid rgba(100, 116, 139, 0.28);
            border-radius: 9px;

            background: rgba(7, 17, 33, 0.72);

            color: transparent;
            font-size: 0;
            text-decoration: none;

            transition:
                border-color 150ms ease,
                background 150ms ease;
        }

        .site-notifications::before,
        .site-notifications::after {
            content: none;
        }

        .site-notifications-icon {
            width: 19px;
            height: 19px;

            fill: none;
            stroke: #94a3b8;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;

            transition:
                stroke 150ms ease,
                transform 150ms ease;
        }

        .site-notifications:hover .site-notifications-icon {
            stroke: #e2e8f0;
            transform: translateY(-1px);
        }

        .site-notifications:hover {
            border-color: rgba(56, 189, 248, 0.34);
            background: rgba(15, 32, 55, 0.82);
        }

        .site-profile {
            width: 38px;
            height: 38px;
            flex: 0 0 38px;

            display: flex;
            align-items: center;
            justify-content: center;

            border: 1px solid rgba(56, 189, 248, 0.30);
            border-radius: 50%;

            background:
                linear-gradient(
                    135deg,
                    rgba(14, 165, 233, 0.24),
                    rgba(37, 99, 235, 0.20)
                );

            color: #e0f2fe;
            font-size: 0.82rem;
            font-weight: 800;
            text-decoration: none;

            box-shadow:
                0 0 18px rgba(14, 165, 233, 0.08);

            transition:
                border-color 150ms ease,
                box-shadow 150ms ease,
                transform 150ms ease;
        }

        .site-profile:hover {
            border-color: rgba(56, 189, 248, 0.55);

            box-shadow:
                0 0 22px rgba(14, 165, 233, 0.14);

            transform: translateY(-1px);
        }

        @media (max-width: 1180px) {
            .site-nav {
                gap: 14px;
            }

            .site-links {
                gap: 2px;
            }

            .site-links a {
                padding-inline: 7px;
                font-size: 0.80rem;
            }

            .site-search {
                width: min(220px, 20vw);
                flex-basis: 220px;
            }
        }

        @media (max-width: 980px) {
            .site-header {
                z-index: 100;
            }

            .site-nav {
                position: relative;
            }

            .site-menu-toggle {
                width: 40px;
                height: 40px;
                padding: 9px;
                display: inline-flex;
                flex: 0 0 40px;
                flex-direction: column;
                align-items: stretch;
                justify-content: center;
                gap: 5px;
                border: 1px solid rgba(100, 116, 139, 0.30);
                border-radius: 9px;
                background: rgba(7, 17, 33, 0.82);
                cursor: pointer;
            }

            .site-menu-toggle span {
                display: block;
                height: 2px;
                border-radius: 999px;
                background: #cbd5e1;
                transition: transform 150ms ease, opacity 150ms ease;
            }

            .site-menu-toggle[aria-expanded="true"] span:nth-child(1) {
                transform: translateY(7px) rotate(45deg);
            }

            .site-menu-toggle[aria-expanded="true"] span:nth-child(2) {
                opacity: 0;
            }

            .site-menu-toggle[aria-expanded="true"] span:nth-child(3) {
                transform: translateY(-7px) rotate(-45deg);
            }

            .site-links {
                display: none;
            }

            .site-links.site-links-open {
                position: absolute;
                top: calc(100% + 8px);
                right: 0;
                left: 0;
                padding: 10px;
                display: grid;
                gap: 4px;
                border: 1px solid rgba(96, 165, 250, 0.20);
                border-radius: 12px;
                background: rgba(5, 12, 25, 0.99);
                box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
            }

            .site-links.site-links-open a {
                padding: 12px 14px;
                color: #d8e6f5;
                font-size: .95rem;
            }

            .site-search {
                width: min(320px, 42vw);
                flex-basis: 320px;
            }
        }

        @media (max-width: 700px) {
            .site-nav {
                width: min(100% - 24px, 1180px);
                min-height: 60px;
                gap: 10px;
            }

            .site-search {
                display: none;
            }

            .site-nav-spacer {
                flex: 1;
            }

            .site-notifications,
            .site-profile {
                width: 36px;
                height: 36px;
                flex-basis: 36px;
            }

            .site-brand-wordmark {
                font-size: 1.12rem;
            }

            .site-brand-logo {
                width: 30px;
                height: 30px;
                flex-basis: 30px;
            }
        }




/* =========================================================
   DealRadar - shared site components
   Header + Footer
   ========================================================= */


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    width: 100%;
    margin-top: 32px;

    border-top: 1px solid rgba(96, 165, 250, 0.10);

    background:
        linear-gradient(
            180deg,
            rgba(3, 9, 19, 0.92),
            rgba(5, 12, 25, 0.98)
        );

    box-shadow:
        0 -10px 32px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.015);
}

.site-footer-inner {
    width: min(1400px, calc(100% - 48px));
    margin: 0 auto;
    padding: 23px 0 16px;
}

.site-footer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.site-footer-brand {
    flex: 0 1 360px;
}

.site-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: inherit;
    text-decoration: none;

    font-size: 1.16rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.035em;
}

.site-footer-logo img {
    display: block;
    width: 30px;
    height: 30px;
}

.site-footer-prefix {
    color: #28a7ff;
}

.site-footer-deal {
    color: #f8fafc;
}

.site-footer-radar {
    color: #f97316;
}

.site-footer-brand p {
    margin: 8px 0 0;

    color: #71849c;
    font-size: 0.78rem;
    line-height: 1.5;
}

.site-footer-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
}

.site-footer-links a {
    padding: 7px 9px;
    border-radius: 7px;

    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;

    transition:
        color 150ms ease,
        background 150ms ease;
}

.site-footer-links a:hover {
    color: #f8fafc;
    background: rgba(59, 130, 246, 0.08);
}

.site-footer-bottom {
    margin-top: 16px;
    padding-top: 13px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    border-top: 1px solid rgba(100, 116, 139, 0.14);

    color: #64748b;
    font-size: 0.70rem;
    line-height: 1.45;
}

.site-footer-disclaimer {
    text-align: right;
}


/* =========================================================
   FOOTER - responsive
   ========================================================= */

@media (max-width: 800px) {
    .site-footer-main {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .site-footer-brand {
        flex-basis: auto;
    }

    .site-footer-links {
        justify-content: flex-start;
    }

    .site-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .site-footer-disclaimer {
        text-align: left;
    }
}

@media (max-width: 500px) {
    .site-footer-inner {
        width: min(100% - 24px, 1280px);
        padding-top: 24px;
    }

    .site-footer-links {
        gap: 2px;
    }

    .site-footer-links a {
        padding-inline: 7px;
    }
}





/* Public dashboard placeholder */
.site-links .site-link-disabled {
    display: inline-block;
    padding: 8px 10px;
    border-radius: 8px;
    color: #64748b;
    font-size: 0.84rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: not-allowed;
}
/* unified-product-image-background-v1: one shared off-white surface for every product image area. */
:root {
    --product-image-surface: #f7f9fc;
}

/* Product cards across the landing page, Deals, Retour, categories and detail view. */
.deal-image-wrapper,
.search-result-image,
.landing-category-image,
.radar-product-image,
.category-card-image,
.category-product-image,
.second-chance-image,
.deal-product-image-wrap,
.deal-product-image {
    background: var(--product-image-surface) !important;
}

.deal-image-wrapper img,
.search-result-image img,
.landing-category-image img,
.radar-product-image img,
.category-card-image img,
.category-product-image img,
.second-chance-image img,
.deal-product-image-wrap img,
.deal-product-image img {
    background: var(--product-image-surface) !important;
}
.site-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    color: #7895b8;
    font-size: 14px;
    line-height: 1.5;
}

.site-breadcrumb a {
    color: #91b9e8;
    text-decoration: none;
}

.site-breadcrumb a:hover,
.site-breadcrumb a:focus-visible {
    color: #4ba3ff;
    text-decoration: underline;
}

.site-breadcrumb [aria-current="page"] {
    min-width: 0;
    overflow: hidden;
    color: #a9bdd4;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.site-admin-link {
    border: 1px solid rgba(249, 115, 22, 0.35);
    background: rgba(249, 115, 22, 0.1);
    color: #fb923c !important;
}

.site-admin-link:hover,
.site-admin-link:focus-visible {
    border-color: rgba(249, 115, 22, 0.6);
    background: rgba(249, 115, 22, 0.18);
}
/* mobile-audit-20260907: readable shared footer and safe long labels */
@media (max-width: 620px) {
    .site-footer-inner {
        width: min(100% - 28px, 1400px);
    }

    .site-footer-main {
        gap: 18px;
    }

    .site-footer-brand p,
    .site-footer-links a,
    .site-footer-bottom,
    .site-footer-disclaimer {
        font-size: .78rem;
        line-height: 1.55;
    }

    .site-footer-links {
        gap: 10px 16px;
    }

    .category-card strong,
    .landing-category-card strong {
        overflow-wrap: anywhere;
    }
}