/* ==========================================================================
   Insurance partners section
   Static detail cards + one-line brand-coloured logo strip (circular loop).
   Replaces the previous auto-sliding partner carousel.
   Loaded last so it settles the older #partners rules in desktop.css/styles.css.
   ========================================================================== */

/* Brand accents, matching the values used on the partner cards. */

/* ---------- one big rounded container, in deep brown so the page does not
   carry another full band of the same green ---------- */

#partners {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #2a1810 0%, #43291a 48%, #5e3c23 100%);
    padding: 5rem 0 4.5rem;
}

#partners::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.09), transparent 28%),
        radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.07), transparent 24%);
    pointer-events: none;
}

#partners .container {
    position: relative;
    z-index: 1;
}

/* ===== wide-bands-alignment =====
   The partners band, the Pay to Insurer band and the Get Started band sit in
   the same outer measure and the same gutter as the Medical Provider
   Directory's outer container, so all four edges line up at every width.
   1136px minus the 18px gutters is that band's 1100px of content. */
#partners > .container,
#payment > .container,
#trust > .container {
    max-width: 1136px;
    padding-left: 18px;
    padding-right: 18px;
}

/* the mobile layout tightens the provider band to a 10px gutter under 580px */
@media (max-width: 580px) {
    body[data-mobile="true"] #partners > .container,
    body[data-mobile="true"] #payment > .container,
    body[data-mobile="true"] #trust > .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.partner-shell {
    /* The same measure as the Medical Provider Directory's outer container, so
       the wide bands on the page line up; flexible below that on a phone. */
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 2.1rem 1.9rem 2.3rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

#partners .section-title {
    color: #fff;
    margin-bottom: 1.4rem;
}

#partners .section-title span {
    color: #ecc27a;
}

/* the container's side padding would push the cards past the viewport on a
   phone, so it tightens up there */
@media (max-width: 700px) {
    .partner-shell {
        padding: 1.2rem 0.9rem 1.4rem;
        border-radius: 18px;
    }
}

/* ---------- closing call to action: compare all, or one insurer ---------- */

/* the band is dark purple, so the gold button and the white copy carry it */
.pre-footer-cta {
    background: linear-gradient(135deg, #241338 0%, #3a1a5c 52%, #4b2173 100%) !important;
}

/* the footer's own top margin left a strip of page background between it and
   this band, so the two sit flush */
.pre-footer-cta + footer,
/* the same strip appears when the contact band closes the page */
#contact + footer {
    margin-top: 0 !important;
}

.pre-footer-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* three cover-type containers side by side, each headed by its own button */
.pre-footer-cta-covers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    width: 100%;
}

/* ===== cta-band-alignment =====
   The three cover-type containers ("Compare SME / Individual / Children Only")
   take the same outer measure and gutter as the Medical Provider Directory's
   container, so the whole row lines up with the other wide bands. */
.pre-footer-cta > .container {
    max-width: 1136px;
    padding-left: 18px;
    padding-right: 18px;
}

@media (max-width: 580px) {
    .pre-footer-cta > .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ===== hero-journey-single =====
   "How It Works" is now one line of steps rather than a five-step list plus a
   separate "Get Covered" note, so the badge takes the whole hero column. */
#hero .hero-text .hero-journey-single {
    grid-template-columns: minmax(0, 1fr);
}

#hero .hero-text .hero-journey-single .hero-journey-steps {
    display: block;
    max-width: 100% !important;
    font-size: 0.95rem !important;
}

#hero .hero-text .hero-journey-single .hero-journey-line {
    display: block;
}

#hero .hero-text .hero-journey-single .hero-journey-steps i {
    font-size: 0.7rem;
    color: var(--accent-gold) !important;
    margin: 0 0.42rem;
    vertical-align: middle;
}

/* the hero column narrows here, so the steps step down a notch to keep each of
   the two lines on one row */
@media (max-width: 1150px) {
    #hero .hero-text .hero-journey-single .hero-journey-steps {
        font-size: 0.88rem !important;
    }
}

@media (max-width: 1060px) {
    #hero .hero-text .hero-journey-single .hero-journey-steps {
        font-size: 0.8rem !important;
    }
}

/* the kicker badge reads larger than the small caption size it used to carry */
#hero .hero-text .hero-buy-line {
    font-size: 1.05rem !important;
    letter-spacing: 0.06em !important;
}

/* ===== copay-block =====
   "No Copayment" reads in the site green, and the "Remove Copayment" control
   sits as a subheader under the Outpatient Co-payment heading. */
.provider-card .copay-main-container .copay-none {
    margin: 0;
    color: #166534 !important;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.provider-card .copay-main-container .copay-detail {
    margin: 0.35rem 0 0;
    color: #5b6b7c;
    font-size: 0.74rem;
    line-height: 1.5;
}

.provider-card .copay-main-container .copay-waiver {
    margin-top: 0.7rem;
    padding-top: 0.65rem;
    border-top: 1px dashed #e2e8f0;
}

.provider-card .copay-main-container .copay-waiver-head {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: #123524;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.provider-card .copay-main-container .copay-waiver-head input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #166534;
    cursor: pointer;
}

/* The waiver's handshake sits in the same rounded icon tile the other card
   headings use, with the question after it and the checkbox last. */
.provider-card .copay-main-container .copay-waiver-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #ecfdf3;
    color: #166534;
    font-size: 0.85rem;
}

.provider-card .copay-main-container .copay-waiver-text {
    color: #123524;
    font-size: 0.86rem;
    font-weight: 800;
}

.provider-card .copay-main-container .copay-waiver-note {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    /* Below the tick, but indented to line up with "Waive Copay?" rather than
       with the icon tile: the icon is 30px wide with a 0.5rem gap. */
    margin: 0.45rem 0 0 38px;
    color: #166534;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.45;
}

.provider-card .copay-main-container .copay-waiver-note i {
    margin-top: 0.1rem;
}

/* A display rule beats the [hidden] attribute's own display:none, so the note
   has to be switched off explicitly when the waiver is unticked. */
.provider-card .copay-main-container .copay-waiver-note[hidden] {
    display: none !important;
}

.provider-card .copay-main-container .copay-waiver-note em {
    font-style: italic;
    font-weight: 700;
}

/* The co-pay wording stays visible but struck through once it is waived. */
.provider-card .copay-main-container .terms-copay.copay-struck {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    color: #94a3b8;
}

/* The waiver line inside Premium Composition reads as an addition to the total. */
.provider-card .premium-breakdown .breakdown-row.waiver .value {
    color: #166534 !important;
    font-weight: 700 !important;
}

.provider-card .premium-breakdown .breakdown-row.waiver {
    border-top: 1px dashed #d7e3da;
}

/* ===== medical-exam-left =====
   The Medical Examination panel reads left-aligned like every other card
   section, instead of centring its heading and detail line. */
.provider-card .medical-exam-main-container {
    text-align: left !important;
}

.provider-card .medical-exam-main-container .inner-section-heading {
    justify-content: flex-start !important;
}

/* ===== apply-button-flat =====
   The Apply button on the quote card is a flat green rather than a gradient. */
#resultsContainer .provider-card .quote-card-primary-actions .get-cover-btn,
#cardsContainer .provider-card .quote-card-primary-actions .get-cover-btn {
    background: #1c7a42 !important;
    background-image: none !important;
}

/* ===== quotecard-figure-two-lines =====
   The quote card's top-right figure runs as two lines: the annual premium, then
   the headcount and the quote number together ("555 Families · 1110 Members ·
   Q1"). It used to sit on three separate lines. */
#resultsContainer .provider-card .quotecard-figure,
#cardsContainer .provider-card .quotecard-figure {
    display: grid !important;
    grid-template-columns: auto auto;
    justify-content: end !important;
    align-items: baseline !important;
    column-gap: 0.25rem;
    row-gap: 0.1rem;
}

#resultsContainer .provider-card .quotecard-figure .price,
#cardsContainer .provider-card .quotecard-figure .price {
    grid-column: 1 / -1;
    justify-self: end;
}

#resultsContainer .provider-card .quotecard-figure .quote-sequence,
#cardsContainer .provider-card .quotecard-figure .quote-sequence {
    justify-self: end;
}

/* the premium reads at the same size as the insurer name, not bigger than it */
#resultsContainer .provider-card .quotecard-figure .price,
#cardsContainer .provider-card .quotecard-figure .price {
    font-size: 1.06rem !important;
    line-height: 1.25 !important;
}

/* the dot that joins the headcount to the quote number */
#resultsContainer .provider-card .quotecard-figure .quote-sequence::before,
#cardsContainer .provider-card .quotecard-figure .quote-sequence::before {
    content: "\00b7";
    margin-right: 0.25rem;
    color: #94a3b8;
}

.pre-footer-cta-cover {
    padding: 1rem 0.9rem 1.1rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    text-align: center;
}

.pre-footer-cover-btn {
    font: inherit;
    display: block;
    width: 100%;
    margin-bottom: 0.85rem;
    padding: 0.7rem 0.9rem;
    border-radius: 999px;
    border: 0;
    background: var(--accent-gold);
    color: #12351e;
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.25;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.pre-footer-cover-btn:hover {
    background: #d4af37;
    transform: translateY(-1px);
}

.pre-footer-cover-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.65);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .pre-footer-cta-covers {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pre-footer-cta-or {
    display: block;
    margin-bottom: 0.7rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.85rem;
    font-weight: 600;
}

.pre-footer-insurer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
}

.cta-insurer {
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.95rem 0.45rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.94);
    color: #12351e;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.cta-insurer:hover {
    background: #fff;
    transform: translateY(-1px);
}

.cta-insurer:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

.cta-insurer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 26px;
    flex: 0 0 auto;
}

.cta-insurer-logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.cta-insurer-initial {
    font-size: 0.6rem;
    font-weight: 900;
    color: #12351e;
}

@media (max-width: 900px) {
    .pre-footer-cta-actions {
        align-items: stretch;
        width: 100%;
    }

    .pre-footer-cta-single {
        text-align: center;
    }

    .pre-footer-insurer-row {
        justify-content: center;
    }
}

.partner-logo.heritage            { --partner-color: #0d2440; }

/* ---------- the one-line logo strip ---------- */

/* the brand colour runs down the leading edge of every chip */

/* ---------- the detail cards, now static ---------- */

#partners .partner-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.15rem !important;
    align-items: stretch !important;
    margin-top: 1.7rem !important;
}

/* the stray centring rule from desktop.css made every card read as a centred
   block; the card is a left-aligned column with the quote link pinned bottom */
#partners .partner-logo {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 0.6rem !important;
}

#partners .partner-logo .partner-brand {
    margin-bottom: 0.25rem;
}

#partners .partner-logo p,
#partners .partner-logo .partner-action {
    text-align: left;
}

#partners .partner-action {
    margin-top: auto !important;
}

/* ---------- narrower screens ---------- */

@media (max-width: 900px) {

}

/* tablet: two cards per line */
@media (max-width: 1024px) {
    #partners .partner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* mobile: one card per line */
@media (max-width: 640px) {
    #partners .partner-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.8rem !important;
    }

}

/* ===== providers-title-flat =====
   The Hospitals band keeps its title block - the "Medical Provider Network"
   badge, the heading, the copy and the provider-type chips - but it sits
   straight on the band instead of inside its own card. Only the sub-container
   chrome is switched off; the block's own typography is untouched. */
#providers .directory-hero {
    margin: 0 auto 1.75rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* ===== trust-band-photo =====
   The "Trusted by thousands of Kenyan families" band sits on the family photo
   itself: the photo fills the band, a light white wash lifts it, and the text
   areas sit on frosted white so every word stays readable over the picture. */
#trust {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* the container is left unpositioned so the photo and the wash behind it
   measure against the band itself, not against the 1300px column */
#trust .container {
    position: static;
}

#trust .trust-photo {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #dfe9e3;
    box-shadow: none;
}

#trust .trust-photo img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 22%;
}

/* the light wash the band is read through */
#trust::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

#trust .trust-layout {
    display: block;
}

#trust .trust-copy {
    position: relative;
    z-index: 2;
    /* the same measure as the partners container, so the two bands line up */
    max-width: 100%;
    margin: 0 auto;
    padding: 2.4rem 2.2rem 2.2rem;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 22px 50px rgba(18, 53, 36, 0.18);
    backdrop-filter: blur(3px);
}

/* the picture is generated, so the band says so, quietly, in the corner */
#trust .trust-photo-credit {
    position: absolute;
    right: 14px;
    bottom: 12px;
    z-index: 3;
    padding: 0.32rem 0.72rem;
    border-radius: 999px;
    background: rgba(18, 53, 36, 0.5);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

#trust .trust-copy .section-title,
#trust .trust-copy .section-desc {
    text-align: center;
}

#trust .trust-copy .section-desc {
    margin-left: auto;
    margin-right: auto;
}

/* each trust point sits in its own lightly whitened area */
#trust .trust-grid {
    gap: 1.15rem;
}

#trust .trust-item {
    padding: 1.15rem 1rem 1.05rem;
    border-radius: 18px;
    border: 1px solid rgba(18, 53, 36, 0.06);
    background: rgba(255, 255, 255, 0.66);
}

@media (max-width: 900px) {
    #trust::after {
        background: rgba(255, 255, 255, 0.62);
    }

    #trust .trust-copy {
        padding: 1.5rem 1rem 1.4rem;
        border-radius: 20px;
    }

    #trust .trust-item {
        padding: 0.9rem 0.7rem 0.85rem;
        border-radius: 14px;
    }

    #trust .trust-photo-credit {
        right: 10px;
        bottom: 10px;
        font-size: 0.66rem;
    }
}

/* ===== contact-band-stacked =====
   "Talk to Our Principal Officer" and "Send Us a Message" take a row each
   instead of sharing one band side by side, and both take the same measure and
   the same gutter as the Medical Provider Directory's container, so the wide
   bands on the page line up. */
#contact.personal-assistance-band {
    display: block;
    padding: 56px 18px;
}

/* the vertical rule that divided the two columns has nothing left to divide */
#contact.personal-assistance-band .personal-contact-divider {
    display: none;
}

#contact.personal-assistance-band .personal-assistance-intro {
    /* the agent card is pinned to full width further up the stylesheets */
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#contact.personal-assistance-band .personal-message-card {
    max-width: 1100px !important;
    margin: 1.4rem auto 0 !important;
}

/* the Email / WhatsApp pair was capped tighter than its own labels need, so the
   second line of each was being clipped with an ellipsis */
#contact .personal-contact-actions {
    max-width: 560px;
}

/* on a phone the two buttons are narrow, so their second line wraps instead of
   being cut off with an ellipsis */
@media (max-width: 700px) {
    #contact .personal-contact-btn small {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* ===== principal-officer-panels =====
   The officer card holds two sub-containers: the message in one, and the photo,
   name, title, phone and the two buttons in the other. The badges run as one
   centred line underneath both. */
#contact.personal-assistance-band .personal-assistance-intro {
    display: grid !important;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: clamp(1.1rem, 2.4vw, 2rem);
    row-gap: 1.2rem;
    align-items: stretch !important;
}

#contact.personal-assistance-band .personal-assistance-intro .personal-agent-head,
#contact.personal-assistance-band .personal-assistance-intro .personal-agent-rule {
    grid-column: 1 / -1;
}

#contact.personal-assistance-band .personal-assistance-intro .personal-agent-head {
    grid-row: 1;
    justify-content: flex-start !important;
}

#contact.personal-assistance-band .personal-assistance-intro .personal-agent-head-text {
    text-align: left;
}

#contact.personal-assistance-band .personal-assistance-intro .personal-agent-rule {
    grid-row: 2;
}

/* the two sub-containers */
#contact.personal-assistance-band .personal-assistance-intro .officer-panel {
    padding: 1.15rem 1.15rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#contact.personal-assistance-band .personal-assistance-intro .officer-panel-message {
    grid-column: 1;
    grid-row: 3;
}

#contact.personal-assistance-band .personal-assistance-intro .officer-panel-id {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    flex-direction: column;
}

/* the two buttons sit in the second sub-container, under the photo and title */
#contact.personal-assistance-band .personal-assistance-intro .personal-agent-cta {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: auto 0 0 !important;
}

/* the five badges run as one centred line under both sub-containers */
#contact.personal-assistance-band .personal-assistance-intro .personal-assistance-trust {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.2rem auto 0 !important;
    grid-column: 1 / -1;
    grid-row: 4;
}

@media (max-width: 900px) {
    #contact.personal-assistance-band .personal-assistance-intro {
        grid-template-columns: minmax(0, 1fr);
    }

    #contact.personal-assistance-band .personal-assistance-intro .officer-panel,
    #contact.personal-assistance-band .personal-assistance-intro .personal-assistance-trust {
        grid-column: 1;
        grid-row: auto;
    }

    /* five badges cannot hold one line on a phone, so they pair up there */
    #contact.personal-assistance-band .personal-assistance-intro .personal-assistance-trust {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 580px) {
    #contact.personal-assistance-band {
        padding-left: 10px;
        padding-right: 10px;
    }

    #contact.personal-assistance-band .personal-message-card {
        margin-top: 1rem !important;
    }
}