:root { --main-color: #e63946; --sec-color: #111111; }body { background-color: #f4f7f6; font-family: 'Segoe UI', sans-serif; }.navbar { background-color: #fff; border-bottom: 2px solid var(--main-color); box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: all 0.3s; }.filter-section { background: white; padding: 15px 0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); position: sticky; top: 0; z-index: 1000; }.category-scroll { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 5px; scrollbar-width: none; }.category-scroll::-webkit-scrollbar { display: none; }@media (max-width: 576px) {.card-img-container {padding-bottom: 125%; }.store-badge {font-size: 0.65rem;padding: 3px 6px;}.priority-badge, .multi-image-indicator {font-size: 0.55rem;padding: 2px 5px;}.card-body {padding: 0.5rem;}.card-body small {font-size: 0.65rem;}.material-symbols-outlined.fs-6 {font-size: 0.9rem !important;}}.card-body small {font-size: 0.7rem;}.card-body .badge {font-size: 0.65rem;padding: 3px 6px;}.material-symbols-outlined.fs-6 {font-size: 1rem !important;}.sort-buttons {display: flex;gap: 10px;margin-top: 15px;padding-top: 10px;border-top: 1px solid #eee;}.sort-btn {flex: 1;display: flex;align-items: center;justify-content: center;gap: 5px;padding: 8px;border-radius: 30px;font-size: 0.9rem;transition: 0.3s;white-space: nowrap;}.sort-btn.active {background-color: var(--main-color);color: white;border-color: var(--main-color);}.offer-card { border: none; border-radius: 15px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); background: white; height: 100%; overflow: hidden;position: relative;box-shadow: 0 2px 8px rgba(0,0,0,0.05);}.offer-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.12) !important; }.card-img-container {position: relative;width: 100%;padding-bottom: 125%; overflow: hidden;background: #f8f9fa;}.card-img-container img {position: absolute;top: 0; left: 0; width: 100%; height: 100%;object-fit: cover;transition: transform 0.5s;}.offer-card:hover .card-img-container img {transform: scale(1.05); }.zoom-overlay {position: absolute;top: 0; left: 0; width: 100%; height: 100%;background: rgba(0,0,0,0.2);display: flex;justify-content: center;align-items: center;opacity: 0;transition: 0.3s;cursor: pointer;z-index: 4;}.offer-card:hover .zoom-overlay { opacity: 1; }.zoom-icon {background: white;color: var(--main-color);width: 40px; height: 40px;border-radius: 50%;display: flex;justify-content: center;align-items: center;box-shadow: 0 4px 10px rgba(0,0,0,0.2);}.status-badge {position: absolute;top: 10px;left: 10px;padding: 4px 10px;border-radius: 8px;font-size: 0.7rem;font-weight: bold;z-index: 5;box-shadow: 0 2px 5px rgba(0,0,0,0.1);}.badge-new { background: #2ecc71; color: white; } .badge-urgent { background: #e63946; color: white; } .store-badge { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.95); padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; color: var(--sec-color);z-index: 5;box-shadow: 0 2px 5px rgba(0,0,0,0.1);}.search-box { max-width: 500px; margin: 0 auto; }.multi-image-indicator {position: absolute;bottom: 10px;left: 10px;background: rgba(0,0,0,0.6);color: white;padding: 4px 8px;border-radius: 20px;font-size: 0.7rem;display: flex;align-items: center;gap: 4px;backdrop-filter: blur(4px);z-index: 5;}.priority-badge {position: absolute;top: 10px;left: 10px;background: #ffc107;color: #000;padding: 4px 8px;border-radius: 20px;font-size: 0.7rem;font-weight: bold;display: flex;align-items: center;gap: 4px;z-index: 5;}.gallery-modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.95);z-index: 9999;justify-content: center;align-items: center;touch-action: pan-y pinch-zoom;}.gallery-modal.active {display: flex;}.gallery-content {position: relative;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;touch-action: pan-y pinch-zoom;}.gallery-image-container {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;touch-action: pan-y pinch-zoom;cursor: grab;}.gallery-image-container:active {cursor: grabbing;}.gallery-image {max-width: 90%;max-height: 80vh;border-radius: 10px;box-shadow: 0 5px 25px rgba(0,0,0,0.5);user-select: none;-webkit-user-select: none;pointer-events: none;}.gallery-close {position: absolute;top: 20px;right: 20px;color: white;font-size: 40px;cursor: pointer;background: rgba(0,0,0,0.5);border: none;width: 50px;height: 50px;border-radius: 50%;display: flex;align-items: center;justify-content: center;z-index: 10000;backdrop-filter: blur(5px);}.gallery-nav {position: absolute;top: 50%;transform: translateY(-50%);background: rgba(255,255,255,0.2);color: white;border: none;width: 50px;height: 50px;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: 0.3s;backdrop-filter: blur(5px);z-index: 10000;}.gallery-nav:hover {background: rgba(255,255,255,0.4);}.gallery-nav.prev {left: 20px;}.gallery-nav.next {right: 20px;}.gallery-counter {position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);color: white;font-size: 16px;background: rgba(0,0,0,0.5);padding: 8px 16px;border-radius: 30px;backdrop-filter: blur(5px);z-index: 10000;}@media (max-width: 768px) {.gallery-nav {width: 40px;height: 40px;background: rgba(0,0,0,0.5);}.gallery-nav.prev { left: 10px; }.gallery-nav.next { right: 10px; }.gallery-close {top: 10px;right: 10px;width: 40px;height: 40px;font-size: 30px;}.gallery-image {max-width: 95%;max-height: 70vh;}.sort-btn {font-size: 0.8rem;padding: 6px;}}.container {padding-left: 10px;padding-right: 10px;}body { background-color: #f4f7f6; font-family: 'Segoe UI', sans-serif; padding-bottom: 30px; }.stats-card { background: white; border-radius: 10px; padding: 20px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: 0.3s; }.stats-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }.stats-number { font-size: 32px; font-weight: bold; color: #1d3557; }.offer-row { transition: 0.3s; }.offer-row:hover { background-color: #f8f9fa; }.expired { background-color: #fff3f3; }.expired:hover { background-color: #ffe9e9; }.card { border-radius: 15px; border: none; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }.card-header { border-radius: 15px 15px 0 0 !important; }.priority-badge { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; background: #ffc107; color: #000; font-weight: bold; }.image-preview { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid #ddd; }.image-preview:hover { border-color: #e63946; }.additional-images-count { position: absolute; bottom: 0; right: 0; background: rgba(0,0,0,0.7); color: white; border-radius: 10px; padding: 2px 6px; font-size: 10px; }