/* =====================================================================
   Certificate Verification — Frontend Styles
   Namespaced under .cv-* and .custom-search-bar (legacy class kept)
   ===================================================================== */

.cv-verification-wrap {
    max-width: 600px;
    margin: 20px auto;
    box-sizing: border-box;
}

.cv-form { width: 100%; }

.custom-search-bar {
    display: flex;
    align-items: center;
    background: #4169e1;
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
    box-sizing: border-box;
}

.custom-search-bar input {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px 15px;
    border-radius: 50px;
    font-size: 16px;
    background: transparent;
    color: #fff;
    min-width: 0;
}

.custom-search-bar input::placeholder { color: #eee; }

.custom-search-bar button {
    background: #fff;
    color: #8b5cf6;
    border: none;
    padding: 10px 20px;
    border-radius: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s ease;
    white-space: nowrap;
}

.custom-search-bar button:hover { background: #f3f3f3; }

.cv-result {
    max-width: 500px;
    margin: 20px auto;
    background: #f9f9f9;
    padding: 25px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.cv-result-valid   { border-left: 4px solid #28a745; }
.cv-result-invalid { border-left: 4px solid #dc3545; }

.cv-result-icon {
    font-size: 44px;
    text-align: center;
    margin-bottom: 8px;
}
.cv-result-valid .cv-result-icon   { color: #28a745; }
.cv-result-invalid .cv-result-icon { color: #dc3545; }

.cv-result h3 {
    margin: 0 0 18px 0;
    text-align: center;
    font-size: 20px;
}

.cv-result-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #eee;
}
.cv-result-row:last-of-type { border-bottom: none; }

.cv-label { font-weight: 600; color: #555; flex: 0 0 auto; }
.cv-value { color: #222; text-align: right; word-break: break-word; }

.cv-status-valid   { color: #28a745; font-weight: 700; }
.cv-status-revoked { color: #dc3545; font-weight: 700; }

.cv-qr-img {
    display: block;
    margin: 18px auto 0;
    border-radius: 6px;
}

.cv-error {
    max-width: 500px;
    margin: 15px auto;
    background: #fff3f3;
    border-left: 4px solid #dc3545;
    padding: 12px 18px;
    border-radius: 4px;
    color: #721c24;
}

.cv-page-container {
    max-width: 700px;
    margin: 30px auto;
    padding: 0 15px;
    box-sizing: border-box;
}

.cv-page-title { text-align: center; }

/* Responsive */
@media (max-width: 600px) {
    .custom-search-bar {
        padding: 8px;
        flex-wrap: nowrap;
    }
    .custom-search-bar input {
        font-size: 14px;
        padding: 8px 12px;
    }
    .custom-search-bar button {
        padding: 8px 14px;
        font-size: 13px;
    }
    .cv-result {
        padding: 18px 16px;
    }
    .cv-result h3 { font-size: 17px; }
    .cv-result-row {
        flex-direction: column;
        gap: 2px;
    }
    .cv-value { text-align: left; }
}