/* General Layout */
.ecehc-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

/* Full-width container for the main report */
.ecehc-main-col {
    flex: 2; /* 2/3 width */
    min-width: 0;
}
#ecehc-main-report.card {
    max-width: 100% !important; /* Force override of default WP card max-width */
    padding: 20px;
}

/* Sidebar container for the two smaller cards */
.ecehc-sidebar-col {
    flex: 1; /* 1/3 width */
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Styles for the individual cards */
.ecehc-card-padded {
    padding: 20px;
}
#ecehc-cta-card.card {
    border-left: 4px solid #1e87f0;
}

/* Responsive behavior */
@media (max-width: 900px) {
    .ecehc-grid {
        flex-direction: column;
    }
    .ecehc-sidebar-col {
        min-width: unset;
    }
}
.ecehc-card-title {
	margin-top: 0;
}

.ecehc-status {
	font-weight: bold;
}

.ecehc-status-pass {
	color: #007017;
}

.ecehc-status-fail {
	color: #b32d2e; /* 4.4:1 on the striped log rows with the old #d63638; see docs/accessibility.md */
}

.ecehc-status-unknown {
	color: #8a5a00;
}

.ecehc-status-warning {
	color: #996800;
}

.ecehc-recheck-form {
    margin-top: 15px;
}
.ecehc-recheck-form .description {
    margin-left: 8px;
}

.ecehc-guidance {
    margin-top: 8px;
}
.ecehc-guidance summary {
    cursor: pointer;
    color: #2271b1;
}
.ecehc-record {
    margin: 8px 0;
}
.ecehc-guidance summary:focus-visible,
.ecehc-checklist .button-link:focus-visible,
.ecehc-review-notice .button-link:focus-visible,
.ecehc-fix-first-link:focus-visible,
.ecehc-woo-diagnosis a:focus-visible,
.ecehc-log-filters a:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}
.ecehc-record-meta {
    display: block;
    font-size: 12px;
    color: #50575e;
}
.ecehc-record code {
    word-break: break-all;
    margin-right: 6px;
}

.ecehc-log-note {
    margin: 15px 0;
}
.ecehc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
}
.ecehc-stat-card {
    flex: 1;
    min-width: 280px;
    max-width: none;
    padding: 5px 20px 15px;
}
.ecehc-stat-numbers {
    font-size: 14px;
}
.ecehc-last-failure {
    margin: 0 0 15px;
}
.ecehc-log-filters {
    margin: 15px 0;
}
.ecehc-log-filters select,
.ecehc-log-filters .button {
    margin-right: 6px;
}

.ecehc-settings-card {
    max-width: none;
    padding: 5px 20px 15px;
    margin-top: 20px;
}
.ecehc-clear-form {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #dcdcde;
}

.ecehc-checklist {
    max-width: none;
    margin: 15px 0;
    padding: 5px 20px 15px;
}
.ecehc-checklist ul {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}
.ecehc-checklist li {
    margin: 6px 0;
}
.ecehc-checklist li.ecehc-done {
    color: #50575e;
}
.ecehc-checklist li > span[aria-hidden] {
    display: inline-block;
    width: 22px;
}
.ecehc-support-report {
    margin-top: 15px;
}
.ecehc-support-report .description {
    margin-left: 8px;
}
.ecehc-support-report details {
    margin-top: 10px;
}

.ecehc-review-notice .button-link {
    margin-left: 6px;
    vertical-align: middle;
}

.ecehc-test-form .regular-text {
    width: 100%;
    max-width: 100%;
}

.ecehc-report-loading .spinner {
    float: none;
    margin: 0 8px 0 0;
    vertical-align: middle;
}

/* "Fix this first" summary at the top of the Health Report */
.ecehc-fix-first {
	margin: 12px 0 16px;
	padding: 4px 16px;
	border: 1px solid #c3c4c7;
	border-left-width: 4px;
	background: #fff;
}
.ecehc-fix-first-fail {
	border-left-color: #d63638;
}
.ecehc-fix-first-warning {
	border-left-color: #996800;
}
.ecehc-fix-first-ok {
	border-left-color: #00a32a;
}
.ecehc-fix-first-unchecked {
	border-left-color: #8a5a00;
}
.ecehc-fix-first-title {
	margin: 12px 0 4px;
	font-size: 14px;
}

/* "WooCommerce emails not arriving?" panel */
.ecehc-woo-diagnosis {
	margin: 0 0 16px;
	padding: 4px 16px;
	border: 1px solid #c3c4c7;
	border-left: 4px solid #2271b1;
	background: #fff;
}
.ecehc-woo-diagnosis-title {
	margin: 12px 0 4px;
	font-size: 14px;
}