/* =====================================
   PREMIUM SEARCH MODAL STYLES
   ===================================== */

.modal-content {
   border: none;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}

.premium-breadcrumb-section {
   background: linear-gradient(135deg, #ff6c2f 0%, #ff9966 100%);
   color: #fff;
   padding: 20px 25px;
   border-bottom: none;
}

.premium-breadcrumb-section .modal-title {
   color: #fff;
   font-weight: 700;
   font-size: 20px;
}

.premium-breadcrumb-section .btn-close {
   color: #fff;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 50%;
   width: 35px;
   height: 35px;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   transition: all 0.3s;
   opacity: 1;
}

.premium-breadcrumb-section .btn-close:hover {
   background: rgba(255, 255, 255, 0.3);
   transform: rotate(90deg);
}

.premium-breadcrumb-section .btn-close i {
   color: #fff;
   font-size: 20px;
   line-height: 1;
}

.premium-search-body {
   padding: 25px;
   background: #fafbfc;
   min-height: 400px;
}

.premium-search-form {
   position: relative;
   display: flex;
   align-items: center;
   background: #fff;
   border: 2px solid #e0e0e0;
   border-radius: 50px;
   padding: 6px 6px 6px 20px;
   transition: all 0.3s;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.premium-search-form:focus-within {
   border-color: #ff6c2f;
   box-shadow: 0 4px 20px rgba(255, 108, 47, 0.15);
}

.premium-search-icon {
   color: #ff6c2f;
   font-size: 22px;
   margin-right: 12px;
   flex-shrink: 0;
}

.premium-search-input {
   flex: 1;
   border: none;
   outline: none;
   font-size: 16px;
   padding: 12px 8px;
   background: transparent;
   color: #2c3e50;
   font-weight: 500;
}

.premium-search-input::placeholder {
   color: #95a5a6;
   font-weight: 400;
}

.premium-search-btn {
   background: linear-gradient(135deg, #ff6c2f 0%, #ff9966 100%);
   color: #fff;
   border: none;
   border-radius: 50px;
   padding: 10px 22px;
   font-weight: 600;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 6px;
   transition: all 0.3s;
   font-size: 14px;
   flex-shrink: 0;
}

.premium-search-btn:hover {
   transform: translateY(-1px);
   box-shadow: 0 5px 15px rgba(255, 108, 47, 0.4);
}

.premium-search-loader {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 30px;
   color: #ff6c2f;
   font-weight: 500;
}

.premium-search-loader .spinner-border {
   width: 20px;
   height: 20px;
   border-width: 2px;
}

.premium-search-results {
   margin-top: 20px;
}

.search-results-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
   max-height: 380px;
   overflow-y: auto;
   padding-right: 5px;
}

.search-results-list::-webkit-scrollbar {
   width: 6px;
}

.search-results-list::-webkit-scrollbar-track {
   background: #f1f1f1;
   border-radius: 10px;
}

.search-results-list::-webkit-scrollbar-thumb {
   background: #ff6c2f;
   border-radius: 10px;
}

.search-result-item {
   display: flex;
   align-items: center;
   gap: 15px;
   padding: 12px 15px;
   background: #fff;
   border-radius: 12px;
   text-decoration: none;
   color: #2c3e50;
   transition: all 0.3s;
   border: 1px solid #f0f3f7;
}

.search-result-item:hover {
   background: #fff5f0;
   border-color: #ff6c2f;
   transform: translateX(5px);
   box-shadow: 0 4px 15px rgba(255, 108, 47, 0.1);
   color: #2c3e50;
}

.search-result-img {
   width: 60px;
   height: 60px;
   border-radius: 10px;
   overflow: hidden;
   flex-shrink: 0;
   background: #f5f7fa;
   display: flex;
   align-items: center;
   justify-content: center;
}

.search-result-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.search-result-info {
   flex: 1;
   min-width: 0;
}

.search-result-name {
   margin: 0 0 4px 0;
   font-size: 15px;
   font-weight: 600;
   color: #2c3e50;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.search-result-meta {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
}

.search-result-meta span {
   font-size: 12px;
   color: #7f8c8d;
   display: flex;
   align-items: center;
   gap: 4px;
}

.search-result-meta i {
   font-size: 12px;
}

.search-result-price {
   text-align: right;
   flex-shrink: 0;
}

.search-result-price .price-current {
   font-size: 16px;
   font-weight: 700;
   color: #ff6c2f;
   display: block;
}

.search-result-price .price-old {
   font-size: 12px;
   color: #95a5a6;
   text-decoration: line-through;
}

.search-result-arrow {
   color: #ff6c2f;
   font-size: 22px;
   opacity: 0;
   transition: all 0.3s;
   flex-shrink: 0;
}

.search-result-item:hover .search-result-arrow {
   opacity: 1;
   transform: translateX(3px);
}

.search-view-all {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px 20px;
   margin-top: 15px;
   background: linear-gradient(135deg, #ff6c2f 0%, #ff9966 100%);
   color: #fff;
   border-radius: 12px;
   text-decoration: none;
   font-weight: 600;
   transition: all 0.3s;
}

.search-view-all:hover {
   color: #fff;
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(255, 108, 47, 0.4);
}

.search-no-results {
   text-align: center;
   padding: 40px 20px;
}

.search-no-results-icon {
   width: 80px;
   height: 80px;
   margin: 0 auto 20px;
   background: #fff5f0;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.search-no-results-icon i {
   font-size: 40px;
   color: #ff6c2f;
}

.search-no-results h5 {
   color: #2c3e50;
   margin-bottom: 8px;
   font-weight: 700;
}

.search-no-results p {
   color: #7f8c8d;
   margin: 0;
}

.premium-search-hint {
   background: #fff;
   border-radius: 12px;
   padding: 20px;
   margin-top: 20px;
   border: 1px solid #f0f3f7;
}

.premium-search-hint .hint-title {
   color: #2c3e50;
   font-weight: 700;
   margin-bottom: 12px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.premium-search-hint .hint-title i {
   color: #ff6c2f;
   font-size: 18px;
}

.premium-search-hint .hint-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.premium-search-hint .hint-list li {
   padding: 6px 0;
   color: #7f8c8d;
   font-size: 14px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.premium-search-hint .hint-list li i {
   color: #ff6c2f;
   font-size: 16px;
}

.premium-search-hint kbd {
   background: #f5f7fa;
   color: #2c3e50;
   border: 1px solid #e0e0e0;
   border-radius: 4px;
   padding: 2px 8px;
   font-size: 12px;
   font-family: monospace;
}

/* ===== Modal Animation ===== */
.modal.fade .modal-dialog {
   transition: transform 0.3s ease-out;
   transform: translateY(-30px) scale(0.95);
}

.modal.show .modal-dialog {
   transform: translateY(0) scale(1);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
   .premium-search-form {
      padding: 5px 5px 5px 15px;
   }

   .premium-search-input {
      font-size: 14px;
      padding: 10px 5px;
   }

   .premium-search-btn {
      padding: 8px 16px;
      font-size: 13px;
   }

   .premium-search-btn span.btn-text,
   .premium-search-btn {
      padding: 8px 12px;
      font-size: 12px;
   }

   .search-result-item {
      padding: 10px;
      gap: 10px;
   }

   .search-result-img {
      width: 50px;
      height: 50px;
   }

   .search-result-name {
      font-size: 13px;
   }

   .search-result-meta {
      gap: 6px;
   }

   .search-result-meta span {
      font-size: 11px;
   }

   .search-result-arrow {
      display: none;
   }
}

.breadcrumb-section .search-query-text {
   color: #000;
   background: rgba(255, 255, 255, 0.2);
   padding: 4px 12px;
   border-radius: 8px;
   font-weight: 600;
}

.search-count {
   opacity: 0.9;
   margin-top: 8px;
}

.search-product-card {
   background: #fff;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease;
   border: 1px solid #f0f3f7;
   height: 100%;
}

.search-product-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.search-product-img {
   width: 100%;
   height: 200px;
   overflow: hidden;
   position: relative;
}

.search-product-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s;
}

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

.search-product-body {
   padding: 15px;
}

.search-product-name {
   font-size: 15px;
   font-weight: 600;
   color: #2c3e50;
   margin-bottom: 8px;
   line-height: 1.4;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   min-height: 42px;
}

.search-product-price .price-current {
   font-size: 18px;
   font-weight: 700;
   color: #ff6c2f;
}

.search-product-price .price-old {
   font-size: 13px;
   color: #95a5a6;
   text-decoration: line-through;
   margin-left: 8px;
}

.empty-state-search {
   text-align: center;
   padding: 60px 20px;
}

.empty-state-search i {
   font-size: 80px;
   color: #ddd;
}

.color-option {
   width: 35px;
   height: 35px;
   border-radius: 50%;
   cursor: pointer;
   border: 2px solid #ddd;
   transition: .3s;
   position: relative;
}

.color-option.active {
   border: 3px solid #ff6c2f !important;
   transform: scale(1.15);
}

.color-option.active::after {
   content: "✓";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: #fff;
   font-size: 14px;
   font-weight: bold;
}