/**
 * SSL Certificate Checker Styles — v2.0
 * Design system: DM Sans + DM Mono, flat surfaces, brand green #006600
 */

/* ===== Design Tokens ===== */

:root {
    --brand:         #006600;
    --brand-dark:    #004d00;
    --brand-light:   #e6f4e6;
    --brand-mid:     #c3e6c3;
    --text:          #1a1a1a;
    --text-muted:    #222222;
    --bg:            #ffffff;
    --bg-secondary:  #f8f9fa;
    --border:        rgba(0, 0, 0, 0.2);
    --valid:         #006600;
    --warning:       #d97706;
    --error:         #dc2626;
    --radius-sm:     25px;
    --radius-md:     12px;
    --pill-valid-bg: #e6f4e6;
    --pill-valid-fg: #003300;
    --pill-error-bg: #fee2e2;
    --pill-error-fg: #7f1d1d;
    --pill-warn-bg:  #fef3c7;
    --pill-warn-fg:  #78350f;
    --border-error:  #fca5a5;
    --border-warn:   #fcd34d;
    --fs-xss:        12px;
    --fs-xs:         14px;
    --fs-base:       16px;
    --fs-lg:         18px;
    --fs-xl:         20px;
    --fs-2xl:        22px;
    --fs-3xl:        24px;
    --fs-4xl:        30px;
    --fs-5xl:        34px;
}

/* ===== Base / Container ===== */

.ssl-checker-container {
    position: relative;
    font-family: system-ui, sans-serif;
    color: var(--text);
}

/* ===== Header (title/description above form) ===== */

.ssl-checker-header {
    text-align: center;
    margin-bottom: 24px;
}

.ssl-checker-title {
    font-size: var(--fs-5xl);
    font-weight: 500;
    color: var(--text);
    margin: 0 0 8px;
    line-height: 1.2;
}

.ssl-checker-description {
    font-size: var(--fs-xl);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ===== Search Form ===== */

.ssl-checker-form {
    background: var(--bg-secondary);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .ssl-checker-form {
        padding: 1.25rem 1.5rem;
    }
}

.ssl-checker-form-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

@media (max-width: 767px) {
    .ssl-checker-form-row {
        flex-direction: column;
        align-items: stretch;
    }
}

.ssl-checker-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ssl-checker-field-domain {
    flex: 1;
}

.ssl-checker-field-button {
    flex-shrink: 0;
}

.ssl-checker-label {
    font-size: var(--fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.ssl-checker-input,
.ssl-checker-input-domain,
.ssl-checker-field input[type="text"],
.ssl-checker-field input[type="number"] {
    font-family: system-ui, sans-serif;
    box-sizing: border-box;
}

.ssl-checker-input:focus,
.ssl-checker-input-domain:focus,
.ssl-checker-field input[type="text"]:focus,
.ssl-checker-field input[type="number"]:focus {
    border-color: var(--brand);
}

.ssl-checker-button {
    font-family: system-ui, sans-serif;
    font-weight: 500;
    color: #fff;
    background: var(--brand);
    border: none;
    border-radius: var(--radius-sm);
    height: 40px;
    padding: 0 20px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.ssl-checker-button:hover {
    background: var(--brand-dark);
}

.ssl-checker-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ssl-checker-loading {
    font-size: var(--fs-base);
}

/* Privacy checkbox row */
.ssl-checker-privacy-option {
    margin-top: 10px;
    text-align: center;
}

.ssl-checker-privacy-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-base);
    color: var(--text-muted);
    cursor: pointer;
}

.ssl-checker-privacy-label:hover {
    color: var(--text);
}

.ssl-checker-privacy-checkbox {
    position: static !important;
    left: auto !important;
    margin: 0;
    cursor: pointer;
    appearance: auto;
    -webkit-appearance: checkbox;
    width: auto;
    height: auto;
}

/* ===== Loading Overlay ===== */

.ssl-checker-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.ssl-checker-loading-content {
    text-align: center;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.ssl-checker-loading-spinner {
    width: 32px;
    height: 32px;
    border: 2.5px solid var(--border);
    border-radius: 50%;
    border-top-color: var(--brand);
    animation: ssl-checker-spin 0.8s linear infinite;
    margin: 0 auto;
}

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

.ssl-checker-loading-text {
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--text);
    margin: 0;
}

.ssl-checker-loading-subtext {
    font-size: var(--fs-base);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ===== Results Wrapper ===== */

.ssl-checker-results {
    position: relative;
    animation: ssl-checker-fade-in 0.3s ease-out;
}

@keyframes ssl-checker-fade-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ssl-checker-card {
    background: var(--bg);
}

/* ===== Actions Bar ===== */

.ssl-checker-actions-bar {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
}

.ssl-checker-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 0.5px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--fs-base);
    font-weight: 400;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
    white-space: nowrap;
}

.ssl-checker-action-btn:hover {
    background: var(--bg-secondary);
    color: var(--text);
}

.ssl-checker-action-btn:active {
    background: var(--brand-light);
}

.ssl-checker-action-btn svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    flex-shrink: 0;
}

.ssl-checker-action-btn.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.ssl-checker-action-btn.is-loading span {
    display: none;
}

.ssl-checker-action-btn.is-loading::after {
    content: '';
    width: 13px;
    height: 13px;
    border: 2px solid var(--border);
    border-top-color: var(--text-muted);
    border-radius: 50%;
    animation: ssl-checker-spin 0.6s linear infinite;
}

/* Share wrapper & popover */
.ssl-checker-share-wrapper {
    position: relative;
}

.ssl-checker-share-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 100;
    width: 420px;
    background: var(--bg);
    border: 0.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    font-size: var(--fs-base);
    animation: ssl-popover-in 0.15s ease-out;
}

@keyframes ssl-popover-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ssl-checker-share-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 0.5px solid var(--border);
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text);
}

.ssl-checker-share-close {
    background: none;
    border: none;
    font-size: var(--fs-xl);
    cursor: pointer;
    color: var(--text-muted);
    padding: 0 2px;
    line-height: 1;
}

.ssl-checker-share-close:hover {
    color: var(--text);
}

.ssl-checker-share-popover-body {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
}

.ssl-checker-share-url {
}

.ssl-checker-share-copied {
    padding: 0 14px 10px;
    font-size: var(--fs-base);
    color: var(--brand);
    font-weight: 500;
}

@media (max-width: 480px) {
    .ssl-checker-actions-bar {
        flex-wrap: wrap;
    }

    .ssl-checker-action-btn span {
        display: none;
    }

    .ssl-checker-action-btn {
        padding: 8px 10px;
    }

    .ssl-checker-share-popover {
        width: 280px;
        left: -40px;
    }
}

/* ===== Status Banner (header-section) ===== */

/* ===== Status Banner — 3-column layout ===== */

.ssl-checker-header-section {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.1rem 1.4rem;
    border-radius: 12px;
    border: 0.5px solid var(--border);
    position: relative;
}

.ssl-checker-header-section.status-valid {
    background: #e6f4e6;
    border-color: #c3e6c3;
    color: #003300;
}

.ssl-checker-header-section.status-expires_soon,
.ssl-checker-header-section.status-warning {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #78350f;
}

.ssl-checker-header-section.status-expired,
.ssl-checker-header-section.status-not_yet_valid,
.ssl-checker-header-section.status-error {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #7f1d1d;
}

/* Column 1 — Status icon circle */
.ssl-checker-status-icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ssl-checker-status-icon-circle.status-valid {
    background: #c3e6c3;
}

.ssl-checker-status-icon-circle.status-expires_soon,
.ssl-checker-status-icon-circle.status-warning {
    background: #fef3c7;
}

.ssl-checker-status-icon-circle.status-expired,
.ssl-checker-status-icon-circle.status-not_yet_valid,
.ssl-checker-status-icon-circle.status-error {
    background: #fee2e2;
}

/* Show only the relevant SVG icon per status */
.ssl-checker-status-svg { display: none; }
.ssl-checker-status-icon-circle.status-valid .valid-icon { display: block; stroke: #006600; }
.ssl-checker-status-icon-circle.status-expires_soon .warning-icon,
.ssl-checker-status-icon-circle.status-warning .warning-icon { display: block; stroke: #d97706; }
.ssl-checker-status-icon-circle.status-expired .error-icon,
.ssl-checker-status-icon-circle.status-not_yet_valid .error-icon,
.ssl-checker-status-icon-circle.status-error .error-icon { display: block; stroke: #dc2626; }

/* Column 2 — Domain info */
.ssl-checker-domain-info {
    flex: 1;
    min-width: 0;
}

.ssl-checker-domain-heading {
    margin: 0;
    word-break: break-word;
}

.ssl-checker-domain-name {
    font-size: var(--fs-xl);
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
}

.ssl-checker-domain-text {
    flex: 1;
}

.ssl-checker-domain-meta {
    font-size: var(--fs-base);
    opacity: 0.75;
    line-height: 1.4;
}

/* Column 3 — Validation checklist */
.ssl-checker-validation-list {
    margin-left: auto;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}

.ssl-checker-validation-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-base);
    line-height: 1.4;
}

.ssl-checker-validation-icon {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0;
    overflow: hidden;
}

.ssl-checker-validation-icon.valid {
    background: var(--brand);
}

.ssl-checker-validation-icon.invalid {
    background: var(--error);
}

.ssl-checker-validation-icon.warning {
    background: var(--warning);
}

@media (max-width: 767px) {
    .ssl-checker-header-section {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        gap: 0.75rem;
    }

    .ssl-checker-status-icon-circle {
        align-self: flex-start;
    }

    .ssl-checker-domain-name {
        font-size: var(--fs-xl);
    }

    .ssl-checker-validation-list {
        margin-left: 0;
        margin-top: 4px;
    }

    .ssl-checker-validation-item {
        font-size: var(--fs-base);
    }
}

/* ===== Grade Section ===== */

.ssl-checker-grade-section {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    align-items: center;
    background: var(--bg-secondary);
    border: 0.5px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
}

/* Grade circle — 72px, border 3px, no SVG ring */
.ssl-checker-grade-circle {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 3px solid currentColor;
    border-radius: 50%;
}

.ssl-checker-grade-text {
    font-size: var(--fs-4xl);
    font-weight: 600;
    color: inherit;
    line-height: 1;
}

/* Grade color variants */
.ssl-checker-grade-circle.grade-a-plus { color: #006600; }
.ssl-checker-grade-circle.grade-a      { color: #006600; }
.ssl-checker-grade-circle.grade-b      { color: #d97706; }
.ssl-checker-grade-circle.grade-c      { color: #f97316; }
.ssl-checker-grade-circle.grade-d      { color: #dc2626; }
.ssl-checker-grade-circle.grade-f      { color: #dc2626; }

/* Right column */
.ssl-checker-grade-right {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
}

.ssl-checker-grade-info {
    display: flex;
    flex-direction: column;
    position: relative;
}

.ssl-checker-grade-info-label {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.ssl-checker-grade-score {
    font-size: var(--fs-3xl);
    font-weight: 500;
    color: var(--text);
}

.ssl-checker-grade-score-total {
    font-size: var(--fs-lg);
    font-weight: 400;
    color: var(--text-muted);
}

/* Category bars — horizontal layout */
.ssl-checker-grade-categories {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ssl-checker-grade-cat {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ssl-checker-grade-cat-name {
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--text-muted);
    width: 85px;
    flex-shrink: 0;
}

.ssl-checker-grade-cat-bar {
    flex: 1;
    height: 5px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.ssl-checker-grade-cat-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--brand);
    transition: width 0.6s ease;
}

.ssl-checker-grade-cat-score {
    font-size: var(--fs-base);
    color: var(--text-muted);
    font-weight: 400;
    width: 38px;
    text-align: right;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .ssl-checker-grade-section {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ssl-checker-grade-circle {
        margin: 0 auto;
    }

    .ssl-checker-grade-info {
        align-items: center;
    }

    .ssl-checker-grade-cat-name {
        width: 70px;
    }
}

/* ===== Stats Grid (3 columns) ===== */

.ssl-checker-stats-grid-2x3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 1.5rem;
}

.ssl-checker-stat {
    background: var(--bg);
    border: 0.5px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s;
}

.ssl-checker-stat:hover {
    border-color: rgba(0, 0, 0, 0.15);
}

.ssl-checker-stat-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    flex: 1;
}

.ssl-checker-stat-content h3 {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
    margin: 0 0 6px;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.3;
}

.ssl-checker-stat-value-large {
    font-size: var(--fs-xl);
    font-weight: 500;
    color: var(--brand);
    margin: 0 0 4px;
    line-height: 1.3;
    letter-spacing: 0;
}

.ssl-checker-stat-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ssl-checker-stat-date,
.ssl-checker-stat-description {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.4;
    font-weight: 400;
}

.ssl-checker-progress-fill {
    height: 100%;
    background: var(--brand);
    transition: width 0.3s ease;
    border-radius: 2px;
}

@media (max-width: 767px) {
    .ssl-checker-stats-grid-2x3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .ssl-checker-stats-grid-2x3 {
        grid-template-columns: 1fr;
    }
}

/* ===== Shared Section Card Style ===== */

.ssl-checker-security-features,
.ssl-checker-vulnerabilities,
.ssl-checker-cipher-suites,
.ssl-checker-certificate-chain,
.ssl-checker-detected-servers,
.ssl-checker-browser-compat,
.ssl-checker-details {
    margin-bottom: 1.5rem;
    background: var(--bg);
    border: 0.5px solid var(--border);
    border-radius: 12px;
}

.ssl-checker-security-features h3,
.ssl-checker-vulnerabilities h3,
.ssl-checker-cipher-suites h3,
.ssl-checker-certificate-chain h3,
.ssl-checker-detected-servers h3,
.ssl-checker-browser-compat h3,
.ssl-checker-details h3 {
    color: var(--text);
    margin: 0;
    padding: 0.9rem 1.25rem;
    border-bottom: 0.5px solid var(--border);
    display: flex;
    gap: 8px;
    position: relative;
}

@media (min-width: 768px) {
    .ssl-checker-security-features h3,
    .ssl-checker-vulnerabilities h3,
    .ssl-checker-cipher-suites h3,
    .ssl-checker-certificate-chain h3,
    .ssl-checker-detected-servers h3,
    .ssl-checker-browser-compat h3,
    .ssl-checker-details h3 {
        align-items: center;
    }
}

@media (max-width: 767px) {
    .ssl-checker-security-features h3,
    .ssl-checker-vulnerabilities h3,
    .ssl-checker-cipher-suites h3,
    .ssl-checker-certificate-chain h3,
    .ssl-checker-detected-servers h3,
    .ssl-checker-browser-compat h3,
    .ssl-checker-details h3 {
        flex-direction: column;
    }
}

/* Hidden in current design */
.ssl-checker-stat-header,
.ssl-checker-stat-icon,
.ssl-checker-grade-progress,
.ssl-checker-chain-overview,
.ssl-checker-chain-stats,
.ssl-checker-chain-stat,
.ssl-checker-chain-stat-value,
.ssl-checker-chain-stat-icon,
.ssl-checker-chain-trust-icon,
.ssl-checker-chain-stat-label,
.ssl-checker-vuln-message,
.ssl-checker-cert-type-icon,
.ssl-checker-chain-arrow,
.ssl-checker-arrow-icon,
.ssl-checker-arrow-label,
.ssl-checker-servers-cert-status,
.ssl-checker-compat-summary-text,
.ssl-checker-progress-bar {
    display: none;
}

/* ===== Security Features ===== */

.ssl-checker-features-list {
    display: flex;
    flex-direction: column;
    padding: 0 1.25rem;
}

.ssl-checker-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 0.5px solid var(--border);
}

.ssl-checker-feature:last-child {
    border-bottom: none;
}

/* Col 1: dot + name */
.ssl-checker-feature-label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 220px;
    flex-shrink: 0;
}

.ssl-checker-feature-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .ssl-checker-feature-icon {
        display: none;
    }
}

.ssl-checker-feature-icon.enabled  { background: var(--brand); }
.ssl-checker-feature-icon.disabled { background: var(--error); }
.ssl-checker-feature-icon.unknown  { background: var(--warning); }

.ssl-checker-feature-name {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
}

/* Col 2: description + sub-details */
.ssl-checker-feature-desc {
    flex: 2;
    min-width: 0;
}

.ssl-checker-feature-description {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.4;
}

.ssl-checker-revocation-details {
    display: flex;
    gap: 12px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.ssl-checker-revocation-method {
    white-space: nowrap;
}

.ssl-checker-caa-details {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 2px;
    word-break: break-all;
}

/* Col 3: status */
.ssl-checker-feature-status {
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.3;
    text-align: right;
    flex-shrink: 0;
    min-width: 70px;
}

.ssl-checker-feature-status.enabled  { color: var(--brand); }
.ssl-checker-feature-status.disabled { color: var(--error); }
.ssl-checker-feature-status.unknown  { color: var(--warning); }

.ssl-checker-features-badge {
    font-size: var(--fs-xs);
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: 500;
    background: var(--pill-valid-bg);
    color: var(--pill-valid-fg);
    vertical-align: middle;
    display: inline-block;
}

@media (min-width: 768px) {
    .ssl-checker-features-badge {
        margin-left: 8px;
    }
}

@media (max-width: 767px) {
    .ssl-checker-features-badge {
        align-self: baseline;
    }
}

.ssl-checker-features-badge-warn {
    background: var(--pill-warn-bg);
    color: var(--pill-warn-fg);
}

@media (min-width: 768px) {
    .ssl-checker-feature-desc {
        padding-left: 16px;
    }
}

@media (max-width: 767px) {
    .ssl-checker-feature {
        flex-wrap: wrap;
    }

    .ssl-checker-feature-label {
        flex: 1 1 100%;
    }

    .ssl-checker-feature {
        position: relative;
    }
}

/* ===== Section description text ===== */

.ssl-checker-section-description {
    font-size: var(--fs-base);
    color: var(--text-muted);
    line-height: 1.5;
    padding: 0.5rem 1.25rem 0;
    margin: 0 0 0.5rem;
}

/* ===== Vulnerability Scan ===== */

.ssl-checker-vulnerabilities .ssl-checker-section-description,
.ssl-checker-cipher-suites .ssl-checker-section-description,
.ssl-checker-browser-compat .ssl-checker-section-description {
    display: none;
}

.ssl-checker-vuln-list {
    display: flex;
    flex-direction: column;
    padding: 0 1.25rem;
}

.ssl-checker-vuln-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 0.5px solid var(--border);
}

.ssl-checker-vuln-item:last-child {
    border-bottom: none;
}

.ssl-checker-vuln-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ssl-checker-vuln-icon.safe       { background: var(--brand); }
.ssl-checker-vuln-icon.vulnerable { background: var(--error); }
.ssl-checker-vuln-icon.warning    { background: var(--warning); }
.ssl-checker-vuln-icon.unknown    { background: #9ca3af; }

.ssl-checker-vuln-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ssl-checker-vuln-header {
    display: contents;
}

.ssl-checker-vuln-name {
    font-weight: 500;
    font-size: var(--fs-base);
    color: var(--text);
    flex: 1;
}

.ssl-checker-vuln-cve {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    flex-shrink: 0;
}

.ssl-checker-vuln-status {
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 20px;
    white-space: nowrap;
    margin-left: 0;
}

.ssl-checker-vuln-status.safe       { background: var(--pill-valid-bg); color: var(--pill-valid-fg); }
.ssl-checker-vuln-status.vulnerable { background: var(--pill-error-bg); color: var(--pill-error-fg); }
.ssl-checker-vuln-status.warning    { background: var(--pill-warn-bg); color: var(--pill-warn-fg); }
.ssl-checker-vuln-status.unknown    { background: var(--bg-secondary); color: var(--text-muted); }

.ssl-checker-vulns-badge {
    font-size: var(--fs-xs);
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: 500;
    vertical-align: middle;
    display: inline-block;
}

@media (max-width: 767px) {
    .ssl-checker-vulns-badge {
        align-self: baseline;
    }
}

@media (min-width: 768px) {
    .ssl-checker-vulns-badge {
        margin-left: 8px;
    }
}

/* ===== Cipher Suites ===== */

.ssl-checker-cipher-total {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 5px 10px;
    border-radius: 20px;
}

@media (max-width: 767px) {
    .ssl-checker-cipher-total {
        align-self: baseline;
    }
}

@media (min-width: 768px) {
    .ssl-checker-cipher-total {
        margin-left: 8px;
    }
}

.ssl-checker-cipher-partial {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
}


.ssl-checker-cipher-summary {
    display: flex;
    gap: 0;
    padding: 0;
    background: var(--bg-secondary);
    border-bottom: 0.5px solid var(--border);
    border-radius: 0;
}

.ssl-checker-cipher-summary-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-right: 0.5px solid var(--border);
    gap: 3px;
}

.ssl-checker-cipher-summary-item:last-child {
    border-right: none;
}

.ssl-checker-cipher-summary-value {
    font-size: var(--fs-3xl);
    font-weight: 500;
    color: var(--text);
}

/* TLS 1.3 count — always green */
.ssl-checker-cipher-summary-item:first-child .ssl-checker-cipher-summary-value {
    color: var(--brand);
}

/* Weak count — green by default, red handled via JS class on parent */
.ssl-checker-cipher-summary-item:last-child .ssl-checker-cipher-summary-value {
    color: var(--brand);
}

.ssl-checker-cipher-summary-item.invalid .ssl-checker-cipher-summary-value {
    color: var(--error);
}

.ssl-checker-cipher-summary-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ssl-checker-cipher-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0.75rem 1.25rem;
}

.ssl-checker-cipher-group {
    margin-bottom: 10px;
}

.ssl-checker-cipher-group:first-child .ssl-checker-cipher-group-header {
    margin-top: 0;
}

.ssl-checker-cipher-group-header {
    font-size: var(--fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 8px 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ssl-checker-cipher-group-count {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: #fff;
    background: var(--brand);
    padding: 1px 7px;
    border-radius: 20px;
}

.ssl-checker-cipher-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--bg-secondary);
    border: 0.5px solid var(--border);
}

.ssl-checker-cipher-item.weak {
    background: #fef2f2;
    border-color: var(--border-error);
}

.ssl-checker-cipher-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.ssl-checker-cipher-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ssl-checker-cipher-icon {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ssl-checker-cipher-icon.strong     { background: var(--brand); }
.ssl-checker-cipher-icon.acceptable { background: var(--warning); }
.ssl-checker-cipher-icon.weak       { background: var(--error); }

.ssl-checker-cipher-name {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--pill-valid-fg);
    background: var(--pill-valid-bg);
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.ssl-checker-cipher-item.weak .ssl-checker-cipher-name {
    background: var(--pill-error-bg);
    color: var(--pill-error-fg);
}

.ssl-checker-cipher-item:has(.ssl-checker-cipher-icon.acceptable) .ssl-checker-cipher-name {
    background: var(--pill-warn-bg);
    color: var(--pill-warn-fg);
}

.ssl-checker-cipher-hex {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: auto;
}

.ssl-checker-cipher-kx-detail {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    white-space: nowrap;
    padding: 1px 5px;
    background: var(--bg);
    border: 0.5px solid var(--border);
    border-radius: 3px;
}

.ssl-checker-cipher-enc {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 28px;
    text-align: right;
}

.ssl-checker-cipher-pref {
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--brand);
    font-style: italic;
}

@media (min-width: 768px) {
    .ssl-checker-cipher-pref {
        white-space: nowrap;
    }
}


.ssl-checker-cipher-none {
    font-size: var(--fs-base);
    color: var(--text-muted);
    font-style: italic;
    padding: 0.5rem 1.25rem;
}

@media (max-width: 767px) {
    .ssl-checker-cipher-name {
        max-width: 160px;
    }

    .ssl-checker-cipher-hex,
    .ssl-checker-cipher-kx-detail {
        display: none;
    }
}

/* ===== Certificate Chain ===== */

.ssl-checker-certificate-chain {
    padding-bottom: 0;
}

.ssl-checker-chain-badge {
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 20px;
}

@media (max-width: 767px) {
    .ssl-checker-chain-badge {
        align-self: baseline;
    }
}

@media (min-width: 768px) {
    .ssl-checker-chain-badge {
        white-space: nowrap;
    }
}

.ssl-checker-chain-badge.valid {
    background: var(--pill-valid-bg);
    color: var(--pill-valid-fg);
}

.ssl-checker-chain-badge.invalid {
    background: var(--pill-error-bg);
    color: var(--pill-error-fg);
}

.ssl-checker-chain-badge.warning {
    background: var(--pill-warn-bg);
    color: var(--pill-warn-fg);
}

/* Chain visual flow */
.ssl-checker-chain-visual {
    padding: 0;
}

.ssl-checker-chain-flow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem 1.25rem;
}

.ssl-checker-chain-certificate {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Cert cards */
.ssl-checker-cert-card {
    width: 100%;
    background: var(--bg-secondary);
    border: 0.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.15s;
}

.ssl-checker-cert-card:hover {
    border-color: var(--text-muted);
}

.ssl-checker-cert-card.expired,
.ssl-checker-cert-card.not_yet_valid {
    background: #fef2f2;
    border-color: #fecaca;
}

/* Cert header */
.ssl-checker-cert-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .ssl-checker-cert-header {
        flex-direction: column;
    }
}

/* Icon container — dot replaces emoji */
.ssl-checker-cert-icon-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .ssl-checker-cert-icon-container {
        display: none;
    }
}

/* Dot for cert type — via icon container */
.ssl-checker-cert-icon-container::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
}

.ssl-checker-cert-card.end-entity .ssl-checker-cert-icon-container::before {
    background: var(--brand);
}

.ssl-checker-cert-card.intermediate-ca .ssl-checker-cert-icon-container::before {
    background: var(--warning);
}

.ssl-checker-cert-card.root-ca .ssl-checker-cert-icon-container::before {
    background: #7c3aed;
}

.ssl-checker-cert-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.ssl-checker-cert-status-badge.valid       { background: var(--brand); }
.ssl-checker-cert-status-badge.expires_soon { background: var(--warning); }
.ssl-checker-cert-status-badge.expired,
.ssl-checker-cert-status-badge.not_yet_valid { background: var(--error); }

.ssl-checker-cert-info {
    flex: 1;
    min-width: 0;
}

.ssl-checker-cert-name {
    font-weight: 500;
    color: var(--text);
    word-break: break-word;
}

.ssl-checker-cert-type {
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 20px;
    display: inline-block;
    flex-shrink: 0;
}

.ssl-checker-cert-card.end-entity .ssl-checker-cert-type {
    color: var(--pill-valid-fg);
    background: var(--pill-valid-bg);
}

.ssl-checker-cert-card.intermediate-ca .ssl-checker-cert-type {
    color: var(--pill-warn-fg);
    background: var(--pill-warn-bg);
}

.ssl-checker-cert-card.root-ca .ssl-checker-cert-type {
    color: #5b21b6;
    background: #ede9fe;
}

.ssl-checker-cert-organization {
    font-size: var(--fs-base);
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 5px;
}

/* Validity — hidden from card layout, shown in details panel */
.ssl-checker-cert-name-wrapper {
    display: flex;
    gap: 20px;
    align-items: center;
}
.ssl-checker-cert-expires {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 5px;
}

.ssl-checker-cert-dates {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 5px;
}

/* Cert actions */
.ssl-checker-cert-actions {
    display: flex;
    justify-content: center;
    margin-top: 0;
}

.ssl-checker-cert-details-btn {
    background: none;
    color: var(--text-muted);
    border: none;
    padding: 20px 0 0 10px;
    font-size: var(--fs-base);
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.ssl-checker-cert-details-btn:hover { color: var(--text); text-decoration: none; }
.ssl-checker-cert-details-btn.expanded { color: var(--text-muted); }

.ssl-checker-details-icon {
    font-size: var(--fs-xs);
    transition: transform 0.2s ease;
}

/* Cert details panel */
.ssl-checker-cert-details-panel {
    margin: 8px 0 4px 0;
    background: var(--bg);
    border: 0.5px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .ssl-checker-cert-details-panel {
        margin: 8px 0 4px 20px;
    }
}

.ssl-checker-cert-details-grid {
    display: flex;
    flex-direction: column;
}

.ssl-checker-cert-detail-row {
    display: flex;
    align-items: flex-start;
    padding: 8px 12px;
    border-bottom: 0.5px solid var(--border);
    gap: 1rem;
}

.ssl-checker-cert-detail-row:last-child {
    border-bottom: none;
}

.ssl-checker-cert-detail-row strong {
    min-width: 130px;
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text-muted);
    flex-shrink: 0;
}

.ssl-checker-cert-detail-row span {
    flex: 1;
    font-size: var(--fs-base);
    color: var(--text);
    word-break: break-all;
}

/* Monospace data */
.ssl-checker-monospace {
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    border: 0.5px solid var(--border);
}

/* Copy button */
.ssl-checker-copy-btn {
    background: transparent;
    border: 0.5px solid var(--border);
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    transition: all 0.15s;
    flex-shrink: 0;
}

.ssl-checker-copy-btn:hover {
    background: var(--bg-secondary);
    color: var(--text);
}

.ssl-checker-copy-btn.copied {
    background: var(--pill-valid-bg);
    border-color: var(--brand-mid);
    color: var(--pill-valid-fg);
}

/* Cert download & PEM actions */
.ssl-checker-cert-download {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border-top: 0.5px solid var(--border);
    background: var(--bg-secondary);
}

.ssl-checker-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    border: 0.5px solid var(--border);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.15s;
}

.ssl-checker-download-btn:hover {
    border-color: var(--text-muted);
    color: var(--text);
}

.ssl-checker-download-icon { font-size: var(--fs-base); }

.ssl-checker-pem-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f5f3ff;
    border: 0.5px solid #ddd6fe;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--fs-base);
    font-weight: 500;
    color: #5b21b6;
    transition: all 0.15s;
}

.ssl-checker-pem-toggle-btn:hover {
    background: #ede9fe;
    border-color: #c4b5fd;
}

.ssl-checker-pem-icon { font-size: var(--fs-base); font-weight: 500; }

/* PEM viewer — dark theme */
.ssl-checker-pem-viewer {
    margin-top: 8px;
    border: 0.5px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: #1e1e2e;
}

.ssl-checker-pem-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 14px;
    background: #1e1e2e;
    border-bottom: 0.5px solid #3a3a4c;
}

.ssl-checker-pem-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: #a5b4fc;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ssl-checker-pem-copy-btn {
    background: #3a3a4c;
    border: 0.5px solid #4a4a5c;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--fs-xs);
    color: #d1d5db;
    transition: all 0.15s;
}

.ssl-checker-pem-copy-btn:hover {
    background: #4a4a5c;
    color: #f3f4f6;
}

.ssl-checker-pem-copy-btn.copied {
    background: #052e16;
    border-color: var(--brand);
    color: #a6e3a1;
}

.ssl-checker-pem-content {
    margin: 0;
    padding: 14px;
    background: #1e1e2e;
    color: #a6e3a1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-xs);
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
}

.ssl-checker-pem-content code {
    background: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* Chain connectors */
.ssl-checker-chain-connector {
    padding-left: 18px;
    margin: 5px 0;
    height: 20px;
}

.ssl-checker-chain-connector::before {
    content: '';
    display: block;
    width: 2px;
    height: 100%;
    background: #d1d5db;
    border-radius: 1px;
}

.ssl-checker-chain-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
    font-style: italic;
    font-size: var(--fs-lg);
}

.ssl-checker-cert-validity {
    flex: 1;
}

@media (max-width: 767px) {
    .ssl-checker-cert-validity {
        text-align: center;
    }

    .ssl-checker-cert-detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .ssl-checker-cert-detail-row strong {
        min-width: auto;
    }

}

/* ===== Detected Servers ===== */

.ssl-checker-server-count {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 5px 10px;
    border-radius: 20px;
}

@media (max-width: 767px) {
    .ssl-checker-server-count {
        align-self: baseline;
    }
}

.ssl-checker-servers-badge {
    font-size: var(--fs-xs);
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: 500;
    vertical-align: middle;
    display: inline-block;
}

@media (max-width: 767px) {
    .ssl-checker-servers-badge {
        align-self: baseline;
    }
}

.ssl-checker-servers-list {
    display: flex;
    flex-direction: column;
    padding: 0 1.25rem;
}

.ssl-checker-server-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 0.5px solid var(--border);
}

.ssl-checker-server-item:last-child {
    border-bottom: none;
}

.ssl-checker-server-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ssl-checker-server-dot.online  { background: var(--brand); }
.ssl-checker-server-dot.offline { background: var(--error); }

.ssl-checker-server-ip-code {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text);
    background: none;
    padding: 0;
    flex-shrink: 0;
}

.ssl-checker-server-ip-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    background: #888;
    padding: 1px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

.ssl-checker-server-primary {
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 20px;
    background: var(--pill-valid-bg);
    color: var(--pill-valid-fg);
    flex-shrink: 0;
}

.ssl-checker-server-secondary {
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 20px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    flex-shrink: 0;
}

.ssl-checker-server-proto {
    font-size: var(--fs-base);
    color: var(--text-muted);
    flex: 1;
}

.ssl-checker-server-response {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 2px 7px;
    border-radius: 4px;
    border: 0.5px solid var(--border);
    white-space: nowrap;
    flex-shrink: 0;
}

.ssl-checker-server-cert {
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ssl-checker-server-cert.valid   { background: var(--pill-valid-bg); color: var(--pill-valid-fg); }
.ssl-checker-server-cert.invalid { background: var(--pill-error-bg); color: var(--pill-error-fg); }

@media (max-width: 767px) {
    .ssl-checker-server-proto,
    .ssl-checker-server-response,
    .ssl-checker-server-ip-label,
    .ssl-checker-server-primary,
    .ssl-checker-server-secondary {
        display: none;
    }
}

/* ===== Accordion Sections ===== */

.ssl-checker-accordion-section {
    border: 0.5px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.ssl-checker-accordion-header {
    background: var(--bg-secondary);
    cursor: pointer;
    transition: background 0.15s;
}

.ssl-checker-accordion-header:hover {
    background: var(--brand-light);
}

.ssl-checker-accordion-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xl);
    font-weight: 500;
    color: var(--text);
    /* override the section card h3 shared rule — no padding/border needed here */
    padding: 1rem 1.25rem 0;
    border-bottom: none;
}

.ssl-checker-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}


.ssl-checker-accordion-preview {
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--text-muted);
}

@media (max-width: 767px) {
    .ssl-checker-accordion-preview {
        word-break: break-word;
    }
}

.ssl-checker-accordion-arrow {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.ssl-checker-accordion-section.expanded .ssl-checker-accordion-arrow {
    transform: rotate(180deg);
}

.ssl-checker-accordion-section.expanded .ssl-checker-accordion-header {
    border-bottom: 0.5px solid var(--border);
}

.ssl-checker-accordion-content {
    padding: 1rem 1.25rem;
}

/* Info grid inside accordion */
.ssl-checker-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.ssl-checker-whois-timeout-message {
    padding: 1rem 1.25rem;
    background: var(--bg-secondary);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: var(--fs-base);
    line-height: 1.5;
}

.ssl-checker-whois-timeout-message p {
    margin: 0;
}

.ssl-checker-info-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s;
}

.ssl-checker-info-card:hover {
    border-color: var(--brand-mid);
}

.ssl-checker-info-card-icon {
    font-size: var(--fs-2xl);
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.ssl-checker-info-card-content {
    min-width: 0;
}

.ssl-checker-info-card-label {
    font-size: var(--fs-xs);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.ssl-checker-info-card-value {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text);
    word-break: break-word;
}

@media (min-width: 768px) {
    .ssl-checker-info-card-value {
        font-size: var(--fs-lg);
    }
}

.ssl-checker-info-card-sub {
    font-size: var(--fs-base);
    color: var(--text-muted);
    margin-top: 2px;
}

@media (max-width: 640px) {
    .ssl-checker-info-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Browser Compatibility ===== */

.ssl-checker-compat-score {
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .ssl-checker-compat-score {
        align-self: baseline;
    }
}

.ssl-checker-compat-score.valid   { background: var(--pill-valid-bg); color: var(--pill-valid-fg); }
.ssl-checker-compat-score.warning { background: var(--pill-warn-bg); color: var(--pill-warn-fg); }
.ssl-checker-compat-score.invalid { background: var(--pill-error-bg); color: var(--pill-error-fg); }

.ssl-checker-compat-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.75rem 1.25rem;
    background: var(--bg-secondary);
    border-bottom: 0.5px solid var(--border);
}

.ssl-checker-compat-summary-bar {
    flex: 1;
    height: 5px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.ssl-checker-compat-summary-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.ssl-checker-compat-summary-fill.valid   { background: var(--brand); }
.ssl-checker-compat-summary-fill.warning { background: var(--warning); }
.ssl-checker-compat-summary-fill.invalid { background: var(--error); }

.ssl-checker-compat-pct {
    font-size: var(--fs-base);
    font-weight: 500;
    white-space: nowrap;
}

.ssl-checker-compat-pct.valid   { color: var(--brand); }
.ssl-checker-compat-pct.warning { color: var(--warning); }
.ssl-checker-compat-pct.invalid { color: var(--error); }

.ssl-checker-compat-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 1.25rem;
}

.ssl-checker-compat-group { margin-bottom: 0; }

.ssl-checker-compat-group-header {
    font-size: var(--fs-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 10px 0 6px;
    border-bottom: 0.5px solid var(--border);
    margin-bottom: 0;
}

.ssl-checker-compat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 0.5px solid var(--border);
}

.ssl-checker-compat-item:last-child {
    border-bottom: none;
}

.ssl-checker-compat-icon { font-size: var(--fs-xl); width: 20px; text-align: center; flex-shrink: 0; }
.ssl-checker-compat-icon.supported   { color: var(--brand); font-weight: 700; }
.ssl-checker-compat-icon.unsupported { color: var(--error); font-weight: 700; }

.ssl-checker-compat-platform { font-size: var(--fs-lg); flex-shrink: 0; }

.ssl-checker-compat-name {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text);
    flex: 1;
}

.ssl-checker-compat-reason {
    font-size: var(--fs-base);
    color: var(--text-muted);
    font-style: normal;
    flex: 2;
}

.ssl-checker-compat-status {
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.ssl-checker-compat-status.supported   { background: var(--pill-valid-bg); color: var(--pill-valid-fg); }
.ssl-checker-compat-status.unsupported { background: var(--pill-error-bg); color: var(--pill-error-fg); }

.ssl-checker-compat-latency {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 2px 7px;
    border-radius: 4px;
    border: 0.5px solid var(--border);
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .ssl-checker-compat-item { flex-wrap: wrap; }
    .ssl-checker-compat-reason { display: none; }
    .ssl-checker-compat-latency { display: none; }
    .ssl-checker-compat-status { margin-left: auto; }
}

/* ===== Advanced Details ===== */

.ssl-checker-details-grid {
    display: grid;
    gap: 0;
    padding: 0 1.25rem;
}

.ssl-checker-detail {
    display: flex;
    padding: 12px 0;
    border-bottom: 0.5px solid var(--border);
    line-height: 1.5;
    gap: 12px;
}

.ssl-checker-detail:last-child {
    border-bottom: none;
}

.ssl-checker-detail strong {
    min-width: 150px;
    color: var(--text);
    font-weight: 500;
    font-size: var(--fs-base);
    flex-shrink: 0;
}

.ssl-checker-detail span {
    color: var(--text-muted);
    font-size: var(--fs-base);
    word-break: break-word;
    flex: 1;
}

.ssl-checker-fingerprint {
    font-size: var(--fs-base);
    line-height: 1.6;
    word-break: break-all;
}

@media (max-width: 767px) {
    .ssl-checker-detail {
        flex-direction: column;
        gap: 4px;
        padding: 12px 0;
    }

    .ssl-checker-detail strong { min-width: auto; }

    .ssl-checker-fingerprint {
        font-size: var(--fs-xs);
        line-height: 1.7;
    }
}

/* ===== Collapsible Sections ===== */

.ssl-checker-collapsible {
    position: relative;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.ssl-checker-collapsible.collapsed {
    max-height: 220px;
}

.ssl-checker-collapsible.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: linear-gradient(transparent, #fff);
    pointer-events: none;
}

.ssl-checker-collapsible.expanded {
    max-height: none;
}

.ssl-checker-collapsible.expanded::after {
    display: none;
}

/* Print expand — no transition */
.ssl-checker-collapsible.ssl-print-expanded {
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
}

.ssl-checker-toggle-btn {
    display: block;
    width: calc(100% - 2.5rem);
    margin: 0.5rem 1.25rem 1rem;
    padding: 7px 14px;
    background: transparent;
    border: 0.5px solid var(--border-secondary, var(--border));
    border-radius: 8px;
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--text-muted);
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, color 0.15s;
}

.ssl-checker-toggle-btn:hover {
    background: var(--bg-secondary);
    color: var(--text);
}

/* ===== No Data ===== */

.ssl-checker-no-data {
    font-size: var(--fs-base);
    color: var(--text-muted);
    font-style: italic;
    padding: 10px 0;
}

/* ===== Upsell Card ===== */

.ssl-checker-upsell-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, #004d00 0%, #006600 100%);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.ssl-checker-upsell-icon {
    flex-shrink: 0;
    color: #86efac;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.ssl-checker-upsell-icon svg {
    stroke: #86efac;
}

.ssl-checker-upsell-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ssl-checker-upsell-title {
    font-size: var(--fs-lg);
    font-weight: 500;
    color: #ffffff;
    line-height: 1.3;
}

.ssl-checker-upsell-sub {
    font-size: var(--fs-base);
    color: #e6f4e6;
    opacity: 0.8;
    line-height: 1.4;
}

.ssl-checker-upsell-card .ssl-checker-upsell-btn {
    background-color: #ffac4b;
    line-height: 1;
    color: #000000;
    border-radius: 25px;
    padding: 12px 18px;
    font-size: var(--fs-base);
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.ssl-checker-upsell-card .ssl-checker-upsell-btn:hover {
    background: #ffffff;
    color: var(--brand);
}

@media (max-width: 600px) {
    .ssl-checker-upsell-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .ssl-checker-upsell-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== SSL Expiry Reminder ===== */

.ssl-checker-reminder-section {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.ssl-checker-reminder-card {
    background: var(--bg-secondary);
    border: 0.5px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}

.ssl-checker-reminder-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.ssl-checker-reminder-header h3 {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: 500;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ssl-checker-reminder-desc {
    color: var(--text-muted);
    font-size: var(--fs-base);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.ssl-checker-reminder-form {
    display: flex;
    gap: 8px;
    margin-top: 1rem;
}

.ssl-checker-reminder-message {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: var(--fs-base);
}

.ssl-checker-reminder-message.success {
    background: var(--pill-valid-bg);
    color: var(--pill-valid-fg);
    border: 0.5px solid var(--brand-mid);
}

.ssl-checker-reminder-message.error {
    background: var(--pill-error-bg);
    color: var(--pill-error-fg);
    border: 0.5px solid var(--border-error);
}

/* Reminder checkboxes */
.ssl-checker-reminder-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
}

.ssl-checker-reminder-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: var(--fs-base);
    line-height: 1.5;
    color: var(--text-muted);
    padding: 8px 12px;
    border-radius: 8px;
    border: 0.5px solid var(--border);
    background: var(--bg);
    transition: border-color 0.15s, background 0.15s;
}

.ssl-checker-reminder-checkbox:hover {
    border-color: var(--brand-mid);
    background: #f0fdf4;
}

.ssl-checker-reminder-checkbox.checked {
    border-color: var(--brand-mid);
    background: #f0fdf4;
}

.ssl-checker-reminder-checkbox input[type="checkbox"] {
    position: static !important;
    left: auto !important;
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin-top: 2px;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    flex-shrink: 0;
}

.ssl-checker-reminder-checkbox input[type="checkbox"]:checked {
    background: var(--brand);
    border-color: var(--brand);
}

.ssl-checker-reminder-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ssl-checker-reminder-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--brand-mid);
    outline-offset: 2px;
}

.ssl-checker-reminder-checkbox span {
    flex: 1;
    font-size: var(--fs-base);
    color: var(--text-muted);
}

/* Honeypot */
.ssl-checker-reminder-honeypot { display: none !important; }

@media (max-width: 600px) {
    .ssl-checker-reminder-form {
        flex-direction: column;
    }

    .ssl-checker-reminder-btn {
        width: 100%;
    }
}

/* ===== Recently Scanned ===== */

.ssl-checker-recent-scans {
    margin-top: 24px;
}

.ssl-checker-recent-scans h3 {
    font-size: var(--fs-xl);
    font-weight: 500;
    color: var(--text);
    margin: 0 0 10px;
}

.ssl-checker-recent-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ssl-checker-recent-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #fff;
    border: 0.5px solid var(--border-tertiary, var(--border));
    border-radius: 8px;
    transition: background 0.15s, border-color 0.15s;
}

.ssl-checker-recent-item:hover,
.ssl-checker-recent-item:focus {
    background: var(--bg-secondary);
    border-color: var(--brand-mid);
    outline: none;
}

.ssl-checker-recent-status {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ssl-checker-recent-status.valid   { background: #006600; }
.ssl-checker-recent-status.expired { background: #dc2626; }
.ssl-checker-recent-status.unknown { background: #d97706; }

.ssl-checker-recent-domain {
    flex: 1;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ssl-checker-recent-grade {
    font-size: var(--fs-xss);
    font-weight: 500;
    padding: 1px 7px;
    border-radius: 4px;
    flex-shrink: 0;
    letter-spacing: .01em;
}

.ssl-checker-recent-grade--high { background: #e6f4e6; color: #003300; }
.ssl-checker-recent-grade--mid  { background: #fef3c7; color: #78350f; }
.ssl-checker-recent-grade--low  { background: #fee2e2; color: #7f1d1d; }

.ssl-checker-recent-time {
    font-size: var(--fs-xss);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== Error Display ===== */

.ssl-checker-error {
    background: #fef2f2;
    border: 0.5px solid var(--border-error);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--pill-error-fg);
    margin-top: 1rem;
    animation: ssl-checker-fade-in 0.2s ease-out;
}

.ssl-checker-error-message {
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: 1.5;
    flex: 1;
}

/* Circuit breaker error */
.ssl-checker-circuit-breaker-error {
    background: #fffbeb;
    border-color: var(--border-warn);
    color: var(--pill-warn-fg);
}

/* Retry button */
.ssl-checker-retry-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand);
    color: #fff;
    border: none;
    padding: 7px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-family: system-ui, sans-serif;
    font-weight: 500;
    font-size: var(--fs-base);
    margin-top: 10px;
    transition: background 0.15s;
}

.ssl-checker-retry-button:hover  { background: var(--brand-dark); }
.ssl-checker-retry-button:active { background: var(--pill-valid-fg); }

/* Rate limit error */
.ssl-checker-rate-limit-error {
    background: #fffbeb;
    border-color: var(--border-warn);
    color: var(--pill-warn-fg);
    flex-direction: column;
    align-items: flex-start;
}

.ssl-checker-countdown-container {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: 8px;
    border: 0.5px solid var(--border-warn);
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.ssl-checker-countdown-text {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--pill-warn-fg);
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.ssl-checker-countdown-text strong {
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--pill-warn-fg);
    min-width: 32px;
    text-align: center;
}

.ssl-checker-rate-limit-error .ssl-checker-retry-button {
    padding: 6px 14px;
    white-space: nowrap;
    margin-top: 0;
    margin-left: 0;
}

/* Connection retry */
.ssl-checker-retry-indicator {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
}

.ssl-checker-retry-progress {
    width: 100%;
    max-width: none;
}

.ssl-checker-retry-indicator .ssl-checker-progress-bar {
    display: block;
    width: 100%;
    height: 3px;
    background: #fde68a;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0;
}


.ssl-checker-retry-indicator small {
    color: var(--text-muted);
    font-size: var(--fs-base);
    font-weight: 400;
    text-align: left;
}

/* ===== Fix Button & Modal ===== */

.ssl-checker-fix-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 6px 8px;
    border: 0.5px solid #fbbf24;
    border-radius: 4px;
    background: #fef9ee;
    color: #92400e;
    font-family: system-ui, sans-serif;
    font-size: var(--fs-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.ssl-checker-fix-btn:hover {
    background: var(--pill-warn-bg);
    border-color: #f59e0b;
    color: var(--pill-warn-fg);
}

.ssl-checker-fix-btn svg { flex-shrink: 0; }

.ssl-checker-fix-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ssl-checker-fix-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.ssl-checker-fix-modal-content {
    position: relative;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--bg);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    animation: ssl-fix-modal-in 0.2s ease-out;
}

@keyframes ssl-fix-modal-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

.ssl-checker-fix-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: var(--fs-xl);
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.ssl-checker-fix-modal-close:hover { color: var(--text); }

.ssl-checker-fix-modal-title {
    font-size: var(--fs-xl);
    font-weight: 500;
    color: var(--text);
    margin: 0 0 14px;
    padding-right: 28px;
}

.ssl-checker-fix-modal-body {
    font-size: var(--fs-lg);
    line-height: 1.7;
    color: var(--text-muted);
}

.ssl-checker-fix-modal-body p    { margin: 0 0 10px; }
.ssl-checker-fix-modal-body ul   { margin: 0 0 10px; padding-left: 18px; }
.ssl-checker-fix-modal-body li   { margin-bottom: 6px; }

.ssl-checker-fix-modal-body code {
    background: var(--bg-secondary);
    padding: 2px 5px;
    border-radius: 4px;
    font-size: var(--fs-base);
    color: var(--error);
}

.ssl-checker-fix-modal-body strong { color: var(--text); }

@media (max-width: 600px) {
    .ssl-checker-fix-modal-content {
        width: 95%;
        padding: 1.25rem;
        max-height: 85vh;
    }
}

/* ===== Help "?" Button & Panel ===== */

/* Help icon: positioned absolute top-right of parent section */
.ssl-checker-help-wrapper {
    position: absolute;
    top: 10px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    z-index: 5;
}

/* Parent elements need position relative for absolute positioning */
.ssl-checker-accordion-header > h3,
.ssl-checker-domain-heading {
    position: relative;
}

.ssl-checker-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--brand-mid);
    background: none;
    color: var(--brand);
    cursor: pointer;
    padding: 0;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.ssl-checker-help-btn svg {
    width: 22px;
    height: 22px;
    stroke: var(--brand);
    flex-shrink: 0;
}

.ssl-checker-help-btn:hover,
.ssl-checker-help-btn.active { color: var(--brand-dark); border-color: var(--brand); }

.ssl-checker-help-panel {
    position: absolute !important;
    top: 0 !important;
    right: 100% !important;
    left: auto !important;
    margin-right: 8px;
    z-index: 10000;
    width: 380px;
    padding: 14px 18px;
    background: var(--brand-light);
    border: 0.5px solid var(--brand-mid);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    font-size: var(--fs-base);
    line-height: 1.7;
    color: var(--pill-valid-fg);
    animation: ssl-help-slide 0.2s ease-out;
}

.ssl-checker-help-panel p           { margin: 0 0 6px; }
.ssl-checker-help-panel p:last-child { margin-bottom: 0; }

@keyframes ssl-help-slide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    .ssl-checker-help-panel {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        margin-top: 0;
        transform: none;
        border-radius: 12px 12px 0 0;
        max-height: 60vh;
        overflow-y: auto;
        z-index: 10001;
    }
}

/* ===== Input group (legacy from shortcode fallback) ===== */

.ssl-checker-input-group {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* ===== PDF Export (applied to cloned card via .ssl-checker-pdf-export) ===== */
/* html2canvas renders in screen mode — @media print rules don't apply to PDF.
   All PDF-specific overrides must live here under .ssl-checker-pdf-export. */

.ssl-checker-pdf-export {
    word-break: break-word;
    padding-right: 40px;
    padding-bottom: 20px;
}

.ssl-checker-pdf-export .ssl-checker-collapsible::after {
    display: none !important;
}

.ssl-checker-pdf-export .ssl-checker-toggle-btn {
    display: none !important;
}

/* Prevent page breaks inside individual blocks */
.ssl-checker-pdf-export .ssl-checker-header-section,
.ssl-checker-pdf-export .ssl-checker-grade-section,
.ssl-checker-pdf-export .ssl-checker-stats-grid,
.ssl-checker-pdf-export .ssl-checker-feature,
.ssl-checker-pdf-export .ssl-checker-vuln-item,
.ssl-checker-pdf-export .ssl-checker-cert-card,
.ssl-checker-pdf-export .ssl-checker-info-card,
.ssl-checker-pdf-export .ssl-checker-stat,
.ssl-checker-pdf-export .ssl-checker-cipher-item,
.ssl-checker-pdf-export .ssl-checker-compat-item,
.ssl-checker-pdf-export .ssl-checker-server-item,
.ssl-checker-pdf-export .ssl-checker-detail {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Keep section headings with their first content — avoid orphaned titles */
.ssl-checker-pdf-export .ssl-checker-security-features > h3,
.ssl-checker-pdf-export .ssl-checker-vulnerabilities > h3,
.ssl-checker-pdf-export .ssl-checker-cipher-suites > h3,
.ssl-checker-pdf-export .ssl-checker-browser-compat > h3,
.ssl-checker-pdf-export .ssl-checker-detected-servers > h3,
.ssl-checker-pdf-export .ssl-checker-cert-chain > h3,
.ssl-checker-pdf-export .ssl-checker-accordion-header {
    break-after: avoid;
    page-break-after: avoid;
}

/* Prevent cipher/fingerprint truncation */
.ssl-checker-pdf-export .ssl-checker-cipher-name {
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    word-break: break-all !important;
}

.ssl-checker-pdf-export .ssl-checker-fingerprint {
    word-break: break-all !important;
}

/* Hide decorative emoji icons */
.ssl-checker-pdf-export .ssl-checker-info-card-icon {
    display: none !important;
}

/* Hide elements that overflow in narrow PDF width */
.ssl-checker-pdf-export .ssl-checker-cipher-hex,
.ssl-checker-pdf-export .ssl-checker-cipher-kx-detail,
.ssl-checker-pdf-export .ssl-checker-compat-latency {
    display: none;
}

/* ===== Print & PDF ===== */

@media print {
    /* Force color rendering for icons */
    .ssl-checker-grade-circle,
    .ssl-checker-feature-icon,
    .ssl-checker-validation-icon,
    .ssl-checker-vuln-icon {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Prevent page breaks inside key blocks */
    .ssl-checker-stat,
    .ssl-checker-feature,
    .ssl-checker-vuln-item,
    .ssl-checker-cert-card,
    .ssl-checker-info-card {
        break-inside: avoid;
    }

    /* Hide interactive / decorative elements */
    .ssl-checker-actions-bar,
    .ssl-checker-upsell-card,
    .ssl-checker-reminder-section,
    .ssl-checker-form,
    .ssl-checker-toggle-btn,
    .ssl-checker-fix-btn,
    .ssl-checker-fix-modal,
    .ssl-checker-help-wrapper,
    .ssl-checker-pem-toggle-btn,
    .ssl-checker-cert-download,
    .ssl-checker-cert-details-btn,
    .ssl-checker-recent-scans,
    .ssl-checker-info-card-icon {
        display: none !important;
    }

    /* Expand all collapsibles */
    .ssl-checker-collapsible {
        max-height: none !important;
        overflow: visible !important;
        transition: none !important;
    }

    .ssl-checker-collapsible::after {
        display: none !important;
    }

    /* Expand accordions */
    .ssl-checker-accordion-content {
        display: block !important;
    }

    /* Prevent cipher name truncation */
    .ssl-checker-cipher-name {
        max-width: none !important;
        white-space: normal !important;
        overflow: visible !important;
        word-break: break-all !important;
    }

    /* Allow long fingerprints to wrap */
    .ssl-checker-fingerprint {
        word-break: break-all !important;
    }

    /* Section-level page break control */
    .ssl-checker-section,
    .ssl-checker-accordion-section {
        break-inside: auto;
    }

    .ssl-checker-status-banner,
    .ssl-checker-grade-section {
        break-inside: avoid;
    }
}