/* Mkind Labs - public site + patient account
   Mobile-first: base rules target phones, min-width queries layer on
   tablet/desktop enhancements. No framework - plain flexbox/grid so there
   are no Bootstrap-gutter-style overflow surprises to chase later. */

:root {
    --primary: #0e7c86;
    --primary-dark: #095a62;
    --accent: #08364e;
    --accent-dark: #052538;
    --header-bg: #ffffff;
    --header-bg-start: #ffffff;
    --header-bg-end: #0298bd;
    --header-border: #08364e;
    --ink: #1f2430;
    --muted: #667085;
    --border: #e2e5ea;
    --bg: #f7f9fa;
    --card: #ffffff;
    --success: #16a34a;
    --warn: #b45309;
    --danger: #dc2626;
    --radius: 12px;
    --shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--primary);
    text-decoration: none;
}

h1, h2, h3, h4 {
    margin: 0 0 8px;
    line-height: 1.25;
}

p {
    margin: 0 0 12px;
    color: var(--muted);
}

.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
}

.icon {
    width: 24px;
    height: 24px;
}

/* Sizes the body-part icon inside index.php's ported .b-part-item circle
   (a Mkind-sourced style that expects a 40x40 <img>, sized via HTML
   attributes it no longer has now that the icon is an inline <svg>). */
.b-part-icon {
    width: 40px;
    height: 40px;
    color: var(--primary);
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent-dark);
}

.btn-outline {
    background: #fff;
    border-color: var(--primary);
    color: var(--primary);
}

.btn-outline:hover {
    background: #eef7f7;
}

.btn-block {
    width: 100%;
}

.btn-sm {
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.85rem;
}

.btn-danger {
    background: #fff;
    border-color: var(--danger);
    color: var(--danger);
}

/* ---------------------------------------------------------------------
   Header / nav
   --------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(to right, var(--header-bg-start), var(--header-bg-end));
    border-bottom: 3px solid var(--header-bg-end);
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--ink);
    font-weight: 800;
    font-size: 1.15rem;
    flex-shrink: 1;
}

/* logoOLD.jpeg is a flat JPEG with a solid white background (no
   transparency), so it needs its own white card to sit cleanly on the
   teal header instead of showing a stray white rectangle. */
.brand-logo-badge {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    padding: 4px 10px;
}

.brand-logo {
    display: block;
    height: 32px;
    width: auto;
}

@media (min-width: 900px) {
    .brand-logo {
        height: 40px;
    }
}

.brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-icon {
    width: 28px;
    height: 28px;
    color: var(--primary);
    flex-shrink: 0;
}

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--accent);
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
}

.site-nav {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, var(--header-bg-start), var(--header-bg-end));
    display: flex;
    flex-direction: column;
    padding: 12px 16px 24px;
    gap: 4px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.site-nav.open {
    transform: translateX(0);
}

.site-nav a {
    padding: 14px 4px;
    border-bottom: 1px solid rgba(31, 36, 48, 0.15);
    color: var(--ink);
    font-weight: 600;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.site-nav a.active {
    color: var(--header-border);
}

.site-nav a.nav-cta {
    color: #fff;
    background: var(--accent);
    border-radius: 12px;
    border-bottom: none;
    justify-content: center;
    margin-top: 8px;
}

.nav-account {
    display: flex;
    gap: 16px;
}

.nav-account a {
    border-bottom: none;
}

.nav-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 700;
    padding: 14px 4px;
}

.nav-phone svg {
    width: 18px;
    height: 18px;
    color: var(--header-border);
}

@media (min-width: 900px) {
    .nav-toggle {
        display: none;
    }

    .site-nav {
        position: static;
        flex-direction: row;
        align-items: center;
        transform: none;
        padding: 0;
        overflow: visible;
        gap: 22px;
        /* Let the header's own gradient show through instead of the nav
           panel painting a second white-to-blue gradient over its own
           narrower box, which created a visible seam behind "Home". */
        background: transparent;
    }

    .site-nav a {
        border-bottom: none;
        padding: 8px 2px;
        min-height: 0;
    }

    .site-nav a.nav-cta {
        padding: 10px 18px;
        margin-top: 0;
        min-height: 40px;
    }

    .nav-account {
        margin-left: auto;
    }

    .nav-phone {
        padding: 0;
    }
}

/* ---------------------------------------------------------------------
   Homepage banner - photo + offer panel, styled after the layout of the
   printed banner graphic on the Mkind site this project took its cue from,
   but built as real markup with Mkind Labs' own copy/branding rather than
   a flattened image, and re-served through render_icon() instead of a
   baked-in icon set.
   --------------------------------------------------------------------- */

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.banner-promo {
    background: linear-gradient(180deg, #eaf6f6 0%, var(--bg) 100%);
    padding-top: 28px;
}

.banner-promo-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 28px;
}

.banner-promo-copy h1 {
    font-size: 1.6rem;
    color: var(--ink);
}

.promo-ribbon {
    display: inline-block;
    background: #fff2e2;
    color: #9a4b12;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    padding: 8px 16px;
    border-radius: 6px;
    margin: 4px 0 18px;
}

.promo-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}

.promo-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.promo-feature svg {
    width: 26px;
    height: 26px;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.promo-feature strong {
    display: block;
    font-size: 0.86rem;
    line-height: 1.3;
}

.promo-feature span {
    display: block;
    font-size: 0.76rem;
    color: var(--muted);
}

.promo-brand-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    background: var(--primary-dark);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 18px;
}

.promo-brand-name {
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
}

.promo-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffd28a;
    font-weight: 800;
    font-size: 1.05rem;
}

.promo-phone svg {
    width: 18px;
    height: 18px;
}

.banner-promo-photo {
    align-self: center;
}

.banner-promo-photo img {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.12);
}

.banner-promo-cta {
    background: var(--primary-dark);
    color: #fff;
    padding: 14px 0;
    text-align: center;
    font-weight: 700;
    font-size: 0.92rem;
}

.banner-promo-cta a {
    color: #ffd28a;
}

@media (min-width: 900px) {
    .banner-promo-inner {
        flex-direction: row;
        align-items: center;
        gap: 40px;
    }

    .banner-promo-copy {
        flex: 1 1 58%;
    }

    .banner-promo-copy h1 {
        font-size: 2.3rem;
    }

    .banner-promo-photo {
        flex: 1 1 34%;
        align-self: flex-end;
    }

    .banner-promo-photo img {
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------------
   Section headings
   --------------------------------------------------------------------- */

.section {
    padding: 32px 0;
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.section-head h2 {
    font-size: 1.35rem;
}

.section-head a {
    font-weight: 700;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Body-part tiles
   --------------------------------------------------------------------- */

.bodypart-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.bodypart-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 8px;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.85rem;
}

.bodypart-tile svg {
    width: 34px;
    height: 34px;
    color: var(--primary);
}

@media (min-width: 640px) {
    .bodypart-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 900px) {
    .bodypart-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

/* ---------------------------------------------------------------------
   Cards - tests & packages
   --------------------------------------------------------------------- */

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 640px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.item-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.item-card-media {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #0e7c86, #14a3ae);
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-card-media svg {
    width: 48px;
    height: 48px;
    color: #fff;
}

.item-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.item-card-body h3 {
    font-size: 1.05rem;
}

.item-card-meta {
    font-size: 0.85rem;
    color: var(--muted);
}

.item-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
}

.item-price-row .mrp {
    text-decoration: line-through;
    color: var(--muted);
    font-size: 0.9rem;
}

.item-price-row .selling {
    color: var(--ink);
    font-size: 1.25rem;
    font-weight: 800;
}

.item-price-row .discount {
    background: #fff7ed;
    color: var(--warn);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}

.item-card-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.item-card-actions .btn {
    flex: 1;
}

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */

.form-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    max-width: 620px;
}

.form-card.wide {
    max-width: 860px;
}

label {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    margin: 14px 0 6px;
}

label:first-child {
    margin-top: 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="file"],
select,
textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 16px;
    background: #fff;
    font-family: inherit;
    color: var(--ink);
}

textarea {
    min-height: 90px;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #bfe3e2;
    border-color: var(--primary);
}

.hint {
    color: var(--muted);
    font-size: 0.8rem;
    margin-top: 4px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 16px;
}

@media (min-width: 640px) {
    .form-grid.cols-2 {
        grid-template-columns: 1fr 1fr;
    }

    .form-grid .full {
        grid-column: 1 / -1;
    }
}

.form-actions {
    margin-top: 20px;
}

.radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 6px;
}

.radio-pill {
    flex: 1 1 auto;
    min-width: 120px;
}

.radio-pill input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.radio-pill label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: center;
    padding: 0 10px;
}

.radio-pill input:checked + label {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0;
}

.checkbox-row input {
    width: 20px;
    height: 20px;
    min-height: 0;
    flex-shrink: 0;
    margin-top: 2px;
}

.checkbox-row label {
    margin: 0;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--muted);
}

/* ---------------------------------------------------------------------
   Alerts
   --------------------------------------------------------------------- */

.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.92rem;
}

.alert-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.alert-info {
    background: #eef7f7;
    color: var(--primary-dark);
    border: 1px solid #bfe3e2;
}

/* ---------------------------------------------------------------------
   Badges / status pills (also used inside the admin panel)
   --------------------------------------------------------------------- */

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.badge-pending { background: #fef3c7; color: #92400e; }
.badge-confirmed { background: #dbeafe; color: #1e40af; }
.badge-sample_collected { background: #ede9fe; color: #5b21b6; }
.badge-report_ready { background: #dcfce7; color: #166534; }
.badge-completed { background: #e5e7eb; color: #374151; }
.badge-cancelled { background: #fee2e2; color: #991b1b; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */

.site-footer {
    background: linear-gradient(to right, var(--header-bg-start), var(--header-bg-end));
    color: #0f172a;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 3px solid var(--header-bg-end);
}

.footer-brand {
    color: var(--ink);
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.site-footer p {
    color: #0f172a;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 24px;
}

.footer-grid h3 {
    color: var(--ink);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.footer-grid a {
    display: block;
    color: #0f172a;
    padding: 6px 0;
}

.footer-grid a:hover {
    color: var(--accent);
}

.footer-bottom {
    border-top: 1px solid rgba(15, 23, 42, 0.25);
    padding: 16px;
    font-size: 0.82rem;
    color: #0f172a;
}

@media (min-width: 640px) {
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ---------------------------------------------------------------------
   Misc page furniture
   --------------------------------------------------------------------- */

.breadcrumbs {
    padding: 14px 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.breadcrumbs a {
    color: var(--muted);
}

.page-head {
    padding: 8px 0 24px;
}

.page-head h1 {
    font-size: 1.5rem;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.filter-bar select,
.filter-bar input {
    flex: 1 1 200px;
    min-width: 0;
}

.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--muted);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

.pagination-status {
    color: var(--muted);
    font-size: 14px;
}

.table-wrap {
    overflow-x: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

th, td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    vertical-align: middle;
}

th {
    color: var(--muted);
    font-weight: 700;
    background: #fafbfc;
}

tr:last-child td {
    border-bottom: none;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 900px) {
    .detail-grid.with-sidebar {
        grid-template-columns: 2fr 1fr;
        align-items: start;
    }
}

.detail-media {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(135deg, #0e7c86, #14a3ae);
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-media svg {
    width: 64px;
    height: 64px;
    color: #fff;
}

.included-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.included-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
}

.sticky-book {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
}

@media (min-width: 900px) {
    .sticky-book {
        position: sticky;
        top: 84px;
    }
}

.file-drop {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    background: #fff;
}

.file-drop .file-name {
    font-weight: 600;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--primary-dark);
    word-break: break-all;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

@media (min-width: 640px) {
    .stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

.stat-card .stat-value {
    font-size: 1.6rem;
    font-weight: 800;
}

.stat-card .stat-label {
    font-size: 0.82rem;
    color: var(--muted);
    font-weight: 600;
}

.stat-card.attention {
    border-color: var(--accent);
    background: #fff5f3;
}

.d-flex {
    display: flex;
}

.gap-8 {
    gap: 8px;
}

.mt-16 {
    margin-top: 16px;
}

.center {
    text-align: center;
}

.muted {
    color: var(--muted);
}

.report-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}

.report-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font-size: 0.88rem;
}

/* ---------------------------------------------------------------------
   Slick carousel arrows - the ported homepage CSS points the prev/next
   buttons at a background image that isn't a real local asset, so only
   the round button showed with no arrow inside it. Draw the chevron with
   a border instead of depending on an image or icon font; the existing
   ".slick-next.slick-arrow { transform: rotate(180deg) }" rule from that
   same stylesheet flips this left-pointing shape into a right arrow for
   the "next" button, so only one shape has to be defined here.
   --------------------------------------------------------------------- */

.slick-prev,
.slick-next {
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.18);
}

.slick-prev:before,
.slick-next:before {
    content: '' !important;
    display: block;
    width: 8px;
    height: 8px;
    margin: 0 auto;
    border-left: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: rotate(45deg);
    opacity: 1;
}