/* ============================================
   Shop Frontend Styles
   ============================================ */

/* Toolbar */
.shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.shop-toolbar-left { display: flex; align-items: center; gap: 15px; }
.shop-result-count { color: #aaa; font-size: 14px; }
.shop-sort-select {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
}
.shop-sort-select option { background: #1a1a2e; color: #fff; }

/* Product Card */
.shop-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
  transition: all .3s ease;
  margin-bottom: 30px;
}
.shop-card:hover {
  border-color: rgba(255,255,255,.2);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.shop-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
  background: #0d0d1a;
}
.shop-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.shop-card:hover .shop-card-img img { transform: scale(1.05); }
.shop-badge-sale {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #e74c3c;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  z-index: 2;
}
.shop-badge-out {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,.7);
  color: #aaa;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 2;
}
.shop-badge-detail { font-size: 14px; padding: 6px 14px; }
.shop-card-body { padding: 16px; }
.shop-card-title {
  font-size: 16px;
  margin: 0 0 10px;
  line-height: 1.4;
}
.shop-card-title a { color: #fff; text-decoration: none; }
.shop-card-title a:hover { color: #00d4ff; }
.shop-card-price { margin-bottom: 12px; }
.shop-price-old {
  text-decoration: line-through;
  color: #888;
  font-size: 14px;
  margin-right: 8px;
}
.shop-price-current {
  color: #00d4ff;
  font-weight: 700;
  font-size: 18px;
}

/* Buttons */
.shop-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s ease;
  width: 100%;
  justify-content: center;
}
.shop-btn-cart { background: #00d4ff; color: #000; }
.shop-btn-cart:hover { background: #00b8e6; }
.shop-btn-info { background: #2ecc71; color: #fff; }
.shop-btn-info:hover { background: #27ae60; }
.shop-btn-disabled { background: rgba(255,255,255,.1); color: #666; cursor: not-allowed; }
.shop-btn-reset {
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: #aaa;
  width: 100%;
}
.shop-btn-reset:hover { border-color: #e74c3c; color: #e74c3c; }

/* Sidebar Filters */
.shop-sidebar { position: sticky; top: 100px; }
.shop-filter-panel {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 15px;
}
.shop-filter-title {
  color: #fff;
  font-size: 16px;
  margin: 0 0 12px;
  font-weight: 600;
}
.shop-filter-list { list-style: none; padding: 0; margin: 0; }
.shop-filter-list li { margin-bottom: 8px; }
.shop-filter-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ccc;
  cursor: pointer;
  font-size: 14px;
}
.shop-filter-list label:hover { color: #00d4ff; }
.shop-filter-count { color: #888; font-size: 12px; }
.shop-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ccc;
  cursor: pointer;
  font-size: 14px;
}
.shop-search-box {
  position: relative;
}
.shop-search-box input {
  width: 100%;
  padding: 10px 35px 10px 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
}
.shop-search-box i {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
}

/* Price Range Slider */
.shop-price-slider-wrap {
  padding: 0 6px;
}
.shop-price-slider {
  position: relative;
  height: 6px;
  margin: 20px 0 15px;
}
.shop-price-slider-track {
  position: absolute;
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
}
.shop-price-slider-range {
  position: absolute;
  height: 6px;
  background: #00d4ff;
  border-radius: 3px;
}
.shop-price-slider input[type="range"] {
  position: absolute;
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  margin: 0;
  top: 0;
}
.shop-price-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #00d4ff;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: all;
  border: 3px solid #0d0d1a;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  position: relative;
  z-index: 2;
}
.shop-price-slider input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #00d4ff;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: all;
  border: 3px solid #0d0d1a;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.shop-price-labels {
  display: flex;
  justify-content: space-between;
  color: #00d4ff;
  font-size: 14px;
  font-weight: 600;
}
.shop-price-labels span {
  background: rgba(0,212,255,.1);
  padding: 3px 10px;
  border-radius: 4px;
}
/* Hidden inputs for price values */
#priceMin, #priceMax { display: none; }

/* Tags */
.shop-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-tag {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  color: #ccc;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  transition: all .2s;
}
.shop-tag:hover, .shop-tag.active {
  background: rgba(0,212,255,.15);
  border-color: #00d4ff;
  color: #00d4ff;
}

/* Pagination */
.shop-pagination { margin-top: 30px; text-align: center; }
.shop-pagination ul { display: inline-flex; gap: 6px; list-style: none; padding: 0; }
.shop-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: #ccc;
  text-decoration: none;
  font-size: 14px;
  transition: all .2s;
}
.shop-page-link:hover, .shop-page-link.active {
  background: #00d4ff;
  border-color: #00d4ff;
  color: #000;
}
.shop-page-dots { color: #888; padding: 0 5px; line-height: 40px; }

/* Detail Page */
.shop-gallery { position: sticky; top: 100px; }
.shop-gallery-main {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #0d0d1a;
  margin-bottom: 12px;
}
.shop-gallery-main img { width: 100%; display: block; }
.shop-gallery-thumbs { display: flex; gap: 8px; }
.shop-thumb {
  width: 70px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: .6;
  transition: all .2s;
}
.shop-thumb:hover, .shop-thumb.active { border-color: #00d4ff; opacity: 1; }
.shop-thumb img { width: 100%; height: 100%; object-fit: cover; }

.shop-detail-info { padding-left: 20px; }
.shop-detail-cats { margin-bottom: 10px; }
.shop-cat-link {
  display: inline-block;
  background: rgba(0,212,255,.1);
  color: #00d4ff;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  margin-right: 6px;
  text-decoration: none;
}
.shop-detail-title {
  font-size: 28px;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.3;
}
.shop-detail-sku { color: #888; font-size: 13px; margin-bottom: 15px; }
.shop-detail-price { margin-bottom: 15px; }
.shop-price-old-lg { text-decoration: line-through; color: #888; font-size: 18px; margin-right: 10px; }
.shop-price-current-lg { color: #00d4ff; font-weight: 700; font-size: 28px; }
.shop-detail-stock { margin-bottom: 15px; font-size: 14px; }
.shop-stock-in { color: #2ecc71; }
.shop-stock-back { color: #f39c12; }
.shop-stock-out { color: #e74c3c; }
.shop-detail-excerpt { color: #ccc; margin-bottom: 20px; line-height: 1.7; }

/* Variations */
.shop-variations { margin-bottom: 20px; }
.shop-variation-group { margin-bottom: 12px; }
.shop-variation-group label { display: block; color: #ccc; font-size: 14px; margin-bottom: 4px; font-weight: 600; }
.shop-variation-group select {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
}
.shop-variation-group select option { background: #1a1a2e; }

/* Quantity */
.shop-detail-actions { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.shop-qty-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  overflow: hidden;
}
.shop-qty-btn {
  width: 40px;
  height: 44px;
  background: rgba(255,255,255,.05);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.shop-qty-btn:hover { background: rgba(255,255,255,.1); }
.shop-qty-input {
  width: 50px;
  height: 44px;
  text-align: center;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255,255,255,.1);
  border-right: 1px solid rgba(255,255,255,.1);
  color: #fff;
  font-size: 16px;
  -moz-appearance: textfield;
}
.shop-qty-input::-webkit-outer-spin-button,
.shop-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Tags in detail */
.shop-detail-tags { color: #888; font-size: 13px; margin-top: 15px; }
.shop-tag-link {
  display: inline-block;
  color: #00d4ff;
  text-decoration: none;
  margin: 0 4px;
}
.shop-tag-link:hover { text-decoration: underline; }

/* Tabs */
.shop-tabs {
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.shop-tabs .nav-link {
  color: #aaa;
  border: none;
  padding: 12px 20px;
  font-weight: 600;
  background: transparent;
}
.shop-tabs .nav-link:hover { color: #fff; }
.shop-tabs .nav-link.active {
  color: #00d4ff;
  border-bottom: 2px solid #00d4ff;
  background: transparent;
}
.shop-tab-content { padding: 30px 0; }
.shop-description { color: #ccc; line-height: 1.8; }
.shop-description p { margin-bottom: 15px; }
.shop-attributes-table {
  width: 100%;
  border-collapse: collapse;
}
.shop-attributes-table th,
.shop-attributes-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 14px;
}
.shop-attributes-table th {
  color: #fff;
  font-weight: 600;
  width: 200px;
  text-align: left;
}
.shop-attributes-table td { color: #ccc; }

/* Section title */
.shop-section-title {
  color: #fff;
  font-size: 24px;
  margin-bottom: 30px;
}

/* Mobile filter toggle */
.shop-filter-toggle {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

/* Cart icon */
.header-cart { position: relative; display: inline-flex; align-items: center; }
.cart-icon {
  color: #fff;
  font-size: 18px;
  position: relative;
  padding: 5px;
}
.cart-badge {
  position: absolute;
  top: -4px;
  right: -8px;
  background: #00d4ff;
  color: #000;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Checkout button green override */
.tj-primary-btn.btn-checkout {
  background-color: #27ae60;
}
.tj-primary-btn.btn-checkout:hover {
  background-color: #2ecc71;
}
.tj-primary-btn.btn-checkout .btn-text span {
  text-shadow: 0 30px 0 #fff;
}
.tj-primary-btn.btn-checkout .btn-icon::before {
  background-color: #1e8449;
}
.tj-primary-btn.btn-checkout .btn-text span i {
  margin-right: 8px;
}

/* Header user/login icon */
.header-user {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 5px;
}
.header-user .user-icon {
  color: #fff;
  font-size: 18px;
  padding: 5px;
  transition: color .2s;
}
.header-user:hover .user-icon {
  color: #00d4ff;
}

/* Info Request Modal */
#infoRequestModal {
  z-index: 99999 !important;
}
#infoRequestModal + .modal-backdrop,
.modal-backdrop {
  z-index: 99998 !important;
}
#infoRequestModal input,
#infoRequestModal textarea {
  background: rgba(255,255,255,.2) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  color: #fff !important;
  font-size: 15px;
}
#infoRequestModal input::placeholder,
#infoRequestModal textarea::placeholder {
  color: rgba(255,255,255,.6) !important;
}
#infoRequestModal input:focus,
#infoRequestModal textarea:focus {
  background: rgba(255,255,255,.28) !important;
  border-color: #00d4ff !important;
  box-shadow: 0 0 0 3px rgba(0,212,255,.2) !important;
  color: #fff !important;
  outline: none;
}

/* Responsive */
@media (max-width: 991px) {
  .shop-sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 280px;
    height: 100vh;
    background: #1a1a2e;
    z-index: 1050;
    padding: 20px;
    overflow-y: auto;
    transition: left .3s ease;
  }
  .shop-sidebar.open { left: 0; }
  .shop-detail-info { padding-left: 0; margin-top: 30px; }
}