@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

.dominant-icon {
    font-family: "Material Symbols Outlined";
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    font-size: 24px !important;
    font-weight: 300;
    width: 1em;
    height: 1em;
    line-height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-transform: none;
    overflow: hidden;

}
.dominant-icon-s {
    font-size: 18px !important;
}
.dominant-icon-xs {
    font-size: 16px !important;
}
.dominant-icon-xxs {
    font-size: 12px !important;
}
.dominant-icon-lg {
    font-size: 28px !important;
}
.dominant-icon-md {
    font-size: 26px !important;
}
.dominant-icon-xl {
    font-size: 32px !important;
}
.dominant-icon-xxl {
    font-size: 48px !important;
}

.dominant-menu-icon {
 font-size: 24px !important;
}

.dominant-icon.breadcrumb-icon {
  margin-left: 10px;
  font-size: 8px !important;
}

@media only screen and (max-width: 1400px) {
  .dominant-menu-icon {
    font-size: 20px !important;
  }
}

.bbd-navbar-offset {
    margin-bottom:100px;
}
@media (max-width: 1200px) {
    .bbd-navbar-offset {
        margin-bottom:48px;
    }
}
@media (max-width: 576px) {
    .bbd-navbar-offset {
        margin-bottom: 1rem;
    }
}

body, html {
    font-family: "Outfit", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-optical-sizing: auto;
    position: relative;
    height: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

:root, [data-bs-theme=light] {
    --bs-primary: #0061FF;
    --bs-primary-rgb: 0, 97, 255; /* RGB value of #473BF0 */
    --bs-primary-text-emphasis: #2C239A; /* Darker, contrasting color for emphasis */
    --bs-primary-bg-subtle: #D6D6F7; /* Light background, slightly off-white */
    --bs-primary-border-subtle: #60EFFF; /* Slightly darker border to match */
    --bs-box-shadow: 0 0.1875rem 0.5rem 0 rgba(34, 48, 62, 0.055);
    --bs-border-hover: #c0c0c0;
    --bs-btn-group-border-color: #e4e6e8;
    --bs-bg-white-hover: #f8f8f8;
    --bs-card-bg: #FFFFFF;
    --bs-light-rgb: #ededed;
    --bs-border: #dddddd;
    --bs-list-group-timeline-bg: #cacaca;
    --bs-text-light: #767676;
    --bs-text-light-hover: #1d1d1d;
    --bs-text-body: #2b2b2b;
    --bs-success-rgb: 92, 194, 48;
    --bs-bg-label-primary: #0062ff33;
    --bs-light-blue: #60EFFF;
    --bs-text-black: #000000;
    --bs-border-primary: #0061FF;
    --bs-badge-font-size: 0.55rem;
    --jmp-select-multiple-choice-bg: #0062ff17;
    --jmp-select-multiple-choice-color: #212529;
    --bs-devider: #f5f5f5;
    --jmp-toast-bg: #FFFFFF;
    --jmp-pagination-hover-bg: #0062ff27;
    --jmp-pagination-active-hover-bg: rgb(0, 62, 161);
}

[data-bs-theme=dark] {
    --bs-primary: #0061FF;
    --bs-primary-rgb: 0, 97, 255;
    --bs-primary-text-emphasis: #B6A9F5; /* Lighter emphasis text for dark theme */
    --bs-primary-bg-subtle: #2A1E8D; /* Darker, rich background to match primary */
    --bs-primary-border-subtle: #5A3EC0; /* Darker border to match */
    --bs-border-hover: #5d619b;
    --bs-btn-group-border-color: #5A3EC0;
    --bs-card-bg: #2b2c40;
    --bs-text-black: #ffffff;
    --bs-text-body: #d5d5e2;
    --bs-badge-font-size: 0.75rem;
    --bs-border: #3a3a4e;
    --bs-bg-white-hover: #2c2c3a;
    --bs-text-light-hover: #ffffff;
    --bs-text-light: #a1a1b3;
    --jmp-select-multiple-choice-bg: #3a3a4e;
    --jmp-select-multiple-choice-color: #ffffff;
    --bs-devider: #3a3a4e;
    --jmp-toast-bg: #2b2c40;
    --jmp-pagination-hover-bg: #0062ff34;
    --jmp-pagination-active-hover-bg: rgb(0, 72, 189)
}


.page-link:hover {
    background-color: var(--jmp-pagination-hover-bg);
}

.active .page-link:hover {
    background-color: var(--jmp-pagination-active-hover-bg);
}

.avatar {
    cursor:auto;
}

hr {
  color: var(--bs-devider);
}

.spinner-add-to-cart {
  height: 24px;
  width: 24px;
  color: #60EFFF;
}

.border-label-primary {
  border-color: rgba(var(--bs-primary-rgb), 0.4) !important; /* 40% opacity */
}
.border-label-success {
  border-color: rgba(var(--bs-success-rgb), 0.4) !important; /* 40% opacity */
}

.quantity-add {
    border-radius: 0px 3px 3px 0px;
    border-width: 1px 1px 1px 0px;
    border-color: var(--bs-border);
    border-style: solid;
}

.quantity-subtract {
    border-radius: 3px 0px 0px 3px;
    border-width: 1px 0px 1px 1px;
    border-color: var(--bs-border);
    border-style: solid;
}

.quantity-add:hover, .quantity-subtract:hover {
  background-color: var(--bs-bg-white-hover);
  border-color: var(--bs-border-hover);
  color: var(--bs-text-light-hover);
}

.bg-light-blue {
  background-color: var(--bs-light-blue);
}

.border-primary {
  border-color: var(--bs-border-primary) !important;
  border-width: 1px;
  border-style: solid;
}

.offcanvas.offcanvas-end {
  width:600px;
}
a.bbd-cart-link:hover {
    text-decoration: underline;
}
.bbd-buy {
    z-index:1;
}

.badge-center {
  font-size: 0.7rem;
  block-size: 1.2rem;
  inline-size: 1.2rem;
}

/** Fixes grouped floating inputs **/
.form-floating > .form-select {
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
}
.form-floating > .form-control {
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
}
.form-floating > .form-control:focus {
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
}
.form-floating > .form-control:focus-within {
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
}
.input-group:has(button) .form-control {
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
}
/* (Optional) If you want to keep the focus-within behavior for input-groups */
html:not([dir='rtl']) .input-group .form-select {
    padding: calc(0.543rem - 2px) calc(0.9375rem - 2px);
}
[dir='rtl'] .input-group .form-select {
    padding: calc(0.543rem - 2px) calc(0.9375rem - 2px);
}
.flatpickr-calendar.open {
    z-index: 1090 !important;
}
.bbd-btn-icon {
    block-size: calc(2.2505001rem + calc(var(--bs-border-width)* 2));
    inline-size: calc(2.2505001rem + calc(var(--bs-border-width)* 2));
    padding:0;
}

.no-select {
  user-select: none;
}

.pagination > .page-item > .page-link {
  border-radius: 5px !important;
}

/** Fixes typography **/
.display-6, .display-5, .jmp-category-text {
    font-weight: 400;
    color: var(--bs-text-body);
}

.fs-7 {
  font-size: 0.8rem !important;
}

.text-main {
  color: var(--bs-text-black);
}

/** Fixes typography **/

.cart-icon, .jmp-menu-icon {
  height: 48px;
  width: 48px;
}

.jmp-seach-field {
  max-width: 600px !important;
  height: 48px;
}

@media only screen and (max-width: 768px) {
  .jmp-seach-field {
    max-width: 100% !important;
  }
}

@media (min-width: 1200px) {
    .layout-menu-fixed:not(.layout-navbar-hidden) .layout-horizontal .layout-page .menu-horizontal, .layout-menu-fixed-offcanvas:not(.layout-navbar-hidden) .layout-horizontal .layout-page .menu-horizontal {
        position: fixed;
        inset-block-start: 72px;
    }
}


.btn-secondary {
    background-color: var(--bs-bg-white);
    border: 1px solid var(--bs-border);
    transition: 200ms all ease-in;
    color: var(--bs-text-body);
}

.btn-secondary:hover {
    background-color: var(--bs-bg-white-hover);
    border: 1px solid var(--bs-border-hover);
    color: var(--bs-black);
}

.jmp-logo {
    max-width: 120px;
}
.jmp-logo-icon {
    max-width: 32px;
    height: auto;
}

.jmp-category-text {
    font-size: 18px;
}

.jmp-category {
    transition: 150ms ease-in-out all;
}

.jmp-category span {
    opacity: 0;
    transform: translateX(-12px);
    transition: 150ms ease-in-out all;
}


.jmp-category:hover span {
    opacity: 1;
    transform: translateX(0px);
}

.jmp-category:hover.border, .product:hover.border {
    border: solid 1px var(--bs-border-hover) !important;
}


.jmp-category {
    flex: 1 1 calc(50% - 1rem); /* 2 per row, subtract gap */
    max-width: 100%;
  }


.category-image {
    transition: 200ms ease-in-out all;
}

.jmp-category:hover .category-image {
    transform: scale(1.06);

}

.card-product-description {
    display: block;           /* ensures the element respects width */
    width: 100%;              /* make it fit the container */
    white-space: nowrap;      /* keep on one line */
    overflow: hidden;         /* hide overflow */
    text-overflow: ellipsis;  /* show "..." */
}

.card-product-title {
    font-size: 1.05rem;
    line-height: 1.15rem;
    font-weight: 300;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* antal linjer */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.jmp-product-title {
    display: -webkit-box;
    -webkit-line-clamp: 1; /* antal linjer */
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.card-product-image {
    width: 100%;
    height: 290px;
    object-fit: contain;
}

.card-product-price {
    color: var(--bs-text-body);
    font-size: 1.3rem;
    line-height: 1.3rem;
}

.card-product-price-eks-moms {
    color: var(--bs-text-light);
}

.card-stock {
    font-weight: 300;
}

.bg-light {
    background-color: #f4f4f4 !important;
}

.card-add-to-cart {
    border: 1px solid var(--bs-border);
    background-color: var(--bs-bg-white-hover);
    color: var(--bs-text-body);
    transition: 200ms ease-in all;
}

.card-add-to-cart:hover {
    border: 1px solid var(--bs-primary);
    background-color: var(--bs-bg-label-primary);
    color: var(--bs-primary);
}

.favorite {
opacity: 0;
transition: 150ms all ease-in-out;
border-radius: 123px;
color: var(--bs-text-light);
}



@media only screen and (max-width: 992px) {
  .favorite {
  opacity: 0.6;
}
}

.favorite:hover {
opacity: 1;
color: black;
}

.swiper-slide.product:hover .favorite {
        opacity: 0.50;
}
.jmp-product-card.product:hover .favorite {
        opacity: 0.50;
}


/* Product page classes */

.product-brand-logo {
  max-height: 32px;
  width: auto;
  object-fit: contain;
}

.specification-section {
  text-transform:none;
  background-color:#e7e7ff;
  font-size:0.9rem;
  color: var(--bs-primary);
}

.accordion .accordion-button:not(.collapsed)::after, .accordion .accordion-button::after {
  width: 32px;
  height: 32px;
}



/* Checkout */

.quantity-control-checkout {
  opacity: 0.25;
  transition: opacity 150ms ease-in-out;
}

.item-in-cart-checkout:hover .quantity-control-checkout {
  opacity: 1;
}

/* Navbar */
.avatar.avatar-online::after, .avatar.avatar-offline::after, .avatar.avatar-away::after, .avatar.avatar-busy::after {
margin-bottom: 4px;
margin-right: 2px;
}

/* Standard style */
#pickupShopSelect + .dropdown-toggle {
  border: 1px solid #ced4da; /* default grå */
  background-color: #fff;
  color: #212529;
}

/* Når selecten er åben/fokuseret */
#pickupShopSelect:focus + .dropdown-toggle,
#pickupShopSelect + .dropdown-toggle.focus,
.bootstrap-select.show > .dropdown-toggle {
  border-color: #0d6efd; /* Bootstrap primary */
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* valgfri glød som form-control */
}

.spinner_6KQt {
  animation: spinner_4IqM 1.2s cubic-bezier(0.52,.6,.25,.99) infinite;
  fill: #0d6efd; /* Bootstrap primary */
}
@keyframes spinner_4IqM {
  0% {transform:translate(12px,12px) scale(0);opacity:1}
  100%{transform:translate(0,0) scale(1);opacity:0}
}

/* Category page */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--jmp-select-multiple-choice-bg);
    color: var(--jmp-select-multiple-choice-color);

}
/* Category page */
.rotate-90 {
  transform: rotate(90deg);
}
.rotate-180 {
  transform: rotate(180deg);
}
.rotate-270 {
  transform: rotate(270deg);
}

.filter-bar {
  top: 135px; /* adjust to navbar height */
  position: fixed;
  background-color: var(--bs-card-bg);
  border-bottom: 1px solid var(--bs-border);
}

@media only screen and (max-width: 1200px) {
  .filter-bar {
    top: 72px; /* adjust to navbar height */
  }
}

@media only screen and (max-width: 768px) {
  .filter-bar {
    top: 120px; /* adjust to navbar height */
  }
}

@media only screen and (max-width: 600px) {
  .filter-bar {
    top: 120px; /* adjust to navbar height */
  }
}


/* Footer */

.list-group.list-group-timeline .list-group-item::before {
    position: absolute;
    background-color: #cacaca !important;
    block-size: 1px;
    content: "";
    inline-size: 3px;
    inset-block-start: 61%;
    inset-inline-start: 3px;
    margin-block-start: -2px;
    border-radius: 0%;
    transition: 100ms ease-in-out all;
}
.list-group-item:hover.list-group-item::before {
    background-color: #afafaf !important;
    inline-size: 6px;
}

.list-group-item{
    color: var(--bs-text-light);
    transition: 150ms ease-out all;
}

.list-group-item:hover{
    color: var(--bs-text-light-hover);
}

.jmp-footer-heading {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.15rem;
    transition: 150ms ease-out all;
}
.jmp-footer-heading:hover {
    color: var(--bs-text-light-hover);
}

  @media (min-width: 768px) { /* medium screens */
    .jmp-category {
      flex: 1 1 calc(33.333% - 1rem); /* 3 per row */
    }
  }

  @media (min-width: 1200px) { /* large screens */
    .jmp-category {
      flex: 1 1 calc(16.666% - 1rem); /* 6 per row */
    }
  }

  .jmp-category img {
    width: 100%;
    height: auto;
  }


.menu-sub {
    border: 1px solid var(--bs-border);
}

  @media (max-width: 1200px) { /* medium screens */
    .menu-sub {
        border: 0px solid var(--bs-border);
    }
  }

.max-w-1920 {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
  }

  .swiper {
    width: 100%;
    max-width: 1728px;
    height: auto !important;   /* important: force auto height */

  }

  .jmp-shadow {
    box-shadow: 1px 16px 19px 0px rgba(0,0,0,0.05);
    -webkit-box-shadow: 1px 16px 19px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 1px 16px 19px 0px rgba(0,0,0,0.05);
  }

  .swiper-wrapper {
    height: auto !important;   /* wrapper follows image height */
  }

  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: flex-start;   /* keep top aligned, no vertical stretching */
    height: auto !important;   /* slide height = image height */
  }
  .mySwiper {
    overflow: visible; /* allow slides to overflow */
  }

  .productSwiper {
    overflow: visible; /* allow slides to overflow */
  }

/* Ensure swiper has room for pagination below */
.productSwiper {
    overflow: visible;
    padding-bottom: 50px; /* space for pagination */
    position: relative;
  }

  /* Pagination styling */
  .productSwiper .swiper-pagination {
    bottom: 0; /* place at bottom of container */
    text-align: center;
  }

  /* Arrow buttons */
  .productSwiper .swiper-button-next,
  .productSwiper .swiper-button-prev {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bs-bg-white); /* semi-transparent background */
    color: var(--bs-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bs-border);
    box-shadow: 1px 9px 19px 0px rgba(0,0,0,0.16);
    -webkit-box-shadow: 1px 9px 19px 0px rgba(0,0,0,0.16);
    -moz-box-shadow: 1px 9px 19px 0px rgba(0,0,0,0.16);
  }

  .productSwiper .swiper-button-next:hover,
  .productSwiper .swiper-button-prev:hover {
    background: var(--bs-bg-white-hover); /* darker on hover */
    border: 1px solid var(--bs-border-hover);
    color: var(--bs-text-light-hover);
  }

  /* Adjust arrow icons inside */
  .productSwiper .swiper-button-next::after,
  .productSwiper .swiper-button-prev::after {
    font-size: 16px;
  }

  .promo-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 500px;         /* desktop limit */
    object-fit: cover;
    border-radius: var(--bs-border-radius);
  }

  @media (max-width: 768px) {
    .promo-image {
      max-height: 1200px;       /* mobile limit */
    }
  }


  .swiper-pagination-bullet {
    background: rgba(0, 0, 0, 0.7);
    padding: 2px;
    border: rgb(255, 255, 255) 2px solid;
}

.swiper-pagination-bullet-active {
    background: rgba(0, 0, 0, 0.7);
    padding: 2px;
    border: rgba(255, 255, 255, 0) 1px solid;
}

.bbd-no-link {
    color: inherit !important;
    text-decoration: none !important;
}

.bbd-delete {
    color:var(--bs-secondary);
}
.bbd-delete:hover {
    color:var(--bs-danger);
}

.swiper-button-prev {
  left: calc(100% - 48px - 38px);
  top: -32px;
}

.swiper-button-next {
  right: 0px;
  top: -32px;
}

/* Chrome, Safari, Edge, Opera */
.bbd-quantity-input::-webkit-inner-spin-button,
.bbd-quantity-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    padding:0;
}
/* Firefox */
.bbd-quantity-input {
    -moz-appearance: textfield;
    padding:0;
}
.bbd-quantity-input:focus {
    padding-inline:0;
}

.electric-days {
  background-image: url('/assets/bilbodog/img/electricdays-injection2.png');
  background-size: 110%;
  background-position: center;
  transition: 200ms ease-out all;
  background-repeat: no-repeat;
}

.electric-days:hover {
  background-size: 120%;
}

.go-forward-hover {
  transition: 200ms ease-out all;
}

.electric-days:hover .go-forward-hover {
  padding-left: 4px;
}
.ugens-udvalgte {
  background-image: url('/assets/bilbodog/img/ugensudvalgte-injection.png');
  background-size: 110%;
  background-position: center;
  transition: 200ms ease-out all;
  background-repeat: no-repeat;
}

.ugens-udvalgte:hover {
  background-size: 120%;
}

.go-forward-hover {
  transition: 200ms ease-out all;
}

.ugens-udvalgte:hover .go-forward-hover {
  padding-left: 4px;
}

.bbd-search-result:hover {
    cursor:pointer;
}

.search-item-wrapper {
  transition: 150ms ease-in-out all;
}

.search-item-wrapper:hover {
  background-color: var(--bs-bg-white-hover);
}

.swiper-button-disabled {
  box-shadow: none !important;
  -webkit-box-shadow: none;
}

.productSwiper .swiper-button-next, .productSwiper .swiper-button-prev {
  transition: 200ms ease-in-out all;
}

.bs-toast.bg-secondary {
    background-color: var(--jmp-toast-bg) !important;
  }

  .toast.bs-toast .toast-header .btn-close {
    background-color: var(--bs-card-bg);
    opacity: 1;
}

.helpcenter-hero {
  background-image: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0)), 
                    url(/assets/bilbodog/img/kundecenter1.png);
  background-position: center;
  background-size: cover;
  min-height: 550px;
}

div.layout-page > div.content-wrapper > div.container-xxl.container-p-y.pb-5.mb-5.helpcenter-hero-wrapper {
  padding-block-start: 0px !important;
}

.floating-dan {
  height: 50px;
  width: auto;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  margin-top: -25px;
  transition: 200ms ease-in-out all;
}

.floating-dan:hover {
transform: translate(-50%, 0) scale(1.15);
}

.floating-msg {
  height: 86px;
  width: auto;
  position: absolute;
  top: 83%;
  left: 54%;
  transform: translate(-50%, 0);
  margin-top: -25px;
}


.contactus-hero {
  background-image: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0)), 
                    url(/assets/bilbodog/img/contactus.webp);
  background-position: center;
  background-size: cover;
  min-height: 550px;
}

.campaign-img {
  transition: 250ms all ease-in-out;
  transform: scale(1);
  width: 100%;
}

.campaign-img:hover {
  transform: scale(1.025);
}

.brand-img {
  opacity: 0.7;
}
.brand-img:hover {
  opacity: 1;
}