/* === Glavni kontejner pretrage === */
.header-search {
   position: relative;
   z-index: 1000;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   margin-left: auto;
   margin-right: 2rem;
}

.search-button {
   font-size: 0;
   width: 5rem;
   height: 5rem;
   padding: 0;
   border-radius: 0;
   background-color: transparent;
   background-image: url('search.svg');
   background-repeat: no-repeat;
   background-position: center;
   background-size: 2rem;
   border: none;
   cursor: pointer;
}

.search-input {
   width: 100%;
   padding: 10px 40px 10px 12px;
   font-size: 16px;
   border: 1px solid #ccc;
   border-radius: 4px;
}

.hidden-product {
   display: none !important;
}

.load-more-text {
   display: block;
   margin: 12px auto 8px auto;
   font-size: 16px;
   color: #333;
   cursor: pointer;
   font-weight: 500;
   text-align: center;
}

.load-more-text:hover {
   color: #005f8d;
}

/* === Kontejner za rezultate === */
.live-search-results {
   position: absolute;
   top: 100%;
   background: #ffffff;
   z-index: 9999999;
   border: 1px solid #ccc;
   border-top: 2px solid #000;
   max-height: 360px;
   overflow-y: auto;
   display: none;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   padding: 0;
   margin-top: 2px;
   width: 470px;
   left: 50%;
   transform: translateX(-50%);
}

/* === Jedan rezultat === */
.live-search-item {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   padding: 2px 10px;
   min-height: 56px;
   transition: background 0.2s ease;
   gap: 8px;
   border-bottom: 2px solid #000;
   border-top: none;
}

.live-search-item:last-child {
   border-bottom: none;
}

.live-search-item:hover {
   background: #f9f9f9;
}

.live-search-thumb {
   width: 60px;
   height: 60px;
   object-fit: cover;
   flex-shrink: 0;
   align-self: center;
}

.live-search-info {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: nowrap;
   flex: 1;
}

.live-search-info .title {
   flex: 1 1 auto;
   font-weight: 600;
   font-size: 10px;
   color: #333;
   text-decoration: none;
   white-space: normal;
   overflow: visible;
   text-overflow: clip;
   max-width: unset;
   word-break: break-word;
}

.live-search-info .title:hover {
   text-decoration: underline;
}

.live-search-info .price {
   flex: 0 0 90px;
   display: inline;
   flex-direction: column;
   justify-content: center;
   align-items: flex-end;
   font-weight: 700;
   gap: 0.2rem;
   white-space: nowrap;
   margin-left: 0;
   font-size: 1.6rem;
}

.live-search-info .price .sale-price {
   color: #bb0c04;
   font-size: 1.6rem;
   font-weight: 900;
   text-decoration: none;
   line-height: 1.2;
}

.live-search-info .price .normal-price.sale {
   color: #000;
   opacity: 0.6;
   font-weight: 500;
   font-size: 1.6rem;
   line-height: 1.2;
   text-decoration: line-through;
   margin-left: 0.5rem;
}

.live-search-info .price .normal-price.no-sale {
   color: #000;
   font-weight: 700;
   font-size: 1.6rem;
   text-decoration: none;
}

.live-search-item.no-results {
   text-align: center;
   font-style: italic;
   color: #666;
   padding: 15px;
   border-top: 2px solid #000;
   border-bottom: 2px solid #000;
}

.search-button.search-submit-btn {
   font-size: 0;
   width: 5rem;
   height: 5rem;
   position: absolute;
   right: 2.5rem;
   top: 50%;
   transform: translateY(-50%);
   padding: 0;
   border-radius: 0;
   background-color: transparent;
   margin-top: 0;
   background-image: url(search.svg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: 2rem;
}

/* === Dugmad za dodavanje u korpu === */
.live-search-ultra-button {
   flex: 0 0 110px !important;
   height: 50px !important;
   padding-left: 3rem !important;
   border: none !important;
   border-radius: 6px !important;
   font-size: 14px !important;
   font-weight: 700 !important;
   text-transform: none !important;
   transition: background-color 0.3s ease !important;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 12px !important;
   cursor: pointer !important;
   background-image: url('add-cart.svg') !important;
   background-repeat: no-repeat !important;
   background-position: left 1rem center !important;
   background-size: 20px !important;
   margin: 0 !important;
   line-height: 1.2 !important;
   color: #fff !important;
   background-color: #bb0c04 !important;
   white-space: normal !important;
   word-break: break-word !important;
   text-align: center !important;
   padding-top: 4px !important;
}

.live-search-ultra-button:hover {
   background-color: #2e2e2e !important;
}

/* === Dugme za varijabilne proizvode === */
.live-search-info .variable-product-button {
   flex: 0 0 110px !important;
   height: 50px !important;
   padding-left: 3rem !important;
   padding-right: 1rem !important;
   border: none !important;
   border-radius: 6px !important;
   font-size: 14px !important;
   font-weight: 700 !important;
   text-transform: none !important;
   transition: background-color 0.3s ease !important;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 12px !important;
   cursor: pointer !important;
   margin: 0 !important;
   line-height: 1.2 !important;
   color: #fff !important;
   background-color: #bb0c04 !important;
   background-image: url('add-cart.svg') !important;
   background-repeat: no-repeat !important;
   background-position: left 1rem center !important;
   background-size: 20px !important;
   white-space: normal !important;
   word-break: break-word !important;
   text-align: center !important;
   padding-top: 4px !important;
}

/* Price styling inside variable-product-button */
.live-search-info .variable-product-button .price {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-end;
   font-weight: 800;
   gap: 0.2rem;
   white-space: nowrap;
   font-size: 13px;
   color: #000;
}

.live-search-info .variable-product-button .price .sale-price {
   color: #bb0c04;
   font-size: 1.6rem;
   font-weight: 900;
   text-decoration: none;
   line-height: 1.2;
}

.live-search-info .variable-product-button .price .normal-price.sale {
   color: #000;
   opacity: 0.6;
   font-weight: 500;
   font-size: 1.6rem;
   line-height: 1.2;
   text-decoration: line-through;
   margin-left: 0.5rem;
}

.variable-product-button .price .normal-price.no-sale {
   color: #000;
   font-weight: 700;
   font-size: 1.6rem;
   text-decoration: none;
}

.live-search-info .variable-product-button:hover {
   background-color: #2e2e2e !important;
}

.live-search-ultra-button .icon,
.live-search-info .variable-product-button .icon {
   font-size: 14px !important;
}

/* === RESPONSIVE ZA MOBILNE UREĐAJE === */
@media (max-width: 600px) {
   .header-search {
       width: 100%;
       padding: 0 8px;
       margin-left: 0;
       margin-right: 0;
   }

   .search-button {
       width: 3.5rem;
       height: 3.5rem;
       background-size: 1.5rem;
   }

   .live-search-results {
       max-height: 300px;
       font-size: 13px;
       width: 100%;
       left: 0;
       transform: none;
   }

   .live-search-item {
       padding: 6px 8px;
       gap: 6px;
   }

   .live-search-thumb {
       width: 36px;
       height: 36px;
       border-radius: 2px;
   }

   .live-search-info .title {
       font-size: 12px;
       display: -webkit-box;
       -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
       text-overflow: ellipsis;
       word-break: break-word;
       white-space: normal;
       max-height: 4.5em;
   }

   .live-search-info .price {
       flex: 0 0 80px;
       font-size: 12px;
   }

   .live-search-info .price .sale-price,
   .live-search-info .price .normal-price {
       font-size: 1.6rem;
   }

   .live-search-ultra-button,
   .live-search-info .variable-product-button {
       flex: 0 0 100px !important;
       height: 40px !important;
       padding-left: 2rem !important;
       padding-right: 1rem !important;
       font-size: 12px !important;
       border-radius: 6px !important;
       gap: 8px !important;
       background-position: left 0.8rem center !important;
       background-size: 18px !important;
       padding-top: 4px !important;
       line-height: 1 !important;
   }

   .live-search-ultra-button .icon,
   .live-search-info .variable-product-button .icon {
       font-size: 12px !important;
   }

   /* Responsive price inside variable-product-button */
   .live-search-info .variable-product-button .price {
       font-size: 12px;
   }

   .live-search-info .variable-product-button .price .sale-price,
   .live-search-info .variable-product-button .price .normal-price {
       font-size: 1.6rem;
   }
}

/* Hide the checkmark and loader icons on buttons with added/loading states */
.woocommerce a.button.added::after,
.woocommerce button.button.added::after,
.woocommerce input.button.added::after,
.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after,
.woocommerce input.button.loading::after {
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important; /* keep inline layout */
    vertical-align: middle !important;
    pointer-events: none !important;
}
.woocommerce a.button.added,
.woocommerce button.button.added,
.woocommerce input.button.added,
.woocommerce a.button.loading,
.woocommerce button.button.loading,
.woocommerce input.button.loading {
    padding-right: initial !important; /* reset any extra padding */
}