/* =========================================================
   Certificate Verification System — Frontend Styles
   Author: Turk Shafat
   Uses CSS custom properties set by PHP (CVS_Settings)
   ========================================================= */

/* ── Wrapper ────────────────────────────────────────────── */
.cvs-wrapper {
    --cvs-bg:       #ffffff;
    --cvs-btn:      #2563eb;
    --cvs-btn-text: #ffffff;
    --cvs-text:     #1f2937;
    --cvs-radius:   8px;
    --cvs-font:     inherit;
    --cvs-padding:  20px;
    --cvs-success:  #16a34a;
    --cvs-error:    #dc2626;
    --cvs-card-bg:  #f9fafb;

    font-family:    var(--cvs-font);
    color:          var(--cvs-text);
    max-width:      640px;
    margin:         0 auto;
}

/* ── Verify Box ─────────────────────────────────────────── */
.cvs-verify-box {
    background:    var(--cvs-bg);
    border-radius: var(--cvs-radius);
    padding:       var(--cvs-padding);
    box-shadow:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    border:        1px solid rgba(0,0,0,0.08);
}

.cvs-heading {
    margin:      0 0 16px;
    font-size:   20px;
    font-weight: 700;
    color:       var(--cvs-text);
    line-height: 1.3;
}

/* ── Input Row ──────────────────────────────────────────── */
.cvs-input-row {
    display:   flex;
    gap:       10px;
    flex-wrap: wrap;
}

.cvs-input {
    flex:          1 1 200px;
    padding:       10px 16px;
    border:        2px solid #d1d5db;
    border-radius: var(--cvs-radius);
    font-size:     15px;
    font-family:   var(--cvs-font);
    color:         var(--cvs-text);
    background:    #fff;
    outline:       none;
    transition:    border-color 0.2s, box-shadow 0.2s;
    min-width:     0;
}

.cvs-input:focus {
    border-color: var(--cvs-btn);
    box-shadow:   0 0 0 3px rgba(37, 99, 235, 0.15);
}

.cvs-input::placeholder {
    color: #9ca3af;
}

/* ── Button ─────────────────────────────────────────────── */
.cvs-btn {
    padding:       10px 22px;
    background:    var(--cvs-btn);
    color:         var(--cvs-btn-text);
    border:        none;
    border-radius: var(--cvs-radius);
    font-size:     15px;
    font-weight:   600;
    font-family:   var(--cvs-font);
    cursor:        pointer;
    white-space:   nowrap;
    transition:    opacity 0.2s, transform 0.1s;
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
}

.cvs-btn:hover  { opacity: 0.9; }
.cvs-btn:active { transform: scale(0.98); }
.cvs-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Spinner ────────────────────────────────────────────── */
.cvs-spinner {
    display:       inline-block;
    width:         16px;
    height:        16px;
    border:        2px solid rgba(255,255,255,0.4);
    border-top:    2px solid currentColor;
    border-radius: 50%;
    animation:     cvs-spin 0.7s linear infinite;
}

@keyframes cvs-spin {
    to { transform: rotate(360deg); }
}

/* ── Result Area ────────────────────────────────────────── */
.cvs-result {
    margin-top: 20px;
}

/* ── Result Card ────────────────────────────────────────── */
.cvs-result-card {
    background:    var(--cvs-card-bg);
    border-radius: var(--cvs-radius);
    padding:       20px;
    border:        1px solid rgba(0,0,0,0.08);
    animation:     cvs-fadein 0.3s ease;
}

@keyframes cvs-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Status Badge ───────────────────────────────────────── */
.cvs-status-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    padding:        6px 14px;
    border-radius:  20px;
    font-size:      13px;
    font-weight:    700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom:  16px;
}

.cvs-verified .cvs-status-badge { background: #dcfce7; color: var(--cvs-success); }
.cvs-invalid  .cvs-status-badge { background: #fee2e2; color: var(--cvs-error); }

.cvs-status-badge::before {
    content:       '';
    display:       inline-block;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    currentColor;
}

/* ── Fields Table ───────────────────────────────────────── */
.cvs-fields-table {
    width:           100%;
    border-collapse: collapse;
    margin-bottom:   16px;
    font-size:       14px;
}

.cvs-fields-table tr {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.cvs-fields-table tr:last-child {
    border-bottom: none;
}

.cvs-fields-table th,
.cvs-fields-table td {
    padding:    9px 12px;
    text-align: left;
}

.cvs-fields-table th {
    color:          #6b7280;
    font-weight:    600;
    font-size:      12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width:          40%;
    background:     rgba(0,0,0,0.025);
    border-radius:  4px 0 0 4px;
}

.cvs-fields-table td {
    color:       var(--cvs-text);
    font-weight: 500;
}

/* ── File Preview Section ───────────────────────────────── */
.cvs-file-section {
    margin-top:  16px;
    padding-top: 16px;
    border-top:  1px solid rgba(0,0,0,0.08);
}

.cvs-file-section-title {
    font-size:      12px;
    font-weight:    600;
    color:          #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom:  12px;
}

/* ── Image Thumbnail ────────────────────────────────────── */
/* Full image shown — no height cap, no scrollbar */
.cvs-thumbnail-wrapper {
    border-radius: calc(var(--cvs-radius) / 2);
    overflow:      hidden;          /* clips border-radius only */
    margin-bottom: 12px;
    box-shadow:    0 2px 8px rgba(0,0,0,0.1);
    border:        1px solid rgba(0,0,0,0.08);
    background:    #f3f4f6;
    cursor:        pointer;         /* signals it's clickable */
    display:       inline-block;    /* shrink-wrap to image size */
    max-width:     100%;
}

.cvs-cert-image {
    display:    block;
    width:      100%;               /* fill container width */
    height:     auto;               /* natural aspect ratio — NO height limit */
    transition: opacity 0.15s;
}

.cvs-thumbnail-wrapper:hover .cvs-cert-image {
    opacity: 0.9;
}

/* ── PDF Thumbnail ──────────────────────────────────────── */
.cvs-pdf-thumbnail-wrapper {
    border:        1px solid rgba(0,0,0,0.1);
    border-radius: calc(var(--cvs-radius) / 2);
    overflow:      hidden;
    margin-bottom: 12px;
    background:    #fff;
    box-shadow:    0 2px 8px rgba(0,0,0,0.08);
    cursor:        pointer;
}

.cvs-pdf-thumbnail-header {
    display:        flex;
    align-items:    center;
    gap:            8px;
    padding:        10px 14px;
    background:     #f9fafb;
    border-bottom:  1px solid rgba(0,0,0,0.08);
    transition:     background 0.15s;
}

.cvs-pdf-thumbnail-wrapper:hover .cvs-pdf-thumbnail-header {
    background: #f1f5f9;
}

.cvs-pdf-thumbnail-header .cvs-pdf-icon-fe {
    font-size:   18px;
    color:       #dc2626;
    line-height: 1;
    flex-shrink: 0;
}

.cvs-pdf-thumbnail-header .cvs-pdf-name {
    font-weight:   600;
    font-size:     13px;
    color:         var(--cvs-text);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    flex:          1;
}

.cvs-pdf-thumbnail-header .cvs-pdf-click-hint {
    font-size:   11px;
    color:       #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}

/* PDF preview uses iframe — fixed height thumbnail, no scroll */
.cvs-pdf-iframe-container {
    position:   relative;
    width:      100%;
    height:     280px;
    background: #e5e7eb;
    overflow:   hidden;             /* no scrollbar in thumbnail */
}

.cvs-pdf-iframe {
    width:          133%;           /* scale trick: render at 133% then scale down */
    height:         133%;
    border:         none;
    display:        block;
    transform:      scale(0.75);
    transform-origin: 0 0;
    pointer-events: none;
}

/* Overlay blocks interaction & triggers lightbox on click */
.cvs-pdf-iframe-overlay {
    position: absolute;
    inset:    0;
    cursor:   zoom-in;
    z-index:  1;
}

/* ── Download Button ────────────────────────────────────── */
.cvs-download-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         8px 16px;
    background:      var(--cvs-btn);
    color:           var(--cvs-btn-text);
    text-decoration: none;
    border-radius:   calc(var(--cvs-radius) / 2);
    font-size:       13px;
    font-weight:     600;
    transition:      opacity 0.2s;
}

.cvs-download-btn:hover {
    opacity:         0.85;
    color:           var(--cvs-btn-text);
    text-decoration: none;
}

/* ── Invalid State ──────────────────────────────────────── */
.cvs-invalid-msg {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-size:   15px;
    color:       var(--cvs-error);
    font-weight: 500;
}

.cvs-invalid-icon {
    font-size:   24px;
    flex-shrink: 0;
}

/* ── Error / loading states ─────────────────────────────── */
.cvs-inline-error {
    color:      var(--cvs-error);
    font-size:  13px;
    margin-top: 6px;
}

/* ── Spacing variants ───────────────────────────────────── */
.cvs-spacing-compact  .cvs-verify-box { padding: 12px; }
.cvs-spacing-spacious .cvs-verify-box { padding: 32px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
    .cvs-input-row {
        flex-direction: column;
    }

    .cvs-btn {
        width:           100%;
        justify-content: center;
    }

    .cvs-fields-table th,
    .cvs-fields-table td {
        display: block;
        width:   100%;
    }

    .cvs-fields-table th {
        border-radius:  4px 4px 0 0;
        padding-bottom: 4px;
    }

    .cvs-fields-table td {
        padding-top:   4px;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }

    .cvs-pdf-iframe-container {
        height: 200px;
    }
}

/* ═══════════════════════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════════════════════ */

.cvs-lightbox-overlay {
    position:         fixed;
    inset:            0;
    background:       rgba(0, 0, 0, 0.88);
    z-index:          999999;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          20px;
    box-sizing:       border-box;
    animation:        cvs-lb-in 0.2s ease;
    cursor:           zoom-out;
}

@keyframes cvs-lb-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cvs-lightbox-inner {
    position:      relative;
    max-width:     90vw;
    max-height:    90vh;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    cursor:        default;
}

/* Close button */
.cvs-lightbox-close {
    position:      absolute;
    top:           -40px;
    right:         0;
    background:    none;
    border:        none;
    color:         #fff;
    font-size:     28px;
    line-height:   1;
    cursor:        pointer;
    padding:       4px 8px;
    border-radius: 4px;
    transition:    background 0.15s;
    z-index:       1;
}

.cvs-lightbox-close:hover {
    background: rgba(255,255,255,0.15);
}

/* Image in lightbox */
.cvs-lightbox-img {
    max-width:     90vw;
    max-height:    85vh;
    object-fit:    contain;
    border-radius: 4px;
    box-shadow:    0 8px 40px rgba(0,0,0,0.5);
    display:       block;
}

/* PDF iframe in lightbox */
.cvs-lightbox-pdf-frame {
    width:         80vw;
    height:        85vh;
    border:        none;
    border-radius: 4px;
    background:    #fff;
    display:       block;
}

@media (max-width: 600px) {
    .cvs-lightbox-pdf-frame {
        width:  95vw;
        height: 80vh;
    }
}