@font-face {
    font-family: 'Winter_Draw';
    src: 
        url('../fonts/winter_draw/Winter-Draw.ttf') format('truetype'),
        url('../fonts/winter_draw/Winter-Draw.otf') format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'Soul_Billani';
    src: url('../fonts/soul_billani/SoulBillani.otf') format('opentype');
    font-display: swap;
}



/* Urgent checkbox css */
.urgent-checkbox:checked {
  background-color: #e03e3e !important;
  border-color: #e03e3e !important;
}
.urgent-checkbox:focus {
  box-shadow: 0 0 0 0.2rem rgba(224, 62, 62, 0.25) ;
  border-color: #e03e3e !important;
}

.urgent-text {
  color: #e03e3e !important;
}


/* Override all primary colors with warning color */
:root {
    --tblr-primary: #f59f00;
    --tblr-primary-rgb: 245, 159, 0;
    --tblr-primary-fg: #fff;
    --tblr-primary-darken: #d9890c;
    --tblr-primary-lighten: #ffc107;
    --tblr-secondary: #1e7e34;
    --tblr-secondary-rgb: 30, 126, 52;
    --tblr-secondary-fg: #fff;
    --tblr-secondary-darken: #155724;
    --tblr-secondary-lighten: #28a745;
}

.text-primary {
    color: #f59f00 !important;
}

.bg-primary {
    background-color: #f59f00 !important;
}

.border-primary {
    border-color: #f59f00 !important;
}

.text-secondary {
    color: #1e7e34 !important;
}

.bg-secondary {
    background-color: #1e7e34 !important;
}

.border-secondary {
    border-color: #1e7e34 !important;
}

.btn-secondary, .btn-outline-secondary {
    --tblr-btn-color: #fff;
    --tblr-btn-bg: #1e7e34;
    --tblr-btn-border-color: #1e7e34;
    --tblr-btn-hover-color: #fff;
    --tblr-btn-hover-bg: #155724;
    --tblr-btn-hover-border-color: #155724;
    --tblr-btn-active-color: #fff;
    --tblr-btn-active-bg: #155724;
    --tblr-btn-active-border-color: #155724;
}

.btn-outline-secondary {
    --tblr-btn-color: #1e7e34;
    --tblr-btn-bg: transparent;
    --tblr-btn-border-color: #1e7e34;
    --tblr-btn-hover-color: #fff;
    --tblr-btn-hover-bg: #1e7e34;
    --tblr-btn-hover-border-color: #1e7e34;
}

.form-control[type="number"]::-webkit-outer-spin-button,
.form-control[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
} 

html {
    scroll-behavior: smooth;
}

body {
    min-height: auto;
    height: auto;
}

.navbar.sticky-top {
    z-index: 1031;
    border-bottom: none !important;
}

.sticky-top.header{
    margin-top: 0 !important;
    position: fixed !important;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.navbar-brand-container {
    width: 22rem;
}

.navbar-brand-link {
    text-decoration: none;
}

.navbar-brand-image {
    height: 5.35rem;
    width: auto;
    margin-right: 0.5rem;
}

.navbar-actions {
    flex-wrap: wrap;
}

.sticky-top.header-content {
    z-index: 1030;
    margin-top: 0 !important;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.card-link {
    transition: box-shadow .2s ease-in-out, transform .2s ease-in-out;
    cursor: default;
}

.card-link:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.categories-wrapper, .types-wrapper {
    overflow-x: auto;
    padding-bottom: 10px;
}

.categories-wrapper::-webkit-scrollbar, .types-wrapper::-webkit-scrollbar {
    height: 6px;  
}

.categories-wrapper::-webkit-scrollbar-track, .types-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.categories-wrapper::-webkit-scrollbar-thumb, .types-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.categories-row, .types-row {
    display: flex;  
    gap: 1rem;
    flex-wrap: nowrap;
}

.category-btn {
    flex: 0 0 auto;
    min-width: 100px;
    white-space: nowrap;
}

.type-btn{
  flex: 0 0 auto;
  width: 180px;
  white-space: nowrap;
  margin: 0.5rem 0;
}

#logo-text {
    font-family: 'Winter_Draw', 'Arial', sans-serif !important;
    color: rgb(0, 0, 0) !important;
    font-size: 2.5rem !important;
    font-weight: normal !important;
    font-style: normal !important;
}

.text-font-winter-draw {
    font-family: 'Winter_Draw', 'Arial', sans-serif !important;
    font-weight: lighter !important;
    font-style: normal !important;
}

.text-font-soul-billani {
    font-family: 'Soul_Billani', 'Arial', sans-serif !important;
    font-weight: lighter !important;
    font-style: normal !important;
}

.header-content {
    top: 70px !important;
}

.category-anchor {
    padding-top: 150px;
    margin-top: -150px;
    scroll-margin-top: 90px;
}

.page-body {  
  padding-top: 70px;
}

@media (max-width: 767px) {
    .navbar-nav {
        width: auto;
        justify-content: flex-end !important;
        margin-top: 0;
    }
    
    /* Logo à gauche sur mobile */
    .navbar-brand {
        flex: 0 0 auto;
    }
    
    .navbar-brand a {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
    }
    
    .navbar-brand-image {
        height: 3rem !important;
        margin-right: 0.25rem !important;
    }
    
    .navbar-brand-text {
        height: 2rem !important;
    }
    
    /* Boutons empilés à droite sur mobile */
    .navbar-actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
        align-items: stretch !important;
    }
    
    .navbar-actions form {
        width: 100%;
    }
    
    .navbar-actions .btn {
        white-space: nowrap;
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        width: 100%;
    }
}

@media (min-width: 768px) {
    .header-content {   
        top: 110px !important;  
    }
    .page-body {
        padding-top: 110px;
    }

    .category-anchor {
        padding-top: 150px;
        margin-top: -150px;
        scroll-margin-top: 190px;
    }

    .types-wrapper{
      display: block !important;
    }

    .type-btn {
      display: none !important;
    }
}

.types-wrapper {
  display: none;
}

#basket-toggle {
  display: none !important;
}

.basket-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

#basket-toggle:checked ~ .basket-backdrop {
  opacity: 1;
  visibility: visible;
}

.basket-sidebar {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 500px;
  height: 100%;
  background-color: white;
  z-index: 1050;
  transition: right 0.3s ease;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

#basket-toggle:checked ~ .basket-sidebar {
  right: 0;
}

#basket-toggle:checked ~ body {
  overflow: hidden;
}

body:has(#basket-toggle:checked) {
  overflow: hidden !important;
}

.basket-header {
  padding: 1.5rem;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8f9fa;
}

.basket-content {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}


.types-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

#types-toggle:checked ~ .types-backdrop {
  opacity: 1;
  visibility: visible;
}

.types-sidebar{
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  max-width: 300px;
  height: 100%;
  background-color: white;
  z-index: 1050;
  transition: left 0.3s ease;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

#types-toggle:checked ~ .types-sidebar {
  left: 0;
}

.types-header {
  padding: 1.5rem;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8f9fa;
}

.types-content {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
}

.page-body.admin {
  padding-top: 70px;
}

.toast.hiding {
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  .basket-sidebar {
    max-width: 450px;
  }
}

@media (min-width: 992px) {
  .basket-sidebar {
    max-width: 650px;
  }

  .basket-btn{
    margin-left: 4em !important;

  }
}

@media (max-width: 767px) {
  .basket-sidebar {
    width: 100vw;
    max-width: 100vw;
  }
  
  .basket-content {
    padding: 1rem;
  }
}

.actions-column {
  width: 150px;
}

.input-group:focus-within {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  border-radius: 0.375rem;
}

.input-group:focus-within .input-group-text {
  border-color: #86b7fe;
}

.input-group:focus-within .form-control {
  border-color: #86b7fe;
  box-shadow: none;
}

.input-group .form-control:focus {
  box-shadow: none;
}