html {
    font-family: Inter;
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.toggle,
.accordion {
    --cnvs-toggle-base-color: var(--cnvs-heading-color);
    --cnvs-toggle-font-size: 1rem;
    --cnvs-toggle-border-size: 1px;
    --cnvs-toggle-border-color: var(--cnvs-contrast-400);
    --cnvs-toggle-border-radius: 4px;
    --cnvs-toggle-bg-color: var(--cnvs-contrast-100);
    --cnvs-toggle-title-color: var(--cnvs-heading-color);
    --cnvs-toggle-content-padding: 0.75rem;
    display: block;
    position: relative;
    margin-bottom: var(--cnvs-toggle-bottom-margin);
}

.catalogue-accordion {
    background-color: #fb7185;
}

.toggle-header,
.accordion-header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
    cursor: pointer;
    font-size: var(--cnvs-toggle-font-size);
    font-weight: 700;
}

.toggle-icon,
.accordion-icon {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    padding: 0 0.375rem;
    text-align: center;
}

    .toggle-icon i,
    .toggle-icon span {
        width: var(--cnvs-toggle-font-size);
    }





.toggle-title,
.accordion-title {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    padding: 0 0.25rem;
}

.toggle:not(.toggle-active) .toggle-open, .toggle-active .toggle-closed {
    display: none;
}

.toggle-active .toggle-open {
    display: inline-block;
}

.toggle-content,
.accordion-content {
    display: none;
    position: relative;
    padding: var(--cnvs-toggle-content-padding) 0;
}

/* Toggle - with Title Background
-----------------------------------------------------------------*/
.toggle-bg .toggle-header {
    margin: 0;
    padding: var(--cnvs-toggle-content-padding);
    border-radius: 2px;
}

.toggle-bg .toggle-content {
    padding: 0rem 0rem;
}


/* Toggle - Bordered
-----------------------------------------------------------------*/
.toggle-border {
    border: var(--cnvs-toggle-border-size) solid var(--cnvs-contrast-400);
    border-radius: var(--cnvs-toggle-border-radius);
}

    .toggle-border .toggle-header {
        padding: var(--cnvs-toggle-content-padding);
        margin: 0;
    }

    .toggle-border .toggle-content {
        padding: 1rem;
        padding-top: 0;
    }
/* ----------------------------------------------------------------
	Buttons
-----------------------------------------------------------------*/

.button {
    --cnvs-btn-padding-x: 1.375rem;
    --cnvs-btn-padding-y: 0.5rem;
    --cnvs-btn-fontsize: 1rem;
    --cnvs-btn-color: var(--cnvs-themecolor);
    --cnvs-btn-color-dark: var(--bs-gray-900);
    --cnvs-btn-color-light: #e9ecef;
    --cnvs-btn-color-hover: var(--cnvs-btn-color-dark);
    --cnvs-btn-lineheight: calc(var(--cnvs-btn-fontsize) * 1.6);
    --cnvs-btn-border-width: 1px;
    --cnvs-btn-icon-margin: 10px;
    --cnvs-btn-icon-margin-offset: 0px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    white-space: nowrap;
    margin: 5px;
    padding: var(--cnvs-btn-padding-y) var(--cnvs-btn-padding-x);
    font-size: var(--cnvs-btn-fontsize);
    line-height: var(--cnvs-btn-lineheight);
    text-align: center;
    background-color: var(--cnvs-btn-color);
    color: #fff;
    font-weight: 500;
    border: var(--cnvs-btn-border-width) solid transparent;
    transition: all 0.2s ease-in-out;
    /* Buttons - Border
  -----------------------------------------------------------------*/
    /* Buttons - 3D
  -----------------------------------------------------------------*/
    /* Buttons - Icon Reveal
  -----------------------------------------------------------------*/
}

    .button[class*=bg-opacity-] {
        --cnvs-btn-color: rgba(var(--cnvs-themecolor-rgb),var(--bs-bg-opacity, 1));
    }

    .button i {
        position: relative;
        margin-right: calc(var(--cnvs-btn-icon-margin) + var(--cnvs-btn-icon-margin-offset));
        width: 1rem;
        text-align: center;
    }

    .button.text-end i {
        margin: 0 0 0 calc(var(--cnvs-btn-icon-margin) + var(--cnvs-btn-icon-margin-offset));
    }

@media (prefers-reduced-motion: reduce) {
    .button {
        transition: none;
    }
}

.button.button-dark {
    background-color: var(--cnvs-btn-color-dark);
}

.button.button-light {
    --cnvs-btn-color: var(--cnvs-btn-color-light);
    color: var(--cnvs-btn-color-dark);
}

.button:hover {
    background-color: var(--cnvs-btn-color-dark);
    color: #fff;
}

.button.button-dark:hover {
    background-color: var(--cnvs-btn-color);
}

.button.button-mini {
    --cnvs-btn-padding-x: 0.875rem;
    --cnvs-btn-padding-y: 0.25rem;
    --cnvs-btn-fontsize: 0.75rem;
}

.button.button-small {
    --cnvs-btn-padding-x: 1.125rem;
    --cnvs-btn-padding-y: 0.5rem;
    --cnvs-btn-fontsize: 0.875rem;
}

.button.button-large {
    --cnvs-btn-padding-x: 1.625rem;
    --cnvs-btn-padding-y: 0.5rem;
    --cnvs-btn-fontsize: 1.125rem;
}

.button.button-xlarge {
    --cnvs-btn-padding-x: 2.25rem;
    --cnvs-btn-padding-y: 0.625rem;
    --cnvs-btn-fontsize: 1.25rem;
}

.button-desc {
    --cnvs-btn-padding-x: 2.25rem;
    --cnvs-btn-padding-y: 1.5rem;
    --cnvs-btn-fontsize: 1.25rem;
    --cnvs-btn-lineheight: 1;
    text-align: left;
    font-family: Inter;
    font-weight: 500;
}

    .button-desc span {
        display: block;
        margin-top: 0.75rem;
        font-size: 0.875rem;
        font-weight: 400;
        font-family: Inter;
        text-transform: none;
    }

    .button-desc i {
        font-size: 3.4285714286rem;
        width: 3.4285714286rem;
        text-align: center;
        margin-right: 12px;
    }

    .button-desc.text-end i {
        margin: 0 0 0 12px;
    }

    .button-desc div {
        display: inline-block;
    }

.button-rounded {
    border-radius: 0.25rem;
}

.button.button-border {
    --cnvs-btn-border-color: var(--cnvs-btn-color-dark);
    border: var(--cnvs-btn-border-width) solid var(--cnvs-btn-border-color);
    background: transparent;
    color: var(--cnvs-btn-border-color);
}

    .button.button-border.button-desc {
        line-height: 1;
    }

    .button.button-border:not(.button-fill):hover {
        background-color: var(--cnvs-btn-color);
        color: #fff;
        border-color: transparent !important;
    }

    .button.button-border.button-light {
        --cnvs-btn-border-color: #FFF;
    }

        .button.button-border.button-light:hover {
            background-color: #fff;
            color: var(--cnvs-btn-color-dark);
        }

.button.button-3d {
    border-radius: 0.25rem;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
    transition: none;
}

    .button.button-3d:hover {
        background-color: var(--cnvs-btn-color);
        opacity: 0.9;
    }

.button.button-reveal {
    padding-left: 28px;
    padding-right: 28px;
    overflow: hidden;
}

    .button.button-reveal i {
        display: block;
        position: absolute;
        top: 0;
        left: -32px;
        width: 32px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        background-color: rgba(0, 0, 0, 0.15);
    }

    .button.button-reveal.button-border i {
        top: -2px;
        height: calc(100% + var(--cnvs-btn-border-width) * 2);
    }

    .button.button-reveal.text-end i {
        left: auto;
        right: -32px;
    }

    .button.button-reveal span {
        display: inline-block;
        position: relative;
        left: 0;
    }

    .button.button-reveal.button-mini {
        padding-left: 17px;
        padding-right: 17px;
    }

        .button.button-reveal.button-mini i {
            left: -22px;
            width: 22px;
        }

        .button.button-reveal.button-mini.text-end i {
            left: auto;
            right: -22px;
        }

        .button.button-reveal.button-mini:hover span {
            left: 11px;
        }

        .button.button-reveal.button-mini.text-end:hover span {
            left: -11px;
        }

    .button.button-reveal.button-small {
        padding-left: 20px;
        padding-right: 20px;
    }

        .button.button-reveal.button-small i {
            left: -26px;
            width: 26px;
        }

        .button.button-reveal.button-small.text-end i {
            left: auto;
            right: -26px;
        }

        .button.button-reveal.button-small:hover span {
            left: 13px;
        }

        .button.button-reveal.button-small.text-end:hover span {
            left: -13px;
        }

    .button.button-reveal.button-large {
        padding-left: 32px;
        padding-right: 32px;
    }

        .button.button-reveal.button-large i {
            left: -38px;
            width: 38px;
        }

        .button.button-reveal.button-large.text-end i {
            left: auto;
            right: -38px;
        }

        .button.button-reveal.button-large:hover span {
            left: 19px;
        }

        .button.button-reveal.button-large.text-end:hover span {
            left: -19px;
        }

    .button.button-reveal.button-xlarge {
        padding-right: 40px;
        padding-left: 40px;
    }

        .button.button-reveal.button-xlarge i {
            left: -44px;
            width: 44px;
        }

        .button.button-reveal.button-xlarge.text-end i {
            left: auto;
            right: -44px;
        }

        .button.button-reveal.button-xlarge:hover span {
            left: 22px;
        }

        .button.button-reveal.button-xlarge.text-end:hover span {
            left: -22px;
        }

    .button.button-reveal:hover i {
        left: 0;
    }

    .button.button-reveal.text-end:hover i {
        left: auto;
        right: 0;
    }

    .button.button-reveal:hover span {
        left: 16px;
    }

    .button.button-reveal.text-end:hover span {
        left: -16px;
    }

    .button.button-reveal.button-light:hover {
        color: var(--cnvs-btn-color-light);
    }

.button-reveal i,
.button-reveal span {
    transition: left 0.3s ease, right 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .button-reveal i,
    .button-reveal span {
        transition: none;
    }
}

/* Buttons - Promo 100% Width
-----------------------------------------------------------------*/
.button.button-full {
    display: block;
    width: 100%;
    white-space: normal;
    margin: 0;
    height: auto;
    line-height: 1.6;
    padding: 30px 0;
    font-size: 2.14rem;
    font-weight: 300;
    text-transform: none;
    border-radius: 0;
}

    .button.button-full.button-light {
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    }

        .button.button-full.button-light strong {
            border-bottom-color: var(--cnvs-btn-color-dark);
        }

        .button.button-full.button-light:hover strong {
            border-bottom-color: rgba(var(--cnvs-contrast-rgb), 0.2);
        }

    .button.button-full strong {
        font-weight: 700;
        border-bottom: 2px solid rgba(var(--cnvs-contrast-rgb), 0.2);
        transition: all 0.2s ease-in-out;
    }

@media (prefers-reduced-motion: reduce) {
    .button.button-full strong {
        transition: none;
    }
}

/* Buttons - Circle
-----------------------------------------------------------------*/
.button.button-circle {
    border-radius: 50rem;
}

/* Buttons - Flat
-----------------------------------------------------------------*/
.button-flat {
    --cnvs-btn-color-flat: var(--cnvs-btn-color);
    position: relative;
    background-color: #FFF;
    overflow: hidden;
    color: var(--cnvs-btn-color-flat);
    border: 0;
}

.button-flat-border {
    border: var(--cnvs-btn-border-width) solid var(--cnvs-btn-color-flat);
}

.button-flat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--cnvs-btn-color-flat);
    opacity: 0.1;
}

.button-flat:hover {
    background-color: var(--cnvs-btn-color);
    color: #FFF;
}

/* Buttons - Action
-----------------------------------------------------------------*/
.button-action {
    --cnvs-btn-padding-x: 0 !important;
    --cnvs-btn-action-padding-x: 1rem;
    --cnvs-btn-action-width: 2.625rem;
    --cnvs-btn-action-radius: 50rem;
    --cnvs-btn-action-border: 3px;
    --cnvs-btn-action-border-color: var(--cnvs-themecolor);
    --cnvs-btn-action-transition-speed: .2s;
    --cnvs-btn-action-icon-move: -4px;
    border-radius: var(--cnvs-btn-action-radius);
    border: var(--cnvs-btn-action-border) solid var(--cnvs-btn-action-border-color);
}

    .button-action span {
        position: relative;
        display: inline-block;
        padding-right: var(--cnvs-btn-action-padding-x);
        padding-left: calc(var(--cnvs-btn-action-padding-x) + 0.5rem);
        z-index: 1;
        transition: color var(--cnvs-btn-action-transition-speed) ease;
    }

    .button-action i {
        color: #000;
        width: var(--cnvs-btn-action-width);
        height: 100%;
        margin: 0;
        z-index: 1;
        transition: transform var(--cnvs-btn-action-transition-speed) ease;
    }

    .button-action::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        background-color: #FFF;
        color: #000;
        width: var(--cnvs-btn-action-width);
        height: 100%;
        text-align: center;
        border-radius: var(--cnvs-btn-action-radius);
        transition: width var(--cnvs-btn-action-transition-speed) ease, height var(--cnvs-btn-action-transition-speed) ease;
        will-change: width, height;
    }

    .button-action:hover {
        background-color: inherit;
    }

        .button-action:hover::after {
            width: 100%;
        }

        .button-action:hover i {
            transform: translateX(var(--cnvs-btn-action-icon-move));
        }

        .button-action:hover span {
            color: #000;
        }

    .button-action.button-large {
        --cnvs-btn-action-width: 3rem;
    }

    .button-action.button-xlarge {
        --cnvs-btn-action-border: 4px;
        --cnvs-btn-action-width: 3.5rem;
    }

/* Buttons - Fill Effect
-----------------------------------------------------------------*/
.button-shadow {
    --cnvs-btn-shadow-size: 4px;
    --cnvs-btn-shadow-color: var(--cnvs-btn-color);
    box-shadow: var(--cnvs-btn-shadow-size) var(--cnvs-btn-shadow-size) 0px 0px var(--cnvs-btn-shadow-color);
}

.button-shadow-dark {
    --cnvs-btn-shadow-color: var(--bs-dark);
}

.button-shadow-contrast {
    --cnvs-btn-shadow-color: var(--cnvs-contrast-900);
}

.button-shadow:not(.button-shadow-nohover):hover {
    box-shadow: none;
}

.button-shadow-effect:not(.button-shadow-nohover):hover {
    transform: translate3d(var(--cnvs-btn-shadow-size), var(--cnvs-btn-shadow-size), 0);
}

/* Buttons - Fill Effect
-----------------------------------------------------------------*/
.button.button-border.button-fill {
    overflow: hidden;
    transform-style: preserve-3d;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    -webkit-backface-visibility: hidden;
}

    .button.button-border.button-fill span {
        position: relative;
    }

    .button.button-border.button-fill:hover {
        background: transparent !important;
        color: #fff;
    }

    .button.button-border.button-fill.button-light:hover {
        border-color: var(--cnvs-btn-color-light) !important;
        color: var(--cnvs-btn-color-dark) !important;
    }

    .button.button-border.button-fill.button-light ::before {
        background-color: var(--cnvs-btn-color-light);
    }

    .button.button-border.button-fill::before {
        content: "";
        position: absolute;
        background-color: var(--cnvs-contrast-900);
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        transition: all 0.4s ease;
        -webkit-backface-visibility: hidden;
    }

@media (prefers-reduced-motion: reduce) {
    .button.button-border.button-fill::before {
        transition: none;
    }
}

.button.button-border.button-fill::before ::before {
    width: 100%;
}

.button.button-border.button-fill.fill-from-right::before {
    left: auto;
    right: 0;
}

.button.button-border.button-fill:hover::before {
    width: 100%;
}

.button.button-border.button-fill.fill-from-top::before, .button.button-border.button-fill.fill-from-bottom::before {
    transition: all 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .button.button-border.button-fill.fill-from-top::before, .button.button-border.button-fill.fill-from-bottom::before {
        transition: none;
    }
}

.button.button-border.button-fill.fill-from-top::before {
    width: 100%;
    height: 0;
}

.button.button-border.button-fill.fill-from-top:hover::before {
    height: 100%;
}

.button.button-border.button-fill.fill-from-bottom::before {
    width: 100%;
    height: 0;
    top: auto;
    bottom: 0;
}

.button.button-border.button-fill.fill-from-bottom:hover::before {
    height: 100%;
}

/* Buttons - Icon Animations
-----------------------------------------------------------------*/
.button-icon-effect {
    overflow: hidden;
    vertical-align: top;
}

    .button-icon-effect i {
        --cnvs-btn-icon-margin-offset: .25rem;
    }

    .button-icon-effect.button-icon-flip-x i {
        animation: buttonIconSlideBack 0.3s ease;
    }

    .button-icon-effect.button-icon-flip-x:hover i {
        animation: buttonIconSlideFront 0.5s forwards;
    }

@keyframes buttonIconSlideBack {
    0% {
        transform: translateX(0);
    }

    25% {
        opacity: 0;
    }

    26% {
        transform: translateX(-100%);
    }

    27% {
        transform: translateX(100%);
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes buttonIconSlideFront {
    0% {
        transform: translateX(0);
    }

    25% {
        opacity: 0;
    }

    26% {
        transform: translateX(100%);
    }

    27% {
        transform: translateX(-100%);
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(0);
    }
}

.button-icon-effect.button-icon-flip-y i {
    animation: buttonIconSlideUp 0.3s ease;
}

.button-icon-effect.button-icon-flip-y:hover i {
    animation: buttonIconSlideDown 0.5s forwards;
}

@keyframes buttonIconSlideUp {
    0% {
        transform: translateY(0);
    }

    25% {
        opacity: 0;
    }

    26% {
        transform: translateY(-100%);
    }

    27% {
        transform: translateY(100%);
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes buttonIconSlideDown {
    0% {
        transform: translateY(0);
    }

    25% {
        opacity: 0;
    }

    26% {
        transform: translateY(100%);
    }

    27% {
        transform: translateY(-100%);
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(0);
    }
}

/* Buttons - Text Animations
-----------------------------------------------------------------*/
.button-text-effect {
    overflow: hidden;
    vertical-align: top;
}

    .button-text-effect .button-inner {
        position: relative;
        display: inline-block;
        overflow: hidden;
        vertical-align: top;
    }

        .button-text-effect .button-inner span {
            transition: all 0.3s cubic-bezier(0.17, 0.75, 0.8, 1);
        }

            .button-text-effect .button-inner span:nth-child(1) {
                display: inline-block;
                opacity: 1;
            }

            .button-text-effect .button-inner span:nth-child(2) {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
            }

    .button-text-effect:hover span:nth-child(1) {
        opacity: 0;
    }

    .button-text-effect:hover span:nth-child(2) {
        opacity: 1;
    }

    .button-text-effect.button-text-flip-x span:nth-child(1) {
        transform: translate(0, 0);
    }

    .button-text-effect.button-text-flip-x span:nth-child(2) {
        transform: translate(100%, 0);
    }

    .button-text-effect.button-text-flip-x:hover span:nth-child(1) {
        transform: translate(-100%, 0);
    }

    .button-text-effect.button-text-flip-x:hover span:nth-child(2) {
        transform: translate(0, 0);
    }

    .button-text-effect.button-text-flip-y span:nth-child(1) {
        transform: translate(0, 0);
    }

    .button-text-effect.button-text-flip-y span:nth-child(2) {
        transform: translate(0, 100%);
    }

    .button-text-effect.button-text-flip-y:hover span:nth-child(1) {
        transform: translate(0, -100%);
    }

    .button-text-effect.button-text-flip-y:hover span:nth-child(2) {
        transform: translate(0, 0);
    }

/* Buttons - Colors
-----------------------------------------------------------------*/
.button-red {
    --cnvs-btn-color: #c02942;
}

    .button-red.button-3d:hover, .button-red.button-reveal:hover, .button-red.button-border:hover {
        --cnvs-btn-color: #c02942 !important;
    }

    .button-red.button-border.button-fill::before {
        background-color: #c02942;
    }

    .button-red.button-action {
        --cnvs-btn-action-border-color: #c02942;
    }

.button-border.button-red, .button-border.button-light.button-red {
    color: #c02942;
    border-color: #c02942;
}

.button-teal {
    --cnvs-btn-color: #53777a;
}

    .button-teal.button-3d:hover, .button-teal.button-reveal:hover, .button-teal.button-border:hover {
        --cnvs-btn-color: #53777a !important;
    }

    .button-teal.button-border.button-fill::before {
        background-color: #53777a;
    }

    .button-teal.button-action {
        --cnvs-btn-action-border-color: #53777a;
    }

.button-border.button-teal, .button-border.button-light.button-teal {
    color: #53777a;
    border-color: #53777a;
}

.button-yellow {
    --cnvs-btn-color: #ecd078;
}

    .button-yellow.button-3d:hover, .button-yellow.button-reveal:hover, .button-yellow.button-border:hover {
        --cnvs-btn-color: #ecd078 !important;
    }

    .button-yellow.button-border.button-fill::before {
        background-color: #ecd078;
    }

    .button-yellow.button-action {
        --cnvs-btn-action-border-color: #ecd078;
    }

.button-border.button-yellow, .button-border.button-light.button-yellow {
    color: #ecd078;
    border-color: #ecd078;
}

.button-purple {
    --cnvs-btn-color: #5d4157;
}

    .button-purple.button-3d:hover, .button-purple.button-reveal:hover, .button-purple.button-border:hover {
        --cnvs-btn-color: #5d4157 !important;
    }

    .button-purple.button-border.button-fill::before {
        background-color: #5d4157;
    }

    .button-purple.button-action {
        --cnvs-btn-action-border-color: #5d4157;
    }

.button-border.button-purple, .button-border.button-light.button-purple {
    color: #5d4157;
    border-color: #5d4157;
}

.button-pink {
    --cnvs-btn-color: #f89fa1;
}

    .button-pink.button-3d:hover, .button-pink.button-reveal:hover, .button-pink.button-border:hover {
        --cnvs-btn-color: #f89fa1 !important;
    }

    .button-pink.button-border.button-fill::before {
        background-color: #f89fa1;
    }

    .button-pink.button-action {
        --cnvs-btn-action-border-color: #f89fa1;
    }

.button-border.button-pink, .button-border.button-light.button-pink {
    color: #f89fa1;
    border-color: #f89fa1;
}

.button-blue {
    --cnvs-btn-color: #1265a8;
}

    .button-blue.button-3d:hover, .button-blue.button-reveal:hover, .button-blue.button-border:hover {
        --cnvs-btn-color: #1265a8 !important;
    }

    .button-blue.button-border.button-fill::before {
        background-color: #1265a8;
    }

    .button-blue.button-action {
        --cnvs-btn-action-border-color: #1265a8;
    }

.button-border.button-blue, .button-border.button-light.button-blue {
    color: #1265a8;
    border-color: #1265a8;
}

.button-green {
    --cnvs-btn-color: #59ba41;
}

    .button-green.button-3d:hover, .button-green.button-reveal:hover, .button-green.button-border:hover {
        --cnvs-btn-color: #59ba41 !important;
    }

    .button-green.button-border.button-fill::before {
        background-color: #59ba41;
    }

    .button-green.button-action {
        --cnvs-btn-action-border-color: #59ba41;
    }

.button-border.button-green, .button-border.button-light.button-green {
    color: #59ba41;
    border-color: #59ba41;
}

.button-brown {
    --cnvs-btn-color: #774f38;
}

    .button-brown.button-3d:hover, .button-brown.button-reveal:hover, .button-brown.button-border:hover {
        --cnvs-btn-color: #774f38 !important;
    }

    .button-brown.button-border.button-fill::before {
        background-color: #774f38;
    }

    .button-brown.button-action {
        --cnvs-btn-action-border-color: #774f38;
    }

.button-border.button-brown, .button-border.button-light.button-brown {
    color: #774f38;
    border-color: #774f38;
}

.button-aqua {
    --cnvs-btn-color: #40c0cb;
}

    .button-aqua.button-3d:hover, .button-aqua.button-reveal:hover, .button-aqua.button-border:hover {
        --cnvs-btn-color: #40c0cb !important;
    }

    .button-aqua.button-border.button-fill::before {
        background-color: #40c0cb;
    }

    .button-aqua.button-action {
        --cnvs-btn-action-border-color: #40c0cb;
    }

.button-border.button-aqua, .button-border.button-light.button-aqua {
    color: #40c0cb;
    border-color: #40c0cb;
}

.button-lime {
    --cnvs-btn-color: #aee239;
}

    .button-lime.button-3d:hover, .button-lime.button-reveal:hover, .button-lime.button-border:hover {
        --cnvs-btn-color: #aee239 !important;
    }

    .button-lime.button-border.button-fill::before {
        background-color: #aee239;
    }

    .button-lime.button-action {
        --cnvs-btn-action-border-color: #aee239;
    }

.button-border.button-lime, .button-border.button-light.button-lime {
    color: #aee239;
    border-color: #aee239;
}

.button-leaf {
    --cnvs-btn-color: #a8caba;
}

    .button-leaf.button-3d:hover, .button-leaf.button-reveal:hover, .button-leaf.button-border:hover {
        --cnvs-btn-color: #a8caba !important;
    }

    .button-leaf.button-border.button-fill::before {
        background-color: #a8caba;
    }

    .button-leaf.button-action {
        --cnvs-btn-action-border-color: #a8caba;
    }

.button-border.button-leaf, .button-border.button-light.button-leaf {
    color: #a8caba;
    border-color: #a8caba;
}

.button-dirtygreen {
    --cnvs-btn-color: #1693a5;
}

    .button-dirtygreen.button-3d:hover, .button-dirtygreen.button-reveal:hover, .button-dirtygreen.button-border:hover {
        --cnvs-btn-color: #1693a5 !important;
    }

    .button-dirtygreen.button-border.button-fill::before {
        background-color: #1693a5;
    }

    .button-dirtygreen.button-action {
        --cnvs-btn-action-border-color: #1693a5;
    }

.button-border.button-dirtygreen, .button-border.button-light.button-dirtygreen {
    color: #1693a5;
    border-color: #1693a5;
}

.button-amber {
    --cnvs-btn-color: #eb9c4d;
}

    .button-amber.button-3d:hover, .button-amber.button-reveal:hover, .button-amber.button-border:hover {
        --cnvs-btn-color: #eb9c4d !important;
    }

    .button-amber.button-border.button-fill::before {
        background-color: #eb9c4d;
    }

    .button-amber.button-action {
        --cnvs-btn-action-border-color: #eb9c4d;
    }

.button-border.button-amber, .button-border.button-light.button-amber {
    color: #eb9c4d;
    border-color: #eb9c4d;
}

.button-black {
    --cnvs-btn-color: #111;
}

    .button-black.button-3d:hover, .button-black.button-reveal:hover, .button-black.button-border:hover {
        --cnvs-btn-color: #111 !important;
    }

    .button-black.button-border.button-fill::before {
        background-color: #111;
    }

    .button-black.button-action {
        --cnvs-btn-action-border-color: #111;
    }

.button-border.button-black, .button-border.button-light.button-black {
    color: #111;
    border-color: #111;
}

.button-light.button-yellow {
    --cnvs-btn-color: #ecd078;
}

.button-border.button-yellow:hover,
.button-border.button-yellow.button-fill.button-light:hover {
    color: #333 !important;
}

.button-white {
    --cnvs-btn-color: var(--bs-gray-100);
}

.button-3d.button-white:hover {
    color: var(--bs-gray-900) !important;
}

.button-reveal.button-white:hover {
    --cnvs-btn-color: var(--bs-gray-100) !important;
}

.button[class*=gradient-] {
    border: 0;
}

/* Buttons - No Hover
-----------------------------------------------------------------*/
.button.button-nohover:hover {
    opacity: inherit !important;
    background-color: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
}

/* Buttons - States
-----------------------------------------------------------------*/
.button.disabled, .button:disabled {
    opacity: 0.65 !important;
    pointer-events: none !important;
}


/*Yukarıdaki buton sınıflarını hazır bir template içerisinden test etmek için ekledim.*/
/*Ana proje içerisinde kullanılmadı ama şu an çalışmaya devam ettiğim sayfalarda etkilenen yerler var.*/

/*-----------------------------------------------------------------*/
/* PAGE - Catalog Type*/
/*-----------------------------------------------------------------*/

:root {
    --cl-dcrt: #fb7185;
    --cl-dark: #333;
    --font-family: 'Inter', serif;
    --cnvs-side-panel-widget-padding: 40px;
    --cnvs-side-panel-bg: var(--cnvs-contrast-100);
    --cnvs-contrast-100: #f8f9fa;
    --cnvs-side-panel-size: 900px;
    --cnvs-side-panel-padding: 50px 70px 50px 40px;
    --cnvs-side-panel-widget-padding: 40px;
    --cnvs-contrast-200: #e9ecef;
    --base-color: #2946f3;
    --white: #ffffff;
    --black: #000000;
    --red: #dc3131;
    --light-red: #feedec;
    --green: #2ebb79;
    --crusoe-green: #d39121;
    --yellow: #ffea23;
    --dark-gray: #232323;
    --medium-gray: #717580;
    --extra-medium-gray: #e4e4e4;
    --light-gray: #a8a8a8;
    --very-light-gray: #f7f7f7;
    --light-medium-gray: #eaeaeb;
    --charcoal-blue: #202329;
    --slate-blue: #262b35;
    --medium-slate-blue: #374162;
    --extra-medium-slate-blue: #23262d;
    --dark-slate-blue: #1f232c;
    --extra-dark-slate-blue: #121418;
    --extra-very-slate-blue: #161620;
    --tussock-yellow: #BC8947;
    --aluminium-grey: #80858F;
    --solitude-blue: #f0f4fd;
    --golden-yellow: #fd961e;
    --selago: #eaedff;
    --white-ice: #d8f5ef;
    --cornflower-blue: #445fed;
    --jade: #00AF6B;
    --orange: #ef991f;
    --majorelle-blue: #724ade;
    --light-majorelle-blue: #f2edfe;
    --spring-wood: #f9f6f3;
    --tropical-blue: #1ea3b1;
    --camarone: #20642b;
    --seal-brown: #0e0708;
    --Wasabi: #8ea63a;
}

* {
    font-family: var(--font-family);
}


/*****************************************************************/

.divider {
    width: 100%;
    margin: 10px auto;
}

.input-animate-target {
    border: none;
    &:focus, &:valid

{
    outline: none;
}

&:focus ~ .input-animate:before, &:valid ~ .input-animate:before {
    width: 300px;
}

}

.input-animate {
    position: relative;
    -webkit-transition: color 200ms ease-in-out;
    -o-transition: color 200ms ease-in-out;
    transition: color 200ms ease-in-out;
    &:before

{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    border-bottom: solid 3px;
    color: $highlight;
    -webkit-transition: width 200ms ease-in-out;
    -o-transition: width 200ms ease-in-out;
    transition: width 200ms ease-in-out;
}

}


#catalog-selector-section {
    display: flex !important;
    flex-flow: row wrap !important;
}

    #catalog-selector-section > div {
        flex: 1 !important;
        padding: 0.5rem !important;
    }

    #catalog-selector-section input[type="radio"] {
        display: none;
    }


        #catalog-selector-section input[type="radio"]:not(:disabled) ~ label {
            cursor: pointer;
        }

        #catalog-selector-section input[type="radio"]:disabled ~ label {
            color: #bcc2bf;
            border-color: #bcc2bf;
            box-shadow: none;
            cursor: not-allowed;
        }

.app-card-body label {
    height: 100%;
    display: block;
    background: white;
    border: 2px solid var(--cl-dcrt);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    text-align: center;
    box-shadow: 0px 3px 10px -2px rgba(161, 170, 166, 0.5);
    position: relative;
}

.app-card-body input[type="radio"]:checked + label {
    background: var(--cl-dcrt);
    color: white;
    box-shadow: 0px 0px 20px rgba(251, 113, 133, 1);
}

    .app-card-body input[type="radio"]:checked + label::after {
        color: black;
        border: 2px solid var(--cl-dcrt);
        /*content: "\2713";*/
        font-size: 24px;
        position: absolute;
        /*top: -25px;*/
        left: 50%;
        transform: translateX(-50%);
        height: 50px;
        width: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 50%;
        background: white;
        box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.25);
    }

.radio_card_label h2 {
    margin-top: 0.5rem;
}

.radio_card_label i {
    font-size: 2.5em;
    margin: 0.75rem auto;
}

.radio_card_label p {
    font-weight: 200;
}

@media only screen and (max-width: 700px) {
    section {
        flex-direction: column;
    }
}





.last-update {
    color: #6c757d;
    font-size: 0.9rem;
}

.btn-custom {
    background-color: transparent;
    border: none;
    padding: 5px 10px;
    color: #6c757d;
}

    .btn-custom:hover {
        color: #333;
    }

/* Alternatif satırları gri */
.list-group-item:nth-child(even) {
    background-color: #f8f9fa;
}

/* Dikey çizgi */
.vertical-line {
    border-left: 1px solid #dee2e6;
    height: 20px;
    margin: 0 10px;
}

.custom-radio-group {
    display: flex;
    gap: 20px;
}

.custom-radio {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

    .custom-radio input[type="radio"] {
        appearance: none;
        width: 20px;
        height: 20px;
        border: 2px solid #ccc;
        border-radius: 50%;
        outline: none;
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .custom-radio input[type="radio"]:checked {
            background-color: #fb7185;
            border-color: rgba(241, 231, 231, 1);
        }

.radio-label {
    margin-left: 10px;
    font-size: 16px;
    color: #000;
}


.test-card {
    width: 190px;
    height: 254px;
    border-radius: 30px;
    background: lightgrey;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 50px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 26px -18px inset;
}


.switch {
    position: relative;
    height: 1.5rem;
    width: 3rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 9999px;
    background-color: rgba(100, 116, 139, 0.377);
    transition: all .3s ease;
}

    .switch:checked {
        background-color: rgba(251, 113, 133, 1);
    }

    .switch::before {
        position: absolute;
        content: "";
        left: calc(1.5rem - 1.2rem);
        top: calc(1.5rem - 1.4rem);
        display: block;
        height: 1.3rem;
        width: 1.2rem;
        cursor: pointer;
        border: 1px solid rgba(100, 116, 139, 0.527);
        border-radius: 9999px;
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0 3px 10px rgba(100, 116, 139, 0.327);
        transition: all .3s ease;
    }

    .switch:hover::before {
        box-shadow: 0 0 0px 8px rgba(0, 0, 0, .15)
    }

    .switch:checked:hover::before {
        box-shadow: 0 0 0px 8px rgba(236, 72, 72, .15)
    }

    .switch:checked:before {
        transform: translateX(100%);
        border-color: rgba(236, 72, 72, 1);
    }

.filter-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
    z-index: 5;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 80vh;
}

.download-excel {
    border: 1px solid rgba(229, 231, 235, 1);
    border-radius: 25px;
}

    .download-excel .toggle-content input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border: 1px solid #6c757d;
        cursor: pointer;
        position: relative;
        border-radius: 20%;
    }

        .download-excel .toggle-content input[type="checkbox"]:checked {
            background-color: rgba(251, 113, 133, 1);
            border: none;
        }

            .download-excel .toggle-content input[type="checkbox"]:checked::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 5px;
                height: 10px;
                border: solid white;
                border-width: 0 2px 2px 0;
                transform: translate(-50%, -60%) rotate(45deg);
            }

.button-decortie {
    text-decoration: none;
    border-radius: 10px;
    --cnvs-btn-color: rgba(251, 113, 133, 1);
}

    .button-decortie.button-3d:hover, .button-decortie.button-reveal:hover, .button-decortie.button-border:hover {
        --cnvs-btn-color: rgba(251, 113, 133, 1) !important;
        text-decoration: underline;
    }

    .button-decortie.button-border.button-fill::before {
        background-color: rgba(251, 113, 133, 1);
    }

    .button-decortie.button-action {
        --cnvs-btn-action-border-color: rgba(251, 113, 133, 1);
    }

.button-border.button-decortie, .button-border.button-light.button-decortie {
    color: rgba(251, 113, 133, 1);
    border-color: rgba(251, 113, 133, 1);
}

.filter-hidden::before {
    transform: rotate(0deg);
    transition: transform 0.4s ease;
}

.filter-expand::before {
    transform: rotate(-90deg);
    transition: transform 0.4s ease;
}

/*Modal*/

.side-push-panel {
    overflow-x: hidden;
}

#side-panel {
    overflow-y: auto;
    --cnvs-side-panel-bg: var(--cnvs-contrast-100);
    position: fixed;
    top: 0;
    right: calc(-1 * var(--cnvs-side-panel-size));
    z-index: 699;
    width: var(--cnvs-side-panel-size);
    height: 100%;
    background-color: var(--cnvs-side-panel-bg);
    overflow-x: hidden;
    -webkit-backface-visibility: hidden;
}

.side-panel-left #side-panel {
    left: calc(-1 * var(--cnvs-side-panel-size));
    right: auto;
}

.side-push-panel.stretched #wrapper, .side-push-panel.stretched .sticky-header .container {
    position: relative;
    right: 0;
}

.side-panel-left.side-push-panel.stretched #wrapper,
.side-panel-left.side-push-panel.stretched .sticky-header .container {
    left: 0;
    right: auto;
}

#side-panel .side-panel-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: calc(var(--cnvs-side-panel-size) + 30px);
    height: 100%;
    overflow: auto;
    padding: var(--cnvs-side-panel-padding);
}

.device-touch #side-panel .side-panel-wrap {
    overflow-y: scroll;
}

#side-panel .widget {
    margin-top: var(--cnvs-side-panel-widget-padding);
    padding-top: var(--cnvs-side-panel-widget-padding);
    width: calc(var(--cnvs-side-panel-size) - 80px);
    border-top: 1px solid var(--cnvs-contrast-200);
}

    #side-panel .widget:first-child {
        padding-top: 0;
        border-top: 0;
        margin: 0;
    }

.side-panel-open #side-panel {
    right: 0;
}

.side-panel-left.side-panel-open #side-panel {
    left: 0;
    right: auto;
}

.side-push-panel.side-panel-open.stretched #wrapper,
.side-push-panel.side-panel-open.stretched .sticky-header .container {
    right: var(--cnvs-side-panel-size);
}

.side-push-panel.side-panel-open.stretched.device-xxl .slider-parallax .slider-inner, .side-push-panel.side-panel-open.stretched.device-xl .slider-parallax .slider-inner, .side-push-panel.side-panel-open.stretched.device-lg .slider-parallax .slider-inner {
    left: calc(-1 * var(--cnvs-side-panel-size));
}

.side-panel-left.side-push-panel.side-panel-open.stretched #wrapper,
.side-panel-left.side-push-panel.side-panel-open.stretched .sticky-header .container,
.side-panel-left.side-push-panel.side-panel-open.stretched .slider-inner {
    left: var(--cnvs-side-panel-size);
    right: auto;
}

#side-panel-trigger {
    display: block;
    cursor: pointer;
    z-index: 11;
    margin-right: 5px;
}

#side-panel-trigger-close a {
    display: none;
}

#side-panel,
.side-push-panel.stretched #wrapper,
.side-push-panel.stretched #header .container {
    transition: right 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
    #side-panel,
    .side-push-panel.stretched #wrapper,
    .side-push-panel.stretched #header .container {
        transition: none;
    }
}

.side-panel-left #side-panel,
.side-panel-left.side-push-panel.stretched #wrapper,
.side-panel-left.side-push-panel.stretched #header .container,
.side-push-panel.stretched .slider-inner {
    transition: left 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .side-panel-left #side-panel,
    .side-panel-left.side-push-panel.stretched #wrapper,
    .side-panel-left.side-push-panel.stretched #header .container,
    .side-push-panel.stretched .slider-inner {
        transition: none;
    }
}

.body-overlay {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: -1;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    transition: opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .body-overlay {
        transition: none;
    }
}

.side-panel-open .body-overlay {
    opacity: 1;
    z-index: 599;
    pointer-events: auto;
}

.side-panel-open:not(.device-xs):not(.device-sm):not(.device-md) .body-overlay:hover {
}

.dropdown-icon {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url('data:image/svg+xml;utf8,<svg fill="%23000" height="12" viewBox="0 0 24 24" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 10px center;
    background-size: 12px 12px;
    padding-right: 20px;
}

.filter-text-input {
    text-align: center;
    border: none;
    width: 75px;
    height: 30px;
    border: 1px solid #dedede;
    border-radius: 7px;
    appearance: none;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

    .filter-text-input:focus {
        border-color: rgba(251, 113, 133, 1);
        outline: none;
    }

.divider {
    width: 20px;
    height: 1px;
    background-color: grey;
    align-self: center;
    margin-left: 10px;
    margin-right: 10px;
}

.product-card {
    width: 300px;
    height: 300px;
}

    .product-card .carousel-inner img {
        height: 180px;
    }

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 120px;
}

.card-title {
    margin-bottom: 5px;
}

.card-text {
    flex-grow: 1;
}

.price {
    font-size: 1.5em;
    font-weight: bold;
    text-align: right;
}


.carousel-item img {
    object-fit: cover;
    height: 200px;
}

.card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    font-size: 1.2rem;
    font-weight: bold;
}

.card-description {
    font-size: 0.9rem;
    color: #6c757d;
}

.price {
    font-size: 1.5rem;
    font-weight: bold;
}

@media (max-width: 768px) {
    .product-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-price {
        margin-top: 0.5rem;
    }
}

.custom-container {
    width: 100%;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 10px;
    padding-left: 10px;
}



/* SIDE PANEL BUTTON */


.info-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}

    .info-button:hover {
        background-color: rgba(160, 160, 160, 0.3);
    }

    .info-button i {
        font-size: 18px;
    }

@media (max-width: 768px) {
    .info-button {
        z-index: -99;
    }
}


/* -------------------------------------------------- */
/* CATALOG PAGE FILTERS */
/* CATALOG PAGE FILTERS */
/* CATALOG PAGE FILTERS */
/* -------------------------------------------------- */





.filter-border::after {
    content: "";
    display: block;
    width: 80%;
    height: 1px;
    background-color: rgba(229, 231, 235, 1);
    position: absolute;
    bottom: 0;
    left: 10%;
}

.checkbox-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.custom-checkbox {
    position: relative;
    width: 25px;
    height: 25px;
}

    .custom-checkbox input[type="checkbox"] {
        opacity: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .custom-checkbox img {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        transition: border 0.3s ease;
    }

    .custom-checkbox input[type="checkbox"]:checked + img {
        border: 2px solid rgba(251, 113, 133, 1);
    }

.custom-container .product-card {
    text-align: left;
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 0rem;
    overflow: visible !important;
}

.product-image {
    object-fit: fill;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

    .product-image img {
        width: 100%;
        height: 100%;
    }

.product-info {
    padding: 15px;
    align-items: center;
}



.product-price {
    white-space: nowrap;
}

 
.icons-container { 
    z-index: 3;
    position: absolute;
    top: 0px;
    left: 10px;
    display: flex;
    gap: 10px;
}
.icon-wrapper {
    position: relative;
    display: flex; /* İçerik merkezleme için */
    justify-content: center; /* Yatayda merkezle */
    width: fit-content; /* Sadece içerik genişliğinde */
}

    .icons-container img {
        width: auto;
        height: 50px;
    }
.tooltip2 {
    position: absolute;
    top: -40px; /* İkon yüksekliğine göre ayarla */
    left: 50%;
    transform: translateX(-50%) translateY(-5px); /* Hassas pozisyonlama */
    background: rgba(209, 213, 219, 1);
    color: #000;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.icon-wrapper:hover .tooltip2 {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.swiper-container-wrapper {
    position: relative;
    width: 80%;
    margin: 5px auto;
}

@media (max-width: 1900px) {
    .swiper-container-wrapper {
        width: 70%;
    }
}

.mySwiperProdMain .swiper-button-prev:after, .mySwiperProdMain .swiper-button-next:after {
    content: " ";
}

.swiper-button-prev-color,
.swiper-button-next-color {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    color: black;
    padding: 10px;
    border-radius: 50%;
}

.swiper-button-prev-color {
    left: -40px;
}

.swiper-button-next-color {
    right: -40px;
}


.swiper-color-slide {
    border: none;
    text-align: center;
    font-size: 18px;
    background: #dedede;
    /*    border: 1px black double;*/
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 1px #d0d0d0 double;
}

    .swiper-color-slide img {
        width: 100%;
        height: auto;
        transform: scale(1.5) !important;
        transition: transform 0.3s ease;
    }

.tooltip {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    text-decoration: none;
}

.tooltip-inner {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    opacity: 0.6;
}

.tooltip > .tooltip-arrow {
    display: none;
}

.swiper-color-slide:hover {
}

.custom-container .swiper-image-prod {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .custom-container .swiper-image-prod img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.swiper-image-prod:hover {
    cursor: pointer;
}

.custom-container .swiper-prod-button-next,
.custom-container .swiper-prod-button-prev {
    color: black;
}


.custom-container .swiper-button-next::after,
.custom-container .swiper-button-prev::after {
    content: "";
}


/* -------------------------------------------------- */
/* PROD DETAILS */
/* PROD DETAILS */
/* PROD DETAILS */
/* -------------------------------------------------- */
.feature-item .col-md-4::before {
    content: "\2022";
    color: black;
    margin-right: 5px;
}

.feature-item .col-6::before {
    content: "\2022";
    color: black;
    margin-right: 5px;
}

.feature-title {
    color: #4B5563;
}

.feature-info {
    color: black;
    font-weight: bold;
}

.mySwiperProdMain,
.mySwiperProdMini {
    width: 100%;
    height: 100%;
}

    .mySwiperProdMain .swiper-slide,
    .mySwiperProdMini .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .mySwiperProdMain .swiper-slide img,
        .mySwiperProdMini .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.mySwiperProdMain {
    height: 600px;
    width: 100%;
    height: 600px;
    margin-left: auto;
    margin-right: auto;
}

.mySwiperProdMini {
    height: 600px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative !important; /* Kritik öneme sahip */
}

    .mySwiperProdMini .swiper-slide {
        width: 150px;
        height: 600px;
        opacity: 0.4;
    }

    .mySwiperProdMini .swiper-slide-thumb-active {
        opacity: 1;
    }
    /* Navigasyon butonları için temel stil */
    .mySwiperProdMini .swiper-button-prev,
    .mySwiperProdMini .swiper-button-next {

         position: absolute;
        left: 50% !important;
        transform: translateX(-50%);
        margin: 0 !important;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        z-index: 10;
        display: flex !important;
        align-items: center;
        justify-content: center;
    } 
    .mySwiperProdMini .swiper-button-next { 
        transform: translateX(-50%) rotate(180deg);
    }
    .mySwiperProdMini .swiper-button-next::after, .mySwiperProdMini .swiper-button-prev::after{
color:black;    }
    
    .mySwiperProdMini .swiper-button-prev {
        top: 15px !important;
        bottom: auto !important;
    }

    /* Aşağı ok için düzeltme */
    .mySwiperProdMini .swiper-button-next {
        top: auto !important;
        bottom: 15px !important;
    }
 

    /* Özel ok stilleri */


/* Bootstrap ikonları için ekstra stil (eğer kullanıyorsanız) */
.bi-chevron-right,
.bi-chevron-left,
.bi-chevron-up {
    color: black !important;
}

        /* Ok ikonlarının düzgün görünmesi için */
        .mySwiperProdMini .swiper-button-prev::after,
        .mySwiperProdMini .swiper-button-next::after {
            content: 'next' !important; /* Swiper'ın varsayılan ok karakteri */
            font-family: swiper-icons !important;
            font-size: 16px !important;
            transform: rotate(-90deg) !important; /* Okları düzeltmek için ek rotasyon */
        }

.product-price-discount {
    font-size: 22px;
    font-weight: 400;
    padding: 10px 0;
    clear: both;
}

    .product-price-discount span.line-through {
        text-decoration: line-through;
        margin-left: 10px;
        font-size: 14px;
        vertical-align: middle;
        color: #a5a5a5;
    }


.product-feature {
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
}




.product-title::after {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    bottom: -5px;
    left: 0;
}

.product-body {
    margin-top: 20px;
}

    .product-body .feature-item {
        margin-bottom: 10px;
    }

.product-information {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-name {
    font-size: 0.9em;
    margin: auto;
    margin-left: 0;
    position: relative;
    margin-right: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2em;
    min-height: calc(1.2em * 2);
}

.product-code {
    display: block;
    font-size: 10pt !important;
    color: grey;
}

.product-detail {
    margin-top: 0px;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-top: -100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: gray;
    font-size: 0.5em;
}


.product-price-old {
    font-size: 0.7em;
    text-decoration: line-through;
    margin-right: 10px;
    color: grey;
}

.product-details {
    text-align: left;
}

.product-title {
    font-size: 1.1em;
    margin-bottom: 5px;
}

.product-code {
    font-size: 0.9em;
    color: #777;
    margin: 0;
}

.product-price {
    display: flex;
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    margin: 0;
    gap: 0;
}

.prod-detail-spec {
    display: inline-flex;
    border-bottom: 1px solid #000;
    gap: 10px;
    align-items: baseline;
}

.product-header {
    align-items: center;
}




/* Shop quantity  */
.quantity {
    display: inline-block;
    position: relative;
}

    .quantity button {
        border: 0;
        background-color: transparent;
        padding: 0;
        margin: -9px 0 0 0;
        font-size: 22px;
        line-height: 18px;
        position: absolute;
        left: 15px;
        top: 50%;
        color: var(--dark-gray);
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }

        .quantity button.qty-plus {
            right: 15px;
            left: auto;
        }

    .quantity .qty-text {
        width: 115px;
        height: 54px;
        border: 1px solid var(--extra-medium-gray);
        border-radius: 5px;
        text-align: center;
        color: var(--dark-gray);
    }

.btn-cart.btn.btn-switch-text.btn-extra-large > span {
    padding: 13px 48px;
}


/* Shop color */
/* Shop color */
.shop-color {
    list-style: none;
    padding: 0;
    display: flex;
}

    .shop-color li {
        position: relative;
        display: inline-block;
        vertical-align: middle;
    }

        .shop-color li > input[type=radio] + label {
            display: flex;
        }

            .shop-color li > input[type=radio] + label span {
                height: 32px;
                width: 32px;
                border-radius: 100%;
                margin-right: 6px;
                display: inline-block;
                position: relative;
                vertical-align: middle;
                cursor: pointer;
            }

        .shop-color li input[type=radio]:checked + label span:after {
            position: absolute;
            top: 2px;
            left: 2px;
            color: var(--white);
            height: 28px;
            width: 28px;
            border: 2px solid var(--white);
            border-radius: 100%;
            text-align: center;
            content: "";
            font-weight: 900;
        }

.related-products {
    margin-top: 20px;
    padding: 0 20px;
}

    .related-products h3 {
        text-align: left;
        margin-bottom: 15px;
    }

.product-card {
    text-align: center;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.product-image {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.product-information {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-details {
    text-align: left;
}

.product-title {
    font-size: 1.1em;
    margin-bottom: 5px;
    margin-left: 0;
}

.product-code {
    font-size: 0.9em;
    color: #777;
    margin: 0;
}



.proddetailcolors .mySwiperProdColours {
    height: auto;
    width: 200px;
    border: 1px solid #40c0cb;
}

.proddetailcolors .swiper-prod-color {
    border-radius: 50%;
    height: 50px !important;
    width: 50px !important;
    border: 1px solid #c02942;
}


.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 100px;
}


.catalog-container {
    display: flex;
    align-items: center;
}

.catalog-name {
    color: rgba(128, 128, 128, 0.7);
    font-size: 1em;
    margin-right: 10px;
}

.separator {
    color: rgba(128, 128, 128, 0.7);
}

 

.custom-mainbox {
    box-sizing: border-box;
    position: relative;
    width: 230px;
    height: 50px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    border-radius: 160px;
    background-color: white;
    transition: all 0.3s ease;
    border: 2px rgba(128, 128, 128, 0.7) double;
}

.custom-search-box:checked ~ .custom-mainbox {
    border: none;
}

.custom-search-box:focus {
    border: none;
    outline: none;
}

.custom-search-box:checked {
    right: 10px;
    border: none;
}

    .custom-search-box:checked ~ .custom-mainbox {
        width: 50px;
    }

        .custom-search-box:checked ~ .custom-mainbox .custom-search_input {
            width: 0;
            height: 0px;
        }

        .custom-search-box:checked ~ .custom-mainbox .custom-iconContainer {
            padding-right: 8px;
        }

.custom-search-box {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 17px;
    top: 10px;
    z-index: 9;
    cursor: pointer;
    appearance: none;
}

.custom-search_input {
    box-sizing: border-box;
    height: 100%;
    width: 170px;
    background-color: transparent;
    border: none;
    outline: none;
    padding-bottom: 4px;
    padding-left: 10px;
    font-size: 1em;
    color: rgba(128, 128, 128, 0.7);
    transition: all 0.3s ease;
}

    .custom-search_input::placeholder {
        color: rgba(128, 128, 128, 0.7);
    }

.custom-iconContainer {
    transition: all 0.3s ease;
}

.custom-search_icon {
    box-sizing: border-box;
    fill: rgba(128, 128, 128, 0.7);
    font-size: 1.3em;
}

.custom-product-card-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: none;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(251, 113, 133, 1);
    border-radius: 4px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.5);
}


    .custom-product-card-checkbox:checked {
        background-color: rgba(251, 113, 133, 0.5);
        border: 1px solid rgba(251, 113, 133, 1);
        box-shadow: 0px 0px 0px 5px rgba(251, 113, 133, 0.5);
    }

    

        .custom-product-card-checkbox:checked::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 10px;
            border: solid rgba(251, 113, 133, 1); /* Tik rengi pembe */
            border-width: 0 2px 2px 0;
            transform: translate(-50%, -60%) rotate(45deg);
        }

.toggle-active .custom-product-card-checkbox {
    display: block;
}

/* -------------------------------------------------- */
/* FOOTER*/
/* FOOTER*/
/* FOOTER*/
/* -------------------------------------------------- */


.custom-catalog-footer {
    border-top: 0.5px solid #d0d0d0;
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.custom-catalog-footer-column {
    flex: 1;
    text-align: left;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.footer-logo {
    width: 180px;
    height: auto;
    margin-bottom: 10px;
}

.address-text {
    color: #aaa;
    font-size: 0.9em;
    margin-bottom: 20px;
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-icon {
    width: 30px;
    height: 30px;
    background-color: rgba(71, 71, 71, 1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
}

    .social-icon i {
        font-size: 1.2em;
        color: white;
    }

.footer-links {
    margin-top: auto;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.footer-link {
    color: #aaa;
    text-decoration: none;
    font-size: 0.9em;
}

    .footer-link:hover {
        color: white;
    }

    .footer-link:link, .footer-link:visited {
        color: #aaa;
        text-decoration: none;
    }

.image-icons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.image-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.footer-copyright {
    text-align: center;
    padding: 10px 0;
}


/***TEST***/

.filters-and-clear {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap; /* Alt satıra geçmesin */
    min-width: 0;
}

.selected-filters {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap; /* Alt satıra geçmesin */
    min-width: 0;
    overflow: hidden; /* Taşarsa gizle */
}

.filter-item {
    display: flex;
    align-items: center;
    background-color: white;
    border: 1px solid gray;
    border-radius: 20px;
    padding: 5px 10px;
    color: gray;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    flex-shrink: 1; /* Taşarsa küçülmeye izin ver */
}

.clear-all {
    background-color: white;
    color: black;
    border: 1px solid gray;
    border-radius: 20px;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0; /* Buton hiç küçülmez */
}

.sort-dropdown {
    margin-left: auto;
    flex-shrink: 0; /* Dropdown sıkışmaz */
}

.sort-options {
    padding: 5px;
    border-radius: 20px;
    border: 1px solid gray;
}

.custom-filter-container {
    padding-left: 20px;
    padding-right: 45px;
}


/*Send As Mail*/
.send-mail-btn {
    background: transparent;
    color: black;
    border: none;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

    .send-mail-btn:hover {
        background: #f0f0f0;
    }

.send-mail-btn-activated {
    color: #FB7185;
    text-decoration: underline;
}

.mail-container {
    display: none;
    margin-top: 10px;
}

.send-mail-container {
    padding: 10px;
    height: 20px;
    display: flex;
    align-items: center;
}

    .send-mail-container input {
        flex: 1;
        border-radius: 10px;
        border: 1px solid grey;
        background-color: transparent;
        margin-right: 10px;
        outline: none;
        box-shadow: none;
    }

    .send-mail-container button {
        border: 1px solid grey;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        outline: none;
        box-shadow: none;
    }


        .send-mail-container input:focus,
        .send-mail-container button:focus {
            outline: 0;
            border-color: grey;
            box-shadow: none;
        }

        .send-mail-container input:active,
        .send-mail-container button:active {
            outline: 0;
            box-shadow: none;
        }

.send-mail-container {
    outline: 0;
    box-shadow: none
}


    .send-mail-container.active input,
    .send-mail-container.active button {
        border-color: #81CF81;
    }




/*Preview Page Button*/

.fancy {
    background-color: transparent;
    border: 2px solid #000;
    border-radius: 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    float: right;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0;
    outline: none;
    overflow: visible;
    padding: 1.25em 2em;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    transition: all 0.3s ease-in-out;
    user-select: none;
    font-size: 13px;
}

    .fancy::before {
        content: " ";
        width: 1.5625rem;
        height: 2px;
        background: black;
        top: 50%;
        left: 1.5em;
        position: absolute;
        transform: translateY(-50%);
        transform-origin: center;
        transition: background 0.3s linear, width 0.3s linear;
    }

    .fancy .text {
        font-size: 1.125em;
        line-height: 1.33333em;
        padding-left: 2em;
        display: block;
        text-align: left;
        transition: all 0.3s ease-in-out;
        text-transform: uppercase;
        text-decoration: none;
        color: black;
    }

    .fancy .top-key {
        height: 2px;
        width: 1.5625rem;
        top: -2px;
        left: 0.625rem;
        position: absolute;
        background: #e8e8e8;
        transition: width 0.5s ease-out, left 0.3s ease-out;
    }

    .fancy .bottom-key-1 {
        height: 2px;
        width: 1.5625rem;
        right: 1.875rem;
        bottom: -2px;
        position: absolute;
        background: #e8e8e8;
        transition: width 0.5s ease-out, right 0.3s ease-out;
    }

    .fancy .bottom-key-2 {
        height: 2px;
        width: 0.625rem;
        right: 0.625rem;
        bottom: -2px;
        position: absolute;
        background: #e8e8e8;
        transition: width 0.5s ease-out, right 0.3s ease-out;
    }

    .fancy:hover {
        color: white;
        background: black;
    }

        .fancy:hover::before {
            width: 0.9375rem;
            background: white;
        }

        .fancy:hover .text {
            color: white;
            padding-left: 1.5em;
        }

        .fancy:hover .top-key {
            left: -2px;
            width: 0px;
        }

        .fancy:hover .bottom-key-1,
        .fancy:hover .bottom-key-2 {
            right: 0;
            width: 0;
        }




/*Login Page*/
.custom-body {
    background-image: url('/img/background/login-bg.png');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.login-container {
    background-color: rgba(249, 250, 251, 0.2);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    width: 700px;
    height: 300px;
    border: 2px solid rgba(229, 231, 235, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(2px);
}

    .login-container h2, .login-container span {
        color: white;
    }

    .login-container i,
    .login-container svg {
        color: white;
        fill: white;
    }

.custom-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 70%;
}

.password-input {
    background-color: rgba(249, 250, 251, 0.5);
    border-radius: 10px;
    border: 1px solid #ccc;
    padding: 10px;
    width: calc(100% - 60px);
    color: white;
}

    .password-input::placeholder {
        color: white;
    }

    .password-input:focus {
        border: 2px solid rgba(229, 231, 235, 1);
        outline: none;
    }

.toggle-password {
    background-color: rgba(249, 250, 251, 0.5);
    border: none;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-btn {
    background-color: rgba(249, 250, 251, 0.5);
    border: 2px solid rgba(231, 231, 231, 0.5);
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    max-width: 30%;
    color: white;
    margin-top: 10px;
}

.logo-container {
    position: absolute;
    left: 30px;
    bottom: 30px;
    width: auto;
    height: auto;
}

    .logo-container img {
        width: 100%;
        height: 100%;
    }


/*Pagination*/

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
}

.page-arrow {
    background-color: #F9FAFB;
    border: 2px solid #E5E7EB;
    cursor: pointer;
    font-size: 20px;
    font-weight: bolder;
    padding: 10px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    .page-arrow:disabled {
        visibility: hidden;
    }

.page-numbers {
    display: flex;
    gap: 5px;
}

.page-number {
    background-color: #F9FAFB;
    border: 2px solid #E5E7EB;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    .page-number.active {
        border-color: pink;
    }

.ellipsis {
    display: flex;
    align-items: center;
}

.page-number.active {
    border-color: #FB7185;
    color: #FB7185;
}


/* -------------------------------------------------- */
/* 17.02.2024 */
/* -------------------------------------------------- */

/* -------------------------------------------------- */
/*ATTRIBUTES SORTING*/
/*ATTRIBUTES SORTING*/
/*ATTRIBUTES SORTING*/
/* -------------------------------------------------- */

.sortable-list {
    list-style: none;
    padding: 0;
    width: 100%;
    margin: auto;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.sortable-item {
    padding: 15px 20px;
    margin: 8px 0;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    font-size: 1.1em;
    color: #333;
    font-weight: bold;
    cursor: grab;
    transition: background 0.2s, transform 0.2s;
}

    .sortable-item:hover {
        background: #bebebe;
        transform: scale(1.03);
    }

.dragging {
    opacity: 0.9;
    transform: rotate(-2deg);
}

.over {
    border: 2px dashed #fb7185;
    background: #000000;
}



/* -------------------------------------------------- */
/*CREATE CATALOG STEPS*/
/*CREATE CATALOG STEPS*/
/*CREATE CATALOG STEPS*/
/* -------------------------------------------------- */

.step-links a {
    font-size: 0.875rem;
    white-space: nowrap;
    text-decoration: none;
    color: #000;
    position: relative;
}

    .step-links a.active {
        color: rgba(251, 113, 133, 1);
    }

        .step-links a.active::after {
            content: "";
            display: block;
            width: 60%;
            height: 2px;
            background-color: rgba(251, 113, 133, 1);
            margin: 2px auto 0;
        }

.custom-btn {
    border: 2px solid rgba(156, 163, 175, 1);
    border-radius: 5px;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -------------------------------------------------- */
/*CREATE CATALOG STEPS*/
/*CREATE CATALOG STEPS*/
/*CREATE CATALOG STEPS*/
/* -------------------------------------------------- */

.attribute-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 600px;
}

.list-group-item {
    display: flex;
    align-items: center;
}

.list-group-item-active {
    background-color: rgba(251, 113, 133, 1) !important;
    color: white;
}

.list-group-item.list-group-item-active .btn-custom {
    color: white;
}

.form-check-input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 50%;
}

.form-check-input[type=checkbox] {
    border-radius: 50%;
}

.form-check-input {
    margin-top: 0px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid rgba(241, 231, 231, 1);
    position: relative;
    cursor: pointer;
    outline: none;
    display: inline-block;
}

    .form-check-input:checked {
        background-color: rgba(251, 113, 133, 1);
        border: 2px solid rgba(251, 113, 133, 1);
        content: none;
    }

        .form-check-input:checked[type=checkbox] {
            background-image: none;
            background-color: rgba(251, 113, 133, 1);
            border: 2px solid rgba(251, 113, 133, 1);
        }

.list-group-item {
    border: none !important;
    padding: 10px 15px;
}

.list-item-attribute {
    background-color: white !important;
    border-bottom: 1px solid rgba(229, 231, 235, 1) !important;
}

    .list-item-attribute:last-child {
        background-color: white !important;
        border-bottom: 1px solid rgba(229, 231, 235, 1) !important;
    }

.list-group-item:last-child {
    border: none !important;
}

.nav-tabs,
.nav-link {
    border: none !important;
}


    .nav-tabs .nav-item .nav-link.active {
        border-bottom: 2px solid red !important;
    }

.tab-content {
    padding: 10px 0px 30px 0px;
    border-radius: 10px;
    border: 2px solid rgba(229, 231, 235, 1);
}


.container-attributes {
    place-self: center;
    width: 90%;
}


/* Varsayılan renkler */
:root {
    --default-color: black;
}

/* Genel stil */
.sortable-item,
.sortable-item .product-title,
.sortable-item img,
.nav-link,
.nav-link i {
    color: var(--icon-color, var(--default-color));
    fill: var(--icon-color, var(--default-color));
}

    /* Aktif olan tab rengi */
    .nav-link.active {
        font-weight: bold;
    }

    /* Eski renk kodlarını ekledim */
    .nav-item[data-id="1"], .sortable-item[data-id="1"] {
        --icon-color: rgba(175, 113, 251, 1);
    }

    .nav-item[data-id="2"], .sortable-item[data-id="2"] {
        --icon-color: rgba(251, 113, 133, 1);
    }

    .nav-item[data-id="3"], .sortable-item[data-id="3"] {
        --icon-color: rgba(113, 131, 251, 1);
    }

    .nav-item[data-id="4"], .sortable-item[data-id="4"] {
        --icon-color: rgba(251, 161, 113, 1);
    }

    .nav-item[data-id="5"], .sortable-item[data-id="5"] {
        --icon-color: rgba(249, 113, 251, 1);
    }

    .nav-item[data-id="6"], .sortable-item[data-id="6"] {
        --icon-color: rgba(113, 173, 251, 1);
    }

    .nav-item[data-id="7"], .sortable-item[data-id="7"] {
        --icon-color: rgba(129, 251, 113, 1);
    }



/* Genel stiller: renkleri uygula */
.attribute-colors {
    color: var(--icon-color, black) !important;
}

    .attribute-colors.nav-link.active {
        color: var(--icon-color, black) !important;
    }

/* Sortable item içindeki ilgili öğelere aynı renk */
.sortable-item {
    color: var(--icon-color) !important;
}

    .sortable-item .product-header,
    .sortable-item .prod-detail-spec img,
    .sortable-item .product-title,
    .sortable-item .feature-title {
        color: var(--icon-color) !important;
        fill: var(--icon-color) !important; /* SVG ikonlar için */
    }

.nav-item .nav-link {
    display: flex;
    flex-wrap: wrap; /* İçerik uzun olursa alt satıra geçmesini sağlar */
    text-align: center; /* Metni ortala */
    justify-content: center; /* İçerik ortalansın */
    max-width: 150px; /* Buton genişliği belirli bir değerde sınırlansın */
    word-break: normal; /* Uzun kelimeler kırılarak alt satıra geçsin */
}

    .nav-item .nav-link span {
        font-size: 13px; /* Yazı boyutunu küçült */
        white-space: normal; /* Satır kaymasını etkinleştir */
    }


.cproducts-selected {
    top: 0;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.cproducts-filters {
    height: auto;
}

.cproducts-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 30px;
    border: none;
    border-radius: 5px;
    background: none;
    border: 1px solid rgba(251, 113, 133, 1);
    color: rgba(251, 113, 133, 1);
    font-size: 0.7em;
}

/*ssssssssssssssssssssssssssssssssssssssssssssss*/
.cproducts-container {
    max-width: 400px;
    margin: 20px auto;
    border: 2px solid #ddd;
    border-radius: 6px;
}

.cproducts-dropdown {
    padding: 10px;
    /*margin-top: 10px;*/
    margin-left: 15px;
    border-radius: 5px;
}

.cproducts-dropdown-label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
}

.cproducts-dropdown-toggle {
    transition: transform 0.3s ease;
    margin-left: 5px;
}

    .cproducts-dropdown-toggle.open {
        transform: rotate(-90deg);
    }

.cproducts-dropdown-content {
    display: none;
    padding: 10px;
}

.cproducts-group {
    margin-bottom: 10px;
    justify-content: flex-start;
}

.cproducts-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.cproducts-subgroup {
    display: none;
    padding-left: 20px;
}

.cproducts-toggle {
    cursor: pointer;
    transition: transform 0.3s ease;
}

    .cproducts-toggle.open {
        transform: rotate(-90deg);
    }

/* Checkbox styling */
.cproducts-checkbox {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(229, 231, 235, 1);
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}

    .cproducts-checkbox:checked {
        background-color: rgba(251, 113, 133, 1);
        border-color: rgba(251, 113, 133, 1);
    }

        .cproducts-checkbox:checked::after {
            content: '\2713';
            font-size: 12px;
            color: white;
            font-weight: bold;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }


.cproducts-colors {
    border-top: 1px solid #ddd;
    width: calc(100% - 50px); /* Sağdan ve soldan 25px boşluk bırak */
    margin: 0 auto; /* Ortalamak için */
    padding-top: 10px;
}

.cproducts-colorf {
    padding: 10px;
}

.cproducts-boxfilters {
    padding: 25px;
}

.cproducts-custom-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* İkon ile metin arasına boşluk bırak */
    background-color: white;
    color: #333; /* Yazı rengi */
    border: none;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .cproducts-custom-btn:hover {
        background-color: rgba(251, 113, 133, 1);
        color: white; /* Hover olunca yazı rengi beyaz */
    }

    .cproducts-custom-btn i {
        font-size: 16px;
    }

.cproducts-product-img {
    width: 47px;
    height: 47px;
    border-radius: 5px;
    object-fit: cover; /* Resmin oranını koruyarak kırpmak için */
    border: 1px solid #ddd; /* Hafif bir çerçeve */
}

.cproducts-table {
    vertical-align: middle !important;
}


/*MODAL*/


.cproducts-modal-content {
    max-width: 90%; /* Increase width for better visibility */
    min-width: 700px; /* Ensure minimum width for usability */
    height: auto; /* Allow height to adjust dynamically */
    padding: 30px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the modal */
}

    .cproducts-modal-content .modal-header {
        border-bottom: none;
    }


.cproducts-modal-title {
    font-weight: bold;
}

.cproducts-modal-dragzone {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='6' ry='6' stroke='%239CA3AFFF' stroke-width='5' stroke-dasharray='11' stroke-dashoffset='46' stroke-linecap='square'/%3e%3c/svg%3e");
    border-radius: 6px;
    display: flex;
    height: 30vh;
    /*    border: 2px dashed #ccc;
*/ padding: 30px;
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cproducts-modal-dragtext {
    font-weight: bold;
    margin: 0;
}

.cproducts-modal-subtext {
    color: #6c757d;
    margin: 5px 0 0;
}

.cproducts-modal-info {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.cproducts-modal-info-icon {
    color: rgba(251, 113, 133, 1);
    font-size: 24px;
    margin-right: 10px;
}

.cproducts-modal-info-text {
    flex-grow: 1;
}

.cproducts-modal-info-title {
    color: rgba(251, 113, 133, 1);
    font-weight: bold;
    margin: 0;
}

.cproducts-modal-info-description {
    color: #6c757d;
    margin: 5px 0 0;
}

/*sss*/


.cproducts-table {
    width: 100%;
    border-collapse: collapse;
}

    .cproducts-table th,
    .cproducts-table td {
        padding: 8px;
        text-align: left;
        white-space: nowrap; /* Metni tek satırda tut */
        overflow: hidden; /* Taşan içeriği gizle */
        text-overflow: ellipsis; /* Sonunu ... ile kes */
        max-width: 20px; /* Hücre genişliği (ihtiyaca göre ayarla) */
    }

.cproducts-product-img {
    width: 47px;
    height: auto;
}


.cproducts-filterarea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.cproducts-filter-search {
    border: none;
    outline: none;
    background: none;
    color: rgba(156, 163, 175, 1);
    margin-left: 8px;
    width: 35%;
}

.cproducts-added-container {
    width: 100%;
}

.cproducts-added-text {
    font-size: 16px;
    color: #333;
}

.cproducts-added-count {
    text-decoration: underline;
}

.cproducts-added-undo {
    background-color: transparent;
    border: none;
    color: rgba(156, 163, 175, 1);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

    .cproducts-added-undo i {
        font-size: 18px;
    }
/*sadasdasdasd*/

.cpattributes-modal {
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
}

.cpattributes-modal-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-width: 600px;
}

.cpattributes-modal-content {
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    max-width: 900px;
    width: 100%;
}

.cpattributes-modal-title {
    font-weight: bold;
    margin-bottom: 10px;
}

.cpattributes-modal-description {
    font-size: small;
    color: rgba(156, 163, 175, 1);
    margin-bottom: 10px;
}

.cpattributes-modal-box {
    border: 1px solid rgba(229, 231, 235, 1);
    border-radius: 6px;
    padding: 30px;
    background-color: white;
    margin-bottom: 10px;
}

.cpattributes-modal-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 5px;
}

.cpattributes-modal-bar {
    color: rgba(0, 0, 0, 1);
    height: 20px;
    margin-right: 5px;
}

.cpattributes-modal-label {
    font-weight: lighter;
}

.cpattributes-modal-value {
    font-weight: bold;
}

.cpattributes-modal-divider {
    border-color: rgba(209, 209, 216, 1);
    margin: 20px 10px;
}

.cpattributes-modal-info {
    display: flex;
    align-items: center;
    color: rgba(59, 130, 246, 1);
    margin-bottom: 10px;
    gap: 8px;
}

.cpattributes-modal-footer {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.cpattributes-modal-btn-back {
    color: black;
    border: 1px solid rgba(212, 212, 216, 1);
    border-radius: 8px;
    padding: 10px 30px;
    background-color: transparent;
}

.cpattributes-modal-btn-complete {
    color: rgba(251, 113, 133, 1);
    border: 1px solid rgba(251, 113, 133, 1);
    border-radius: 8px;
    padding: 10px 30px;
    background-color: transparent;
}


/*03032025*/

.cat-button-detail-bookmark {
    position: absolute;
    bottom: 40px; /* Quick View butonunun üstünde */
    left: 10px;
    background: transparent;
    border: none;
    padding: 5px;
    opacity: 0;
    transition: all 0.3s ease;
    color: #666;
    cursor: pointer;
    z-index: 3;
}

    .cat-button-detail-bookmark:hover {
        color: rgba(0,0,0,0.7);
    }

    .cat-button-detail-bookmark.active i {
        color: rgba(253, 230, 138, 1) !important;
    }

    .cat-button-detail-bookmark i {
        font-size: 24px;
    }

.product-card:hover .cat-button-detail-bookmark {
    opacity: 1;
}

/* Quick View Button (Konum Sabit) */
.cat-button-detail-quickview {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 32px;
    background: #666;
    color: white;
    border: none;
    opacity: 0;
    transform: translateY(100%); /* Başlangıç pozisyonu */
    transition: all 0.2s ease; /* opacity VE transform için geçiş */
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.product-card:hover .cat-button-detail-quickview {
    opacity: 0.7;
    transform: translateY(0); /* Son pozisyon */
}



.filter-icon-rotate {
    transform: rotate(90deg) !important;
}