/* Container and Header Bar */
.cert-section-wrapper { width: 100%; margin: 0 auto; }
.cert-header-bar { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 25px; flex-wrap: wrap; gap: 20px; }
.cert-subtitle { font-size: 14px; font-weight: 600; text-transform: uppercase; display: block; margin-bottom: 5px; color: #0D6EFD; }
.cert-desc { margin-top: 8px; color: #666; font-size: 15px; }

.cert-zip-btn, .cert-verify-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; 
    background: #000; color: #fff; border-radius: 6px; text-decoration: none; font-size: 14px;
}

/* Filter Chips Container */
.cert-filter-wrapper { display: flex; flex-wrap: wrap; margin-bottom: 30px; }
.cert-filter-chip { padding: 8px 18px; border: 1px solid #ccc; background: #fff; cursor: pointer; transition: all 0.25s ease; }

/* Grid Layout */
.cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 991px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .cert-grid { grid-template-columns: repeat(1, 1fr); } }

/* Cards */
.cert-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #eaeaea; transition: transform 0.25s ease; }
.cert-card:hover { transform: translateY(-4px); }
.cert-badge-cat { font-size: 11px; text-transform: uppercase; background: #eee; padding: 3px 8px; border-radius: 4px; align-self: flex-start; margin-bottom: 10px; }

.cert-logo-box { width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.cert-logo-box img { max-height: 100%; max-width: 100%; object-fit: contain; }

.cert-title { font-size: 18px; margin: 0 0 8px 0; }
.cert-issuer { font-size: 14px; margin-bottom: 5px; }
.cert-num, .cert-valid { display: block; font-size: 12px; }

.cert-btn-preview { width: 100%; padding: 10px; background: #0D6EFD; color: #fff; border: none; border-radius: 5px; cursor: pointer; margin-top: 15px; }

/* Modal Backdrop */
.cert-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 99999; }
.cert-modal-overlay.active { display: flex; }
.cert-modal-content { background: #fff; width: 90%; max-width: 800px; padding: 25px; border-radius: 12px; position: relative; }
.cert-modal-close { position: absolute; right: 15px; top: 15px; font-size: 24px; border: none; background: none; cursor: pointer; }
.cert-iframe-wrapper { height: 400px; margin: 15px 0; }
.cert-iframe-wrapper iframe { width: 100%; height: 100%; }
.cert-modal-footer { display: flex; gap: 15px; justify-content: flex-end; }