/* ==========================================================================
   [pencompare_dynamic_pricing_table]
   Client design revision (August 2026): the per-medicine tabs were replaced
   by a filter card, and one row is now one provider × medicine × dose
   combination.
   Accessibility: WCAG 2.2 AA — no status is carried by colour alone.
   ========================================================================== */

.hw360-dynamic-table-wrapper {
    /* The colour of the medicine currently filtered on. Set by the script as
       data-medication on this element, and inherited by the dose pills so the
       two controls read as one choice. */
    --hw-med-colour: var(--wp--preset--color--trust-teal, #1F4C5F);

    background: var(--wp--preset--color--white);
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    padding: 24px;
    margin-bottom: 2rem;

    /* The key to horizontal scrolling on mobile. A flex/grid item defaults
       to min-width:auto, meaning it refuses to shrink below its content's
       width — so if the Kadence column holding this shortcode is a flex
       item, this wrapper widens to match the 640px table. Once that happens
       nothing is narrower than the table, the overflow-x inside it never
       engages, and what widens instead is the page. The symptom reads exactly
       as "the table cannot be scrolled". */
    min-width: 0;
    max-width: 100%;
}

/* --- Heading and intro -------------------------------------------------- */

.hw360-dt-title {
    margin: 0 0 8px;
    color: var(--wp--preset--color--navy);
    font-size: 26px;
    line-height: 1.2;
}

.hw360-dt-lede {
    margin: 0 0 24px;
    color: var(--wp--preset--color--grey-muted);
    font-size: 15px;
    max-width: 60ch;
}

.hw360-dynamic-table-wrapper[data-medication="mounjaro"] {
    --hw-med-colour: var(--wp--preset--color--med-mounjaro, #6D28D9);
}

.hw360-dynamic-table-wrapper[data-medication="wegovy"] {
    --hw-med-colour: var(--wp--preset--color--med-wegovy, #0F766E);
}

.hw360-dynamic-table-wrapper[data-medication="saxenda"] {
    --hw-med-colour: var(--wp--preset--color--med-saxenda, #075985);
}

/* --- Filter card -------------------------------------------------------- */

.hw360-dt-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    padding: 16px;
    margin-bottom: 16px;
    background: var(--wp--preset--color--warm-white);
    border: 1px solid var(--wp--preset--color--grey-border);
    border-radius: 10px;
}

.hw360-dt-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 180px;
}

.hw360-dt-field > label,
.hw360-dt-field > legend {
    font-size: 13px;
    font-weight: 600;
    color: var(--wp--preset--color--grey-text-strong);
}

/* --- Medication and Dose: radio groups ---------------------------------- */

/* A fieldset carries browser default border, padding and margin, and cannot
   safely be a flex container either: a <legend> is not a flex item and
   Chrome takes it out of the layout when it is asked to be one. */
.hw360-dt-field--full {
    display: block;
    flex: 1 1 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.hw360-dt-field--full > legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 8px;
}

/* The radio itself, kept in the page rather than display:none — a hidden
   input is removed from the accessibility tree and cannot be focused, which
   would leave the whole control unreachable by keyboard. */
.hw360-choice-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.hw360-med-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.hw360-med-card {
    --hw-med-colour: var(--wp--preset--color--trust-teal, #1F4C5F);

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    /* Comfortably past the 44px minimum target (SC 2.5.8). */
    min-height: 60px;
    padding: 10px 14px;
    background: var(--wp--preset--color--white);
    border: 2px solid var(--hw-med-colour);
    border-radius: 12px;
    color: var(--wp--preset--color--navy);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.hw360-med-card--mounjaro {
    --hw-med-colour: var(--wp--preset--color--med-mounjaro, #6D28D9);
}

.hw360-med-card--wegovy {
    --hw-med-colour: var(--wp--preset--color--med-wegovy, #0F766E);
}

.hw360-med-card--saxenda {
    --hw-med-colour: var(--wp--preset--color--med-saxenda, #075985);
}

.hw360-med-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.hw360-med-state {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--wp--preset--color--grey-text-strong);
}

/* Which card is active is never carried by colour alone: the selected one
   also says so in words and draws a tick (SC 1.4.1). */
.hw360-med-state-on {
    display: none;
    align-items: center;
    gap: 5px;
}

.hw360-choice-input:checked + .hw360-med-card {
    background: var(--hw-med-colour);
    color: var(--wp--preset--color--white);
}

.hw360-choice-input:checked + .hw360-med-card .hw360-med-state {
    color: var(--wp--preset--color--white);
}

.hw360-choice-input:checked + .hw360-med-card .hw360-med-state-on {
    display: inline-flex;
}

.hw360-choice-input:checked + .hw360-med-card .hw360-med-state-off {
    display: none;
}

.hw360-tick {
    display: inline-block;
    width: 6px;
    height: 10px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.hw360-dose-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hw360-dose-pill {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 16px;
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--grey-border);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    /* Doses are numbers read down a list; lining figures keep them aligned. */
    font-variant-numeric: tabular-nums;
    color: var(--wp--preset--color--navy);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.hw360-choice-input:checked + .hw360-dose-pill {
    background: var(--hw-med-colour);
    border-color: var(--hw-med-colour);
    color: var(--wp--preset--color--white);
}

/* The input is visually hidden, so its focus ring has to be drawn on the
   label the user actually sees. */
.hw360-choice-input:focus-visible + .hw360-med-card,
.hw360-choice-input:focus-visible + .hw360-dose-pill {
    outline: 3px solid var(--wp--preset--color--link-blue);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .hw360-med-card,
    .hw360-dose-pill {
        transition: none;
    }
}

.hw360-select-container {
    position: relative;
}

.hw360-dt-field select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--grey-border);
    border-radius: 6px;
    padding: 10px 36px 10px 12px;
    font-size: 14px;
    color: var(--wp--preset--color--navy);
    cursor: pointer;
    /* 44px touch target (SC 2.5.8). */
    min-height: 44px;
}

.hw360-select-container::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    background-color: var(--wp--preset--color--grey-muted);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    pointer-events: none;
}

.hw360-dt-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 14px;
    color: var(--wp--preset--color--navy);
}

.hw360-dt-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--wp--preset--color--trust-teal);
}

/* --- Results summary ---------------------------------------------------- */

.hw360-dt-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.hw360-dt-count {
    margin: 0;
    font-weight: 600;
    color: var(--wp--preset--color--navy);
}

.hw360-dt-updated {
    margin: 0;
    font-size: 13px;
    color: var(--wp--preset--color--grey-muted);
}

/* --- Table -------------------------------------------------------------- */

.hw360-table-scroll-container {
    width: 100%;
    /* Same reason as the wrapper above. */
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--wp--preset--color--grey-border);
    border-radius: 8px;

    /* A thin shadow at the right edge that disappears once the table has
       been scrolled to its end. It is the only visual cue that columns remain
       off-screen — an edge cut flat reads as a table that has finished. */
    background:
        linear-gradient(to right, var(--wp--preset--color--white) 30%, rgba(255, 255, 255, 0)) left center,
        linear-gradient(to left, var(--wp--preset--color--white) 30%, rgba(255, 255, 255, 0)) right center,
        linear-gradient(to right, rgba(13, 16, 25, 0.10), rgba(13, 16, 25, 0)) left center,
        linear-gradient(to left, rgba(13, 16, 25, 0.10), rgba(13, 16, 25, 0)) right center;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* The container is focusable now, so its focus must be visible (SC 2.4.7). */
.hw360-table-scroll-container:focus-visible {
    outline: 3px solid var(--wp--preset--color--link-blue);
    outline-offset: 2px;
}

.hw360-main-table {
    width: 100%;
    /* Down from 800px: four columns need far less room. Once the provider
       column's content is capped on mobile, all four fit within ~560px, so
       the scroll is shorter. */
    min-width: 560px;
    border-collapse: collapse;
    text-align: left;
}


.hw360-main-table th {
    background: var(--wp--preset--color--soft-grey);
    color: var(--wp--preset--color--grey-text-strong);
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid var(--wp--preset--color--grey-border);
}

.hw360-main-table td,
.hw360-main-table tbody th {
    padding: 16px;
    border-bottom: 1px solid var(--wp--preset--color--soft-grey);
    vertical-align: top;
    background: transparent;
    font-weight: 400;
}

.hw-loading-state {
    text-align: center;
    padding: 28px 16px;
    color: var(--wp--preset--color--grey-muted);
}

/* The provider column is pinned to the left edge while the table scrolls.
   Without this, as soon as the user pans to the cost column the pharmacy name
   leaves the screen and the figure in front of them belongs to nobody in
   particular — on precisely the column where being misread carries the
   most consequence.

   Its background must be solid: a sticky cell passes over other cells, and a
   transparent background leaves the two stacked and unreadable. */
.hw360-main-table thead th:first-child,
.hw360-main-table tbody th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 170px;
    border-right: 1px solid var(--wp--preset--color--grey-border);
}

.hw360-main-table tbody th[scope="row"] {
    background: var(--wp--preset--color--white);
}

/* The cheapest row has a background of its own, so its sticky cell has to
   follow — otherwise one white cell interrupts the green row. The selector
   is deliberately more specific than the white rule above; as just
   `.hw360-row--lowest th[scope="row"]`, the white rule would win. */
.hw360-main-table tbody tr.hw360-row--lowest th[scope="row"] {
    background: var(--wp--preset--color--success-surface);
}

/* The provider column. Its flex sits on a wrapper inside the cell — not on
   the <th> — so the table semantics stay in the accessibility tree. */
.hw-provider-cell {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.hw-avatar {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    background: var(--wp--preset--color--soft-grey);
    color: var(--wp--preset--color--grey-text-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.hw-provider-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.hw-name {
    font-weight: 700;
    color: var(--wp--preset--color--navy);
    font-size: 15px;
}

/* The provider name links to our own record page for that pharmacy. Only the
   name is a link — never the row or the cell — so the outbound "See offer"
   control stays a separate, distinguishable target.

   The underline is always on, not hover-only: inside a dense table the name is
   the one element a reader has no other cue for, and colour alone would not
   carry it (WCAG 2.2 AA, SC 1.4.1). */
.hw-name__link {
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-decoration-color: var(--wp--preset--color--grey-subtle, #82898F);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.hw-name__link:hover,
.hw-name__link:focus-visible {
    color: var(--wp--preset--color--link-blue, #005FCC);
    text-decoration-color: currentColor;
}

.hw-name__link:focus-visible {
    outline: 2px solid var(--wp--preset--color--link-blue, #005FCC);
    outline-offset: 2px;
    border-radius: 2px;
}

.hw-provider-entity {
    font-size: 12px;
    color: var(--wp--preset--color--grey-muted);
}

/* The registration badge. Its text names this row's own regulator — GPhC or
   PSNI — so the green here reinforces the words rather than replacing them.
   */
.hw-reg-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--wp--preset--color--success-surface);
    color: var(--wp--preset--color--success-text);
    font-size: 11px;
    font-weight: 600;
}

.hw-reg-badge--pending {
    background: var(--wp--preset--color--soft-grey);
    color: var(--wp--preset--color--grey-muted);
}

/* Verified badges are links to the regulator's own register entry.

   Underlined, because the badge sits inside a coloured pill where colour
   alone cannot announce a link (SC 1.4.1), and because Kadence strips
   underlines from links inside tables via a selector more specific than one
   class — hence the explicit declaration rather than a reset.

   The whole pill is the target and it clears 24px in both directions, so it
   satisfies SC 2.5.8 without a separate hit area. */
.hw-reg-badge--linked {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hw-reg-badge--linked:hover,
.hw-reg-badge--linked:focus {
    background: var(--wp--preset--color--success-text);
    color: var(--wp--preset--color--white);
    text-decoration: underline;
}

/* The arrow marks the link as leaving the site. Decorative and hidden from
   assistive tech — the aria-label on the anchor already says where it goes. */
.hw-reg-badge__ext {
    font-size: 10px;
    line-height: 1;
}

.hw-promo-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--wp--preset--color--success-surface);
    color: var(--wp--preset--color--success-text);
    font-size: 11px;
    font-weight: 600;
}

/* Medicine and cost columns */
.hw-treatment-name {
    display: block;
    font-weight: 600;
    color: var(--wp--preset--color--navy);
    font-size: 15px;
}

.hw-total {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: var(--wp--preset--color--trust-teal);
    /* Totals line up column-wise between rows (§6). */
    font-variant-numeric: tabular-nums;
}

.hw-sub {
    display: block;
    font-size: 12px;
    color: var(--wp--preset--color--grey-muted);
    margin-top: 2px;
}

.hw360-flag {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--wp--preset--color--grey-muted);
}

.hw360-flag--stale,
.hw360-flag--expired {
    color: var(--wp--preset--color--warning-amber);
    font-weight: 600;
}

/* The cheapest row. Its background is the secondary marker; the meaning is
   carried by .hw-lowest-flag, because colour alone fails SC 1.4.1. */
.hw360-row--lowest {
    background: var(--wp--preset--color--success-surface);
}

.hw-lowest-flag {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--wp--preset--color--success-text);
}

/* Outbound button */
.hw-btn-visit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--wp--preset--color--trust-teal);
    color: var(--wp--preset--color--white);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.hw-btn-visit:hover,
.hw-btn-visit:focus {
    background: var(--wp--preset--color--trust-teal-dark);
    color: var(--wp--preset--color--white);
}

/* Stands in for the button on rows that have no outbound link yet. */
.hw-no-link {
    display: inline-block;
    font-size: 13px;
    color: var(--wp--preset--color--grey-muted);
}

.hw360-dt-footnote {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--wp--preset--color--grey-muted);
}

/* --- Pagination --------------------------------------------------------- */

.hw360-dt-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    margin-top: 16px;
    border-top: 1px solid var(--wp--preset--color--grey-border);
    font-size: 14px;
    color: var(--wp--preset--color--grey-muted);
}

.hw360-pagination-controls {
    display: flex;
    align-items: center;
    border: 1px solid var(--wp--preset--color--grey-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--wp--preset--color--white);
}

.hw-page-btn {
    background: transparent;
    border: none;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    color: var(--wp--preset--color--grey-text-strong);
}

.hw-page-btn:hover:not(:disabled) {
    background: var(--wp--preset--color--soft-grey);
}

.hw-page-btn:disabled {
    color: var(--wp--preset--color--grey-border);
    cursor: not-allowed;
    background: var(--wp--preset--color--soft-grey);
}

.hw-page-current {
    padding: 8px 16px;
    border-left: 1px solid var(--wp--preset--color--grey-border);
    border-right: 1px solid var(--wp--preset--color--grey-border);
    font-weight: 500;
    color: var(--wp--preset--color--grey-text-strong);
}

/* Keyboard focus (SC 2.4.7) — must not be lost on any control. */
.hw360-dynamic-table-wrapper a:focus-visible,
.hw360-dynamic-table-wrapper button:focus-visible,
.hw360-dynamic-table-wrapper select:focus-visible,
.hw360-dynamic-table-wrapper input:focus-visible {
    outline: 3px solid var(--wp--preset--color--link-blue);
    outline-offset: 2px;
}

@media (min-width: 601px) and (max-width: 900px) {
    .hw360-med-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .hw360-dt-pagination {
        flex-direction: column;
        gap: 16px;
    }

    /* 24px of padding on both sides eats 48px of a 375px screen — nearly a
       full column. Reduced so the table gets the room, not its frame. */
    .hw360-dynamic-table-wrapper {
        padding: 16px 12px;
    }

    /* One filter per full-width row; three selects side by side at 375px
       truncates their labels. */
    .hw360-dt-field {
        flex: 1 1 100%;
    }

    /* Four medicine cards side by side at 375px truncates their names. */
    .hw360-med-options {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The provider column is narrowed on mobile. It is sticky, so its width
       is taken permanently out of the space for the other three columns.

       min-width alone was not enough — it is only a lower bound, and
       measured on device the column stayed 210px because its content forced
       it: the longest pharmacy name is 190px on one line by itself. So the
       cell's content is what gets capped, and the name is allowed to wrap.
       After that, min-width is left to act as the floor. */
    .hw360-main-table thead th:first-child,
    .hw360-main-table tbody th[scope="row"] {
        min-width: 110px;
    }

    .hw-name,
    .hw-provider-entity,
    .hw-reg-badge,
    .hw-promo-pill {
        max-width: 110px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .hw360-main-table td,
    .hw360-main-table tbody th {
        padding: 12px 10px;
    }

    .hw-avatar {
        display: none;
    }
}