/* General reset */
*, *::before, *::after { box-sizing: border-box; }

.cert-validator { max-width: 820px; margin: 2rem auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial; padding: 1rem; color:#2c3e50; }

/* Form */
.cert-validator-form { display:flex; flex-direction:column; gap:10px; padding:15px; border-radius:10px; border:1px solid #e6e6e6; background:#fff; }
.cert-validator-form input { padding:10px; border-radius:6px; border:1px solid #d0d0d0; font-size:1rem; width:100%; }
.cert-validator-form button { padding:12px; border:none; background:#3498db; color:#fff; border-radius:6px; cursor:pointer; transition:0.2s ease; font-weight:600; }
.cert-validator-form button[disabled] { opacity:0.7; cursor:default; }
.cert-validator-form button:hover:not([disabled]){ background:#2980b9; }

/* Results */
.validation-result { margin-top:16px; }
.error-text { color:#e74c3c; font-weight:bold; }

/* Grid of certificates (thumbnails) */
.cert-list { margin-top:12px; display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:12px; align-items:start; }
.cert-item { padding:8px; border-radius:8px; border:1px solid #f0f0f0; background:#fafafa; text-align:center; display:flex; flex-direction:column; gap:8px; align-items:center; }
.cert-item .thumb { width:100%; height:120px; object-fit:cover; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,0.06); cursor:pointer; transition:transform .15s ease; }
.cert-item .thumb:focus, .cert-item .thumb:hover { transform:translateY(-4px); outline:2px solid rgba(52,152,219,0.2); }
.cert-item h4 { margin:0; font-size:0.95rem; color:#2c3e50; line-height:1.2; }
.cert-item .status { font-size:0.85rem; color:#27ae60; font-weight:600; }

/* Modal */
.cert-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.75);
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
.cert-modal[aria-hidden="false"] { display:flex; }

.cert-modal .cert-modal-content { max-width: 96%; max-height: 92%; text-align:center; margin:0 auto; }
.cert-modal img#cert-modal-img { max-width:100%; max-height:80vh; border-radius:8px; box-shadow:0 12px 30px rgba(0,0,0,0.5); }

.cert-modal .cert-modal-caption { margin-top:10px; color:#fff; font-size:0.95rem; }

/* Modal buttons */
.cert-modal .close-modal {
    position: absolute; top:18px; right:18px; background:#e74c3c; color:#fff; border:none; padding:8px 12px; border-radius:6px; cursor:pointer;
}
.cert-modal .nav-arrow {
    position: absolute; top:50%; transform: translateY(-50%); background: rgba(52,152,219,0.9); color:#fff; border:none; padding:10px 14px; border-radius:50%; cursor:pointer; font-size:20px;
}
.cert-modal .nav-left { left:18px; }
.cert-modal .nav-right { right:18px; }
.cert-modal .nav-arrow:hover { transform: translateY(-50%) scale(1.03); }

/* Responsive */
@media(max-width:768px){
    .cert-validator { padding:0.75rem; margin:1rem; }
    .cert-item .thumb { height:96px; }
    .cert-validator-form input, .cert-validator-form button { font-size:0.95rem; padding:10px; }
}