/* -------------------------------- */
/* Root variables & BODY            */
/* -------------------------------- */
:root {
    --fb-sidebar-width: 60px;
    --fb-sidebar-bg-color: #fff;
    --fb-sidebar-panel-bg-color: #f9f9f9;
    --fb-sidebar-font-size: 12px;
}

body {
    margin-right: var(--fb-sidebar-width);
}

.no-select {
    user-select: none;
    -webkit-user-select: none; /* For Safari */
    -ms-user-select: none; /* For older IE/Edge */
}
.hidden {
    display: none !important;
}

/* -------------------------------- */
/* Flex and Default styling         */
/* -------------------------------- */
.flex {
    display: flex;
    gap: 10px;
}
.flex-col {
    flex-direction: column;
}
.flex-inline {
    display: inline-flex;
}
.flex-align-start {
    align-items: flex-start;
}
.flex-align-center {
    align-items: center;
}
.flex-align-end {
    align-items: flex-end;
}
.flex-justify-center {
    justify-content: center;
}
.flex-justify-between {
    justify-content: space-between;
}
.flex-justify-end {
    justify-content: end;
}
.gap-5 {
    gap: 5px;
}
.gap-15 {
    gap: 15px;
}
.gap-20 {
    gap: 20px;
}
.gap-30 {
    gap: 30px;
}

.mt-5 {
    margin-top: 5px;
}
.mt-10 {
    margin-top: 10px;
}
.mt-20 {
    margin-top: 20px;
}

.title {
    font-size: 16px;
    font-weight: 300;
}
.title.bold {
    font-weight: 400;
}
.title.bolder {
    font-weight: 600;
}
.title.boldest {
    font-weight: 700;
}
.title.smallest {
    font-size: 10px;
}
.title.smaller {
    font-size: 12px;
}
.title.small {
    font-size: 14px;
}
.title.medium {
    font-size: 20px;
}
.title.large {
    font-size: 30px;
}
.title.extra-large {
    font-size: 40px;
}
.title.white {
    color: #fff;
}
.title.black {
    color: #000;
}
.title.faded-black {
    color: #444;
}
.title.grey {
    color: #999;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -------------------------------- */
/* Header Product Image             */
/* -------------------------------- */
.product-image {
    width: 300px;
    height: 175px;
    object-fit: contain;
    vertical-align: middle;
}
.product-image.alternative {
    width: 45px;
    min-width: 45px;
    height: 30px;
}
.product-image.notify-price-change {
    width: 65px;
    min-width: 65px;
    height: 40px;
}

/* -------------------------------- */
/* Sidebar & Panes                  */
/* -------------------------------- */
#ssm-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--fb-sidebar-width);
    height: 100%;
    padding-top: 100px;
    z-index: 10002;
    background-color: var(--fb-sidebar-bg-color);
    border-left: 1px solid #ddd;
    font-size: var(--fb-sidebar-font-size);
    gap:15px;
}

.sidebar-item-compare {
    position: relative;
}
.sidebar-item-compare::before {
    content: "";
    position: absolute;
    top: 5px;
    left: -50px;
    width: 25px; /* Adjust to match the SVG size */
    height: 25px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 268.832 268.832'%3E%3Cg%3E%3Cpath d='M265.171,125.577l-80-80c-4.881-4.881-12.797-4.881-17.678,0c-4.882,4.882-4.882,12.796,0,17.678l58.661,58.661H12.5 c-6.903,0-12.5,5.597-12.5,12.5c0,6.902,5.597,12.5,12.5,12.5h213.654l-58.659,58.661c-4.882,4.882-4.882,12.796,0,17.678 c2.44,2.439,5.64,3.661,8.839,3.661s6.398-1.222,8.839-3.661l79.998-80C270.053,138.373,270.053,130.459,265.171,125.577z'%3E%3C/path%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

@keyframes moveArrow {
    0% { transform: translateX(0); opacity: 1; }
    20% { transform: translateX(10px); }
    40% { transform: translateX(0); }
    60% { transform: translateX(10px); }
    80% { transform: translateX(0); }
    100% { transform: translateX(10px); opacity: 0; }
}

.sidebar-item-compare.animate::before {
    animation: moveArrow 2s ease-in-out forwards;
    opacity: 1;
}

.sidebar-item-compare::after {
    content: attr(data-count);
    position: absolute;
    top: -20px;
    right: 5px;
    font-size: 9px;
    font-weight: 800;
    background-color: #d02d2d;
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sidebar-item-compare[data-count="0"]::after {
    background: #eee;
    color: #444;
}

[class^="sidebar-item"] {
    width: 100%;
    cursor: pointer;
}
[class^="sidebar-item"]:not(:last-child) {
    padding-bottom:15px;
    border-bottom: 1px dashed #ddd;
}

#ssm-sidebar-panel {
    position: fixed;
    top: 0;
    right: calc(-1 * (var(--fb-sidebar-width) + 350px)); 
    /* or just something like right: -9999px if you prefer. */
    width: 350px;
    height: 100%;
    padding: 30px;
    z-index: 10001;
    background-color: var(--fb-sidebar-panel-bg-color);
    border-left: 1px solid #ddd;
    font-size: var(--fb-sidebar-font-size);
    transition: right .3s ease-in-out;
}
/* When open, slide it in from the right. 
For desktop (larger than 767px), we want right: 60px. */
#ssm-sidebar-panel.open {
    right: 60px;
}

/* -------------------------------- */
/* Sidebar Overlay                  */
/* -------------------------------- */
#ssm-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 10000;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;  /* Prevent interactions when hidden */
}

#ssm-sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;  /* Enable interactions when visible */
}

/* -------------------------------- */
/* Comparison Panel                 */
/* -------------------------------- */
[class*="add_to_camera_data camera"] {
    background-color: white;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

table.table-products-summary .add_camera_to_comparison {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 100%;
    z-index: 10;
}
.add_camera_to_comparison {
    pointer-events: auto !important; /* Ensures clicks pass through */
    cursor: pointer;
}

#camera_vergelijker_data_text {
    padding: 15px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 3px;
}
span.remove_camera_text,
span.add_camera_text {
    display: none;
}

a.review-button span.remove_camera_text,
a.review-button span.add_camera_text {
    display: flex;
    justify-content: center;
    width: 55px;
}
a.review-button span.remove_camera_text {
    color: red;
}

#button_reset, #button_vergelijk {
    padding: 0px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 10px;
    font-weight: 800;
    height: 35px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
}
#button_vergelijk {
    background-color: #07bc7d;
    color: #fff;
    border: none;
}
#button_reset a {
    color: #d02d2d;
}

/* -------------------------------- */
/* Responsive styles                */
/* -------------------------------- */
@media (max-width: 1400px) {
    body {
        margin-right: 0;
    }

    #ssm-sidebar {
        bottom: 0px;
        min-height: calc(65px + env(safe-area-inset-bottom));
        height: auto;
        flex-direction: row;
        left: 0;
        right: auto;
        width: 100%;
        top: auto;
        padding-top: 0;
        border-left: none;
        border-top: 1px solid #ddd;
        background-color: #f9f9f9;
        padding-bottom: env(safe-area-inset-bottom);
    }
    /* Ensure background covers safe area */
    #ssm-sidebar::after {
        content: "";
        display: block;
        height: env(safe-area-inset-bottom);
        background: inherit;
    }

    [class^="sidebar-item"] {
        border-bottom: unset !important;
        padding-bottom: unset !important;
    }

    .sidebar-item-compare::after {
        right: 10px;
        top: 10px;
    }

    #ssm-sidebar-panel.open {
        right: 0;
    }
}
@media (min-width: 1025px) {
    .site-header .inside-header nav#sticky-navigation {
        padding-right:var(--fb-sidebar-width);
    }
}