/* Certificate Verification Frontend Styles */

.cv-container {
    max-width: 820px;
    margin: 24px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    padding: 12px;
}

/* Search Form */

.cv-search-box {
    padding: 48px 40px 32px 40px;
    background: linear-gradient(180deg,#fff,#f8fafc);
    text-align: center;
    border-radius: 12px;
    margin-bottom: 28px;
}

.cv-portal-title { font-size:36px; font-weight:800; color:#0b2545; margin-bottom:6px; font-family: Georgia, 'Times New Roman', serif; }
.cv-portal-subtitle { font-size:14px; color:#6b7280; margin-bottom:22px }

.cv-form {
    display:flex; max-width:600px; margin:0 auto; gap:12px; position:relative; align-items:center; justify-content:center;
}

.cv-input {
    flex:1; min-width:300px; padding:14px 18px; border:1px solid #cbd5e1; border-radius:8px; font-size:16px; background:#fff; transition:all .25s ease; box-shadow:0 2px 6px rgba(2,6,23,0.04);
}

.cv-input:focus {
    border-color: #007cba;
    outline: none;
}

.cv-btn { background:#138b8a; color:#081127; padding:10px 22px; border-radius:8px; font-weight:700; font-size:15px; cursor:pointer; border:3px solid #b84fb0; color:#043044; box-shadow: 0 6px 18px rgba(184,79,176,0.08); }
.cv-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(20,20,20,0.08) }

.cv-btn:hover {
    background-color: #005a87;
}

.cv-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Loader */
.cv-loader { display:none; margin:20px auto; width:40px; height:40px; border:3px solid #e2e8f0; border-top:3px solid var(--aeb-primary); border-radius:50%; animation:spin 1s linear infinite }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Messages */
.cv-message {
    margin-top: 20px;
    padding: 15px;
    border-radius: 4px;
    display: none;
}

.cv-error {
    background-color: #fce8e6;
    color: #d93025;
    border: 1px solid #fad2cf;
}

/* Result Card */
.cv-result { display:none; padding:34px; background:#fff; border-radius:12px; box-shadow:0 30px 60px rgba(2,6,23,0.08); margin-top:16px; position:relative }

/* decorative green top bar */
.cv-result::before{
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: -6px;
  height: 10px;
  background: #19a64a;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp { from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:none } }

.cv-result-header { display:flex; align-items:center; gap:18px; margin-bottom:28px }
.cv-verified-badge { display:inline-flex; align-items:center; gap:14px; background:transparent; color:#19a64a; padding:10px; border-radius:999px; font-weight:700; font-size:22px }
.cv-verified-badge svg{ width:48px; height:48px; border:4px solid #19a64a; border-radius:999px; padding:8px; background:#fff }
.cv-verified-heading{ font-family: Georgia, 'Times New Roman', serif; font-size:34px; color:#0b2545; font-weight:800; margin:0; }
.cv-print-action { color:var(--aeb-primary); font-weight:600; font-size:14px; display:inline-flex; gap:6px; align-items:center; cursor:pointer; padding:8px 16px; border-radius:10px; }
.cv-print-action:hover{ background:#eff6ff }

.cv-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
}

.cv-verified-badge svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.cv-body { padding:0 }

.cv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.cv-item { padding:20px; background: #f8fafc; border:1px solid #e2e8f0; border-radius:16px; transition:transform .2s }
.cv-item:hover{ background:#fff; border-color:var(--aeb-primary); transform:scale(1.02) }

.cv-label { font-size:11px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px }

.cv-value {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.cv-footer { margin-top:40px; padding:24px; background:#f8fafc; border-radius:12px; text-align:center; font-size:13px; color:#64748b; border:1px dashed #cbd5e1 }

/* Responsive */
@media (max-width: 600px) {
    .cv-form {
        flex-direction: column;
    }
    
    .cv-input {
        min-width: auto;
    }
    
    .cv-body {
        padding: 20px;
    }
    
    .cv-grid {
        grid-template-columns: 1fr;
    }
}