/*
 * StoreRX final normalization layer.
 * Loaded last to keep product cards, listings and data tables consistent.
 */

:root {
  /* Bileşen fontları */
  --srx-font-body:    var(--bs-body-font-family);
  --srx-font-heading: 'Playfair Display', serif;

  /* Spacing scale (BS5 ile çakışmayan özel scale) */
  --srx-space-1: 4px;
  --srx-space-2: 8px;
  --srx-space-3: 12px;
  --srx-space-4: 16px;
  --srx-space-5: 24px;
  --srx-space-6: 32px;
  --srx-space-7: 48px;

  /* Radius — BS5 değişkenlerine proxy */
  --srx-radius-xs: 4px;
  --srx-radius-sm: var(--bs-border-radius-sm);
  --srx-radius-md: var(--bs-border-radius);
  --srx-radius-lg: var(--bs-border-radius-lg);
  --srx-radius:    var(--bs-border-radius);

  /* Font sizes */
  --srx-font-size-xs: 12px;
  --srx-font-size-sm: 13px;
  --srx-font-size-md: 14px;
  --srx-font-size-lg: 16px;
  --srx-font-size-xl: 20px;

  /* Renkler — doğrudan BS5 değişkenlerine proxy */
  --srx-color-primary:      var(--bs-primary);
  --srx-color-primary-dark: var(--blue-dark);
  --srx-color-accent:       var(--bs-warning);
  --srx-color-text:         var(--bs-body-color);
  --srx-color-muted:        var(--bs-secondary-color);
  --srx-color-border:       var(--bs-border-color);
  --srx-color-surface:      var(--bs-body-bg);
  --srx-color-soft:         #f7f8fc;

  /* Shadow */
  --srx-shadow-hover: 0 10px 28px rgba(31, 42, 55, .10);
}

body {
  font-family: var(--srx-font-body);
  color: var(--srx-color-text);
  text-rendering: optimizeLegibility;
}

a {
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.section-wrapper,
.products-section,
.blog-archive-section {
  padding-block: 34px;
}

.section-heading,
.page-title,
.detail-title {
  font-family: var(--srx-font-heading);
  letter-spacing: 0;
}

/* Filtre/temizle butonları — Bootstrap'in kapsamadığı layout özellikleri */
.archive-sheet-apply,
.archive-sheet-clear,
.srx-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--srx-space-2);
  min-height: 40px;
  border-radius: var(--srx-radius-sm);
  font-weight: 800;
  text-decoration: none;
}

.product-card,
.blog-card,
.directory-card,
.category-card,
.profile-hero-card,
.filter-panel,
.srx-filter-box,
.blog-sidebar,
.srx-entity-card,
.srx-mini-book-card {
  border: 1px solid var(--srx-color-border);
  border-radius: var(--srx-radius);
  background: var(--srx-color-surface);
}

.product-card,
.blog-card,
.directory-card,
.category-card {
  overflow: hidden;
  height: 100%;
  box-shadow: none;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.product-card:hover,
.blog-card:hover,
.directory-card:hover,
.category-card:hover {
  border-color: #dfe4f2;
  box-shadow: var(--srx-shadow-hover);
  transform: translateY(-2px);
}

.product-img-wrap,
.blog-img-wrap,
.category-img-wrap {
  background: var(--srx-color-soft);
}

.product-img-wrap img,
.blog-img-wrap img,
.category-img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-img-wrap img {
  object-fit: contain;
  padding: 12px;
}

.product-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #b9bfcc;
  font-size: 40px;
}

.storerx-main-product-img {
  display: block;
  width: 100%;
  height: auto;
}

.storerx-modal-img-close {
  z-index: 1060;
}

.storerx-product-modal-dialog {
  max-width: 95vw;
  margin: 2vh auto;
}

.storerx-product-modal-body {
  min-height: 90vh;
}

.storerx-modal-product-img {
  width: auto;
  max-width: 95vw;
  height: auto;
  max-height: 96vh;
  object-fit: contain;
}

.product-body,
.blog-body {
  padding: 16px;
}

.product-name,
.blog-title,
.directory-card h3 {
  color: var(--srx-color-text);
  letter-spacing: 0;
}

/* Product detail */
/* product-features: koyu arka plan + tüm alt elementler okunabilir renk */
/* storerx-book-details-table: tüm selector varyantlarını tek blokta çöz */
.product-vendor,
.blog-meta,
.blog-excerpt,
.section-sub,
.page-sub {
  color: var(--srx-color-muted);
}

.srx-rating-star {
  color: #f5c518;
}

.product-actions {
  min-height: 47px;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
}

.srx-list-view {
  row-gap: 14px;
}

.srx-list-view > .srx-grid-col {
  width: 100%;
}

.srx-list-view .product-card {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  min-height: 168px;
}

.srx-list-view .product-img-wrap {
  aspect-ratio: auto;
  min-height: 168px;
  height: 100%;
}

.srx-list-view .product-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.srx-list-view .product-name {
  font-size: 17px;
}

.srx-list-view .product-actions {
  margin-top: auto;
}

.archive-toolbar,
.toolbar {
  border: 1px solid var(--srx-color-border);
  border-radius: var(--srx-radius);
  background: var(--srx-color-surface);
}

.filter-list,
.srx-filter-list,
.footer-links,
.account-menu-list {
  list-style: none;
  padding-left: 0;
}

.srx-filter-box {
  margin-bottom: 24px;
}

.srx-filter-list li {
  margin-bottom: 10px;
}

.srx-filter-list li:last-child {
  margin-bottom: 0;
}

.srx-filter-item:has(input:checked) .srx-filter-label {
  color: var(--srx-color-primary);
  font-weight: 800;
}

.srx-filter-list label,
.filter-list a,
.account-menu-list a {
  min-height: 34px;
  border-radius: 6px;
}

.srx-active-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 0;
}

.srx-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 12px;
  border: 1px solid #c7d0f8;
  border-radius: 999px;
  background: #eef1ff;
  color: var(--srx-color-primary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  transition: background-color .16s ease;
}

.srx-tag-pill:hover {
  background: #dde3ff;
}

.srx-tag-pill .pill-x {
  font-size: 13px;
  line-height: 1;
  opacity: .65;
}

.srx-loading-overlay {
  position: relative;
}

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

.srx-empty-icon {
  display: block;
  margin-bottom: 20px;
  color: #d9dde7;
  font-size: 60px;
}

.srx-empty-text {
  color: var(--srx-color-muted);
  font-size: 16px;
}

#srx-products-wrapper.is-loading {
  opacity: .42;
  pointer-events: none;
  transition: opacity .2s ease;
}

.srx-loading-spinner {
  position: absolute;
  top: 60px;
  left: 50%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--srx-color-primary);
  font-size: 14px;
  font-weight: 700;
  transform: translateX(-50%);
}

.srx-loading-spinner i {
  font-size: 28px;
}

/* ── Bootstrap Table Overrides ── */

/* Ürün tablosu ve karşılaştırma tablosu için responsive wrapper */
#srx-product-table,
.srx-compare-table-wrap .table {
  min-width: 900px;
  font-size: 13px;
}

.srx-compare-table-wrap .table td {
  min-width: 190px;
}

/* Başlık satırı — primary renk arka plan */
#srx-product-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--srx-color-primary);
  color: #fff;
  white-space: nowrap;
  font-weight: 800;
}

/* Tablo içi link stili */
.table a {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}

.table a:hover {
  color: var(--srx-color-primary);
}

/* Export butonu ikon rengi */
.btn .fa-file-excel {
  color: #1d6f42;
  font-size: 16px;
}

.srx-compare-product {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.srx-compare-product img {
  width: 88px;
  height: 132px;
  border-radius: 6px;
  object-fit: contain;
  background: var(--srx-color-soft);
}

.footer-logo-invert {
  filter: brightness(0) invert(1);
}

.footer-brand {
  color: #fff;
  font-size: 22px;
}

/* srx-table-muted ve srx-table-mono → Bootstrap text-muted small / font-monospace ile değiştirildi */

.srx-stock-count {
  font-weight: 800;
}

.srx-stock-count-high {
  color: #1a7a3c;
}

.srx-stock-count-low {
  color: #b45309;
}

.srx-stock-count-out {
  color: #c0392b;
}

.srx-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.srx-status-pending {
  background: #fef3c7;
  color: #92400e;
}

.srx-compare-slot-empty {
  color: #8b93a5;
  font-size: 12px;
}

.srx-sticky-atc {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  display: none;
  border-top: 1px solid var(--srx-color-border);
  background: color-mix(in srgb, var(--srx-color-surface) 94%, transparent);
  box-shadow: 0 -10px 26px rgba(31, 42, 55, .10);
  backdrop-filter: blur(12px);
}

.srx-sticky-atc-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--srx-space-3);
  padding: var(--srx-space-3) var(--srx-space-4);
}

.srx-sticky-atc-title {
  display: block;
  max-width: 56vw;
  overflow: hidden;
  color: var(--srx-color-text);
  font-size: var(--srx-font-size-sm);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.srx-sticky-atc-price {
  color: var(--srx-color-muted);
  font-size: var(--srx-font-size-xs);
  font-weight: 800;
}

.srx-recently-viewed {
  margin-top: var(--srx-space-6);
}

.srx-recently-viewed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--srx-space-3);
}

.srx-recent-item {
  display: grid;
  gap: var(--srx-space-2);
  padding: var(--srx-space-3);
  border: 1px solid var(--srx-color-border);
  border-radius: var(--srx-radius-md);
  background: var(--srx-color-surface);
  color: var(--srx-color-text);
  text-decoration: none;
}

.srx-recent-item img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  background: var(--srx-color-soft);
  border-radius: var(--srx-radius-sm);
}

.srx-recent-item span {
  overflow: hidden;
  font-size: var(--srx-font-size-sm);
  font-weight: 800;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 575px) {
  .section-wrapper,
  .products-section,
  .blog-archive-section {
    padding-block: 22px;
  }

  .product-body,
  .blog-body {
    padding: 13px;
  }

  .srx-list-view .product-card {
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 136px;
  }

  .srx-list-view .product-img-wrap {
    min-height: 136px;
  }

  .srx-list-view .product-name {
    font-size: 14px;
  }

  .single-product .srx-sticky-atc {
    display: block;
  }

  .single-product {
    padding-bottom: 76px;
  }
}

/* srx-spin — fa-spin ile eş değer, JS'in className değiştirdiği durumlar için tutuldu */
@keyframes srx-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.srx-spin {
  display: inline-block;
  animation: srx-spin 1s linear infinite;
}