/* Diagnostic-report-only styles. All rules scoped to .diagnostic-block so
   they cannot leak into the rest of the webhiteknova layout. */

.diagnostic-block { padding: 60px 0 10px 0; overflow: hidden; background: #fff; color: #333; }
.diagnostic-block .container { max-width: 1140px; margin: 0 auto; padding: 0 15px; }

.diag-title-box { text-align: center; margin-bottom: 10px; }
.diag-block-title {
    font-weight: 300;
    font-size: 30px;
    padding: 0 15px;
    margin: 0;
    line-height: 1.6;
    display: inline-block;
    position: relative;
    color: #1f2937;
}
.diagnostic-block .bb-top-left,
.diagnostic-block .bb-bottom-left,
.diagnostic-block .bb-top-right,
.diagnostic-block .bb-bottom-right {
    position: absolute;
    width: 10px;
    height: 10px;
}
.diagnostic-block .bb-top-left    { top: 0;    left: 0;  border-top:    2px solid #41678a; border-left:  2px solid #41678a; }
.diagnostic-block .bb-bottom-left { bottom: 0; left: 0;  border-bottom: 2px solid #41678a; border-left:  2px solid #41678a; }
.diagnostic-block .bb-top-right   { top: 0;    right: 0; border-top:    2px solid #41678a; border-right: 2px solid #41678a; }
.diagnostic-block .bb-bottom-right{ bottom: 0; right: 0; border-bottom: 2px solid #41678a; border-right: 2px solid #41678a; }

.diag-time-test { font-size: 16px; margin: 8px 0 24px 0; color: #475569; }
.diagnostic-block .thm-container { margin-top: 16px; }

.diag-search-form .form-group { margin-bottom: 10px; }
.diag-search-form .form-control {
    width: 100%; padding: 8px 12px; font-size: 14px; border: 1px solid #cfd6df; border-radius: 6px;
}
.btn-custom, .btn-print {
    padding: 0 15px; font-size: 18px; margin-top: 0; box-shadow: none; border-radius: 20px;
    height: 36px; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.btn-custom { background: #41678a; border: 2px solid #41678a; min-width: 60px; }
.btn-print  { background: #419bef; border: 2px solid #419bef; min-width: 60px; margin-left: 6px; }
.btn-custom:hover { background: #355374; }
.btn-print:hover  { background: #2f7fc9; }

/* Masthead identity line. The device ID is the serial a buyer checks against the
   handset in front of them, so it sits directly under the model name, centred,
   in mono, flanked by hairlines that fade out — a record header, not a form field. */
.diag-ident {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; max-width: 620px; margin: 14px auto 0; padding: 0 15px;
}
.diag-ident::before,
.diag-ident::after {
    content: ""; flex: 1 1 auto; height: 1px; min-width: 12px;
    background: linear-gradient(90deg, rgba(203,213,225,0) 0%, #cbd5e1 100%);
}
.diag-ident::after { background: linear-gradient(90deg, #cbd5e1 0%, rgba(203,213,225,0) 100%); }
.diag-ident-id {
    flex: 0 0 auto;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px; line-height: 1; letter-spacing: .05em; color: #64748b;
    white-space: nowrap; -webkit-user-select: all; user-select: all;
}

.diag-actions { text-align: center; margin: 0 0 28px 0; }
.diag-download {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px;
    height: 40px; padding: 0 20px; border-radius: 20px;
    border: 1px solid #41678a; background: #41678a;
    font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap;
    color: #fff; text-decoration: none; cursor: pointer;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.diag-download:hover, .diag-download:focus {
    background: #355374; color: #fff; text-decoration: none;
    box-shadow: 0 6px 16px rgba(65, 103, 138, .26); transform: translateY(-1px);
}
.diag-download:active { transform: translateY(0); box-shadow: none; }
.diag-download-icon {
    width: 17px; height: 17px; flex: none;
    transition: transform .18s ease;
}
.diag-download:hover .diag-download-icon { transform: translateY(2px); }

.diag-grid { display: flex; flex-wrap: wrap; }
.item-show {
    margin: 1%;
    padding: 10px;
    width: 20.5%;
    border-radius: 10px;
    border: 2px solid #e1e6eb;
    box-sizing: border-box;
    background: #fff;
}
.feature-box {
    padding: 12px 0; text-align: center; max-width: 360px; margin: 0 auto;
}
.feature-box h2 {
    margin: 0; padding: 8px 0; font-weight: 300; font-size: 18px; color: #1f2937;
}
.iconview { width: 100px; height: 100px; object-fit: contain; }

.passed   { color: #fff; }
.failed   { color: #fff; }
.notetest {
    padding: 5px; background: #fba603; border-radius: 50%; color: #fff;
    width: 33px; height: 33px; float: right; display: inline-block; text-align: center; font-size: 11px;
}
.icon-passed-failed { width: 33px; float: right; }

/* Answer badge for items that are not pass/fail (e.g. a cosmetic grade).
   A pill, not the fixed circle — the text can be longer than one short word. */
.diag-answer {
    float: right; display: inline-block; max-width: 100%;
    padding: 5px 10px; border-radius: 12px;
    background: #fba603; color: #fff;
    font-size: 11px; line-height: 1.2; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;
}

/* Status pills inline at top of card */
.feature-box.passed h2 { color: #0aade9; }
.feature-box.failed h2 { color: #ec1523; }
.feature-box.neutral h2 { color: #6b7280; }

/* Print view */
.diag-print { padding: 20px; color: #111; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.diag-print .diag-title-box { text-align: left; }

/* Tablet */
@media all and (max-width: 992px) {
    .diagnostic-block { padding: 24px 0 10px 0; }
    .diag-block-title { font-size: 22px; }
    .diag-time-test { font-size: 14px; margin: 4px 0 14px 0; }
}

/* Phone */
@media all and (max-width: 769px) {
    .diagnostic-block { padding: 16px 0 10px 0; }
    .diagnostic-block .mtop10 { margin-top: 0; }

    /* Masthead tightens; the 36-char ID still has to fit on one line */
    .diag-ident { gap: 10px; margin-top: 10px; }
    .diag-ident-id { font-size: 11px; letter-spacing: .02em; }
    .diag-actions { margin-bottom: 18px; }
    .diag-download { height: 42px; padding: 0 24px; }
    .diag-download:hover { transform: none; box-shadow: none; }

    /* Search form: input on its own row, then both buttons side-by-side */
    .diag-search-form .col-xs-7 { width: 100%; padding: 0; }
    .diag-search-form .col-xs-5 {
        width: 100%; padding: 0; margin-top: 8px; display: flex; gap: 8px;
    }
    .btn-custom, .btn-print {
        flex: 1; min-width: 0; width: auto; margin: 0; height: 40px;
    }

    /* Card grid: 3 per row */
    .item-show { width: 30.5%; padding: 8px; height: 110px; box-sizing: border-box; }
    .iconview { width: 60px; height: 60px; position: relative; z-index: 8; }
    .feature-box { padding: 0; }
    .feature-box h2 {
        font-size: 13px; padding: 6px 0 0 0; width: 100%;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .icon-passed-failed {
        width: 22px; margin-bottom: -20px; margin-top: -5px;
        position: relative; z-index: 9;
    }
    .notetest {
        width: 24px; height: 24px; font-size: 8px;
        margin-bottom: -20px; margin-top: -5px; padding: 5px 0;
        position: relative; z-index: 9;
    }
    .diag-answer {
        font-size: 8px; padding: 4px 7px; border-radius: 9px;
        max-width: 90%; margin-bottom: -20px; margin-top: -5px;
        position: relative; z-index: 9;
    }
}

@media all and (max-width: 480px) {
    /* Keep 3 per row even on small phones (matches the old standalone). */
    .diag-block-title { font-size: 18px; }
    .diag-time-test { font-size: 13px; }
    .diag-ident-id { font-size: 10px; }
}