/* Smart Certificate Verification – Frontend Styles
   All colors come from CSS variables injected by PHP (scv_settings).
   Default fallbacks mirror the plugin defaults.
*/

:root {
    --scv-primary:      #0B5D3B;
    --scv-secondary:    #C9A227;
    --scv-bg:           #F7F8FA;
    --scv-card-bg:      #FFFFFF;
    --scv-text:         #1F2937;
    --scv-btn-bg:       #0B5D3B;
    --scv-btn-text:     #FFFFFF;
    --scv-success:      #16A34A;
    --scv-error:        #DC2626;
    --scv-radius:       18px;
}

/* ── Wrapper ───────────────────────────────────────────────────── */
#scv-verification-app {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--scv-text);
    max-width: 760px;
    margin: 40px auto;
    padding: 0 16px;
}

/* ── Form Card ─────────────────────────────────────────────────── */
.scv-form-card {
    background: var(--scv-card-bg);
    border-radius: var(--scv-radius);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0,0,0,0.04);
    padding: 40px 40px 36px;
    text-align: center;
}

.scv-form-header { margin-bottom: 28px; }

.scv-shield-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    color: var(--scv-primary);
}
.scv-shield-icon svg { width: 100%; height: 100%; }

.scv-form-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--scv-primary);
    margin: 0 0 10px;
    line-height: 1.2;
}
.scv-form-subtitle {
    font-size: 15px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* ── Input Row ─────────────────────────────────────────────────── */
.scv-input-row {
    display: flex;
    gap: 10px;
    max-width: 580px;
    margin: 0 auto;
}
.scv-input-row input {
    flex: 1;
    padding: 14px 18px;
    border: 2px solid #e5e7eb;
    border-radius: calc(var(--scv-radius) * 0.65);
    font-size: 15px;
    color: var(--scv-text);
    background: #f9fafb;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 0;
}
.scv-input-row input:focus {
    border-color: var(--scv-primary);
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--scv-primary) 15%, transparent);
}

#scv-verify-btn {
    padding: 14px 24px;
    background: var(--scv-btn-bg);
    color: var(--scv-btn-text);
    border: none;
    border-radius: calc(var(--scv-radius) * 0.65);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
#scv-verify-btn:hover  { opacity: 0.88; transform: translateY(-1px); }
#scv-verify-btn:active { transform: translateY(0); }
#scv-verify-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Spinner */
.scv-spin {
    width: 18px; height: 18px;
    animation: scv-rotate 0.8s linear infinite;
}
@keyframes scv-rotate {
    to { transform: rotate(360deg); }
}

/* ── Result Section ────────────────────────────────────────────── */
.scv-result-section {
    margin-top: 28px;
    animation: scv-fadeup 0.35s ease;
}
@keyframes scv-fadeup {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Result Cards ──────────────────────────────────────────────── */
.scv-result-card {
    background: var(--scv-card-bg);
    border-radius: var(--scv-radius);
    box-shadow: 0 4px 32px rgba(0,0,0,0.08);
    overflow: hidden;
}

/* Valid */
.scv-card--valid  { border-top: 5px solid var(--scv-success); }
/* Expired */
.scv-card--expired { border-top: 5px solid #F59E0B; }
/* Cancelled */
.scv-card--cancelled { border-top: 5px solid var(--scv-error); }
/* Not Found */
.scv-card--not-found { border-top: 5px solid var(--scv-error); }

.scv-result-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 32px 20px;
    border-bottom: 1px solid #f3f4f6;
}
.scv-check-icon, .scv-warn-icon, .scv-error-icon {
    width: 52px; height: 52px; flex-shrink: 0;
}
.scv-check-icon { color: var(--scv-success); }
.scv-warn-icon  { color: #F59E0B; }
.scv-error-icon { color: var(--scv-error); }
.scv-check-icon svg,
.scv-warn-icon svg,
.scv-error-icon svg { width: 100%; height: 100%; }

.scv-result-status-text h3 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 800;
    color: var(--scv-text);
}

/* Status Badges */
.scv-status-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.scv-badge--valid     { background: #d1fae5; color: #065f46; }
.scv-badge--expired   { background: #fef3c7; color: #92400e; }
.scv-badge--cancelled { background: #fee2e2; color: #991b1b; }
.scv-badge--error     { background: #fee2e2; color: #991b1b; }

/* Body / Grid */
.scv-result-body { padding: 24px 32px; }
.scv-result-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
}
.scv-result-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.scv-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #9ca3af;
}
.scv-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--scv-text);
}
.scv-mono {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    background: #f3f4f6;
    padding: 3px 8px;
    border-radius: 6px;
    color: var(--scv-primary);
    display: inline-block;
}
.scv-result-notes {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Not found message */
.scv-not-found-msg {
    padding: 4px 32px 28px;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.6;
}

/* Actions */
.scv-result-actions {
    display: flex;
    gap: 12px;
    padding: 0 32px 28px;
    flex-wrap: wrap;
}
.scv-btn {
    padding: 11px 22px;
    border-radius: calc(var(--scv-radius) * 0.55);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
}
.scv-btn--download {
    background: var(--scv-btn-bg);
    color: var(--scv-btn-text) !important;
}
.scv-btn--print {
    background: transparent;
    color: var(--scv-text);
    border: 2px solid #e5e7eb;
}
.scv-btn:hover { opacity: 0.85; transform: translateY(-1px); }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .scv-form-card { padding: 28px 20px; }
    .scv-input-row { flex-direction: column; }
    #scv-verify-btn { justify-content: center; }
    .scv-result-header { flex-direction: column; text-align: center; gap: 12px; padding: 24px 20px 16px; }
    .scv-result-body { padding: 16px 20px; }
    .scv-result-grid { grid-template-columns: 1fr; gap: 12px; }
    .scv-result-actions { flex-direction: column; padding: 0 20px 24px; }
    .scv-btn { justify-content: center; }
    .scv-form-title { font-size: 21px; }
}

/* ── Institute Branding Footer ─────────────────────────────────── */
.scv-institute-footer {
    border-top: 1px solid #f0f0f0;
    padding: 16px 32px 20px;
    background: #fafafa;
    border-radius: 0 0 var(--scv-radius) var(--scv-radius);
}
.scv-institute-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}
.scv-institute-logo {
    max-height: 48px;
    max-width: 140px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.scv-institute-name {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}
.scv-institute-name strong {
    color: var(--scv-primary);
    font-weight: 700;
}

@media (max-width: 640px) {
    .scv-institute-footer { padding: 14px 20px 18px; }
    .scv-institute-inner  { flex-direction: column; gap: 8px; text-align: center; }
}

@media print {
    .scv-institute-footer { background: transparent; }
}

/* ── Print ─────────────────────────────────────────────────────── */
@media print {
    #scv-verification-app .scv-form-section,
    .scv-result-actions { display: none !important; }
    .scv-result-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}