:root{
  --bodyBg    : rgb(248, 246, 240);
  --yellow      : rgb(255 193 7);
  --pink        : rgb(255, 188, 188);
  --brown       : rgb(49, 9, 9);
  --vantablack  : rgb(0, 1, 0);
 
body, html {
 height: 100%; 
 background: var(--bodyBg)!important;
 color: var(--vantablack) !important;
 font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body {
  margin-bottom: 100px;
}
p, .card-body {
 color: var(--vantablack);
}
.btn-custom {
 background-color: #272727 !important;
 color: #fff !important;
}
a, .btn-link {
 text-decoration: none !important;
 color: #272727;
 font-weight: 600;
}
.card-img-top {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
a, .nav-link {
 text-decoration: none;
 color: var(--brown);
}
.alert {
  background-color: var(--pink) !important;
  border-color: var(--brown) !important;
  color: var(--brown) !important;
}
.pink {
  background-color: var(--pink) !important;;
  color: var(--brown) !important;
  border-color: var(--brown) !important;
}
.form-control {
    border: var(--bs-border-width) solid var(--brown) !important;
}
 a, .nav-link {
 text-decoration: none;
 color: var(--brown);
}
.alert {
  background-color: var(--pink) !important;
  border-color: var(--brown) !important;
  color: var(--brown) !important;
}
.pink {
  background-color: var(--pink) !important;;
  color: var(--brown) !important;
  border-color: var(--brown) !important;
}
.form-control {
    border: var(--bs-border-width) solid var(--brown) !important;
}

/* Primary Color */
.input-group-text, .nav-link.active, .nav-link:hover {
  background-color: var(--primary-color) !important;
  color: var(--brown) !important;
  border-color: var(--brown) !important;
}
.input-group-text, .btn-sm, .border-favorite, input {
  border-color: var(--brown) !important;
}
.border-favorite {
 border-color: var(--brown) !important;
 border-radius: 50% !important;
}
.logo {
 width: 160px;
 height: 100px;
 object-fit: cover;
}  
.svg-icon {
 fill: currentcolor;
 width: 30px;
 height: 30px;
}
.dynamic-content, #product-detail {display:none;}
.disabled {
  pointer-events:none;
  opacity: 0.4;
}
    .favorite-btn {
      cursor: pointer;
      font-size: 20px;
    }
    .favorite-btn.filled {
      color: red !important;
    }
    .delete-btn {
      cursor: pointer;
      color: red;
      font-size: 18px;
      margin-left: 10px;
    }  
    .product, .favorite-item { border: 1px solid #ccc; padding: 10px; margin: 10px 0; display: flex; align-items: center; justify-content: space-between; }
    .product img, .favorite-item img { max-width: 100px; margin-right: 15px; }
    .product-details { flex-grow: 1; }
    .favorite-toggle { cursor: pointer; font-size: 1.5em; }
    .favorite { color: red; }
    #products-container, #favorites-container { margin-bottom: 20px; }
    #clear-favorites { margin: 10px 0; padding: 6px 12px; }
    #search-bar { }
    #not-found { color: red; display: none; }
    #product-detail, .dynamic-content { display: none; margin: 20px 0; }
    #back-button { margin-bottom: 10px; padding: 6px 12px; }
    #total-price { font-weight: bold; margin-top: 10px; }

.disabled {
  pointer-events:none;
  opacity: 0.4;
}
.testi-img {
  width: 80px;
  height: 80px;
}
        /* Custom height for offcanvas-bottom */
        .offcanvas-bottom.custom-height {
            height: 60vh; /* Set to 60% of viewport height */
            max-height: none; /* Remove Bootstrap default max-height */
        }  
        .shop-header {
            font-weight: bold;
            font-size: 1.5rem;
            padding: 20px;
        }
        .product-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
            padding: 15px;
            background: #fff;
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .product-img {
            border-radius: 10px;
            max-width: 100%;
        }
        .product-info {
            flex-grow: 1; /* Pushes everything else down */
        }
        .price-old {
            text-decoration: line-through;
            color: #888;
        }
        .price-current {
            font-weight: bold;
            font-size: 1.2rem;
        }
        .product-actions {
            margin-top: auto; /* Keeps it at the bottom */
        }
        .product-actions i {
            cursor: pointer;
            font-size: 1.5rem;
        }
        .product-card:hover {
            transform: translateY(-5px);
            transition: 0.3s;
        }
body, html {
 height: 100%; 
 font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body {
  margin-bottom: 100px;
}    
.logo {
    width: 100px;
    height: 70px;
}
.img_testi {
    width: 60px;
    heighr: 60px;
}
#profilePic { width: 30px; height: 30px; }