/*
 * E-Care lab front end. Everything is scoped under .ecl so nothing here can
 * reach the theme, the header, or the caregiver / ambulance pages.
 * Colours follow the Meditaj navy and green; change them in one place below.
 */
.ecl {
    --ecl-primary: #173f8a;
    --ecl-primary-soft: #eaf0fb;
    --ecl-accent: #16a34a;
    --ecl-accent-dark: #12833c;
    --ecl-off: #dc2626;
    --ecl-text: #1f2937;
    --ecl-muted: #6b7280;
    --ecl-line: #e5e7eb;
    --ecl-bg: #ffffff;
    --ecl-radius: 12px;
    --ecl-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    color: var(--ecl-text);
    font-size: 15px;
    line-height: 1.5;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 32px;
    box-sizing: border-box;
}
.ecl *, .ecl *::before, .ecl *::after { box-sizing: border-box; }
.ecl h1, .ecl h2, .ecl h3, .ecl p { margin: 0; }
/* Themes (Astra included) underline content links with selectors as strong as ours; the lab UI does not. */
.ecl a, .ecl a:hover, .ecl a:focus { color: inherit; text-decoration: none !important; }
.ecl img { max-width: 100%; height: auto; display: block; }
.ecl .ecl-i { flex: none; vertical-align: middle; }

/* Buttons and links */
.ecl .ecl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--ecl-accent); color: #fff; border: 0; border-radius: 8px;
    padding: 10px 18px; font-weight: 600; font-size: 14px; cursor: pointer; line-height: 1.2;
    transition: background .15s;
}
.ecl .ecl-btn:hover, .ecl .ecl-btn:focus-visible { background: var(--ecl-accent-dark); color: #fff; }
.ecl .ecl-btn-sm { padding: 7px 12px; font-size: 13px; }
.ecl .ecl-link { color: var(--ecl-primary); font-weight: 600; font-size: 14px; white-space: nowrap; }
.ecl .ecl-link:hover { text-decoration: underline !important; }
.ecl :focus-visible { outline: 2px solid var(--ecl-primary); outline-offset: 2px; }

/* Banner / hero */
.ecl .ecl-banner { margin: 16px 0; border-radius: var(--ecl-radius); overflow: hidden; }
.ecl .ecl-banner img { width: 100%; }
.ecl .ecl-hero {
    margin: 16px 0; padding: 32px 24px; border-radius: var(--ecl-radius);
    background: linear-gradient(120deg, var(--ecl-primary), #2a64c9); color: #fff;
}
.ecl .ecl-hero h1 { font-size: 28px; font-weight: 800; color: #fff; }
.ecl .ecl-hero p { margin-top: 6px; opacity: .9; }

/* Search */
.ecl .ecl-search {
    display: flex; align-items: center; gap: 8px; margin: 16px 0;
    background: var(--ecl-bg); border: 1px solid var(--ecl-line); border-radius: 10px; padding: 6px 6px 6px 12px;
}
.ecl .ecl-search .ecl-i { color: var(--ecl-muted); }
.ecl .ecl-search input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; padding: 6px 4px; box-shadow: none;
}

/* Quick cards */
.ecl .ecl-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 8px; }
.ecl .ecl-quick-card {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--ecl-bg);
    border: 1px solid var(--ecl-line); border-radius: var(--ecl-radius); box-shadow: var(--ecl-shadow); font-weight: 700;
}
.ecl .ecl-quick-card .ecl-i { width: 28px; height: 28px; color: var(--ecl-primary); }
.ecl .ecl-quick-card small { display: block; font-weight: 500; color: var(--ecl-muted); font-size: 12px; }
.ecl .ecl-quick-card:hover { border-color: var(--ecl-primary); }

/* Sections */
.ecl .ecl-sec { margin-top: 28px; }
.ecl .ecl-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ecl .ecl-sec-head h2 { font-size: 20px; font-weight: 800; color: var(--ecl-text); }
.ecl .ecl-sec-tools { display: flex; align-items: center; gap: 8px; }
.ecl .ecl-arrow {
    width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ecl-line); background: var(--ecl-bg);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ecl-text); padding: 0;
}
.ecl .ecl-arrow:hover { border-color: var(--ecl-primary); color: var(--ecl-primary); }

/* Horizontal card row */
.ecl .ecl-row {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; scrollbar-width: thin;
}
.ecl .ecl-row > .ecl-card { scroll-snap-align: start; }
@media (min-width: 900px) { .ecl .ecl-row { grid-auto-columns: calc((100% - 42px) / 4); } }

/* Card */
.ecl .ecl-card {
    display: grid; grid-template-columns: 84px 1fr; grid-template-rows: 1fr auto; gap: 10px 12px;
    background: var(--ecl-bg); border: 1px solid var(--ecl-line); border-radius: var(--ecl-radius);
    padding: 12px; box-shadow: var(--ecl-shadow); min-width: 0;
}
.ecl .ecl-card-img { grid-row: 1; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #f472b6, #60a5fa); }
.ecl .ecl-card-img img { width: 100%; height: 100%; object-fit: cover; }
.ecl .ecl-card-ph { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: #fff; }
.ecl .ecl-card-ph .ecl-i { width: 36px; height: 36px; }
.ecl .ecl-card-body { min-width: 0; }
.ecl .ecl-card-title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.ecl .ecl-card-title a:hover { color: var(--ecl-primary); }
.ecl .ecl-card-sub { font-size: 12px; color: var(--ecl-primary); margin-top: 2px; }
.ecl .ecl-card-labs { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.ecl .ecl-card-labs img { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; border: 1px solid var(--ecl-line); background: #fff; }
.ecl .ecl-lab-initial {
    width: 22px; height: 22px; border-radius: 4px; background: var(--ecl-primary-soft); color: var(--ecl-primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.ecl .ecl-lab-more { font-size: 12px; color: var(--ecl-muted); }
.ecl .ecl-card-meta { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ecl-muted); margin-top: 6px; }
.ecl .ecl-card-meta .ecl-i { width: 14px; height: 14px; }
.ecl .ecl-card-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ecl .ecl-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ecl .ecl-price strong { font-size: 17px; font-weight: 800; }
.ecl .ecl-price del { font-size: 13px; color: var(--ecl-muted); }
.ecl .ecl-off { font-size: 11px; font-weight: 700; color: #fff; background: var(--ecl-accent); padding: 2px 6px; border-radius: 999px; }

/* Category grid */
.ecl .ecl-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.ecl .ecl-cat {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; text-align: center;
    background: var(--ecl-bg); border: 1px solid var(--ecl-line); border-radius: var(--ecl-radius);
}
.ecl .ecl-cat:hover { border-color: var(--ecl-primary); }
.ecl .ecl-cat-icon {
    width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: var(--ecl-primary-soft); color: var(--ecl-primary); overflow: hidden;
}
.ecl .ecl-cat-icon img { width: 40px; height: 40px; object-fit: contain; }
.ecl .ecl-cat-icon .ecl-i { width: 28px; height: 28px; }
.ecl .ecl-cat-name { font-size: 13px; font-weight: 600; line-height: 1.25; }

/* Lab partners */
.ecl .ecl-partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.ecl .ecl-partner {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--ecl-bg);
    border: 1px solid var(--ecl-line); border-radius: 10px; font-size: 14px; font-weight: 600;
}
.ecl .ecl-partner img { width: 32px; height: 32px; object-fit: contain; }
.ecl .ecl-partner .ecl-lab-initial { width: 32px; height: 32px; font-size: 14px; }
.ecl .ecl-partner:hover { border-color: var(--ecl-primary); }

/* How we work */
.ecl .ecl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.ecl .ecl-steps li { background: var(--ecl-bg); border: 1px solid var(--ecl-line); border-radius: var(--ecl-radius); padding: 16px; }
.ecl .ecl-step-n {
    display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center;
    background: var(--ecl-primary); color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 8px;
}
.ecl .ecl-steps h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.ecl .ecl-steps p { font-size: 13px; color: var(--ecl-muted); }

@media (max-width: 600px) {
    .ecl .ecl-hero h1 { font-size: 22px; }
    .ecl .ecl-sec-head h2 { font-size: 17px; }
    .ecl .ecl-row { grid-auto-columns: 86%; }
    .ecl .ecl-search .ecl-btn { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) { .ecl .ecl-row { scroll-behavior: auto; } }

/* ===== All tests page ===== */
.ecl .ecl-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--ecl-muted); margin: 16px 0 4px; }
.ecl .ecl-crumbs a { color: var(--ecl-muted); }
.ecl .ecl-crumbs a:hover { color: var(--ecl-primary); }
.ecl .ecl-crumbs [aria-current] { color: var(--ecl-primary); font-weight: 600; }
.ecl .ecl-toolbar { margin: 8px 0 16px; }
.ecl .ecl-toolbar .ecl-search { margin: 8px 0; }
.ecl .ecl-toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ecl .ecl-filter-toggle {
    display: none; align-items: center; gap: 6px; background: var(--ecl-bg); border: 1px solid var(--ecl-line);
    border-radius: 8px; padding: 8px 12px; font-weight: 600; cursor: pointer; color: var(--ecl-text);
}
.ecl .ecl-badge { background: var(--ecl-primary); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; }
.ecl .ecl-sort { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 14px; color: var(--ecl-muted); }
.ecl .ecl-sort select { border: 1px solid var(--ecl-line); border-radius: 8px; padding: 7px 10px; background: var(--ecl-bg); color: var(--ecl-text); font-size: 14px; }

.ecl .ecl-cat-layout { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.ecl .ecl-filters {
    position: sticky; top: 16px; background: var(--ecl-bg); border: 1px solid var(--ecl-line); border-radius: var(--ecl-radius);
    padding: 14px; max-height: calc(100vh - 32px); overflow-y: auto;
}
.ecl .ecl-filters-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ecl .ecl-drawer-close { display: none; background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--ecl-muted); padding: 0 4px; }
.ecl .ecl-fgroup { border: 0; border-top: 1px solid var(--ecl-line); margin: 0; padding: 10px 0 4px; min-width: 0; }
.ecl .ecl-fgroup legend { font-weight: 700; font-size: 14px; padding: 0; margin-bottom: 6px; float: left; width: 100%; }
.ecl .ecl-fopts { clear: both; max-height: 240px; overflow-y: auto; }
.ecl .ecl-fopt { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 14px; cursor: pointer; border-radius: 6px; }
.ecl .ecl-fopt:hover { background: var(--ecl-primary-soft); }
.ecl .ecl-fopt input { accent-color: var(--ecl-primary); margin: 0; flex: none; }
.ecl .ecl-fopt img { width: 20px; height: 20px; object-fit: contain; }
.ecl .ecl-fname { flex: 1; min-width: 0; }
.ecl .ecl-fcount { font-size: 12px; color: var(--ecl-muted); }
.ecl .ecl-filters-apply { display: none; }
/* With JS the choices apply themselves; without it the button stays. */
.ecl .ecl-cat-form:not(.ecl-js) .ecl-filters-apply { display: block; margin-top: 12px; }

.ecl .ecl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.ecl .ecl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--ecl-primary-soft); color: var(--ecl-primary); font-size: 13px; font-weight: 600; }
.ecl .ecl-chip:hover { background: #dbe6fa; }
.ecl .ecl-count { font-size: 13px; color: var(--ecl-muted); margin-bottom: 10px; }
.ecl .ecl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }

.ecl .ecl-empty { text-align: center; padding: 48px 16px; border: 1px dashed var(--ecl-line); border-radius: var(--ecl-radius); color: var(--ecl-muted); }
.ecl .ecl-empty .ecl-i { width: 40px; height: 40px; color: var(--ecl-primary); margin: 0 auto 8px; display: block; }
.ecl .ecl-empty h2 { color: var(--ecl-text); font-size: 18px; margin-bottom: 4px; }
.ecl .ecl-empty .ecl-btn { margin-top: 14px; }

.ecl .ecl-pages { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 20px; flex-wrap: wrap; }
.ecl .ecl-pages a, .ecl .ecl-pages span {
    min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; border: 1px solid var(--ecl-line); padding: 0 10px; font-size: 14px; background: var(--ecl-bg);
}
.ecl .ecl-pages a:hover { border-color: var(--ecl-primary); color: var(--ecl-primary); }
.ecl .ecl-pages .ecl-page-cur { background: var(--ecl-primary); border-color: var(--ecl-primary); color: #fff; font-weight: 700; }
.ecl .ecl-pages .ecl-gap { border: 0; background: none; min-width: 0; }
.ecl .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Filters become a drawer on small screens. */
@media (max-width: 900px) {
    .ecl .ecl-cat-layout { grid-template-columns: 1fr; }
    .ecl .ecl-filter-toggle { display: inline-flex; }
    .ecl .ecl-cat-form.ecl-js .ecl-filters {
        position: fixed; inset: 0 auto 0 0; width: min(320px, 88vw); max-height: none; height: 100%; z-index: 99999;
        border-radius: 0; transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,.2);
    }
    /* Animate only once someone opens or closes it - not while the page sets up,
       which would slide the drawer across the screen on every load. */
    .ecl .ecl-cat-form.ecl-js.ecl-drawer-anim .ecl-filters { transition: transform .2s ease; }
    .ecl .ecl-cat-form.ecl-js.is-drawer-open .ecl-filters { transform: none; }
    .ecl .ecl-cat-form.ecl-js .ecl-drawer-close { display: block; }
    .ecl .ecl-cat-form.ecl-js .ecl-filters-apply { display: block; position: sticky; bottom: 0; background: var(--ecl-bg); padding-top: 10px; }
    .ecl .ecl-cat-form.ecl-js .ecl-filters-apply .ecl-btn { width: 100%; }
    .ecl .ecl-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 99998; }
    .ecl .ecl-filters { position: static; }
}
@media (prefers-reduced-motion: reduce) { .ecl .ecl-cat-form.ecl-js.ecl-drawer-anim .ecl-filters { transition: none; } }

/* ===== Test detail page ===== */
.ecl .ecl-btn-lg { padding: 13px 26px; font-size: 16px; border-radius: 10px; }
.ecl .ecl-btn-ghost { background: var(--ecl-bg); color: var(--ecl-primary); border: 1px solid var(--ecl-primary); }
.ecl .ecl-btn-ghost:hover, .ecl .ecl-btn-ghost:focus-visible { background: var(--ecl-primary-soft); color: var(--ecl-primary); }
.ecl .ecl-btn-text { background: none; color: var(--ecl-muted); padding-left: 8px; padding-right: 8px; }
.ecl .ecl-btn-text:hover, .ecl .ecl-btn-text:focus-visible { background: none; color: var(--ecl-text); }
.ecl .ecl-btn:disabled { opacity: .6; cursor: default; }
.ecl .ecl-price-lg strong { font-size: 26px; }
.ecl .ecl-price-lg del { font-size: 15px; }
.ecl .ecl-price-lg small { font-size: 13px; color: var(--ecl-muted); }

.ecl .ecl-d-top { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 12px; }
.ecl .ecl-d-media {
    aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden;
    background: linear-gradient(135deg, #f472b6, #60a5fa); position: sticky; top: 16px;
}
.ecl .ecl-d-media img { width: 100%; height: 100%; object-fit: cover; }
.ecl .ecl-d-media .ecl-card-ph .ecl-i { width: 96px; height: 96px; }
.ecl .ecl-d-ribbon {
    position: absolute; top: 14px; left: 14px; background: var(--ecl-off); color: #fff; font-weight: 800;
    font-size: 14px; padding: 4px 10px; border-radius: 999px;
}
.ecl .ecl-d-kind { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ecl-muted); }
.ecl .ecl-d-title { font-size: 28px; font-weight: 800; line-height: 1.2; margin-top: 4px; color: var(--ecl-text); }
.ecl .ecl-d-sub { color: var(--ecl-primary); font-size: 14px; margin-top: 4px; }
.ecl .ecl-d-aka { font-size: 14px; color: var(--ecl-muted); margin-top: 8px; }
.ecl .ecl-d-aka strong { color: var(--ecl-text); }
.ecl .ecl-d-facts { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ecl .ecl-d-facts li {
    display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ecl-muted);
    background: var(--ecl-primary-soft); border-radius: 999px; padding: 5px 12px;
}
.ecl .ecl-d-facts li strong { color: var(--ecl-text); }
.ecl .ecl-d-facts .ecl-i { width: 15px; height: 15px; color: var(--ecl-primary); }
.ecl .ecl-d-facts-sm li { font-size: 12px; padding: 3px 10px; }
.ecl .ecl-d-buy {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-top: 18px; padding: 16px; border: 1px solid var(--ecl-line); border-radius: var(--ecl-radius); background: var(--ecl-bg);
}
.ecl .ecl-d-labs { font-size: 13px; color: var(--ecl-muted); margin-top: 8px; }
.ecl .ecl-d-block { margin-top: 22px; }
.ecl .ecl-d-block h2 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.ecl .ecl-d-block h2.ecl-d-mini { font-size: 15px; }
.ecl .ecl-d-block .ecl-chips { margin-bottom: 0; }
.ecl .ecl-d-desc { color: #374151; }
.ecl .ecl-d-desc p + p, .ecl .ecl-d-desc ul, .ecl .ecl-d-desc ol { margin-top: 10px; }
.ecl .ecl-d-incl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 16px; }
.ecl .ecl-d-incl li { position: relative; padding-left: 22px; font-size: 14px; }
.ecl .ecl-d-incl li::before { content: "✓"; position: absolute; left: 0; color: var(--ecl-accent); font-weight: 800; }
.ecl .ecl-d-included { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ecl .ecl-d-inc { background: var(--ecl-bg); border: 1px solid var(--ecl-line); border-radius: var(--ecl-radius); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.ecl .ecl-d-inc h3 { font-size: 15px; font-weight: 700; }
.ecl .ecl-d-inc .ecl-d-facts { margin-top: 2px; }
.ecl .ecl-d-inc-text { font-size: 13px; color: var(--ecl-muted); }
.ecl .ecl-d-inc .ecl-link { margin-top: auto; align-self: flex-start; }

.ecl .ecl-faq { display: flex; flex-direction: column; gap: 8px; }
.ecl .ecl-faq details { border: 1px solid var(--ecl-line); border-radius: 10px; background: var(--ecl-bg); }
.ecl .ecl-faq summary {
    cursor: pointer; list-style: none; padding: 12px 40px 12px 14px; font-weight: 700; position: relative;
}
.ecl .ecl-faq summary::-webkit-details-marker { display: none; }
.ecl .ecl-faq summary::after { content: "+"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--ecl-primary); }
.ecl .ecl-faq details[open] summary::after { content: "−"; }
.ecl .ecl-faq details p { padding: 0 14px 14px; color: #374151; font-size: 14px; }

@media (max-width: 800px) {
    .ecl .ecl-d-top { grid-template-columns: 1fr; gap: 16px; }
    .ecl .ecl-d-media { position: relative; top: 0; aspect-ratio: 16 / 9; }
    .ecl .ecl-d-title { font-size: 22px; }
    .ecl .ecl-d-buy .ecl-btn-lg { flex: 1 1 100%; }
}

/* ===== Book modal (appended to <body>, so it carries .ecl itself) ===== */
html.ecl-modal-open { overflow: hidden; }
.ecl.ecl-m-root {
    position: fixed; inset: 0; z-index: 100000; max-width: none; margin: 0; padding: 16px;
    display: flex; align-items: center; justify-content: center;
}
.ecl .ecl-m-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .5); }
.ecl .ecl-m {
    position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto;
    background: var(--ecl-bg); border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.25); outline: 0;
}
.ecl .ecl-m-head {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 16px 18px 12px; background: var(--ecl-bg); border-bottom: 1px solid var(--ecl-line);
}
.ecl .ecl-m-title { font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--ecl-text); }
.ecl .ecl-m-x {
    flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #f3f4f6; color: var(--ecl-text);
    font-size: 22px; line-height: 1; cursor: pointer; padding: 0;
}
.ecl .ecl-m-x:hover { background: #e5e7eb; }
.ecl .ecl-m-body { padding: 14px 18px 18px; }
.ecl .ecl-m-wait { color: var(--ecl-muted); padding: 24px 0; text-align: center; }
.ecl .ecl-m-sub { color: var(--ecl-primary); font-size: 14px; }
.ecl .ecl-m-facts { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ecl .ecl-m-facts li { font-size: 12px; color: var(--ecl-muted); background: var(--ecl-primary-soft); border-radius: 999px; padding: 3px 10px; }
.ecl .ecl-m-facts strong { color: var(--ecl-text); }
.ecl .ecl-m-h { font-size: 15px; font-weight: 700; margin: 16px 0 8px; }
.ecl .ecl-m-labs { display: flex; flex-direction: column; gap: 8px; }
.ecl .ecl-m-lab {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ecl-line); border-radius: 10px;
    cursor: pointer; margin: 0;
}
.ecl .ecl-m-lab:hover { border-color: var(--ecl-primary); }
.ecl .ecl-m-lab:has(input:checked) { border-color: var(--ecl-primary); background: var(--ecl-primary-soft); }
.ecl .ecl-m-lab input { accent-color: var(--ecl-primary); margin: 0; flex: none; width: 18px; height: 18px; }
.ecl .ecl-m-lab img, .ecl .ecl-m-lab .ecl-lab-initial { width: 32px; height: 32px; flex: none; object-fit: contain; border-radius: 6px; }
.ecl .ecl-m-lab .ecl-lab-initial { font-size: 14px; }
.ecl .ecl-m-lab-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; font-size: 14px; }
.ecl .ecl-m-lab-name small { color: var(--ecl-accent-dark); font-weight: 600; font-size: 12px; }
.ecl .ecl-m-lab-price { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.ecl .ecl-m-lab-price strong { font-size: 16px; font-weight: 800; }
.ecl .ecl-m-lab-price del { font-size: 12px; color: var(--ecl-muted); }
.ecl .ecl-m-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.ecl .ecl-m-row .ecl-m-h { margin: 8px 0; }
.ecl .ecl-stepper { display: inline-flex; align-items: center; border: 1px solid var(--ecl-line); border-radius: 999px; overflow: hidden; }
.ecl .ecl-step-btn {
    width: 38px; height: 38px; border: 0; background: var(--ecl-bg); color: var(--ecl-primary); font-size: 20px; line-height: 1;
    cursor: pointer; padding: 0;
}
.ecl .ecl-step-btn:hover:not(:disabled) { background: var(--ecl-primary-soft); }
.ecl .ecl-step-btn:disabled { color: #cbd5e1; cursor: default; }
.ecl .ecl-step-n2 { min-width: 36px; text-align: center; font-weight: 700; }
.ecl .ecl-m-sum { margin: 14px 0 0; padding: 12px 14px; background: #f9fafb; border-radius: 10px; }
.ecl .ecl-m-sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14px; }
.ecl .ecl-m-sum dt, .ecl .ecl-m-sum dd { margin: 0; }
.ecl .ecl-m-sum .ecl-m-save dd { color: var(--ecl-accent-dark); font-weight: 600; }
.ecl .ecl-m-sum .ecl-m-total { border-top: 1px dashed var(--ecl-line); margin-top: 4px; padding-top: 8px; font-weight: 800; font-size: 16px; }
.ecl .ecl-m-msg:empty { display: none; }
.ecl .ecl-m-msg { margin-top: 12px; }
.ecl .ecl-m-error { color: var(--ecl-off); font-size: 14px; }
.ecl .ecl-m-conflict { border: 1px solid #fcd34d; background: #fffbeb; border-radius: 10px; padding: 12px; font-size: 14px; }
.ecl .ecl-m-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ecl .ecl-m-acts-end { justify-content: flex-end; margin-top: 18px; }
.ecl .ecl-m-note { color: var(--ecl-muted); font-size: 13px; margin-top: 6px; }
.ecl .ecl-m-foot { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.ecl .ecl-m-foot .ecl-btn { width: 100%; }
.ecl .ecl-m-foot .ecl-m-note { text-align: center; margin: 0; }
.ecl .ecl-m-done { text-align: center; padding: 12px 0 0; }
.ecl .ecl-m-tick {
    display: inline-flex; width: 52px; height: 52px; border-radius: 50%; align-items: center; justify-content: center;
    background: #dcfce7; color: var(--ecl-accent-dark); font-size: 26px; font-weight: 800;
}
.ecl .ecl-m-done-t { font-size: 18px; font-weight: 800; margin-top: 10px; }
@media (max-width: 600px) {
    .ecl.ecl-m-root { padding: 0; align-items: flex-end; }
    .ecl .ecl-m { max-width: none; max-height: 92vh; border-radius: 16px 16px 0 0; }
    .ecl .ecl-m-acts-end .ecl-btn { flex: 1 1 auto; }
}

/* ===== Shared: tags and notices ===== */
.ecl .ecl-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 2px 8px; border-radius: 6px; line-height: 1.5; }
.ecl .ecl-tag-off { background: #fee2e2; color: #b91c1c; }
.ecl .ecl-notice { margin: 12px 0; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.ecl .ecl-notice-ok { background: #dcfce7; color: #166534; }
.ecl .ecl-notice-error { background: #fee2e2; color: #991b1b; }
.ecl .ecl-m-lab.is-off { cursor: not-allowed; opacity: .75; background: #fafafa; }
.ecl .ecl-m-lab.is-off:hover { border-color: var(--ecl-line); }
.ecl .ecl-m-lab-why { color: #b91c1c !important; }

/* ===== Lab cart page ===== */
.ecl .ecl-cp-title { font-size: 26px; font-weight: 800; margin: 8px 0 16px; color: var(--ecl-text); }
.ecl .ecl-cp-title span { font-size: 16px; font-weight: 600; color: var(--ecl-muted); }
.ecl .ecl-cp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.ecl .ecl-cp-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ecl .ecl-cp-box { background: var(--ecl-bg); border: 1px solid var(--ecl-line); border-radius: var(--ecl-radius); padding: 16px; box-shadow: var(--ecl-shadow); }
.ecl .ecl-cp-box h2 { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.ecl .ecl-cp-hint { font-size: 12px; color: var(--ecl-muted); margin-top: 8px; }
.ecl .ecl-cp-form { margin: 0; }
.ecl .ecl-cp-form.is-busy { opacity: .6; pointer-events: none; }
.ecl.ecl-cartp.ecl-has-js .ecl-nojs { display: none; }

.ecl .ecl-cp-area label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.ecl .ecl-cp-area-row { display: flex; gap: 8px; }
.ecl .ecl-cp-area select {
    flex: 1; min-width: 0; border: 1px solid var(--ecl-line); border-radius: 8px; padding: 9px 10px; background: var(--ecl-bg);
    color: var(--ecl-text); font-size: 14px;
}

.ecl .ecl-cp-logo { width: 44px; height: 44px; flex: none; border-radius: 8px; object-fit: contain; border: 1px solid var(--ecl-line); background: #fff; }
.ecl span.ecl-cp-logo { border: 0; font-size: 18px; background: var(--ecl-primary-soft); }
.ecl .ecl-cp-vendor-row { display: flex; align-items: center; gap: 12px; }
.ecl .ecl-cp-vendor-name { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ecl .ecl-cp-vendor-name small { font-size: 12px; color: var(--ecl-muted); }
.ecl .ecl-cp-vendor-name strong { font-size: 16px; }
.ecl .ecl-cp-vendors { margin-top: 14px; border-top: 1px solid var(--ecl-line); padding-top: 6px; }
.ecl .ecl-cp-vendors[hidden] { display: none; }
.ecl .ecl-cp-v { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--ecl-line); }
.ecl .ecl-cp-v:last-child { border-bottom: 0; }
.ecl .ecl-cp-v .ecl-cp-logo { width: 36px; height: 36px; }
.ecl .ecl-cp-v-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.ecl .ecl-cp-v-name small { font-size: 12px; color: var(--ecl-muted); }
.ecl .ecl-cp-v.is-off .ecl-cp-v-name small { color: #b91c1c; }
.ecl .ecl-cp-v.is-off .ecl-cp-logo, .ecl .ecl-cp-v.is-off .ecl-cp-v-name strong { opacity: .6; }
.ecl .ecl-cp-v-price { display: flex; flex-direction: column; align-items: flex-end; }
.ecl .ecl-cp-v-price strong { font-weight: 800; }
.ecl .ecl-cp-v-price del { font-size: 12px; color: var(--ecl-muted); }
.ecl .ecl-cp-v-mat { font-size: 11px; color: var(--ecl-muted); white-space: nowrap; }
.ecl .ecl-cp-v-cur { font-size: 12px; font-weight: 700; color: var(--ecl-primary); background: var(--ecl-primary-soft); padding: 5px 10px; border-radius: 999px; }
.ecl .ecl-cp-save, .ecl .ecl-cp-save dd { color: var(--ecl-accent-dark) !important; }

.ecl .ecl-cp-lines { list-style: none; margin: 0; padding: 0; }
.ecl .ecl-cp-line { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ecl-line); flex-wrap: wrap; }
.ecl .ecl-cp-line:first-child { padding-top: 0; }
.ecl .ecl-cp-line.is-off { background: #fff7f7; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.ecl .ecl-cp-line-info { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ecl .ecl-cp-line-title { font-weight: 700; font-size: 15px; }
.ecl .ecl-cp-line-title:hover { color: var(--ecl-primary); }
.ecl .ecl-cp-unit { font-size: 13px; color: var(--ecl-muted); }
.ecl .ecl-cp-unit del { margin-left: 4px; }
.ecl .ecl-cp-stepper { display: flex; align-items: center; gap: 8px; }
.ecl .ecl-cp-step-label { font-size: 12px; color: var(--ecl-muted); }
.ecl .ecl-cp-stepper .ecl-step-btn { width: 34px; height: 34px; }
.ecl .ecl-cp-line-total { min-width: 72px; text-align: right; font-size: 15px; }
.ecl .ecl-cp-x {
    width: 32px; height: 32px; border-radius: 50%; border: 0; background: #f3f4f6; color: var(--ecl-muted);
    font-size: 20px; line-height: 1; cursor: pointer; padding: 0;
}
.ecl .ecl-cp-x:hover { background: #fee2e2; color: #b91c1c; }
.ecl .ecl-cp-acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ecl .ecl-cp-clear .ecl-btn-text.is-armed { color: #b91c1c; }

.ecl .ecl-cp-side { position: sticky; top: 16px; }
.ecl .ecl-cp-sum dl { margin: 0; }
.ecl .ecl-cp-sum dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; }
.ecl .ecl-cp-sum dt, .ecl .ecl-cp-sum dd { margin: 0; }
.ecl .ecl-cp-sum .ecl-cp-total { border-top: 1px dashed var(--ecl-line); margin-top: 6px; padding-top: 10px; font-weight: 800; font-size: 17px; }
.ecl .ecl-cp-problems { list-style: none; margin: 12px 0 0; padding: 10px 12px; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 10px; font-size: 13px; }
.ecl .ecl-cp-problems li + li { margin-top: 4px; }
.ecl .ecl-cp-go { width: 100%; margin-top: 14px; }

@media (max-width: 900px) {
    .ecl .ecl-cp-layout { grid-template-columns: 1fr; }
    .ecl .ecl-cp-side { position: static; }
}
@media (max-width: 600px) {
    .ecl .ecl-cp-title { font-size: 22px; }
    .ecl .ecl-cp-line { gap: 10px; }
    .ecl .ecl-cp-line-info { flex-basis: calc(100% - 44px); }
    .ecl .ecl-cp-remove { order: -1; margin-left: auto; }
    .ecl .ecl-cp-line-info { order: -2; }
    .ecl .ecl-cp-stepper { flex: 1; }
}

/* ===== Checkout ===== */
.ecl .ecl-co-default { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; padding: 0; }
.ecl .ecl-co-form { margin: 0; }
.ecl .ecl-co-form.is-busy .ecl-cp-go { opacity: .6; pointer-events: none; }
.ecl .ecl-cp-box.has-err { border-color: #fca5a5; }
.ecl .ecl-co-n {
    display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center;
    background: var(--ecl-primary); color: #fff; font-size: 13px; font-weight: 800; margin-right: 8px; vertical-align: 2px;
}
.ecl .ecl-co-err { color: #b91c1c; font-size: 13px; font-weight: 600; margin: 4px 0 8px; }
.ecl .ecl-co-lbl { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
.ecl .ecl-co input[type="text"], .ecl .ecl-co input[type="tel"], .ecl .ecl-co select, .ecl .ecl-co textarea {
    width: 100%; border: 1px solid var(--ecl-line); border-radius: 8px; padding: 9px 11px; font-size: 14px;
    background: var(--ecl-bg); color: var(--ecl-text); box-shadow: none; margin: 0;
}
.ecl .ecl-co input:focus, .ecl .ecl-co select:focus, .ecl .ecl-co textarea:focus { border-color: var(--ecl-primary); outline: 0; }
.ecl .ecl-co-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.ecl .ecl-co-grid .ecl-co-lbl { margin-top: 0; }

.ecl .ecl-co-addrs { display: flex; flex-direction: column; gap: 8px; }
.ecl .ecl-co-addr { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--ecl-line); border-radius: 10px; padding: 10px 10px 10px 12px; }
.ecl .ecl-co-addr:has(input:checked) { border-color: var(--ecl-primary); background: var(--ecl-primary-soft); }
.ecl .ecl-co-addr.is-off { background: #fafafa; }
.ecl .ecl-co-addr label { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; margin: 0; }
.ecl .ecl-co-addr.is-off label { cursor: not-allowed; }
.ecl .ecl-co-addr input { margin-top: 4px; accent-color: var(--ecl-primary); flex: none; }
.ecl .ecl-co-addr-body { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 14px; }
.ecl .ecl-co-addr-body strong { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ecl-primary); }
.ecl .ecl-co-addr.is-off .ecl-co-addr-body > span:not(.ecl-tag) { color: var(--ecl-muted); }
.ecl .ecl-co-new { margin-top: 10px; }
.ecl .ecl-co-new summary { cursor: pointer; color: var(--ecl-primary); font-weight: 700; font-size: 14px; padding: 6px 0; }
.ecl .ecl-co-new[open] { border-top: 1px dashed var(--ecl-line); padding-top: 4px; }
.ecl .ecl-co-new .ecl-btn { margin-top: 12px; }

.ecl .ecl-co-labels, .ecl .ecl-co-dates, .ecl .ecl-co-slots { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.ecl .ecl-co-slots { margin-top: 12px; }
.ecl .ecl-co-chip { position: relative; margin: 0; cursor: pointer; }
.ecl .ecl-co-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ecl .ecl-co-chip span {
    display: inline-block; padding: 7px 14px; border: 1px solid var(--ecl-line); border-radius: 999px; font-size: 13px;
    font-weight: 600; background: var(--ecl-bg); white-space: nowrap;
}
.ecl .ecl-co-chip:hover span { border-color: var(--ecl-primary); }
.ecl .ecl-co-chip input:checked + span { background: var(--ecl-primary); border-color: var(--ecl-primary); color: #fff; }
.ecl .ecl-co-chip input:focus-visible + span { outline: 2px solid var(--ecl-primary); outline-offset: 2px; }
.ecl .ecl-co-none { color: var(--ecl-muted); font-size: 14px; }

.ecl .ecl-co-opts { display: flex; flex-direction: column; gap: 8px; }
.ecl .ecl-co-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ecl-line); border-radius: 10px; cursor: pointer; margin: 0; }
.ecl .ecl-co-opt:has(input:checked) { border-color: var(--ecl-primary); background: var(--ecl-primary-soft); }
.ecl .ecl-co-opt input { accent-color: var(--ecl-primary); margin: 0; flex: none; }
.ecl .ecl-co-opt-body { flex: 1; display: flex; flex-direction: column; font-size: 14px; }
.ecl .ecl-co-opt-body small { color: var(--ecl-muted); font-size: 12px; }
.ecl .ecl-co-opt-fee { font-weight: 700; font-size: 14px; white-space: nowrap; }

.ecl .ecl-co-lab { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.ecl .ecl-co-items { list-style: none; margin: 0 0 12px; padding: 0 0 10px; border-bottom: 1px solid var(--ecl-line); font-size: 13px; }
.ecl .ecl-co-items li { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.ecl .ecl-co-coupon { margin-bottom: 10px; }
.ecl .ecl-co-coupon-row { display: flex; gap: 8px; }
.ecl .ecl-co-coupon-row input { flex: 1; min-width: 0; }
.ecl .ecl-co-coupon-on { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; background: #dcfce7; border-radius: 8px; font-size: 13px; }
.ecl .ecl-co-adv { background: var(--ecl-primary-soft); margin: 6px -8px 0; padding: 8px !important; border-radius: 8px; font-weight: 800; color: var(--ecl-primary); }
.ecl .ecl-co-later { color: var(--ecl-muted); font-size: 13px !important; }

@media (max-width: 600px) {
    .ecl .ecl-co-grid { grid-template-columns: 1fr; }
    .ecl .ecl-co-grid > div + div .ecl-co-lbl { margin-top: 12px; }
}

/* ===== Orders ===== */
.ecl .ecl-notice-warn { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ecl .ecl-notice-warn small { flex-basis: 100%; font-weight: 400; }
.ecl .ecl-cp-titlebar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ecl .ecl-cp-orders-link { margin-top: 12px; }
.ecl .ecl-ord { margin-bottom: 14px; }
.ecl .ecl-ord-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ecl .ecl-ord-no { display: block; font-size: 16px; }
.ecl .ecl-ord-head small { color: var(--ecl-muted); font-size: 13px; }
.ecl .ecl-st { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #f3f4f6; color: var(--ecl-text); white-space: nowrap; }
.ecl .ecl-st-pending { background: #fef3c7; color: #92400e; }
.ecl .ecl-st-approved { background: var(--ecl-primary-soft); color: var(--ecl-primary); }
.ecl .ecl-st-sample_collected, .ecl .ecl-st-processing { background: #ede9fe; color: #5b21b6; }
.ecl .ecl-st-report_ready, .ecl .ecl-st-completed { background: #dcfce7; color: #166534; }
.ecl .ecl-st-cancelled { background: #fee2e2; color: #991b1b; }
.ecl .ecl-ord-steps { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; counter-reset: s; }
.ecl .ecl-ord-steps li { position: relative; padding-top: 12px; font-size: 11px; color: var(--ecl-muted); text-align: center; line-height: 1.25; }
.ecl .ecl-ord-steps li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 3px; background: var(--ecl-line); }
.ecl .ecl-ord-steps li.is-done::before, .ecl .ecl-ord-steps li.is-now::before { background: var(--ecl-accent); }
.ecl .ecl-ord-steps li.is-now { color: var(--ecl-text); font-weight: 700; }
.ecl .ecl-ord-tests { font-weight: 600; margin-top: 8px; }
.ecl .ecl-ord-when, .ecl .ecl-ord-addr { font-size: 13px; color: var(--ecl-muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.ecl .ecl-ord-when .ecl-i { width: 15px; height: 15px; }
.ecl .ecl-ord-money { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0 0; font-size: 13px; }
.ecl .ecl-ord-money > div { display: flex; gap: 6px; }
.ecl .ecl-ord-money dt { color: var(--ecl-muted); margin: 0; }
.ecl .ecl-ord-money dd { margin: 0; font-weight: 700; }
.ecl .ecl-ord-money-full { flex-direction: column; gap: 2px; }
.ecl .ecl-ord-money-full > div { justify-content: space-between; max-width: 340px; }
.ecl .ecl-ord-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ecl .ecl-ord-acts:empty { display: none; }
.ecl .ecl-ord-more { margin-top: 12px; border-top: 1px solid var(--ecl-line); padding-top: 8px; }
.ecl .ecl-ord-more summary { cursor: pointer; color: var(--ecl-primary); font-weight: 700; font-size: 14px; }
.ecl .ecl-ord-items { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
.ecl .ecl-ord-items th, .ecl .ecl-ord-items td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--ecl-line); }
.ecl .ecl-ord-items th:not(:first-child), .ecl .ecl-ord-items td:not(:first-child) { text-align: right; }
.ecl .ecl-ord-log { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12px; color: var(--ecl-muted); }
.ecl .ecl-ord-log time { font-weight: 600; margin-right: 6px; }
@media (max-width: 600px) { .ecl .ecl-ord-steps li span { display: none; } .ecl .ecl-ord-steps li.is-now span { display: inline; } .ecl .ecl-ord-steps { grid-template-columns: repeat(5, 1fr); } }

/* WhatsApp card: WhatsApp's green, so patients recognise it at a glance. */
.ecl .ecl-quick-card.ecl-quick-wa .ecl-i { color: #1fa855; }
.ecl .ecl-quick-card.ecl-quick-wa:hover { border-color: #1fa855; }

/* ===== Floating cart tab (printed in the footer, so it carries .ecl itself) ===== */
.ecl.ecl-fcart {
    position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9990;
    display: flex; flex-direction: column; align-items: stretch;
    width: 92px; max-width: none; margin: 0; padding: 0; overflow: hidden;
    background: var(--ecl-bg); color: var(--ecl-text) !important; text-decoration: none !important;
    border: 1px solid var(--ecl-line); border-right: 0; border-radius: 10px 0 0 10px;
    box-shadow: 0 6px 20px rgba(16, 24, 40, .16);
    font-size: 14px; line-height: 1.3; text-align: center;
    transition: box-shadow .15s;
}
.ecl.ecl-fcart[hidden] { display: none; }
.ecl.ecl-fcart:hover, .ecl.ecl-fcart:focus-visible { box-shadow: 0 8px 26px rgba(16, 24, 40, .24); color: var(--ecl-text) !important; }
.ecl.ecl-fcart:focus-visible { outline: 2px solid var(--ecl-primary); outline-offset: 2px; }
.ecl.ecl-fcart .ecl-fcart-top { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px; font-weight: 600; }
.ecl.ecl-fcart .ecl-fcart-top .ecl-i { width: 28px; height: 28px; color: var(--ecl-primary); }
.ecl.ecl-fcart .ecl-fcart-total { display: block; padding: 7px 4px; background: var(--ecl-primary); color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; }
.ecl.ecl-fcart.is-bump { animation: ecl-fcart-bump .45s ease; }
@keyframes ecl-fcart-bump {
    0%, 100% { transform: translateY(-50%) scale(1); }
    40% { transform: translateY(-50%) scale(1.08); }
}
@media (max-width: 600px) {
    .ecl.ecl-fcart { width: 74px; font-size: 12px; top: auto; bottom: 96px; transform: none; }
    .ecl.ecl-fcart .ecl-fcart-top { padding: 9px 4px 7px; }
    .ecl.ecl-fcart .ecl-fcart-top .ecl-i { width: 22px; height: 22px; }
    .ecl.ecl-fcart .ecl-fcart-total { font-size: 12px; padding: 5px 3px; }
    .ecl.ecl-fcart.is-bump { animation-name: ecl-fcart-bump-m; }
}
@keyframes ecl-fcart-bump-m { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .ecl.ecl-fcart.is-bump { animation: none; } }
@media print { .ecl.ecl-fcart { display: none !important; } }

/* ===== Site search results (ECare_Search) ===== */
.ecl-sr-primary { width: 100%; flex: 1 1 100%; max-width: 100%; }
.ecl.ecl-searchpage { padding-top: 24px; }
.ecl.ecl-searchpage .ecl-sr-head { margin-bottom: 24px; }
.ecl.ecl-searchpage .ecl-sr-form { max-width: 720px; }
.ecl.ecl-searchpage .ecl-sr-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ecl.ecl-searchpage .ecl-sr-jump a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--ecl-line); border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--ecl-bg); }
.ecl.ecl-searchpage .ecl-sr-jump a:hover { border-color: var(--ecl-primary); color: var(--ecl-primary); }
.ecl.ecl-searchpage .ecl-sr-jump span, .ecl.ecl-searchpage .ecl-sr-count { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--ecl-primary-soft); color: var(--ecl-primary); font-size: 12px; font-weight: 700; text-align: center; vertical-align: middle; }
.ecl.ecl-searchpage .ecl-section { margin: 0 0 32px; scroll-margin-top: 90px; }
.ecl.ecl-searchpage .ecl-sec-head h2 { scroll-margin-top: 90px; }
.ecl.ecl-searchpage .ecl-sr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ecl.ecl-searchpage .ecl-sr-item { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--ecl-bg); border: 1px solid var(--ecl-line); border-radius: var(--ecl-radius); box-shadow: var(--ecl-shadow); }
.ecl.ecl-searchpage .ecl-sr-photo { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; }
.ecl.ecl-searchpage .ecl-sr-initial { background: var(--ecl-primary-soft); color: var(--ecl-primary); font-weight: 800; font-size: 22px; }
.ecl.ecl-searchpage .ecl-sr-amb { font-size: 26px; }
.ecl.ecl-searchpage .ecl-sr-body { flex: 1; min-width: 0; }
.ecl.ecl-searchpage .ecl-sr-body h3 { margin: 0 0 2px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.ecl.ecl-searchpage .ecl-sr-body h3 a:hover { color: var(--ecl-primary); }
.ecl.ecl-searchpage .ecl-sr-tag { font-size: 13px; font-weight: 600; color: var(--ecl-primary); }
.ecl.ecl-searchpage .ecl-sr-meta { font-size: 12px; color: var(--ecl-muted); }
.ecl.ecl-searchpage .ecl-sr-item .ecl-btn { flex: none; }
.ecl.ecl-searchpage .ecl-sr-posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ecl.ecl-searchpage .ecl-sr-posts li { padding: 12px 14px; border: 1px solid var(--ecl-line); border-radius: var(--ecl-radius); background: var(--ecl-bg); }
.ecl.ecl-searchpage .ecl-sr-posts a { font-weight: 700; color: var(--ecl-primary); }
.ecl.ecl-searchpage .ecl-sr-posts p { font-size: 13px; color: var(--ecl-muted); margin-top: 4px; }
.ecl.ecl-searchpage .ecl-sr-pages ul { display: flex; gap: 6px; list-style: none; padding: 0; margin: 14px 0 0; }
.ecl.ecl-searchpage .ecl-sr-pages a, .ecl.ecl-searchpage .ecl-sr-pages span { display: inline-block; padding: 4px 10px; border: 1px solid var(--ecl-line); border-radius: 6px; }
.ecl.ecl-searchpage .ecl-sr-pages .current { background: var(--ecl-primary); color: #fff; border-color: var(--ecl-primary); }
.ecl.ecl-searchpage .ecl-sr-browse { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ecl.ecl-searchpage .ecl-sr-browse .ecl-btn { margin-top: 6px; }
@media (max-width: 600px) {
    .ecl.ecl-searchpage .ecl-sr-list { grid-template-columns: 1fr; }
    .ecl.ecl-searchpage .ecl-sr-item { flex-wrap: wrap; }
    .ecl.ecl-searchpage .ecl-sr-item .ecl-btn { width: 100%; }
}

/* ===== Patient dashboard: E-Care bookings (ECare_My_Bookings) ===== */
.ecl.ecl-mb-tabs, .ecl.ecl-mb { max-width: none; margin: 0; padding: 0; }
.ecl.ecl-mb-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; border-bottom: 2px solid var(--ecl-line); }
.ecl.ecl-mb-tabs button {
    appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px;
    padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 700; color: var(--ecl-muted); cursor: pointer; border-radius: 0;
}
.ecl.ecl-mb-tabs button:hover { color: var(--ecl-text); background: none; }
.ecl.ecl-mb-tabs button[aria-selected="true"] { color: #0f766e; border-bottom-color: #0f766e; }
.ecl.ecl-mb-tabs button:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }
.ecl.ecl-mb-tabs .ecl-mb-badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: #0f766e; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.ecl.ecl-mb { margin-bottom: 30px; }
.ecl.ecl-mb[hidden], .ecl.ecl-mb .ecl-mb-panel[hidden], .eg-care-patient-dashboard .eg-care-dashboard-section[hidden] { display: none !important; }
.ecl.ecl-mb .ecl-mb-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 25px; margin-bottom: 30px; }
.ecl.ecl-mb.is-tabbed .ecl-mb-panel { margin-bottom: 0; }
.ecl.ecl-mb .ecl-mb-h { margin: 0 0 18px; font-size: 18px; font-weight: 700; color: #1e293b; border-left: 4px solid #0f766e; padding-left: 10px; }
.ecl.ecl-mb .ecl-mb-card { margin-bottom: 14px; }
.ecl.ecl-mb .ecl-ord-head small { display: block; color: var(--ecl-muted); font-size: 12px; }
.ecl.ecl-mb .ecl-mb-pill { flex: none; display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.ecl.ecl-mb .ecl-mb-pill.is-wait { background: #fef3c7; color: #92400e; }
.ecl.ecl-mb .ecl-mb-pill.is-ok { background: #dcfce7; color: #166534; }
.ecl.ecl-mb .ecl-mb-pill.is-go { background: #dbeafe; color: #1e40af; }
.ecl.ecl-mb .ecl-mb-pill.is-done { background: #e2e8f0; color: #334155; }
.ecl.ecl-mb .ecl-mb-pill.is-off { background: #fee2e2; color: #991b1b; }
.ecl.ecl-mb .ecl-mb-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; margin: 12px 0 0; }
.ecl.ecl-mb .ecl-mb-dl dt { font-size: 12px; color: var(--ecl-muted); }
.ecl.ecl-mb .ecl-mb-dl dd { margin: 0; font-size: 14px; font-weight: 600; word-break: break-word; }
.ecl.ecl-mb .ecl-mb-dl a { color: var(--ecl-primary); }
.ecl.ecl-mb .ecl-mb-emergency { color: #b91c1c; }
.ecl.ecl-mb .ecl-mb-actions { margin-top: 12px; }
.ecl.ecl-mb .ecl-mb-empty { text-align: center; padding: 20px 10px; color: var(--ecl-muted); }
.ecl.ecl-mb .ecl-mb-empty .ecl-btn { margin-top: 10px; }
.ecl.ecl-mb .ecl-mb-none { color: var(--ecl-muted); font-size: 14px; margin: 0 0 10px; }
.ecl.ecl-mb .ecl-mb-past { margin-top: 10px; }
.ecl.ecl-mb .ecl-mb-past summary { cursor: pointer; font-weight: 700; color: var(--ecl-primary); padding: 6px 0; margin-bottom: 8px; }
@media (max-width: 600px) {
    .ecl.ecl-mb-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .ecl.ecl-mb-tabs button { white-space: nowrap; padding: 10px; }
    .ecl.ecl-mb .ecl-mb-panel { padding: 16px; }
}

/* How we work: a step with a picture (photo card, text on the picture) */
.ecl .ecl-steps li.has-img { position: relative; overflow: hidden; padding: 0; min-height: 250px; display: flex; align-items: flex-end; background: #0f172a; border: 0; isolation: isolate; }
.ecl .ecl-steps .ecl-step-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .3s ease; }
.ecl .ecl-steps li.has-img::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 23, 42, .15) 0%, rgba(15, 23, 42, .55) 45%, rgba(15, 23, 42, .9) 100%); }
.ecl .ecl-steps li.has-img:hover .ecl-step-img { transform: scale(1.04); }
.ecl .ecl-step-over { position: relative; padding: 16px; color: #fff; }
.ecl .ecl-step-tag { display: inline-block; background: var(--ecl-accent, #f97316); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 4px; margin-bottom: 8px; }
.ecl .ecl-steps li.has-img h3 { color: #fff; }
.ecl .ecl-steps li.has-img p { color: rgba(255, 255, 255, .88); }
@media (prefers-reduced-motion: reduce) { .ecl .ecl-steps .ecl-step-img { transition: none; } }