/* ═══════════════════════════════════════════════════════════════════════════
   ssl-checker.css — sslrenewals.com
   Exact match to codesigningstore.com screenshot
   Location: /ssl-tools/css/ssl-checker.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 0. FIELD ERRORS ═══ */
.field-err {
    display: none !important;
    color: #a94442;
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.4;
}
.field-err[style*="display: block"],
.field-err[style*="display:block"] {
    display: block !important;
}

/* ═══ 1. RESULT WRAPPER ═══ */
.ssl-result-wrap {
    margin-top: 20px;
    font-size: 14px;
}

/* ═══ 2. GRAY INFO BOX ═══
   Plain text lines — no header, gray bg, light border
   Label: bold dark | Value: blue #337ab7 */
.ssl-info-box {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.ssl-info-box p {
    margin: 5px 0;
    font-size: 14px;
    line-height: 1.7;
    padding: 0;
}

.info-label {
    font-weight: 700;
    color: #333;
    display: inline-block;
    min-width: 185px;
}

.info-value {
    color: #337ab7;
    font-weight: 400;
}

.info-pass {
    color: #337ab7;
    font-weight: 400;
}

.info-fail {
    color: #d9534f;
    font-weight: 600;
}

/* ═══ 3. DAYS BADGE ═══ */
.days-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

.days-badge.green {
    background: #dff0d8;
    color: #3c763d;
    border: 1px solid #d6e9c6;
}

.days-badge.orange {
    background: #fcf8e3;
    color: #8a6d3b;
    border: 1px solid #faebcc;
}

.days-badge.red {
    background: #f2dede;
    color: #a94442;
    border: 1px solid #ebccd1;
}

/* ═══ 4. CERT BOX (Server / Intermediate / Root / Additional) ═══ */
.ssl-cert-box {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 0;
    overflow: hidden;
}

/* ─── Box Headers ─── */
.ssl-cert-header {
    margin: 0;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
}

/* Blue — Server Certificate */
.cert-blue {
    background: #337ab7;
}

/* Orange — Intermediate / Root Certificate */
.cert-orange {
    background: #e8943a;
}

/* Teal — Additional Checks */
.cert-teal {
    background: #3aada8;
}

/* ─── Box Body ─── */
.ssl-cert-body {
    padding: 14px 18px;
    background: #fff;
}

/* ─── Certificate Field List ─── */
.cert-field-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cert-field-list li {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

.cert-field-list li:last-child {
    border-bottom: none;
}

.cert-label {
    font-weight: 700;
    color: #333;
    display: inline-block;
    min-width: 160px;
}

.cert-value {
    color: #337ab7;
    font-weight: 400;
}

/* ═══ 5. CHAIN ARROW ═══ */
.ssl-chain-arrow {
    text-align: center;
    font-size: 18px;
    color: #3aaa35;
    line-height: 1;
    padding: 8px 0;
}

.ssl-chain-arrow.broken {
    color: #d9534f;
}

/* ═══ 6. ADDITIONAL CHECKS LIST ═══ */
.ssl-check-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ssl-check-list li {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    line-height: 1.5;
}

.ssl-check-list li:last-child {
    border-bottom: none;
}

/* Green/red filled circle with tick/cross */
.check-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    margin-right: 12px;
    color: #fff;
    flex-shrink: 0;
    line-height: 1;
}

.check-circle.pass { background: #5cb85c; }
.check-circle.fail { background: #d9534f; }

.check-label {
    font-weight: 700;
    color: #333;
    margin-right: 6px;
}

.check-value {
    color: #555;
    font-weight: 400;
}

/* ═══ 7. ERROR BANNER ═══ */
.ssl-error {
    background: #f2dede;
    border: 1px solid #ebccd1;
    border-radius: 4px;
    padding: 12px 15px;
    color: #a94442;
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;
}

/* ═══ 8. LOADER ═══ */
.loader {
    display: none;
    text-align: center;
    padding: 20px 0;
}

/* ═══ 9. RESPONSIVE ═══ */
@media (max-width: 767px) {
    .ssl-info-box { padding: 12px 14px; }
    .info-label { min-width: 140px; font-size: 13px; }
    .cert-label { min-width: 120px; font-size: 13px; }
    .ssl-cert-body { padding: 12px 14px; }

    .ssl-cert-header {
        font-size: 14px;
        padding: 10px 14px;
    }

    .check-circle {
        width: 20px;
        height: 20px;
        min-width: 20px;
        font-size: 11px;
        margin-right: 10px;
    }

    .cert-field-list li { font-size: 13px; }
    .ssl-check-list li { font-size: 13px; }
}


/* ═══ SSL Checker Results — sslrenewals.com ═══ */

/* Result wrapper */
.ssl-result-wrap { margin-top: 20px; font-size: 14px; color: #333; }

/* Info box (gray) */
.ssl-info-box { background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 6px; padding: 16px 20px; margin-bottom: 20px; }
.ssl-info-box p { margin: 0 0 6px; font-size: 14px; line-height: 1.7; }
.info-label { font-weight: 700; color: #222; }
.info-value { color: #555; }
.info-value.info-pass { color: #3aaa35; font-weight: 600; }
.info-value.info-fail { color: #cc0000; font-weight: 600; }

/* Days badge */
.days-badge { display: inline-block; padding: 2px 10px; border-radius: 3px; font-weight: 700; font-size: 13px; }
.days-badge.green { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }
.days-badge.orange { background: #fff7ed; color: #9a3412; border: 1px solid #fdba74; }
.days-badge.red { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.days-badge.expired { background: #fef2f2; color: #7f1d1d; border: 1px solid #dc2626; font-weight: 800; }

/* QA-007: Domain mismatch detail box */
.ssl-mismatch-detail { background: #fef2f2; border: 1px solid #fecaca; border-radius: 4px; padding: 12px 16px; margin-top: 10px; font-size: 13px; color: #7f1d1d; }
.ssl-mismatch-detail .mismatch-title { font-weight: 700; font-size: 14px; margin: 0 0 8px; color: #991b1b; }
.ssl-mismatch-detail p { margin: 0 0 4px; }
.ssl-mismatch-detail code { background: #fee2e2; padding: 2px 6px; border-radius: 3px; font-family: monospace; font-size: 12px; }
.ssl-mismatch-detail .mismatch-sans { margin-top: 4px; }
.ssl-mismatch-detail .san-tag { display: inline-block; background: #fff; border: 1px solid #fca5a5; border-radius: 3px; padding: 2px 8px; margin: 2px 4px 2px 0; font-size: 11px; font-family: monospace; }
.ssl-mismatch-detail .mismatch-warning { margin-top: 8px; font-weight: 600; color: #dc2626; border-top: 1px solid #fecaca; padding-top: 8px; }

/* Certificate boxes */
.ssl-cert-box { border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; margin-bottom: 0; }
.ssl-cert-header { margin: 0; padding: 10px 16px; font-size: 14px; font-weight: 700; color: #fff; }
.ssl-cert-header.cert-blue { background: #4a90d9; }
.ssl-cert-header.cert-orange { background: #e8943a; }
.ssl-cert-header.cert-teal { background: #3aada8; }
.ssl-cert-body { padding: 10px 16px; background: #fff; }

/* Certificate field list */
.cert-field-list { list-style: none; padding: 0; margin: 0; }
.cert-field-list li { padding: 5px 0; border-bottom: 1px solid #f5f5f5; font-size: 13px; }
.cert-field-list li:last-child { border-bottom: none; }
.cert-label { font-weight: 600; color: #333; display: inline-block; min-width: 160px; }
.cert-value { color: #555; word-break: break-all; }

/* Chain arrows */
.ssl-chain-arrow { text-align: center; padding: 8px 0; font-size: 20px; color: #3aaa35; }
.ssl-chain-arrow.broken { color: #cc0000; }

/* Check list (Additional Checks) */
.ssl-check-list { list-style: none; padding: 0; margin: 0; }
.ssl-check-list li { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid #f5f5f5; }
.ssl-check-list li:last-child { border-bottom: none; }
.check-circle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; }
.check-circle.pass { background: #3aaa35; }
.check-circle.fail { background: #cc0000; }
.check-label { font-weight: 600; color: #333; }
.check-value { color: #555; }

/* Error banner */
.ssl-error { background: #fef2f2; border-left: 4px solid #cc0000; padding: 12px 16px; border-radius: 4px; color: #7f1d1d; font-size: 14px; font-weight: 600; margin-top: 12px; }

/* Loading */
.ssl-loading { text-align: center; padding: 30px; color: #555; }