/* Custom styles to complement Tailwind CSS */
.product-card {
    transition: transform 0.3s ease-in-out;

}

.product-card:hover {
    //transform: scale(1.05);
}

.product-card h2{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.product-image {
    height: 150px;
    object-fit: cover;
}

.blurred-background {
    position: relative;
    width: 100%;
    height: auto;
  /*  background: url(''); */
    background-size: cover;
    overflow: hidden; /* Prevents pseudo-element overflow */
}

/* Create a blurred layer using ::before */
.blurred-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit; /* Uses the same background image */
    background-size: cover;
    filter: blur(40px); /* Blurs the background */
    z-index: -1; /* Puts it behind content */
}

.wishlist-heart {
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .wishlist-heart.active {
        fill: rgb(0 0 0);
	stroke: rgb(0 0 0 );
        animation: heart-beat 0.3s ease;
    }
    @keyframes heart-beat {
        0% { transform: scale(1); }
        30% { transform: scale(1.2); }
        60% { transform: scale(1); }
    }
#wishlist-counter {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    #wishlist-counter.show {
        opacity: 1;
    }

.product-wishlisticon { 
    width: 3em;
    right: 0; 
    padding: 1em;
    height: 3em;
    bottom: 0em;
}




.discountinfo{
display: grid;
grid-template-areas: 
            "price discount"
            "discountText code";
}
.discountText{
grid-area: discountText;
}
.discountCode{
grid-area: code;
text-align: right;
}

.title{
display: flex;
    align-items: baseline;
    justify-content: center;
}
#addItemButton {
    transition: transform 0.3s ease-in-out;
}

#addItemButton:hover {
    transform: scale(1.1);
}

#newItemModal input[type="url"],
#newItemModal input[type="text"],
#newItemModal input[type="number"],
#newItemModal select {
    transition: border-color 0.3s ease-in-out;
}

#newItemModal input[type="url"]:focus,
#newItemModal input[type="text"]:focus,
#newItemModal input[type="number"]:focus,
#newItemModal select:focus {
    border-color: #3b82f6;
    outline: none;
}

#newItemModal button {
    transition: background-color 0.3s ease-in-out;
}

#newItemModal button:hover {
    opacity: 0.9;
}

@media (min-width: 48em){

    #topbarmenu {
        justify-content: space-between !important;;
    }

}


/* Add any additional custom styles here */
.prevent-select {
-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera, and Firefox */
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

.visibleV {
  visibility: true; /* or flex */
}

.hiddenV {
  visibility: hidden;
}


@-moz-keyframes fadeOut {
    from {opacity:1;}
    to {opacity:0;}
}

@-webkit-keyframes fadeOut {
    from {opacity:1;}
    to {opacity:0;}
}
@keyframes fadeOut {
    from {opacity:1;}
    to {opacity:0;}
}

.fadeout{
    -webkit-animation: fadeOut 1000ms;
    -moz-animation: fadeOut 1000ms;
    animation: fadeOut 1000ms;
}


.iimg {
    pointer-events: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.editable {
    touch-action: pan-y pinch-zoom;
}


.active-edit{
    opacity: 0.5;
}

@keyframes skew-x-shake {
  0% { transform: skewX(-15deg); }
  5% { transform: skewX(15deg); }
  10% { transform: skewX(-15deg); }
  15% { transform: skewX(15deg); }
  20% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }  
}
@keyframes jump-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateY(-9px) }
  35% { transform: translateY(-9px) rotate(17deg) }
  55% { transform: translateY(-9px) rotate(-17deg) }
  65% { transform: translateY(-9px) rotate(17deg) }
  75% { transform: translateY(-9px) rotate(-17deg) }
  100% { transform: translateY(0) rotate(0) }
}
.skew-shake-x {
  /*animation: skew-x-shake 1.3s;*/
  animation: jump-shaking 0.43s
}
/*
:root {
  touch-action: pan-x pan-y;
  height: 100% 
}

html, body {margin: 0; height: 100%; overflow: hidden}
*/

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff; /* adjust to your desired color */
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

// Hide the scrollbars for app-feeling
*::-webkit-scrollbar {
  display: none;
}