@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

:root {
    --bs-primary: #0D826E/* #564EC9; */;
    --bs-primary-border: #1ca18b/* #847BFB; */;
    --bs-primary-rgb: 13, 130, 110; /* RGB value of #473BF0 */
    --bs-primary-text-emphasis: #092729; /* Darker, contrasting color for emphasis */
    --bs-primary-bg-subtle: #0d826f14; /* Light background, slightly off-white */
    --bs-primary-border-subtle: #1b8371; /* 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-bg-secondary: #f8f8f8;
    --bs-btn-group-border-color: #e4e6e8;
    --bs-bg-white-hover: #ececec;
    --bs-bg-white: #ffffff;
    --bs-card-bg: #FFFFFF;
    --bs-light-rgb: #ededed;
    --bs-btn-outline-secondary-border: #e5e5e5;
    --bs-menu-hover-color: #000000;
    --bs-paper-bg: #fafafa;
    --bs-jmp-btn-active-bg: #fafafa;
    --bs-body-secondary: #505050;
    --bs-body-tertiary: #f5f5f5;
    --bs-input-color: #393a5a;
    --bs-nav-tabs-link-active-color: #647DF6/* #847BFB; */;
    --bs-secondary-contrast: #575757;
    --bs-border-color-hover: #c0c0c0;
    --bs-light-bg-subtle: #f4f5f6;
    --bs-placeholder: #bebebe;
    --bs-secondary-rgb: 248, 248, 248;
    --bs-body-bg: #F6F6F3;
    --bs-border-color: #e0e0e0;
    --bs-card-bg: #fafafa;
    --bs-secondary-bg-subtle: #f4f4f4;
    --bs-dark-rgb: 0, 46, 38;
    --bs-card-border-radius: 1.10rem;
    --bs-border-radius: 1.10rem;
    --bs-card-inner-border-radius: 1.10rem;
    

    /* IOS & Android specific variables for safe area insets */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-top-nav: max(1rem, env(safe-area-inset-top));
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

}

.bg-card {
    background-color: var(--bs-card-bg) !important;
}

.card {
    --bs-card-border-radius: 1.10rem;
    --bs-card-inner-border-radius: 1.10rem;
}

.btn {
    --bs-btn-border-radius: 32px !important;
}
/* */
.input-group {
    border-radius: 0.575rem;
}

.input-group::before {
    border-radius: 0.575rem;
}

.input-group-text {
    border-radius: 0.575rem;
}

.form-control {
    border-radius: 0.575rem;
} 

.form-floating .form-control {
    border-radius: 0.575rem;
}

.form-select {
    border-radius: 0.575rem !important;
}

.search-rounded, .search-rounded:before, .search-rounded .input-group-text, .search-rounded .form-control {
    border-radius: 32px;
}

.rounded-sm {
    border-radius: 0.575rem !important;
}

body {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.manrope-light {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.manrope-regular {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.manrope-medium {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.manrope-semibold {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.manrope-bold {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.manrope-extrabold {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

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

.dominant-icon-xxl {
    font-size: 46px !important;
}

.dominant-icon-xl {
    font-size: 32px !important;
}

.dominant-icon-lg {
    font-size: 30px !important;
}

.dominant-icon-lg {
    font-size: 28px !important;
}

.dominant-icon-md {
    font-size: 26px !important;
}

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

.dominant-icon-sm {
    font-size: 18px !important;
}

.dominant-icon-xs {
    font-size: 16px !important;
}

.dominant-icon-xxs {
    font-size: 12px !important;
}

.dominant-icon-xxxs {
    font-size: 10px !important;
}

.category-page-card-hover {
  transition: color 0.3s ease !important;
}

.category-page-card:hover .category-page-card-hover {
  color: var(--bs-primary) !important;
}

button .dominant-icon {
    font-size: 18px !important;
}

.btn-outline-secondary {
    border-color: #e5e5e5 !important;
    color: #646464 !important;
    background-color: var(--bs-bg-white);
    border-width: var(--bs-border-width);
}

.btn-outline-secondary:hover {
    color: #575757 !important;
}

.btn-outline-secondary:hover {
    border-color: var(--bs-border-color-hover) !important;
    background-color: var(--bs-bg-white-hover);
}

.btn-label-secondary:hover {
    color: #575757 !important;
    background-color: var(--bs-bg-white-hover);
    border-color: var(--bs-bg-white-hover);
}

.dominant-btn-icon {
    padding: 0.5rem;
}

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

.btn-outline-secondary:active {
    background-color: var(--bs-bg-white-hover) !important;
    border-color: var(--bs-border-color-hover) !important;
}

/** 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;
}

.fp-logo {
    width: auto;
    max-width: 139px;
    height:46px;
    object-fit: contain;
}

.fp-transition {
    transition: all 0.3s ease;
}

.container-p-y.container.custom-padding-top {
    padding-block-start: 8.5rem !important;
}

@media (max-width: 768px) {
    .container-p-y.container.custom-padding-top {
        padding-block-start: 1rem !important;
    }
}


/* Frontpage category cards */
/* Frontpage category cards */
/* Frontpage category cards */


.fp-category-card {
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0);
    color: var(--bs-body-secondary);
    width: auto;
    transition: all 0.3s ease-in-out;
}

@media (max-width: 768px) {
    .fp-category-card {
        padding: 0.5rem;
    }
}


.fp-category-card, .fp-category-card .dominant-icon {
    transition: all 0.3s ease-in-out;
}

.fp-category-card:hover {
    background-color: var(--bs-bg-white-hover);
    border-color: var(--bs-border-color-hover);
    color: var(--bs-menu-hover-color);
}

.fp-category-card:hover .dominant-icon {
    color: var(--bs-primary);
}

.fp-category-swiper .swiper-slide {
    width: auto !important;
}

.fp-category-swiper .swiper-wrapper .swiper-slide:last-child {
    padding-right: 24px;
}

.fp-category-swiper .swiper-wrapper .swiper-slide:first-child {
    padding-left: 24px;
}


@media (max-width: 768px) {
    .fp-category-swiper .swiper-wrapper .swiper-slide:last-child {
        padding-right: 8px;
    }

    .fp-category-swiper .swiper-wrapper .swiper-slide:first-child {
        padding-left: 8px;
    }
}

.fp-category-swiper .swiper-button-prev, .fp-category-swiper .swiper-button-next {
    opacity: 1;
    transition: opacity 0.3s ease;
}
.fp-category-swiper .swiper-button-disabled, .fp-category-swiper .swiper-button-disabled {
    opacity: 0;
}

.fp-category-swiper .swiper-button-next {
    right: 42px;
    left: auto;
}

.fp-category-swiper .swiper-button-prev {
    left: 42px;
    right: auto;
}

.fp-category-swiper {
    overflow: hidden;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 40px,
        #000 calc(100% - 60px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 40px,
        #000 calc(100% - 60px),
        transparent 100%
    );
}

@media (max-width: 768px) {
    .fp-category-swiper {
        overflow: hidden;

        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 12px,
            #000 calc(100% - 60px),
            transparent 100%
        );
        mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 12px,
            #000 calc(100% - 60px),
            transparent 100%
        );
    }
}

.category-slider-text {
    font-size: 0.8375rem;
}

@media (max-width: 768px) {
    .category-slider-text {
        font-size: 0.775rem;
    }
}

/* / Frontpage category cards */
/* / Frontpage category cards */
/* / Frontpage category cards */

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: -32px;
}

/* .swiper-featured .swiper-button-prev, .swiper-rtl .swiper-button-next {
left: 20px;
right: auto;
}

.swiper-featured .swiper-button-next, .swiper-rtl .swiper-button-prev {
right: 20px;
left: auto;
}

.swiper-category .swiper-button-prev, .swiper-rtl .swiper-button-next {
left: 20px;
right: auto;
}

.swiper-category .swiper-button-next, .swiper-rtl .swiper-button-prev {
right: 20px;
left: auto;
} */

/* .swiper-featured .swiper-button-prev, .swiper-rtl .swiper-button-next {
left: -64px;
right: auto;
}

.swiper-featured .swiper-button-next, .swiper-rtl .swiper-button-prev {
right: -64px;
left: auto;
}

.swiper-category .swiper-button-prev, .swiper-rtl .swiper-button-next {
left: -64px;
right: auto;
}

.swiper-category .swiper-button-next, .swiper-rtl .swiper-button-prev {
right: -64px;
left: auto;
} */

.swiper-featured .swiper-button-prev, .swiper-rtl .swiper-button-next {
left: -64px;
right: auto;
}

.swiper-featured .swiper-button-next, .swiper-rtl .swiper-button-prev {
right: -64px;
left: auto;
}

.swiper-category .swiper-button-prev, .swiper-rtl .swiper-button-next {
right: 48px;
left: auto;
top: -44px;
}

.swiper-category .swiper-button-next, .swiper-rtl .swiper-button-prev {
right: 0px;
left: auto;
top: -44px;
}

.swiper-related-navigation.swiper-button-prev {
right: 48px;
left: auto;
top: -44px;
}

.swiper-related-navigation.swiper-button-next  {
right: 0px;
left: auto;
top: -44px;
}

.carrusel-button-spacing {
    margin-right: 0px;
}


@media (min-width: 768px) {
    .carrusel-button-spacing {
        margin-right: 97px;
    }
}

.fd-tilbud-title {
    font-size: 2rem;
    font-weight: 600;
}

@media (max-width: 1200px) {
    .fd-tilbud-title {
        font-size: 1.5rem;
        font-weight: 600;
    }
}

@media (max-width: 1000px) {
    .fd-tilbud-title {
        font-size: 1.25rem;
        font-weight: 600;
    }
}

@media (max-width: 768px) {
    .fd-tilbud-title {
        font-size: 1.00rem;
        font-weight: 600;
    }
}


.fd-tilbud-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 135%;
    word-break: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 1200px) {
    .fd-tilbud-card-title {
        font-size: 1.0rem;
    }
}

@media (max-width: 1000px) {
    .fd-tilbud-card-title {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .fd-tilbud-card-title {
        font-size: 1.00rem;
    }
}

@media (max-width: 500px) {
    .fd-tilbud-card-title {
        font-size: 0.875rem;
    }
}

.swiper-button-prev, .swiper-button-next {
    color: var(--bs-body-emphasis);
    padding: 16px;
    background-color: var(--bs-body-bg);
    width: 36px;
    height: 36px;
    border-radius: 32px;
    border: var(--bs-border-color-hover) var(--bs-border-width) solid;
}

.swiper-button-prev::after, .swiper-button-next::after {
    font-size: 19px;
    font-weight: 500;
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--bs-primary));
}

.heart {
  width: 100px;
  height: 100px;
  background: url("/assets/bilbodog/img/heart-animation.png") no-repeat;
  background-position: 0 0;
  cursor: pointer;
  transition: background-position 1s steps(28);
  transition-duration: 0s;
  transform: scale(0.85);
  
  &.is-active {
    transition-duration: 1s;
    background-position: -2800px 0; /* goes through all frames */
  }
}

.fd-like-wrapper {
    transition: 200ms ease-in-out all;
    right: -10px;
    top: -10px;
    z-index: 3;
}

.fd-like-shadow-wrapper {
    transition: 200ms ease-in-out all;
    right: 15px;
    top: 14px;
    z-index: 2;
}



.fd-like-wrapper:hover {
    transform: scale(1.1);
}

.offer-slide-img {
    aspect-ratio: 5 / 3;
}

.offer-badge {
    position: absolute;
    z-index: 2;
    background: #e07b39;
    color: #fff;
    font-weight: 600;
    display: inline-block;
    padding: 4px 20px 4px 12px;
    font-size: 16px;
    border-radius: 4px 0 0 4px;

    clip-path: polygon(
        0 0,
        calc(100% - 12px) 0,  /* top right minus tip width */
        100% 50%,              /* diagonal tip in middle */
        calc(100% - 12px) 100%, /* bottom right minus tip width */
        0 100%
    );
    white-space: nowrap;
}

.offer-badge-sm {
    top: 24px;
    left: -6px;
    font-size: 14px;
    padding: 2px 16px 2px 8px;
}

.offer-badge-md {
    top: 24px;
    left: -16px;
    font-size: 15px;
    padding: 3px 16px 3px 8px;
}

.offer-badge-lg {
    top: 24px;
    left: -16px;
    font-size: 16px;
    padding: 6px 24px 6px 12px;
}

.border-hover {
    transition: 200ms ease-in-out all;
}

.border-hover:hover {
    border-color: var(--bs-border-color-hover) !important;
}

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

.social-icon {
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
    display: block;
    filter: grayscale(100%);
}

.social-link, .social-icon {
    transition: all 0.3s ease;
}

.social-link:hover .social-icon{
    filter: grayscale(0%);
}

.social-link:hover{
    color: var(--bs-primary) !important;
}

.footer-col {
    width: calc(25% - 1.25rem);
}

@media (max-width: 992px) {
    .footer-col {
        width: calc(50% - 1.25rem);
    }
}

@media (max-width: 576px) {
    .footer-col {
        width: 100%;
    }
}

.bottom-nav-avatar.avatar {
    --bs-avatar-size: 24px !important;
    font-size: 10px;
}

/* logo for aside */

.logo-closed {
  display: none;
}

/* collapsed sidebar → show small/closed logo */
.layout-menu-collapsed .logo-open {
  display: none;
}

.layout-menu-collapsed .logo-closed {
  display: block;
}

/* collapsed but hovered → show open logo */
.layout-menu-collapsed.layout-menu-hover .logo-open {
  display: block;
}

.layout-menu-collapsed.layout-menu-hover .logo-closed {
  display: none;
}

.app-brand-logo img {
  transition: max-width .2s ease;
}

.layout-menu-collapsed .app-brand-logo img {
  max-width: 40px;
}

.menu-header.small {
    padding-inline: 1.9996875rem !important;
}

.capitalize::first-letter {
  text-transform: uppercase;
}

.tooltip-secondary .tooltip-inner {
  color: #000000;              /* text */
}

.badge.badge-sm {
    padding: 3px 6px !important;
    font-size: 11px;
        line-height: 14px;
}

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

.clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

.text-bg-secondary {
    color: #222222 !important;
    background-color: #efefef !important;
}

.modal .modal-header .btn-close {
    position:static;
    transform: none;
    margin-left: auto;
    border: var(--bs-border-color) var(--bs-border-width) solid;
}

.modal .modal-header .btn-close:hover {
    border-color: var(--bs-border-color-hover);
}

.company-logo {
    width: 100%;
    object-fit: contain; 
    aspect-ratio: 1/1;
    padding: 20%;
}

@media (max-width: 1200px) {
    .company-logo {
        width: 100%;
    }
    .company-logo-wrapper {
        max-width: 25%;
    }
}

@media (max-width: 992px) {
    .company-logo {
        width: 100%;
    }
    .company-logo-wrapper {
        max-width: 33%;
    }
}

@media (max-width: 576px) {
    .company-logo {
        width: 100%;
    }
    .company-logo-wrapper {
        max-width: 50%;
    }
}

.company-logo-search {
    width: 100%;
    object-fit: contain; 
    aspect-ratio: 1/1;
    padding: 20%;
}

.company-logo-wrapper-search {
    max-width: 100%;
}



@media (min-width: 767px) {
    .dominant-navbar-responsive {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1030;
    }
}

@media (max-width: 767px) {
    .dominant-navbar-responsive {
        position: static;
    }
}


.offer-image-aspect {
    width:100%;
    aspect-ratio:5/3; 
    object-fit:cover;
}

@media (min-width: 1200px) {
    .offer-image-aspect {
        width:100%;
        aspect-ratio:5/3; 
        object-fit:cover;
        height: 100%;
    }
}

.offer-image-wrapper {
    width: 100%;
}

@media (min-width: 1200px) {
    .offer-image-wrapper {
        width: 30%;
        min-width: 30%;
        height: 100%;
    }
}

.dominant-cover-dropzone {
    width: 100%;
    border: 1px dashed rgb(202, 202, 202);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-size: cover;
    background-position: center;
    aspect-ratio: 4 / 1;
}

.b2c-b2b-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    pointer-events: none;
    text-align: center;
}

.b2b-button-wrapper, .b2c-button-wrapper {
    display: none; /* hidden until image is uploaded */
    position: absolute;
    bottom: 10px;
    right: 10px;
    gap: 0.5rem;
}

.white-label-mini-header {
    height: 36px;
    background-image: url(/assets/bilbodog/img/mini-header-img-lighter.png);
    background-repeat: no-repeat;
    background-position: center;
}

.white-label-mini-logo {
    height: 14px;
}

.form-floating input[type="password"]::placeholder {
    font-size: 1.9375rem;

}
input[name="password"]::placeholder {
    transform: translateY(4px) translateX(4px) !important; /* adjust value to taste */
    letter-spacing: 3px;
}

.dominant-conditions-area {
    display: flex;
    align-items: start;
}

.footer-logo-icon {
    width: 32px;
    height: 32px;

}

.footer-logo-icon-wrapper {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dominant-navbar-responsive {
    top: 0;
    padding-top: var(--safe-top);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    background-color: white;
}

.dominant-appbar-responsive {
    /* padding-bottom: calc(0.5rem + var(--safe-bottom)); */
    padding-bottom: 0.8rem;
    padding-top: 0.8rem;
}

.bottom-safe-space {
    padding-bottom: calc(60px + var(--safe-bottom)); /* so content doesn't hide under the nav */
}

.top-safe-space {
    padding-top: calc(0.5rem + var(--safe-top)) !important;
}

.top-safe-space-backend {
    padding-top: calc(0.5rem + var(--safe-top)) !important;
}

.dominant-backend-navbar {
  padding-top: var(--safe-top-nav) !important;
}

.bottom-safe-space-xl {
    padding-bottom: calc(64px + var(--safe-bottom)) !important; /* for pages with more content, to ensure it doesn't hide under the nav */
}

.dominant-logo {
    max-height: 40px !important;
    max-width: 150px !important;
}


@media (min-width: 576px) {
    .dominant-logo {
        max-height: 50px !important;
        max-width: 200px !important;
    }
}

.dominant-backdrop {
    background-image: url(/assets/bilbodog/img/logo-backdrop.svg);
    background-position: center;
    background-size: cover;
    
}

.help-accordion.accordion-button {
    background-color: #f1f1f1; /* your color */
    color: var(--bs-primary-text-emphasis);
}

.help-accordion.accordion-button:not(.collapsed) {
    background-color: #f1f1f1; /* active/open state */
    color: var(--bs-primary-text-emphasis);
    border-radius: var(--bs-accordion-inner-border-radius) var(--bs-accordion-inner-border-radius) 0px 0px !important;
}

.help-bg {
    background-color: #ededed; /* active/open state */
}

.accordion-button:focus {
    box-shadow: none !important;
}

.accordion-button::after {
   
}

.company-name-card {
    padding-right: 22%;
}

@media (min-width: 576px) {
    .company-name-card {
        padding-right: 45%;
    }
}

@media (min-width: 768px) {
    .company-name-card {
        padding-right: 32%;
    }
}