.merchant-filters { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 50px; margin-bottom: 5px; }
.offer-filter-btn { position: relative; background: #e0f2f8; border: 1px solid #bce1ee; border-radius: 6px; padding: 45px 15px 15px; text-align: center; width: 180px; min-height: 90px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: flex-end; justify-content: center; }
.offer-filter-btn:hover, .offer-filter-btn.active { background: #cbeef6; border-color: #8acfe4; transform: translateY(-3px); }
.filter-icon { position: absolute; top: -35px; left: 50%; transform: translateX(-50%); background: #818285; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.filter-icon img, .filter-icon svg { width: 32px; height: 32px; object-fit: contain; filter: brightness(0) invert(1); }
.offer-filter-btn span { color: #333; font-weight: 600; font-size: 13px; text-transform: uppercase; line-height: 1.2; }

.merchant-search-wrapper { text-align: center; margin-bottom: 10px; width: 100%; display: flex; justify-content: center; }
#merchant-search { width: 100%; max-width: 500px; padding: 12px 25px; border: 2px solid #e0f2f8; border-radius: 30px; font-size: 16px; outline: none; transition: border-color 0.3s; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
#merchant-search:focus { border-color: #818285; }

.merchant-grid-wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; min-height: 50px; }
.merchant-card { background: #fff; border-radius: 8px; padding: 25px 20px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.08); display: flex; flex-direction: column; align-items: center; border: 2px solid transparent; transition: all 0.2s ease; animation: fadeIn 0.4s ease-out; }
.merchant-card:hover { border-color: #e0e0e0; transform: translateY(-5px); }
.merchant-logo-wrap { height: 100px; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; padding: 5px; box-sizing: border-box; }
.merchant-logo-wrap img { width: 100%; height: 100%; object-fit: contain; }
.offer-highlight { font-size: 16px; font-weight: 600; color: #003366; margin-bottom: 20px; text-transform: uppercase; }
.view-details-link { background: transparent; color: #003366; border: none; border-bottom: 1px solid #ccc; padding: 0 0 5px 0; font-size: 12px; cursor: pointer; text-transform: uppercase; font-weight: 500; margin-top: auto; }

/* Centered Modal CSS */
.merchant-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.merchant-modal-content { background-color: #fff; border-radius: 4px; width: 90%; max-width: 650px; padding: 0; box-shadow: 0 10px 30px rgba(0,0,0,0.2); animation: modalFadeIn 0.3s ease-out; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: 90vh; overflow-y: auto; }
.custom-modal-header { padding: 20px 30px; border-bottom: 1px solid #eee; }
.custom-modal-header h2 { margin: 0; font-size: 20px; color: #333; text-transform: uppercase; }
.close-modal { position: absolute; top: 15px; right: 20px; color: #888; font-size: 24px; cursor: pointer; line-height: 1; border: none; background: none; padding: 0; }
.close-modal:hover { color: #000; }
.custom-modal-body { padding: 30px; color: #333; font-size: 14px; line-height: 1.6; }
.modal-section { margin-bottom: 20px; }
.modal-section strong { font-weight: 600; color: #000; text-transform: uppercase; }
.offer-bullets ul { margin-top: 10px; padding-left: 20px; }
.offer-bullets li { margin-bottom: 8px; }
.custom-modal-footer { padding: 15px 30px; background: #f9f9f9; text-align: right; border-top: 1px solid #eee; border-radius: 0 0 4px 4px; }
.close-modal-btn { background: #a3d9f5; color: #003366; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; }

@keyframes modalFadeIn { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.loader-wrapper { text-align: center; width: 100%; padding: 60px 0; grid-column: 1 / -1; }
.modern-spinner { width: 48px; height: 48px; border: 4px solid #e0f2f8; border-bottom-color: #818285; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; }
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.merchant-pagination-wrapper { margin-top: 40px; text-align: center; width: 100%; grid-column: 1 / -1; }
.merchant-pagination-wrapper ul.page-numbers { display: inline-flex; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0; margin: 0; gap: 8px; }
.merchant-pagination-wrapper a.page-numbers, .merchant-pagination-wrapper span.page-numbers { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; background: #fff; border: 1px solid #e0f2f8; border-radius: 4px; color: #818285; text-decoration: none; font-weight: 600; transition: all 0.2s ease; box-sizing: border-box;}
.merchant-pagination-wrapper a.page-numbers:hover { background: #e0f2f8; border-color: #bce1ee; }
.merchant-pagination-wrapper span.page-numbers.current { background: #818285; color: #fff; border-color: #818285; }

/* Mobile View: 2 Cards per Row */
@media (max-width: 768px) {
    .merchant-grid-wrapper { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .merchant-card { padding: 15px 10px; }
    .merchant-logo-wrap { height: 70px; margin-bottom: 12px; }
    .offer-highlight { font-size: 13px; margin-bottom: 15px; }
    .view-details-link { font-size: 11px; }
    .merchant-modal-content { width: 95%; }
    .custom-modal-header { padding: 15px 20px; }
    .custom-modal-body { padding: 20px; }
}