:root {
    --bug-green: #4be1ca;
    --bug-red: #FF2D6E;
    --bug-ws: #F5F5F5;
    --bug-lb: #081930;
    --bug-blue: #002776;
    --bug-gray: #848A96;

    --bs-muted: #8492A6FF;

    --bug-gradient: linear-gradient(-45deg, var(--bug-green), var(--bug-red));
}

::-moz-selection {
  background: var(--bug-green);
  color: #ffffff;
}

::selection {
  background: var(--bug-green);
  color: #ffffff;
}

/* Book (Light/Regular) */
@font-face {
    font-family: 'BlenderPro';
    src: url('/assets/fonts/BlenderPro-Book.ttf') format('truetype');
    font-weight: 400; /* or sometimes 300 */
    font-style: normal;
    font-display: swap;
}

/* Medium */
@font-face {
    font-family: 'BlenderPro';
    src: url('/assets/fonts/BlenderPro-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Bold */
@font-face {
    font-family: 'BlenderPro';
    src: url('/assets/fonts/BlenderPro-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Medium */
@font-face {
    font-family: 'Formular';
    src: url('/assets/fonts/Formular-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Bold */
@font-face {
    font-family: 'Formular';
    src: url('/assets/fonts/Formular-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ABC Normal';
    src: url('/assets/fonts/ABC Normal.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Calibri';
    src: url('/assets/fonts/calibri-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.bg-bug-ws {
    background-color: var(--bug-ws) !important;
}

.bg-bug-lb {
    background-color: var(--bug-lb) !important;
}

.bg-bug-blue {
    background-color: var(--bug-blue) !important;
}

.bg-bug-gray {
    background-color: var(--bug-gray) !important;
}

.bg-bug-gradient {
    background: var(--bug-gradient);
}

body {
    background-color: var(--bug-ws);
    font-family: "ABC Normal", sans-serif;
}

.color-normal {
    color: #212529 !important;
}

.form-check-input.form-check-input:checked {
    background-color: var(--bug-green);
    border-color: var(--bug-green);
}

.form-check-input, .form-check-input:focus {
    border: 1px solid var(--bug-lb);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Formular", sans-serif !important;
}


.selection {
    width: 170px;
    /*height: 200px;*/
    margin: 0.4rem;
}

.bug-btn {
    text-transform: uppercase;
    font-family: BlenderPro, sans-serif;
    padding: 8px 20px;
    outline: none;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.5px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    font-weight: 500;
    border-radius: 5px;
}

.special-btn-padding {
    padding: 8px 12px 8px 20px;
}

.bug-btn.disabled {
    cursor: not-allowed;
}

.bug-btn:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bug-btn-primary {
    background-color: #FF2D6ED4;
    border: none;
    color: #ffffff;
    -webkit-box-shadow: 0 3px 5px 0 rgba(255, 45, 110, 0.3);
    box-shadow: 0 3px 5px 0 rgba(255, 45, 110, 0.3);
}

.bug-btn-primary:not(.disabled):hover, .bug-btn-primary:not(.disabled):focus, .bug-btn-primary:not(.disabled):active, .bug-btn-primary.active, .bug-btn-primary.focus {
    background-color: var(--bug-red);
    border-color: var(--bug-red);
    color: #ffffff;
}

.bug-btn-outline-primary {
    border: 1px solid #FF2D6ED4;
    color: #FF2D6ED4;
    background-color: #ffffffd0;
}

.bug-btn-outline-primary:hover, .bug-btn-outline-primary:focus, .bug-btn-outline-primary:active, .bug-btn-outline-primary.active, .bug-btn-outline-primary.focus, .bug-btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--bug-red);
    border-color: var(--bug-red);
    color: #ffffff;
    -webkit-box-shadow: 0 3px 5px 0 rgba(255, 45, 110, 0.3);
    box-shadow: 0 3px 5px 0 rgba(255, 45, 110, 0.3);
}


.selection-widget {
    outline: 5px solid transparent;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.selection-widget:has(input[type="checkbox"]:checked) {
    /*border:  3px solid var(--bug-green) !important;*/
    outline: 5px solid var(--bug-green);
}

/*.selection-widget:hover {*/
/*    -webkit-transform: translateY(-10px);*/
/*    transform: translateY(-10px);*/
/*}*/

.cursor-pointer {
    cursor: pointer;
}

.widget-checkbox-container {
    display: flex;
    align-items: end;
    justify-content: center;
    width: 100%;
}

.widget-checkbox-container input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
    width: 16px;
}

.widget-checkbox-container label {
    text-align: center;
    flex-grow: 1;
    margin-right: 16px; /* Compensate for checkbox width + gap to truly center the text */
    margin-bottom: -6px;
}


#step1-content {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0;
}

@media (max-width: 768px) {
    .preview {
        max-width: 100px;
    }
}

@media (min-width: 768px) {
    .preview {
        max-width: 125px;
    }
}

.preview .card-body {
    padding: 0.4rem 0.1rem;
    font-size: 1rem;
}

.close-preview-btn {
    position: absolute;
    top: 0;
    left: 100%;
    transform: translate(-50%, -50%);
    padding: 4px 8px;
    font-size: 10px;
}

.addon-tooltip {
    position: absolute;
    top: 0;
    left: 100%;
    transform: translate(-50%, -50%);
    padding: 3px 8px;
    font-size: 10px;
}


.slider-round {
    height: 10px;
}

.slider-round .noUi-connect {
    background: var(--bug-green);
}

.noUi-connects {
    background-color: var(--bug-green);
}

.slider-round .noUi-handle {
    height: 18px;
    width: 18px;
    top: -5px;
    right: -9px; /* half the width */
    border-radius: 9px;
    background-color: var(--bug-red);
}

.slider-styled,
.slider-styled .noUi-handle {
    box-shadow: none;
}

/* Hide markers on slider handles */
.slider-styled .noUi-handle::before,
.slider-styled .noUi-handle::after {
    display: none;
}

.slider-round .noUi-tooltip {
    display: none;
}

.slider-round .noUi-active .noUi-tooltip,
.slider-round .noUi-handle:hover .noUi-tooltip {
    display: block;
}

.noUi-value {
    color: var(--bug-red);
}

.noUi-marker-large, .noUi-marker-sub {
    background-color: var(--bug-red);
}

.option-radio-box {
    outline: 1px solid var(--bs-card-border-color);
    cursor: pointer;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.option-radio-box:hover {
    transform: translateY(-10px);
    background-color: color-mix(in srgb, var(--bug-green) 15%, transparent) !important;
}

input[type="radio"]:checked + .option-radio-box {
    /*background-color: color-mix(in srgb, var(--bug-green) 25%, transparent) !important;*/
}

.option-radio-box:hover h5,
.option-radio-box:hover i,
.option-radio-box:hover .radio-package-price,
input[type="radio"]:checked + .option-radio-box i,
input[type="radio"]:checked + .option-radio-box h5,
input[type="radio"]:checked + .option-radio-box .radio-package-price {
    color: var(--bug-green) !important;
}

input[type="radio"]:checked + .option-radio-box .radio-bugshell-logo {
    color: var(--bug-red) !important;
    opacity: .25;
}

input[type="radio"]:checked + label.option-radio-box {
    outline: 3px solid var(--bug-green);
}

.addon-container {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 0.75rem;
}

.addon-box {
    outline: 1px solid var(--bs-card-border-color);
    cursor: pointer;
}

.addon-box:hover h6,
.addon-box:hover p,
.addon-box:hover .addon-bugshell-logo,
input[type="checkbox"].addon-checkbox:checked + .addon-box h6,
input[type="checkbox"].addon-checkbox:checked + .addon-box p,
input[type="checkbox"].addon-checkbox:checked + .addon-box .icon-color {
    color: var(--bug-green) !important;
}

input[type="checkbox"].addon-checkbox:checked + .addon-box .addon-bugshell-logo {
    color: var(--bug-red) !important;
}

.addon-box:hover .opacity-05,
input[type="checkbox"].addon-checkbox:checked ~ div div .opacity-05 {
    opacity: .25;
}

input[type="checkbox"].addon-checkbox:checked + div.addon-box {
    outline: 3px solid var(--bug-green);
}

.icon-color {
    color: var(--bug-blue);
}

.option-value-display {

    background: linear-gradient(45deg, transparent, color-mix(in srgb, var(--bug-red) 35%, transparent));
    color: var(--bug-red);
    /*background: var(--bug-gradient);*/
    /*color: white;*/
    height: 45px;
    width: 45px;
    min-width: 45px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}


.bug-red {
    color: var(--bug-red) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.bug-green {
    color: var(--bug-green) !important;
}

.bug-blue {
    color: var(--bug-blue) !important;
}

.bug-lb {
    color: var(--bug-lb) !important;
}

.no-spinner {
    -moz-appearance: textfield;
}

.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.card {
    /*--bs-card-border-color: var(--bug-lb);*/
}


.tooltip {
    --bs-tooltip-color: var(--bug-blue);
    --bs-tooltip-bg: white;
    border: 1px solid var(--bug-lb);
    border-radius: 5px;
    box-shadow: var(--bs-box-shadow);
    margin-left: 6px;
}

.tooltip.show {
    opacity: 1;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .w-sm-25 {
        width: 25% !important;
    }

    .w-sm-50 {
        width: 50% !important;
    }

    .w-sm-75 {
        width: 75% !important;
    }

    .w-sm-100 {
        width: 100% !important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .w-md-25 {
        width: 25% !important;
    }

    .w-md-50 {
        width: 50% !important;
    }

    .w-md-75 {
        width: 75% !important;
    }

    .w-md-100 {
        width: 100% !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .w-lg-25 {
        width: 25% !important;
    }

    .w-lg-50 {
        width: 50% !important;
    }

    .w-lg-75 {
        width: 75% !important;
    }

    .w-lg-100 {
        width: 100% !important;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .w-xl-25 {
        width: 25% !important;
    }

    .w-xl-50 {
        width: 50% !important;
    }

    .w-xl-75 {
        width: 75% !important;
    }

    .w-xl-100 {
        width: 100% !important;
    }
}

/* normally xxl is 1400px and up */
@media (min-width: 1600px) {
    .w-xxl-36 {
        width: 36% !important;
    }

    .w-xxl-50 {
        width: 50% !important;
    }

    .w-xxl-75 {
        width: 75% !important;
    }

    .w-xxl-100 {
        width: 100% !important;
    }
}

.w-240px {
    width: 240px;
}

.mw-340px {
    max-width: 340px;
}

.mw-lg-700px {
    max-width: 700px;
}

.navigation-button {
    position: fixed;
    bottom: 1.75rem;
    z-index: 1000;
}

.navigation-button.d-none {
    z-index: -1;
}

.nav-btn-left {
    left: 1.75rem;
}

.nav-btn-right {
    right: 1.75rem;
}

.min-w-100px {
    min-width: 100px;
}

.mh-40px {
    max-height: 40px;
}

.h-50px {
    height: 50px !important;
}

textarea.form-control {
    border: 1px solid var(--bs-muted) !important;
}

::placeholder {
    color: var(--bs-muted) !important;
}

.clickable-radio .border:has(input[type="radio"]:checked) {
    border-color: var(--bug-green) !important;
}

.btn-soft-bug-red {
    background-color: color-mix(in srgb, var(--bug-red) 35%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--bug-red) 35%, transparent) !important;
    color: var(--bug-red) !important;
    -webkit-box-shadow: 0 3px 5px 0 color-mix(in srgb, var(--bug-red) 10%, transparent) !important;
    box-shadow: 0 3px 5px 0 color-mix(in srgb, var(--bug-red) 10%, transparent) !important;
}

.btn-soft-bug-red:hover {
    background-color: var(--bug-red) !important;
    border-color: var(--bug-red) !important;
    color: #fff !important;
}

.btn-soft-bug-green {
    background-color: color-mix(in srgb, var(--bug-green) 40%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--bug-green) 40%, transparent) !important;
    color: var(--bug-green) !important;
    -webkit-box-shadow: 0 3px 5px 0 color-mix(in srgb, var(--bug-green) 0.5%, transparent) !important;
    box-shadow: 0 3px 5px 0 color-mix(in srgb, var(--bug-green) 0.5%, transparent) !important;
}

.btn-soft-bug-green:hover {
    background-color: var(--bug-green) !important;
    border-color: var(--bug-green) !important;
    color: #fff !important;
}

.blog .hover-shopping-icon {
    top: 50%;
    right: 41%;
    position: absolute;
    z-index: 1;
    opacity: 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.blog:hover .hover-shopping-icon {
    opacity: 1;
}

.btn.btn-lg {
    padding: 16px 32px;
    font-size: 20px;
}

.logo-container {
    width: 120px;
    height: 120px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    border: 3px solid #e9ecef;
}

.spinner-custom {
  --bs-spinner-width: 1.2rem;
  --bs-spinner-height: 1.2rem;
  --bs-spinner-border-width: 0.1em;
}

.pt-1px {
    padding-top: 1px;
}