.diamond-price-filter { padding: 2rem 1rem; }
.shape-selector { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 1rem 0; }
.shape-item-wrapper { display: inline-block; }
.shape-item { background: #fff; border: 2px solid #ddd; border-radius: 8px; padding: 1rem; min-width: 110px; display: flex; flex-direction: column; align-items: center; transition: all 0.3s; cursor: pointer; }
.shape-item:hover, .shape-item.active { border-color: #02032f; transform: translateY(-2px); }
.shape-item .shape-img { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; }
.shape-item .shape-img img { max-width: 100%; max-height: 100%; transition: transform 0.3s; }
.shape-item:hover .shape-img img, .shape-item.active .shape-img img { transform: scale(1.1); }
.shape-item .shape-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: #02032f; margin-top: 0.5rem; }
.filters-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 1200px; margin: 0 auto; }
.filter-group { padding: 10px; }
.filter-header { margin-bottom: 10px; }
.filter-group .title { font-weight: 600; color: #02032f; font-size: 1rem; text-transform: uppercase; }
.filter-group .subtitle { font-size: 0.75rem; color: #666; margin-top: 0.25rem; }

.dual-range { position: relative; height: 24px; display: flex; align-items: center; }
.dual-range::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 6px; background: #d5d5efff; border-radius: 6px; z-index: 0; }
.dual-range .range-track-fill { position: absolute; top: 50%; transform: translateY(-50%); height: 6px; background: #02032f; border-radius: 6px; z-index: 1; pointer-events: none; }
.dual-range input[type="range"] { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
.dual-range input[type="range"]::-webkit-slider-thumb { pointer-events: auto; position: relative; z-index: 2; -webkit-appearance: none; appearance: none; }
.dual-range input[type="range"]::-moz-range-thumb { pointer-events: auto; position: relative; z-index: 2; }
.fg-range { width: 100%; accent-color: #02032f; }
.fg-range::-webkit-slider-thumb { background: #02032f; border: 2px solid #fff; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.fg-range::-moz-range-thumb { background: #02032f; border: 2px solid #fff; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.fg-range::-webkit-slider-runnable-track { height: 6px; background: transparent; border-radius: 6px; }
.fg-range::-moz-range-track { height: 6px; background: transparent; border-radius: 6px; }

.range-values { display: flex; align-items: center; gap: 10px; max-width: 300px; }
.range-values-sm { max-width: 260px; }
.range-values-lg { max-width: 400px; }
.range-input { flex: 1; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; text-align: center; border: 2px solid #ddd; border-radius: 4px; background: #fff; color: #02032f; }
.range-input:focus { outline: none; border-color: #02032f; }
.range-separator { color: #02032f; font-weight: 600; }
.price-values { display: flex; gap: 1rem; max-width: 480px; }
.price-input-wrapper { flex: 1; }
.price-input { width: 100%; text-align: right; }

.ticks { display: flex; justify-content: space-between; color: #02032f; font-size: 11px; font-weight: 600; margin-top: 1rem; }
.ticks-letter span, .clarity-ticks span { flex: 1; text-align: center; }
.ticks small { font-size: 9px; color: #666; }
.size-chips { font-size: 13px; display: flex; flex-wrap: wrap; gap: 5px; }
.size-chip { margin: 0; border: 2px solid #ddd; border-radius: 4px; padding: 5px 10px; color: #02032f; background: #fff; cursor: pointer; }
.size-chip:hover, .size-chip.active { background: #02032f; color: #fff; border-color: #02032f; }
.hidden { display: none !important; }

.diamond-container { max-width: 1500px; margin: 0 auto; padding: 0 1rem; }
.diamond-results-wrap { position: relative; min-height: 200px; }
.diamond-loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); z-index: 10; }
.loading-spinner { width: 50px; height: 50px; border: 4px solid #ddd; border-top: 4px solid #02032f; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.diamond-table { margin-top: 2rem; overflow: hidden; background: #fff; }
.diamond-table .dt-head { display: grid; grid-template-columns: 72px repeat(11, minmax(90px, 1fr)); gap: 12px; background: #02032f; color: #fff; padding: 10px 12px; }
.diamond-table .dt-row { display: grid; grid-template-columns: 72px repeat(11, minmax(90px, 1fr)); gap: 12px; padding: 12px; border-bottom: 1px solid #eee; cursor: pointer; align-items: center; }
.diamond-table .dt-cell { font-size: 0.875rem; color: #334155; font-weight: 500; }
.diamond-table .dt-cell.shape { display: flex; align-items: center; justify-content: center; }
.diamond-table .dt-cell.shape img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); transition: transform 0.3s; }
.diamond-table .dt-row:hover .dt-cell.shape img { transform: scale(1.15) rotate(5deg); }
.diamond-table .dt-cell.price { font-weight: 700; color: #02032f; font-size: 1rem; }
.diamond-table .dt-detail { display: none; padding: 10px; border-bottom: 2px solid #eee; animation: slideDown 0.3s ease-out; background: #f9f9f9; }
.dt-detail-grid { display: grid; grid-template-columns: 25% 70%; gap: 3%; align-items: start; }
.dt-detail-grid-no-image { grid-template-columns: 1fr; gap: 0; }
.dt-detail-image { width: 100%; aspect-ratio: 1; background: #fff; border-radius: 8px; padding: 1rem; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #ddd; }
.dt-detail-image img { width: 100%; height: 100%; object-fit: contain; }
.dt-detail-image .no-image { color: #999; font-size: 0.875rem; text-align: center; }
.dt-detail-info { padding: 10px; background: #fff; border: 1px solid #ddd; }
.dt-detail-info .detail-title { font-size: 1.25rem; font-weight: 600; color: #02032f; margin: 0 0 1rem 0; padding-bottom: 0.75rem; border-bottom: 2px solid #02032f; }
.detail-table { width: 100%; border-collapse: collapse; }
.detail-table th { text-align: left; padding: 0.75rem 1rem; font-weight: 600; color: #02032f; border-bottom: 1px solid #eee; width: 35%; font-size: 0.875rem; background: #f5f5f5; }
.detail-table td { padding: 0.75rem 1rem; color: #333; border-bottom: 1px solid #eee; font-size: 0.875rem; }
.detail-table tr:last-child th, .detail-table tr:last-child td { border-bottom: none; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 991px) {
    .diamond-table .dt-head { display: none; }
    .diamond-table .dt-row { grid-template-columns: 60px 1fr; gap: 10px; padding: 1rem; position: relative; }
    .diamond-table .dt-cell:nth-child(1) { grid-row: 1 / 3; }
    .diamond-table .dt-cell:nth-child(n+2):nth-child(-n+11) { display: none; }
    .diamond-table .dt-cell.price { grid-column: 2; grid-row: 1; text-align: right; font-size: 1.125rem; font-weight: 700; color: #02032f; }
    .diamond-table .dt-row::after { content: 'Tap to view details'; grid-column: 2; grid-row: 2; font-size: 0.75rem; color: #666; text-align: left; }
    .diamond-table .dt-detail { padding: 1.5rem 1rem; }
    .dt-detail-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .dt-detail-image { max-width: 300px; margin: 0 auto; }
    .detail-table th { width: 40%; font-size: 0.8125rem; padding: 0.625rem 0.75rem; }
    .detail-table td { font-size: 0.8125rem; padding: 0.625rem 0.75rem; }
}
@media (max-width: 768px) {
    .filters-grid { grid-template-columns: 1fr; }
    .shape-selector { gap: 8px; padding: 0.75rem 0; }
    .shape-item { min-width: 90px; padding: 0.75rem; }
    .shape-item .shape-img { width: 50px; height: 50px; }
    .shape-item .shape-label { font-size: 9px; }
    .range-values, .range-values-sm, .range-values-lg { max-width: 100%; }
    .price-values { max-width: 100%; flex-direction: column; gap: 0.5rem; }
    .size-chips { font-size: 12px; }
    .size-chip { padding: 4px 8px; }
}
@media (max-width: 576px) {
    .diamond-price-filter { padding: 1rem 0.5rem; }
    .filters-grid { gap: 8px; }
    .filter-group { padding: 8px; }
    .filter-group .title { font-size: 0.875rem; }
    .filter-group .subtitle { font-size: 0.6875rem; }
    .diamond-table .dt-row { grid-template-columns: 50px 1fr; gap: 8px; padding: 0.75rem; }
    .diamond-table .dt-cell.shape img { width: 35px; height: 35px; }
    .diamond-table .dt-cell.price { font-size: 1rem; }
    .diamond-table .dt-row::after { font-size: 0.6875rem; }
    .dt-detail-info .detail-title { font-size: 1rem; }
    .detail-table th, .detail-table td { font-size: 0.75rem; padding: 0.5rem 0.625rem; }
}