:root {
    --green-950: #082d22;
    --green-900: #0b3d2e;
    --green-800: #10513c;
    --green-700: #176646;
    --green-100: #e8f2ec;
    --leaf: #2e7d32;
    --gold: #c8a24e;
    --gold-dark: #9f791a;
    --cream: #f7f5ef;
    --ink: #202823;
    --muted: #6d756f;
    --line: #dfe6e1;
    --white: #ffffff;
    --shadow: 0 18px 50px rgba(12, 61, 46, 0.12);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: #fff;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

h1,
h2,
h3 {
    font-family: Georgia, "Tahoma", serif;
    color: var(--green-950);
}

a {
    color: var(--green-700);
}

.site-header {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(14px);
}

.site-header .navbar {
    min-height: 78px;
}

.brand-lockup img {
    width: 210px;
    height: 55px;
    object-fit: contain;
    object-position: left center;
}

.nav-link {
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 600;
}

.nav-link:hover {
    color: var(--green-700);
}

.btn-gold {
    color: #fff;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border: 0;
    box-shadow: 0 9px 25px rgba(200, 162, 78, 0.25);
}

.btn-gold:hover {
    color: #fff;
    background: linear-gradient(135deg, #d6b45d, #a97f17);
}

.hero-section {
    padding: clamp(5rem, 8vw, 8rem) 0;
    color: #fff;
    background:
        radial-gradient(circle at 75% 25%, rgba(200, 162, 78, 0.22), transparent 32%),
        linear-gradient(120deg, rgba(8, 45, 34, 0.98), rgba(11, 61, 46, 0.92)),
        #0b3d2e;
}

.hero-section h1 {
    max-width: 800px;
    margin: 0.75rem 0 1.25rem;
    color: #fff;
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 0.98;
}

.hero-section .lead {
    max-width: 760px;
    color: #e1ece6;
}

.hero-kicker,
.eyebrow,
.section-heading > span,
.page-hero > div > span,
.promo-card span,
.auth-brand span {
    color: var(--gold);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hero-brand-card {
    padding: 2rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 2rem;
    box-shadow: var(--shadow);
}

.hero-brand-card img {
    width: 190px;
    max-width: 100%;
    border-radius: 50%;
}

.hero-brand-card h2 {
    margin-top: 1rem;
    color: #fff;
}

.search-band {
    position: relative;
    z-index: 5;
    margin-top: -2.5rem;
}

.search-panel {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 2fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: var(--shadow);
}

.medicine-search-wrap,
.page-search {
    position: relative;
}

.search-suggestions {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    left: 0;
    z-index: 50;
    display: none;
    max-height: 360px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    box-shadow: var(--shadow);
}

.search-suggestions.show {
    display: block;
}

.search-suggestions a {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}

.search-suggestions a:hover {
    background: var(--green-100);
}

.feature-strip {
    padding: 3rem 0;
}

.feature-card {
    display: flex;
    min-height: 145px;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.25rem;
    text-align: center;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 1rem;
}

.feature-card i {
    color: var(--green-700);
    font-size: 1.8rem;
}

.feature-card small {
    color: var(--muted);
}

.section-block {
    padding: 5rem 0;
}

.bg-soft {
    background: var(--cream);
}

.section-heading {
    margin-bottom: 2.5rem;
}

.section-heading h2 {
    margin: 0.35rem 0 0;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
}

.step-card,
.medicine-card,
.content-card,
.panel-card,
.doctor-profile-card,
.dashboard-stat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(12, 61, 46, 0.07);
}

.step-card {
    height: 100%;
    padding: 1.5rem;
    text-align: center;
}

.step-card > span {
    display: grid;
    width: 44px;
    height: 44px;
    margin: 0 auto 1rem;
    place-items: center;
    color: var(--green-950);
    background: #f4e7bd;
    border-radius: 50%;
    font-weight: 800;
}

.medicine-card {
    height: 100%;
    padding: 1.5rem;
}

.medicine-card h3 {
    font-size: 1.35rem;
}

.medicine-card p {
    color: var(--muted);
}

.medicine-bottle {
    display: grid;
    width: 80px;
    height: 105px;
    margin-bottom: 1rem;
    place-items: center;
    color: var(--gold);
    background: linear-gradient(#684a16, #2c210c);
    border-radius: 16px 16px 20px 20px;
    font-size: 2.3rem;
}

.medicine-bottle.small {
    width: 55px;
    min-width: 55px;
    height: 76px;
    margin: 0;
    font-size: 1.5rem;
}

.promo-card {
    display: flex;
    min-height: 260px;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem;
    border-radius: 1rem;
    overflow: hidden;
}

.promo-card i {
    color: var(--green-700);
    font-size: 5rem;
}

.doctor-card {
    background: #edf5ef;
}

.reward-card {
    background: #fbf2dc;
}

.knowledge-card {
    background: #eef3f7;
}

.content-card {
    height: 100%;
    overflow: hidden;
}

.content-card-image {
    display: grid;
    height: 190px;
    place-items: center;
    color: var(--gold);
    background: linear-gradient(135deg, var(--green-950), var(--green-700));
    font-size: 3.2rem;
}

.content-card h3 {
    font-size: 1.25rem;
}

.content-card p {
    color: var(--muted);
}

.stats-band {
    padding: 2.2rem 0;
    color: #fff;
    background: var(--green-900);
}

.stats-band strong,
.stats-band span {
    display: block;
}

.stats-band strong {
    color: var(--gold);
    font-family: Georgia, serif;
    font-size: 2rem;
}

.site-footer {
    color: #d9e5de;
    background: var(--green-950);
}

.site-footer h2,
.site-footer strong {
    color: #fff;
}

.site-footer a {
    display: block;
    margin-bottom: 0.55rem;
    color: #d9e5de;
    text-decoration: none;
}

.footer-logo {
    display: block;
    width: 250px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 640 / 398;
    object-fit: contain;
    padding: 0.5rem;
    background: #fff;
    border-radius: 0.75rem;
}

.page-hero {
    padding: 5.5rem 0;
    color: #fff;
    background:
        radial-gradient(circle at 75% 25%, rgba(200, 162, 78, 0.2), transparent 32%),
        linear-gradient(120deg, var(--green-950), var(--green-700));
}

.page-hero.compact {
    padding: 3.5rem 0;
}

.page-hero h1 {
    margin: 0.4rem 0;
    color: #fff;
    font-size: clamp(2.8rem, 6vw, 5rem);
}

.page-search,
.doctor-search-form {
    display: grid;
    max-width: 900px;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    margin: 2rem auto 0;
}

.doctor-search-form {
    grid-template-columns: 1.3fr 1fr auto;
}

.search-result-list {
    display: grid;
    gap: 1rem;
}

.search-result-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1rem;
}

.search-result-card h3 {
    margin: 0.2rem 0;
    font-size: 1.25rem;
}

.search-result-card p {
    margin: 0;
    color: var(--muted);
}

.panel-card {
    padding: 1.75rem;
}

.sticky-summary {
    position: sticky;
    top: 100px;
}

.quantity-input {
    width: 84px;
}

.order-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}

.order-line strong,
.order-line small {
    display: block;
}

.price-breakdown {
    margin: 1.25rem 0;
}

.price-breakdown > div {
    display: flex;
    justify-content: space-between;
    padding: 0.55rem 0;
}

.price-breakdown .total {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 2px solid var(--green-900);
    font-size: 1.15rem;
}

.empty-panel {
    padding: 2.5rem 1.5rem;
    color: var(--muted);
    text-align: center;
    background: var(--cream);
    border: 1px dashed var(--gold);
    border-radius: 1rem;
}

.auth-section {
    min-height: 75vh;
    padding: 5rem 0;
    background: var(--cream);
}

.auth-card {
    max-width: 920px;
    margin: auto;
    padding: clamp(1.5rem, 5vw, 3rem);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1.5rem;
    box-shadow: var(--shadow);
}

.auth-card-narrow {
    max-width: 560px;
}

.auth-brand {
    margin-bottom: 2rem;
    text-align: center;
}

.auth-brand img {
    width: 115px;
    border-radius: 50%;
}

.auth-brand h1 {
    margin-top: 0.4rem;
}

.doctor-profile-card {
    display: flex;
    height: 100%;
    gap: 1.25rem;
    padding: 1.5rem;
}

.doctor-avatar {
    display: grid;
    width: 80px;
    min-width: 80px;
    height: 80px;
    place-items: center;
    color: var(--green-700);
    background: var(--green-100);
    border-radius: 50%;
    font-size: 2rem;
}

.verified-badge,
.status-badge {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
    padding: 0.3rem 0.55rem;
    color: var(--green-700);
    background: var(--green-100);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: capitalize;
}

.dashboard-shell {
    display: grid;
    min-height: calc(100vh - 78px);
    grid-template-columns: 270px 1fr;
    background: #f4f7f5;
}

.dashboard-sidebar,
.admin-sidebar {
    color: #fff;
    background: linear-gradient(180deg, var(--green-950), var(--green-900));
}

.dashboard-sidebar {
    padding: 1.5rem;
}

.profile-summary {
    text-align: center;
    margin-bottom: 1.5rem;
}

.profile-summary img {
    width: 90px;
    border-radius: 50%;
    background: #fff;
}

.profile-summary strong,
.profile-summary small {
    display: block;
}

.profile-summary small {
    color: #b8d1c3;
}

.dashboard-sidebar nav,
.admin-sidebar nav {
    display: grid;
    gap: 0.35rem;
}

.dashboard-sidebar nav a,
.admin-sidebar nav a,
.admin-sidebar nav .admin-nav-action {
    display: flex;
    width: 100%;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem 1rem;
    color: #dceae2;
    background: transparent;
    border: 0;
    text-decoration: none;
    text-align: left;
    border-radius: 0.65rem;
    cursor: pointer;
}

.dashboard-sidebar nav a:hover,
.dashboard-sidebar nav a.active,
.admin-sidebar nav a:hover,
.admin-sidebar nav .admin-nav-action:hover,
.admin-sidebar nav .admin-nav-action:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.header-action-form,
.admin-nav-action-form,
.admin-language-switcher form {
    margin: 0;
}

.dashboard-content {
    padding: 2rem;
}

.dashboard-stat {
    height: 100%;
    padding: 1.4rem;
}

.dashboard-stat i {
    color: var(--green-700);
    font-size: 1.6rem;
}

.dashboard-stat span,
.dashboard-stat strong {
    display: block;
}

.dashboard-stat span {
    margin-top: 0.65rem;
    color: var(--muted);
}

.dashboard-stat strong {
    margin-top: 0.2rem;
    font-family: Georgia, serif;
    font-size: 2rem;
}

.notification-item {
    display: flex;
    gap: 0.8rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}

.notification-item i {
    color: var(--gold);
}

.notification-item p {
    margin: 0.2rem 0 0;
    color: var(--muted);
}

.admin-body {
    background: #f1f5f3;
}

.admin-layout {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 280px 1fr;
}

.admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 1.25rem;
    overflow-y: auto;
}

.admin-logo {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.admin-logo img {
    width: 58px;
    background: #fff;
    border-radius: 50%;
}

.admin-user {
    margin: 1.5rem 0;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
}

.admin-user strong,
.admin-user small {
    display: block;
}

.admin-user small {
    color: #c2d7cb;
}

.admin-content {
    padding: 2rem;
}

.admin-stat {
    box-shadow: none;
}

.progress-list {
    display: grid;
}

.progress-list > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}

@media (max-width: 1199.98px) {
    .search-panel {
        grid-template-columns: 1fr;
    }

    .dashboard-shell,
    .admin-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar,
    .admin-sidebar {
        position: static;
        height: auto;
    }

    .dashboard-sidebar nav,
    .admin-sidebar nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .brand-lockup img {
        width: 165px;
    }

    .page-search,
    .doctor-search-form {
        grid-template-columns: 1fr;
    }

    .search-result-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-content,
    .admin-content {
        padding: 1rem;
    }

    .dashboard-sidebar nav,
    .admin-sidebar nav {
        grid-template-columns: 1fr;
    }

    .doctor-profile-card {
        flex-direction: column;
    }
}


/* =========================================================
   PHASE 2 — ORDERING, CHECKOUT AND OPERATIONS
========================================================= */

.header-icon-link {
    position: relative;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--green-900);
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 50%;
    text-decoration: none;
}

.header-icon-link:hover {
    color: #fff;
    background: var(--green-700);
}

.header-count {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    min-width: 20px;
    height: 20px;
    padding: 0 0.3rem;
    place-items: center;
    color: #fff;
    background: #cf2f2f;
    border: 2px solid #fff;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
}

.order-mode-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    padding: 0.6rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: 0 8px 25px rgba(12, 61, 46, 0.06);
}

.order-mode-tabs a {
    display: inline-flex;
    flex: 1 1 200px;
    gap: 0.55rem;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1rem;
    color: var(--green-900);
    border-radius: 0.7rem;
    text-decoration: none;
    font-weight: 700;
}

.order-mode-tabs a:hover,
.order-mode-tabs a.active {
    color: #fff;
    background: var(--green-900);
}

.order-mode-tabs a > span {
    display: grid;
    min-width: 22px;
    height: 22px;
    place-items: center;
    color: var(--green-950);
    background: var(--gold);
    border-radius: 999px;
    font-size: 0.72rem;
}

.variant-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(280px, 1fr)
    );
    gap: 1rem;
}

.variant-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 1rem;
}

.variant-card-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.variant-price {
    color: var(--green-700);
    font-size: 1.25rem;
}

.price-mini-breakdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.price-mini-breakdown span {
    padding: 0.65rem;
    color: var(--muted);
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    font-size: 0.75rem;
}

.price-mini-breakdown strong {
    display: block;
    margin-top: 0.2rem;
    color: var(--green-900);
}

.compact-order-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
}

.compact-order-line strong,
.compact-order-line small {
    display: block;
}

.compact-order-line small {
    color: var(--muted);
}

.compact-order-line > span {
    display: grid;
    min-width: 30px;
    height: 30px;
    place-items: center;
    color: #fff;
    background: var(--green-700);
    border-radius: 50%;
}

.combination-rows {
    display: grid;
    gap: 0.9rem;
}

.combination-row {
    display: grid;
    grid-template-columns:
        42px
        minmax(220px, 2fr)
        minmax(140px, 1fr)
        minmax(100px, 0.7fr)
        auto;
    gap: 0.8rem;
    align-items: end;
    padding: 1rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.9rem;
}

.combination-sequence {
    display: grid;
    width: 38px;
    height: 38px;
    margin-bottom: 0.05rem;
    place-items: center;
    color: #fff;
    background: var(--green-700);
    border-radius: 50%;
    font-weight: 800;
}

.combination-remove {
    margin-bottom: 0.05rem;
}

.combination-estimate {
    padding: 1rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.8rem;
}

.combination-estimate > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
}

.combination-estimate small {
    display: block;
    margin-top: 0.75rem;
    color: var(--muted);
    line-height: 1.5;
}

.cart-items {
    display: grid;
    gap: 1rem;
}

.cart-item {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 1rem;
}

.cart-item-icon {
    display: grid;
    width: 58px;
    min-width: 58px;
    height: 58px;
    place-items: center;
    color: var(--gold);
    background: var(--green-900);
    border-radius: 0.8rem;
    font-size: 1.5rem;
}

.cart-item-main {
    min-width: 0;
    flex: 1;
}

.cart-line-price {
    color: var(--green-700);
    font-size: 1.2rem;
}

.cart-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: end;
}

.cart-item-actions label {
    width: 115px;
    font-size: 0.82rem;
    font-weight: 700;
}

.combination-details summary {
    color: var(--green-700);
    cursor: pointer;
    font-weight: 700;
}

.combination-details ol {
    margin: 0.75rem 0 0;
    padding-left: 1.2rem;
    color: var(--muted);
}

.discount-line {
    color: #137447;
}

.payment-methods {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(230px, 1fr)
    );
    gap: 0.8rem;
}

.payment-method-card {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    cursor: pointer;
}

.payment-method-card:has(input:checked) {
    background: var(--green-100);
    border-color: var(--green-700);
    box-shadow: inset 0 0 0 1px var(--green-700);
}

.payment-method-card input {
    margin-top: 0.2rem;
}

.payment-method-card strong,
.payment-method-card small {
    display: block;
}

.payment-method-card small {
    margin-top: 0.35rem;
    color: var(--muted);
    line-height: 1.45;
}

.transaction-fields-optional {
    opacity: 0.75;
}

.confirmation-section {
    min-height: 78vh;
    display: grid;
    align-items: center;
    padding: 5rem 0;
    background: var(--cream);
}

.confirmation-card {
    max-width: 850px;
    margin: auto;
    padding: clamp(2rem, 6vw, 4rem);
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1.5rem;
    box-shadow: var(--shadow);
}

.confirmation-icon {
    display: grid;
    width: 90px;
    height: 90px;
    margin: 0 auto 1.5rem;
    place-items: center;
    color: #fff;
    background: var(--green-700);
    border: 8px solid var(--green-100);
    border-radius: 50%;
    font-size: 2.7rem;
}

.confirmation-reference {
    display: grid;
    grid-template-columns: repeat(
        2,
        minmax(0, 1fr)
    );
    gap: 0.8rem;
    margin-top: 2rem;
}

.confirmation-reference > div {
    padding: 1rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.8rem;
}

.confirmation-reference span,
.confirmation-reference strong {
    display: block;
}

.confirmation-reference span {
    color: var(--muted);
    font-size: 0.8rem;
}

.confirmation-reference strong {
    margin-top: 0.3rem;
    color: var(--green-900);
}

.order-detail-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
}

.component-snapshot-list {
    display: grid;
    gap: 0.45rem;
    margin: 0.5rem 0 1rem 1.5rem;
    padding: 0.8rem;
    background: var(--cream);
    border-left: 3px solid var(--gold);
}

.component-snapshot-list > div {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1rem;
    align-items: center;
}

.component-snapshot-list small {
    color: var(--muted);
}

.tracking-timeline {
    position: relative;
    display: grid;
    gap: 0;
    margin-top: 1rem;
}

.tracking-event {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 1rem;
    min-height: 90px;
}

.tracking-event::before {
    position: absolute;
    top: 20px;
    bottom: 0;
    left: 8px;
    width: 2px;
    content: "";
    background: var(--line);
}

.tracking-event:last-child::before {
    display: none;
}

.tracking-event > span {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    background: var(--green-700);
    border: 4px solid var(--green-100);
    border-radius: 50%;
}

.tracking-event strong,
.tracking-event small {
    display: block;
}

.tracking-event small {
    margin-top: 0.2rem;
    color: var(--muted);
}

.tracking-event p {
    margin: 0.55rem 0 0;
}

.notification-item {
    color: inherit;
    text-decoration: none;
}

.notification-item:hover {
    color: inherit;
    background: var(--cream);
}

.admin-sidebar nav {
    padding-bottom: 2rem;
}

@media (max-width: 991.98px) {
    .combination-row {
        grid-template-columns:
            42px
            minmax(180px, 1fr)
            minmax(130px, 0.8fr);
    }

    .combination-row > div:nth-of-type(4) {
        grid-column: 2 / 3;
    }

    .combination-remove {
        grid-column: 3;
    }
}

@media (max-width: 767.98px) {
    .price-mini-breakdown {
        grid-template-columns: 1fr;
    }

    .combination-row {
        grid-template-columns: 42px 1fr;
    }

    .combination-row > div:not(
        .combination-sequence
    ) {
        grid-column: 2;
    }

    .combination-remove {
        grid-column: 2;
        width: 100%;
    }

    .cart-item {
        flex-direction: column;
    }

    .confirmation-reference {
        grid-template-columns: 1fr;
    }

    .component-snapshot-list > div {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .order-detail-item {
        flex-direction: column;
    }
}


.payment-destination {
    display: block;
    margin-top: 0.55rem;
    padding: 0.55rem;
    color: var(--green-900);
    background: #fff;
    border: 1px dashed var(--gold);
    border-radius: 0.5rem;
    font-size: 0.78rem;
    font-style: normal;
    line-height: 1.45;
}


/* =========================================================
   PHASE 3 — PRODUCTION, QC, PACKAGING AND DELIVERY
========================================================= */

.operations-sidebar {
    background:
        radial-gradient(
            circle at 30% 10%,
            rgba(200, 162, 78, 0.2),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #082d22,
            #0b3d2e
        );
}

.operations-priority {
    display: inline-flex;
    margin-top: 0.35rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.priority-normal {
    color: #285742;
    background: #e5f2ea;
}

.priority-urgent {
    color: #8a5700;
    background: #fff1c8;
}

.priority-critical {
    color: #9c2626;
    background: #fde3e3;
}

.operations-subcard,
.operations-batch-card {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 1rem;
}

.operations-subcard {
    padding: 1rem;
}

.operations-batch-card {
    padding: 1.35rem;
}

.operations-inline-form {
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
}

.operations-batch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: end;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
}

.operations-dl {
    display: grid;
    grid-template-columns: minmax(100px, 0.8fr) 1.4fr;
    gap: 0.45rem 1rem;
    margin: 1rem 0;
}

.operations-dl dt {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.operations-dl dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.operations-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.operations-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--line);
}

.operations-list li:last-child {
    border-bottom: 0;
}

.operations-note {
    padding: 0.9rem;
    color: #4e5953;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    line-height: 1.55;
}

.qc-check-card {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.25fr);
    gap: 1.25rem;
    align-items: center;
    padding: 1rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.9rem;
}

.qc-check-card p {
    margin: 0.35rem 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.operations-tabs {
    border-bottom-color: var(--line);
}

.operations-tabs .nav-link {
    color: var(--green-900);
    font-weight: 700;
}

.operations-tabs .nav-link.active {
    color: #fff;
    background: var(--green-900);
    border-color: var(--green-900);
}

.verify-search {
    max-width: 800px;
    margin: 0 auto 2rem;
}

.verification-result {
    max-width: 900px;
    margin: auto;
    padding: clamp(2rem, 6vw, 4rem);
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1.5rem;
    box-shadow: var(--shadow);
}

.verification-result.valid {
    border-top: 6px solid var(--green-700);
}

.verification-result.invalid {
    border-top: 6px solid #b42318;
}

.verification-icon {
    display: grid;
    width: 88px;
    height: 88px;
    margin: 0 auto 1.2rem;
    place-items: center;
    color: #fff;
    background: var(--green-700);
    border: 8px solid var(--green-100);
    border-radius: 50%;
    font-size: 2.5rem;
}

.verification-result.invalid .verification-icon {
    background: #b42318;
    border-color: #fde8e8;
}

.production-progress {
    display: grid;
    gap: 0.4rem;
}

.production-progress > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--line);
}

@media (max-width: 991.98px) {
    .qc-check-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .operations-dl {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .operations-dl dd {
        margin-bottom: 0.7rem;
    }

    .operations-list li {
        flex-direction: column;
        gap: 0.2rem;
    }

    .operations-batch-actions {
        align-items: stretch;
        flex-direction: column;
    }
}


/* =========================================================
   PHASE 4 — PROFESSIONAL DOCTOR DIRECTORY
========================================================= */

.profile-completion {
    min-width: 230px;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(11, 61, 46, 0.06);
}

.profile-completion span,
.profile-completion strong {
    display: block;
}

.profile-completion span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.profile-completion strong {
    margin: 0.15rem 0 0.55rem;
    color: var(--green-900);
    font-size: 1.55rem;
}

.profile-completion > div {
    height: 8px;
    overflow: hidden;
    background: var(--green-100);
    border-radius: 999px;
}

.profile-completion i {
    display: block;
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--green-700),
        var(--gold)
    );
    border-radius: inherit;
}

.specialty-check-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(210px, 1fr)
    );
    gap: 0.65rem;
    padding: 1rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.9rem;
}

.specialty-check-grid .form-check {
    margin: 0;
    padding: 0.65rem 0.75rem 0.65rem 2.1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.65rem;
}

.directory-media-editor {
    height: 100%;
    padding: 1rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 1rem;
}

.directory-profile-preview,
.directory-banner-preview,
.doctor-public-photo,
.doctor-public-banner {
    position: relative;
    overflow: hidden;
    background: var(--green-100);
}

.directory-profile-preview {
    width: 190px;
    height: 190px;
    margin: 0 auto 1rem;
    border: 6px solid #fff;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(11, 61, 46, 0.15);
}

.directory-banner-preview {
    width: 100%;
    height: 190px;
    margin-bottom: 1rem;
    border: 4px solid #fff;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(11, 61, 46, 0.1);
}

.directory-profile-preview img,
.directory-banner-preview img,
.doctor-public-photo img,
.doctor-public-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position:
        var(--image-x, 50%)
        var(--image-y, 50%);
    transform: scale(
        var(--image-zoom, 1)
    );
    transition:
        object-position 0.15s ease,
        transform 0.15s ease;
}

.directory-schedule-list {
    display: grid;
    gap: 0.65rem;
}

.directory-schedule-list > div {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.8rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
}

.directory-schedule-list small {
    color: var(--muted);
}

.credential-document {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.9rem;
}

.credential-document > div:last-child {
    min-width: min(100%, 420px);
}

.doctor-directory-hero {
    padding-top: clamp(3rem, 8vw, 6rem);
    padding-bottom: clamp(3rem, 7vw, 5rem);
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(200, 162, 78, 0.2),
            transparent 26%
        ),
        radial-gradient(
            circle at 88% 10%,
            rgba(36, 125, 96, 0.2),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #f7fbf8,
            #edf6f1
        );
}

.directory-hero-copy {
    max-width: 850px;
}

.directory-hero-copy > span {
    color: var(--gold-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.directory-hero-copy h1 {
    margin: 0.7rem 0;
    color: var(--green-950);
    font-family: Georgia, serif;
    font-size: clamp(2.25rem, 5vw, 4.5rem);
}

.directory-hero-copy p {
    color: var(--muted);
    font-size: 1.1rem;
}

.doctor-directory-search {
    max-width: 1450px;
    margin: 2.2rem auto 0;
    padding: clamp(1rem, 3vw, 1.6rem);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(11, 61, 46, 0.12);
    border-radius: 1.3rem;
    box-shadow: 0 25px 70px rgba(11, 61, 46, 0.12);
}

.directory-main-search {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: center;
}

.directory-main-search > i {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: var(--green-700);
    background: var(--green-100);
    border-radius: 50%;
    font-size: 1.2rem;
}

.directory-location-active {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.6rem 0.8rem;
    color: var(--green-900);
    background: var(--green-100);
    border-radius: 999px;
    font-weight: 700;
}

.directory-doctor-card {
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    box-shadow: 0 14px 40px rgba(11, 61, 46, 0.08);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.directory-doctor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 55px rgba(11, 61, 46, 0.14);
}

.directory-doctor-media {
    position: relative;
    height: 255px;
    overflow: hidden;
    background: var(--green-100);
}

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

.featured-directory-badge,
.distance-directory-badge {
    position: absolute;
    top: 1rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
}

.featured-directory-badge {
    left: 1rem;
    color: var(--green-950);
    background: var(--gold);
}

.distance-directory-badge {
    right: 1rem;
    color: #fff;
    background: rgba(8, 45, 34, 0.88);
}

.directory-doctor-content {
    padding: 1.35rem;
}

.verified-badge,
.directory-open-badge,
.directory-unclaimed-badge,
.verified-visit-badge {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

.verified-badge {
    color: #0d6b47;
    background: #e3f4eb;
}

.directory-open-badge {
    color: #6f5500;
    background: #fff2c4;
}

.directory-unclaimed-badge {
    color: #7b3f00;
    background: #ffead2;
}

.verified-visit-badge {
    color: #0b5470;
    background: #e4f3f8;
}

.directory-doctor-content h2 {
    margin: 0.8rem 0 0.2rem;
    color: var(--green-950);
    font-family: Georgia, serif;
    font-size: 1.45rem;
}

.directory-name-bn,
.doctor-public-name-bn {
    margin: 0.1rem 0;
    color: var(--green-700);
    font-size: 1.05rem;
}

.directory-headline {
    margin: 0.5rem 0;
    color: #435049;
    font-weight: 700;
}

.directory-specialties {
    min-height: 46px;
    margin: 0.6rem 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.directory-rating {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.directory-rating span {
    color: #d59e18;
    letter-spacing: 0.05em;
}

.directory-rating strong {
    color: var(--green-950);
}

.directory-rating small {
    color: var(--muted);
}

.directory-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.85rem 0;
}

.directory-card-meta span {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.4rem 0.55rem;
    color: #45524b;
    background: var(--cream);
    border-radius: 0.55rem;
    font-size: 0.78rem;
}

.directory-chamber-summary {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    min-height: 70px;
    margin: 0.85rem 0 1rem;
    padding: 0.85rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
}

.directory-chamber-summary > i {
    color: var(--gold-dark);
    font-size: 1.2rem;
}

.directory-chamber-summary strong,
.directory-chamber-summary small {
    display: block;
}

.directory-chamber-summary small {
    margin-top: 0.2rem;
    color: var(--muted);
}

.doctor-public-hero {
    position: relative;
    padding-bottom: 2rem;
    background: var(--cream);
}

.doctor-public-banner {
    width: 100%;
    height: clamp(230px, 32vw, 430px);
}

.doctor-public-banner::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(
        180deg,
        rgba(8, 45, 34, 0.02),
        rgba(8, 45, 34, 0.55)
    );
}

.doctor-public-header {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 230px 1fr auto;
    gap: 2rem;
    align-items: end;
    margin-top: -115px;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--line);
    border-radius: 1.4rem;
    box-shadow: 0 25px 70px rgba(8, 45, 34, 0.16);
}

.doctor-public-photo {
    width: 220px;
    height: 220px;
    border: 8px solid #fff;
    border-radius: 1.2rem;
    box-shadow: 0 12px 35px rgba(8, 45, 34, 0.18);
}

.doctor-public-identity h1 {
    margin: 0.7rem 0 0.2rem;
    color: var(--green-950);
    font-family: Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
}

.doctor-public-identity .lead {
    margin-bottom: 0.8rem;
    color: #46534c;
}

.directory-specialty-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.directory-specialty-tags span {
    padding: 0.45rem 0.65rem;
    color: var(--green-900);
    background: var(--green-100);
    border: 1px solid rgba(11, 61, 46, 0.12);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.doctor-public-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.doctor-public-stats > div {
    min-width: 115px;
    padding: 0.75rem;
    background: var(--cream);
    border-radius: 0.7rem;
}

.doctor-public-stats strong,
.doctor-public-stats span {
    display: block;
}

.doctor-public-stats strong {
    color: var(--green-900);
    font-size: 1.35rem;
}

.doctor-public-stats span {
    color: var(--muted);
    font-size: 0.74rem;
}

.doctor-public-actions {
    display: grid;
    min-width: 230px;
    gap: 0.75rem;
}

.doctor-biography {
    color: #46534c;
    font-size: 1.02rem;
    line-height: 1.8;
}

.doctor-fact-card {
    display: flex;
    gap: 1rem;
    height: 100%;
    align-items: flex-start;
    padding: 1rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.9rem;
}

.doctor-fact-card > i {
    display: grid;
    width: 42px;
    height: 42px;
    min-width: 42px;
    place-items: center;
    color: #fff;
    background: var(--green-700);
    border-radius: 50%;
}

.doctor-fact-card span,
.doctor-fact-card strong,
.doctor-fact-card small {
    display: block;
}

.doctor-fact-card span {
    color: var(--muted);
    font-size: 0.78rem;
}

.directory-timeline {
    position: relative;
    display: grid;
    gap: 0;
}

.directory-timeline article {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 1rem;
    min-height: 105px;
}

.directory-timeline article::before {
    position: absolute;
    top: 20px;
    bottom: 0;
    left: 8px;
    width: 2px;
    content: "";
    background: var(--line);
}

.directory-timeline article:last-child::before {
    display: none;
}

.directory-timeline article > span {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    background: var(--green-700);
    border: 4px solid var(--green-100);
    border-radius: 50%;
}

.directory-timeline h3,
.directory-timeline p {
    margin-bottom: 0.25rem;
}

.directory-timeline p,
.directory-timeline small {
    color: var(--muted);
}

.training-public-card,
.doctor-review-card,
.public-chamber-card {
    height: 100%;
    padding: 1rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.9rem;
}

.training-public-card > span {
    display: inline-flex;
    margin-bottom: 0.65rem;
    padding: 0.3rem 0.55rem;
    color: var(--green-900);
    background: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

.doctor-review-response {
    margin-top: 1rem;
    padding: 0.85rem;
    background: #fff;
    border-left: 3px solid var(--gold);
    border-radius: 0.55rem;
}

.doctor-review-response p {
    margin: 0.35rem 0 0;
}

.public-schedule-mini {
    display: grid;
    gap: 0.35rem;
    margin: 0.8rem 0;
}

.public-schedule-mini > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.86rem;
}

.doctor-map-frame {
    width: 100%;
    height: 220px;
    margin-top: 1rem;
    border: 0;
    border-radius: 0.8rem;
}

.directory-trust-card {
    border-top: 4px solid var(--gold);
}

.review-doctor-photo {
    display: block;
    width: 165px;
    height: 165px;
    margin: auto;
    object-fit: cover;
    border: 5px solid var(--green-100);
    border-radius: 50%;
}

.directory-dashboard-metric {
    height: 100%;
    padding: 1rem;
    text-align: center;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.85rem;
}

.directory-dashboard-metric span,
.directory-dashboard-metric strong {
    display: block;
}

.directory-dashboard-metric span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.directory-dashboard-metric strong {
    margin-top: 0.25rem;
    color: var(--green-900);
    font-size: 1.65rem;
}

.admin-doctor-thumb {
    width: 54px;
    height: 54px;
    min-width: 54px;
    object-fit: cover;
    border: 2px solid var(--green-100);
    border-radius: 0.7rem;
}

.directory-guideline-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding-left: 1.2rem;
    color: #46534c;
}

.directory-guideline-list li::marker {
    color: var(--gold-dark);
}

.import-log {
    max-width: 600px;
    max-height: 280px;
    margin-top: 0.75rem;
    overflow: auto;
    white-space: pre-wrap;
    font-size: 0.75rem;
}

@media (max-width: 1199.98px) {
    .doctor-public-header {
        grid-template-columns: 190px 1fr;
    }

    .doctor-public-photo {
        width: 185px;
        height: 185px;
    }

    .doctor-public-actions {
        grid-column: 1 / -1;
        grid-template-columns: repeat(
            auto-fit,
            minmax(200px, 1fr)
        );
    }
}

@media (max-width: 767.98px) {
    .directory-main-search {
        grid-template-columns: 1fr;
    }

    .directory-main-search > i {
        display: none;
    }

    .directory-doctor-media {
        height: 230px;
    }

    .doctor-public-banner {
        height: 230px;
    }

    .doctor-public-header {
        grid-template-columns: 1fr;
        margin-top: -70px;
        text-align: center;
    }

    .doctor-public-photo {
        width: 170px;
        height: 170px;
        margin: auto;
        border-radius: 50%;
    }

    .directory-specialty-tags,
    .doctor-public-stats {
        justify-content: center;
    }

    .doctor-public-actions {
        grid-column: auto;
        min-width: 0;
    }

    .directory-schedule-list > div {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .credential-document {
        align-items: stretch;
        flex-direction: column;
    }

    .credential-document > div:last-child {
        min-width: 0;
    }
}


.directory-pagination .page-link {
    color: var(--green-900);
    border-color: var(--line);
}

.directory-pagination .page-item.active .page-link {
    color: #fff;
    background: var(--green-700);
    border-color: var(--green-700);
}

.directory-pagination .page-link:hover {
    color: #fff;
    background: var(--green-900);
}


/* =========================================================
   PHASE 5 — CMS, KNOWLEDGE HUB & DIGITAL LIBRARY
========================================================= */

.header-search-button {
    display: inline-grid;
    min-width: 42px;
    place-items: center;
}

.footer-subscription-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.65rem;
}

.footer-credit a {
    margin-left: 0.3rem;
    color: var(--gold);
    font-weight: 700;
}

.footer-credit a:hover {
    color: #fff;
}

.cms-layout .admin-content {
    background:
        radial-gradient(
            circle at 95% 0,
            rgba(200, 162, 78, 0.09),
            transparent 23rem
        ),
        #f7faf8;
}

.cms-sidebar .admin-logo span {
    display: grid;
}

.cms-sidebar .admin-logo small {
    color: var(--gold);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
}

.cms-list-thumbnail {
    display: grid;
    width: 62px;
    height: 62px;
    min-width: 62px;
    overflow: hidden;
    place-items: center;
    color: var(--green-700);
    background: var(--green-100);
    border-radius: 0.8rem;
    font-size: 1.4rem;
}

.cms-list-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cms-rich-editor {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
}

.cms-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.55rem;
    background: #f1f6f3;
    border-bottom: 1px solid var(--line);
}

.cms-editor-toolbar button {
    display: grid;
    width: 36px;
    height: 34px;
    place-items: center;
    color: var(--green-900);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.45rem;
}

.cms-editor-toolbar button:hover {
    color: #fff;
    background: var(--green-700);
    border-color: var(--green-700);
}

.cms-editor-surface {
    min-height: 390px;
    padding: 1.15rem;
    overflow: auto;
    color: #26352d;
    line-height: 1.75;
    outline: none;
}

.cms-editor-surface.compact {
    min-height: 210px;
}

.cms-editor-surface.source-mode {
    white-space: pre-wrap;
    color: #dfeae4;
    background: #17231d;
    font-family:
        Consolas,
        Monaco,
        monospace;
    font-size: 0.84rem;
}

.cms-editor-surface:focus {
    box-shadow:
        inset 0 0 0 2px
        rgba(27, 106, 77, 0.16);
}

.cms-editor-surface img,
.cms-rich-content img {
    max-width: 100%;
    height: auto;
}

.cms-editor-surface table,
.cms-rich-content table,
.content-publication-body table {
    width: 100%;
    margin: 1.25rem 0;
    border-collapse: collapse;
}

.cms-editor-surface th,
.cms-editor-surface td,
.cms-rich-content th,
.cms-rich-content td,
.content-publication-body th,
.content-publication-body td {
    padding: 0.75rem;
    border: 1px solid var(--line);
}

.cms-taxonomy-checks,
.subscription-preference-grid {
    display: grid;
    gap: 0.55rem;
    max-height: 300px;
    padding: 0.8rem;
    overflow: auto;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
}

.subscription-preference-grid {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px, 1fr)
        );
    max-height: none;
}

.cms-taxonomy-checks .form-check,
.subscription-preference-grid .form-check {
    margin: 0;
    padding: 0.6rem 0.65rem 0.6rem 2rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.55rem;
}

.cms-revision-item {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.65rem;
}

.cms-revision-item strong,
.cms-revision-item small {
    display: block;
}

.cms-revision-item small {
    color: var(--muted);
}

.cms-page-card {
    display: flex;
    flex-direction: column;
}

.cms-page-card-preview {
    display: grid;
    height: 180px;
    overflow: hidden;
    place-items: center;
    color: var(--green-700);
    background:
        linear-gradient(
            135deg,
            var(--green-100),
            #fff
        );
    border-radius: 0.9rem;
    font-size: 3.2rem;
}

.cms-page-card-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cms-section-editor-card {
    padding: 1.2rem;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 5px solid var(--gold);
    border-radius: 1rem;
    box-shadow:
        0 12px 30px
        rgba(11, 61, 46, 0.07);
}

.cms-banner-preview {
    position: relative;
    height: 250px;
    overflow: hidden;
    color: var(--banner-text, #fff);
    background: var(--green-900);
    border-radius: 1rem;
}

.cms-banner-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position:
        var(--image-x, 50%)
        var(--image-y, 50%);
    transform:
        scale(
            var(--image-zoom, 1)
        );
    transform-origin:
        var(--image-x, 50%)
        var(--image-y, 50%);
}

.cms-banner-preview::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        rgba(
            8,
            45,
            34,
            var(--banner-overlay, 0.45)
        );
}

.cms-banner-preview-copy {
    position: absolute;
    z-index: 2;
    right: 1.3rem;
    bottom: 1.2rem;
    left: 1.3rem;
}

.cms-banner-preview-copy h2 {
    margin: 0.3rem 0;
    color: inherit;
    font-family: Georgia, serif;
}

.cms-media-preview {
    display: grid;
    height: 235px;
    overflow: hidden;
    place-items: center;
    color: var(--green-700);
    background: var(--green-100);
    border-radius: 0.9rem;
    font-size: 4rem;
}

.cms-media-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position:
        var(--image-x, 50%)
        var(--image-y, 50%);
    transform:
        scale(
            var(--image-zoom, 1)
        );
    transition:
        object-position 0.15s ease,
        transform 0.15s ease;
}

.library-admin-card {
    display: flex;
    flex-direction: column;
}

.library-admin-cover {
    position: relative;
    display: grid;
    height: 260px;
    overflow: hidden;
    place-items: center;
    color: var(--green-700);
    background:
        linear-gradient(
            135deg,
            var(--green-100),
            #fdfaf2
        );
    border-radius: 0.9rem;
    font-size: 4rem;
}

.library-admin-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.library-admin-cover > span {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    padding: 0.4rem 0.65rem;
    color: var(--green-950);
    background: var(--gold);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

/* Scheduled homepage carousel */

.homepage-banner-carousel {
    position: relative;
    background: var(--green-950);
}

.homepage-banner-carousel .carousel-item {
    position: relative;
    min-height: clamp(540px, 72vh, 790px);
    color: var(--banner-text, #fff);
}

.homepage-banner-carousel picture,
.homepage-banner-carousel picture img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.homepage-banner-carousel picture img {
    object-fit: cover;
    object-position:
        var(--image-x, 50%)
        var(--image-y, 50%);
    transform:
        scale(
            var(--image-zoom, 1)
        );
    transform-origin:
        var(--image-x, 50%)
        var(--image-y, 50%);
}

.homepage-banner-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(
                6,
                38,
                28,
                calc(
                    var(
                        --banner-overlay,
                        0.45
                    ) + 0.18
                )
            ),
            rgba(
                6,
                38,
                28,
                var(
                    --banner-overlay,
                    0.45
                )
            ),
            rgba(
                6,
                38,
                28,
                calc(
                    var(
                        --banner-overlay,
                        0.45
                    ) - 0.12
                )
            )
        );
}

.homepage-banner-copy {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: clamp(540px, 72vh, 790px);
    align-items: center;
}

.homepage-banner-copy > div {
    width: 100%;
}

.homepage-banner-copy span {
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.homepage-banner-copy h1 {
    max-width: 900px;
    margin: 0.8rem 0 1rem;
    color: inherit;
    font-family: Georgia, serif;
    font-size: clamp(2.6rem, 6vw, 5.6rem);
    line-height: 1.04;
}

.homepage-banner-copy p {
    max-width: 760px;
    margin-bottom: 1.6rem;
}

.homepage-banner-copy.text-center h1,
.homepage-banner-copy.text-center p {
    margin-right: auto;
    margin-left: auto;
}

.homepage-banner-copy.text-right h1,
.homepage-banner-copy.text-right p {
    margin-left: auto;
}

.content-card-image {
    display: block;
    height: 210px;
    overflow: hidden;
    background: var(--green-100);
}

.content-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position:
        var(--image-x, 50%)
        var(--image-y, 50%);
    transform:
        scale(
            var(--image-zoom, 1)
        );
}

.home-library-card {
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow:
        0 12px 35px
        rgba(11, 61, 46, 0.08);
}

.home-library-card h3 a {
    color: var(--green-950);
    text-decoration: none;
}

/* Public Knowledge Hub */

.knowledge-hub-hero,
.library-hero {
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(200, 162, 78, 0.22),
            transparent 24%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(37, 127, 94, 0.2),
            transparent 23%
        ),
        linear-gradient(
            135deg,
            #f7fbf8,
            #eaf4ee
        );
}

.knowledge-search-form,
.site-wide-search-form {
    display: grid;
    grid-template-columns: 1fr minmax(190px, 290px) auto;
    gap: 0.8rem;
    max-width: 1150px;
    margin-top: 2rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow:
        0 18px 45px
        rgba(11, 61, 46, 0.1);
}

.knowledge-featured-card {
    position: relative;
    height: 100%;
    min-height: 450px;
    overflow: hidden;
    color: #fff;
    background: var(--green-950);
    border-radius: 1.2rem;
    box-shadow:
        0 18px 50px
        rgba(11, 61, 46, 0.15);
}

.knowledge-featured-card.large {
    min-height: 560px;
}

.knowledge-card-media {
    position: absolute;
    inset: 0;
}

.knowledge-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position:
        var(--image-x, 50%)
        var(--image-y, 50%);
    transform:
        scale(
            var(--image-zoom, 1)
        );
}

.knowledge-featured-card::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(
            180deg,
            transparent 18%,
            rgba(5, 31, 23, 0.94)
        );
}

.knowledge-featured-copy {
    position: absolute;
    z-index: 2;
    right: 1.5rem;
    bottom: 1.5rem;
    left: 1.5rem;
}

.knowledge-featured-copy > span {
    color: var(--gold);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.knowledge-featured-copy h2 {
    color: #fff;
    font-family: Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.8rem);
}

.knowledge-post-card,
.library-public-card,
.library-featured-card {
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1.05rem;
    box-shadow:
        0 12px 35px
        rgba(11, 61, 46, 0.08);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.knowledge-post-card:hover,
.library-public-card:hover,
.library-featured-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 22px 50px
        rgba(11, 61, 46, 0.13);
}

.knowledge-post-media,
.library-cover-frame {
    position: relative;
    display: block;
    height: 230px;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            var(--green-100),
            #fdf9ed
        );
}

.library-cover-frame {
    height: 310px;
}

.knowledge-post-media img,
.library-cover-frame img {
    width: 100%;
    height: 100%;
    object-fit: var(--image-fit, cover);
    object-position:
        var(--image-x, 50%)
        var(--image-y, 50%);
    transform:
        scale(
            var(--image-zoom, 1)
        );
}

.knowledge-post-media > span,
.library-cover-frame > span {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    padding: 0.4rem 0.6rem;
    color: var(--green-950);
    background: var(--gold);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
}

.knowledge-post-body,
.library-public-body {
    padding: 1.25rem;
}

.knowledge-post-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
    font-size: 0.76rem;
}

.knowledge-post-meta span {
    color: var(--gold-dark);
    font-weight: 800;
    letter-spacing: 0.08em;
}

.knowledge-post-body h2,
.library-public-body h2 {
    margin: 0.8rem 0 0.55rem;
    font-family: Georgia, serif;
    font-size: 1.42rem;
}

.knowledge-post-body h2 a,
.library-public-body h2 a {
    color: var(--green-950);
    text-decoration: none;
}

.knowledge-post-body p,
.library-public-body p {
    color: #59635e;
}

.knowledge-category-line {
    display: block;
    min-height: 32px;
    color: var(--muted);
}

.knowledge-post-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line);
}

.knowledge-post-footer small {
    color: var(--muted);
}

.knowledge-post-footer a {
    color: var(--green-700);
    font-weight: 800;
    text-decoration: none;
}

.knowledge-filter-list {
    display: grid;
    gap: 0.4rem;
}

.knowledge-filter-list a {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0.75rem;
    color: #34443b;
    background: var(--cream);
    border: 1px solid transparent;
    border-radius: 0.6rem;
    text-decoration: none;
}

.knowledge-filter-list a:hover {
    color: var(--green-900);
    background: var(--green-100);
    border-color: rgba(11, 61, 46, 0.12);
}

.knowledge-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.knowledge-tag-cloud a {
    display: inline-flex;
    gap: 0.4rem;
    padding: 0.45rem 0.65rem;
    color: var(--green-900);
    background: var(--green-100);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.knowledge-tag-cloud small {
    color: var(--muted);
}

/* Publication detail */

.content-publication-header {
    padding:
        clamp(3.5rem, 8vw, 7rem)
        0
        3.5rem;
    text-align: center;
    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(200, 162, 78, 0.2),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #f5faf7,
            #e8f3ed
        );
}

.content-publication-taxonomy {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
}

.content-publication-taxonomy span,
.content-publication-taxonomy a {
    padding: 0.4rem 0.65rem;
    color: var(--green-900);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
}

.content-publication-header h1 {
    max-width: 1050px;
    margin: 1.2rem auto 0.8rem;
    color: var(--green-950);
    font-family: Georgia, serif;
    font-size: clamp(2.35rem, 5.5vw, 5rem);
    line-height: 1.08;
}

.content-publication-header .lead {
    max-width: 820px;
    margin-right: auto;
    margin-left: auto;
    color: #51615a;
}

.content-publication-meta,
.library-item-byline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem 1.2rem;
    margin-top: 1.2rem;
    color: var(--muted);
}

.content-publication-meta span,
.library-item-byline span {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
}

.content-featured-media {
    max-width: 1260px;
    margin: -1.5rem auto 3.5rem;
    overflow: hidden;
    background: var(--green-100);
    border-radius: 1.2rem;
    box-shadow:
        0 20px 60px
        rgba(11, 61, 46, 0.15);
}

.content-featured-media img {
    display: block;
    width: 100%;
    max-height: 680px;
    object-fit: cover;
    object-position:
        var(--image-x, 50%)
        var(--image-y, 50%);
    transform:
        scale(
            var(--image-zoom, 1)
        );
}

.content-featured-media small {
    display: block;
    padding: 0.7rem 1rem;
    color: var(--muted);
    background: #fff;
}

.content-publication-body {
    color: #314039;
    font-size: 1.06rem;
    line-height: 1.85;
}

.content-publication-body h2,
.content-publication-body h3,
.content-publication-body h4 {
    margin-top: 1.7em;
    color: var(--green-950);
    font-family: Georgia, serif;
}

.content-publication-body blockquote,
.cms-rich-content blockquote {
    margin: 1.5rem 0;
    padding: 1.1rem 1.3rem;
    color: #34443b;
    background: var(--cream);
    border-left: 5px solid var(--gold);
    border-radius: 0.55rem;
}

.content-intro {
    color: var(--green-900);
    font-family: Georgia, serif;
    font-size: 1.32rem;
    line-height: 1.65;
}

.content-source-box {
    display: flex;
    gap: 0.7rem;
    margin-top: 2rem;
    padding: 1rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
}

.content-tag-row,
.content-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    margin-top: 2rem;
    padding: 1rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.content-tag-row a,
.content-share-row a,
.content-share-row button {
    padding: 0.45rem 0.7rem;
    color: var(--green-900);
    background: var(--green-100);
    border: 0;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}

.public-comment {
    padding: 1rem 1.1rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.8rem;
}

.public-comment > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.public-comment small {
    color: var(--muted);
}

.public-comment p {
    margin: 0.75rem 0 0;
}

.related-content-card {
    display: block;
    padding: 0.85rem;
    color: var(--green-950);
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.7rem;
    text-decoration: none;
}

.related-content-card strong,
.related-content-card small {
    display: block;
}

.related-content-card small {
    margin-top: 0.25rem;
    color: var(--muted);
}

/* Page builder public rendering */

.cms-section {
    position: relative;
    padding: clamp(3.5rem, 7vw, 6.5rem) 0;
}

.cms-section.bg-soft {
    background: var(--cream);
}

.cms-section.bg-white {
    background: #fff;
}

.cms-section.bg-dark-section {
    color: #e8f2ed;
    background: var(--green-950);
}

.cms-section.bg-dark-section h1,
.cms-section.bg-dark-section h2,
.cms-section.bg-dark-section h3 {
    color: #fff;
}

.cms-section.bg-gold-section {
    color: var(--green-950);
    background:
        linear-gradient(
            135deg,
            #e0bf69,
            var(--gold)
        );
}

.cms-section-hero {
    min-height: clamp(500px, 70vh, 760px);
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background: var(--green-950);
}

.cms-section-background {
    position: absolute;
    inset: 0;
}

.cms-section-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cms-section-background::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(
            90deg,
            rgba(5, 36, 26, 0.92),
            rgba(5, 36, 26, 0.48)
        );
}

.cms-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 830px;
}

.cms-hero-copy > span {
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.cms-hero-copy h1 {
    margin: 0.8rem 0 1rem;
    color: #fff;
    font-family: Georgia, serif;
    font-size: clamp(2.6rem, 6vw, 5.5rem);
}

.cms-image-frame {
    height: 100%;
    min-height: 390px;
    overflow: hidden;
    background: var(--green-100);
    border-radius: 1.2rem;
    box-shadow:
        0 18px 50px
        rgba(11, 61, 46, 0.12);
}

.cms-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cms-rich-panel {
    max-width: 1050px;
    margin: auto;
}

.cms-rich-panel > h2,
.cms-section-image_text h2,
.cms-cta-panel h2 {
    color: var(--green-950);
    font-family: Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
}

.cms-builder-card {
    height: 100%;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow:
        0 12px 35px
        rgba(11, 61, 46, 0.07);
}

.cms-builder-card > i {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    color: #fff;
    background: var(--green-700);
    border-radius: 50%;
    font-size: 1.25rem;
}

.cms-builder-card h3 {
    margin-top: 1rem;
    color: var(--green-950);
}

.cms-builder-card a {
    color: var(--green-700);
    font-weight: 800;
    text-decoration: none;
}

.cms-cta-panel {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: center;
    padding: clamp(1.5rem, 5vw, 3.5rem);
    background:
        linear-gradient(
            135deg,
            var(--green-100),
            #fff9e9
        );
    border: 1px solid var(--line);
    border-radius: 1.2rem;
}

.cms-gallery-item {
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
}

.cms-gallery-item img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.cms-gallery-item figcaption {
    padding: 0.7rem;
    color: var(--muted);
}

/* Digital library public */

.library-subtitle {
    color: var(--muted);
    font-style: italic;
}

.library-item-hero {
    padding: clamp(3rem, 7vw, 6rem) 0;
    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(200, 162, 78, 0.25),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #f4faf6,
            #e9f3ed
        );
}

.library-item-cover {
    height: 440px;
    overflow: hidden;
    background: var(--green-100);
    border: 8px solid #fff;
    border-radius: 1rem;
    box-shadow:
        0 22px 60px
        rgba(11, 61, 46, 0.17);
}

.library-item-cover img {
    width: 100%;
    height: 100%;
    object-fit: var(--image-fit, cover);
    object-position:
        var(--image-x, 50%)
        var(--image-y, 50%);
    transform:
        scale(
            var(--image-zoom, 1)
        );
}

.library-item-hero h1 {
    color: var(--green-950);
    font-family: Georgia, serif;
    font-size: clamp(2.4rem, 5vw, 4.8rem);
}

.library-item-byline {
    justify-content: flex-start;
}

.library-pdf-reader {
    width: 100%;
    height: min(80vh, 960px);
    border: 1px solid var(--line);
    border-radius: 0.8rem;
}

/* Search */

.site-wide-search-form {
    max-width: 1200px;
}

.site-search-results {
    display: grid;
    gap: 1rem;
}

.site-search-result-card {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1.2rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    box-shadow:
        0 10px 30px
        rgba(11, 61, 46, 0.06);
}

.site-search-result-icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    color: #fff;
    background: var(--green-700);
    border-radius: 50%;
    font-size: 1.3rem;
}

.site-search-result-card > div:last-child > span {
    color: var(--gold-dark);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.site-search-result-card h2 {
    margin: 0.4rem 0;
}

.site-search-result-card h2 a {
    color: var(--green-950);
    text-decoration: none;
}

.site-search-result-card p {
    margin-bottom: 0.45rem;
    color: var(--muted);
}

/* Shared pagination */

.pagination .page-link {
    color: var(--green-900);
    border-color: var(--line);
}

.pagination .page-item.active .page-link {
    color: #fff;
    background: var(--green-700);
    border-color: var(--green-700);
}

.pagination .page-link:hover {
    color: #fff;
    background: var(--green-900);
}

/* Responsive Phase 5 */

@media (max-width: 1199.98px) {
    .homepage-banner-copy h1 {
        max-width: 760px;
    }

    .library-cover-frame {
        height: 280px;
    }
}

@media (max-width: 991.98px) {
    .knowledge-search-form,
    .site-wide-search-form {
        grid-template-columns: 1fr;
    }

    .cms-cta-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .library-item-cover {
        max-width: 330px;
        height: 430px;
        margin: auto;
    }
}

@media (max-width: 767.98px) {
    .footer-subscription-form {
        grid-template-columns: 1fr;
    }

    .homepage-banner-carousel .carousel-item,
    .homepage-banner-copy {
        min-height: 610px;
    }

    .homepage-banner-copy {
        align-items: flex-end;
        padding-bottom: 5rem;
    }

    .knowledge-featured-card,
    .knowledge-featured-card.large {
        min-height: 430px;
    }

    .knowledge-post-media {
        height: 220px;
    }

    .library-cover-frame {
        height: 350px;
    }

    .content-publication-header {
        padding-top: 3rem;
    }

    .content-featured-media {
        margin-right: 1rem;
        margin-left: 1rem;
    }

    .site-search-result-card {
        grid-template-columns: 1fr;
    }

    .cms-gallery-item img {
        height: 210px;
    }

    .cms-editor-surface {
        min-height: 300px;
    }
}


/* Phase 6 accessibility, consent and security UI */
.skip-link{position:fixed;z-index:99999;top:.75rem;left:.75rem;padding:.7rem 1rem;color:#fff;background:#073e2d;border-radius:.5rem;transform:translateY(-180%);transition:transform .15s ease}.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:3px solid #c8a24e;outline-offset:3px}
.cookie-consent-banner{position:fixed;z-index:1055;right:1rem;bottom:1rem;left:1rem;max-width:1180px;margin:auto;padding:1rem 1.1rem;color:#eef7f2;background:rgba(6,46,34,.98);border:1px solid rgba(255,255,255,.18);border-radius:1rem;box-shadow:0 24px 60px rgba(0,0,0,.28)}.cookie-consent-banner form{display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:center}.cookie-consent-banner p{margin:.25rem 0;color:#d8e8df}.cookie-consent-banner a{color:#f0ca68}.cookie-choice-row{display:flex;flex-wrap:wrap;gap:.8rem}.cookie-choice-row .form-check{margin:0}.legal-checkout-consent{padding:1rem 1rem 1rem 2.2rem;background:#f8f5e9;border:1px solid #e3d4a9;border-radius:.75rem}.permission-option{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:start;padding:.8rem;background:#f8fbf9;border:1px solid var(--line);border-radius:.7rem}.permission-option small{display:block;color:var(--muted)}.permission-option em{padding:.25rem .45rem;border-radius:999px;font-size:.7rem;font-style:normal;font-weight:800}.risk-critical{color:#8a1621;background:#fde5e8}.risk-high{color:#8a4a00;background:#fff0d3}.risk-medium{color:#075737;background:#dff5ea}.risk-low{color:#39516e;background:#e7eff8}.integration-url-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.7rem}.integration-url-grid>div{padding:.75rem;background:#f5f8f6;border:1px solid var(--line);border-radius:.65rem}.integration-url-grid code{display:block;overflow-wrap:anywhere}.readiness-check{display:flex;gap:1rem}.readiness-check>i{font-size:1.8rem;color:var(--green-700)}.launch-score{display:inline-grid;place-items:center;padding:.8rem 1rem;border-radius:999px;font-weight:900}.launch-score.ready{color:#075737;background:#dff5ea}.launch-score.not-ready{color:#8a4a00;background:#fff0d3}
@media(max-width:767.98px){.cookie-consent-banner form{grid-template-columns:1fr}.cookie-consent-banner{max-height:80vh;overflow:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

.admin-nav-heading{margin:1rem .85rem .35rem;color:var(--gold);font-size:.65rem;font-weight:900;letter-spacing:.16em}


/* =========================================================
   PHASE 7 — MOBILE, ANALYTICS, APPOINTMENTS,
   LOCALISATION & INTELLIGENT OPERATIONS
========================================================= */

html[dir="rtl"] body {
    text-align: right;
}

html[dir="rtl"] .operations-dl,
html[dir="rtl"] .knowledge-post-footer,
html[dir="rtl"] .content-publication-meta {
    direction: rtl;
}

.pwa-standalone .site-header {
    padding-top: env(safe-area-inset-top);
}

.pwa-standalone .site-footer {
    padding-bottom: env(safe-area-inset-bottom);
}

.footer-mobile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.notification-option,
.appointment-consent-box {
    display: block;
    margin: 0 0 0.75rem;
    padding: 0.85rem 0.9rem 0.85rem 2.35rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.8rem;
}

.appointment-request-hero {
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(200, 162, 78, 0.26),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #f5faf7,
            #e6f2eb
        );
}

.appointment-slot-list {
    display: grid;
    gap: 0.5rem;
}

.appointment-slot-list span {
    padding: 0.65rem 0.75rem;
    color: var(--green-900);
    background: var(--green-100);
    border-radius: 0.65rem;
    font-size: 0.86rem;
}

.appointment-window-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 0.8rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
}

.appointment-window-row strong,
.appointment-window-row small {
    display: block;
}

.appointment-window-row small {
    color: var(--muted);
}

.appointment-request-card {
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 5px solid var(--gold);
    border-radius: 0.9rem;
    box-shadow:
        0 10px 30px
        rgba(11, 61, 46, 0.06);
}

/* Executive analytics */

.analytics-kpi-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px, 1fr)
        );
    gap: 1rem;
}

.analytics-kpi-card {
    display: grid;
    min-height: 155px;
    padding: 1.15rem;
    align-content: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow:
        0 12px 35px
        rgba(11, 61, 46, 0.07);
}

.analytics-kpi-card i {
    display: grid;
    width: 46px;
    height: 46px;
    margin-bottom: 0.85rem;
    place-items: center;
    color: #fff;
    background: var(--green-700);
    border-radius: 50%;
    font-size: 1.2rem;
}

.analytics-kpi-card span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.analytics-kpi-card strong {
    margin-top: 0.25rem;
    color: var(--green-950);
    font-family: Georgia, serif;
    font-size: 1.8rem;
}

.analytics-chart-scroll {
    overflow-x: auto;
    padding: 0.5rem 0 0;
}

.analytics-bars {
    display: flex;
    min-width: 760px;
    height: 300px;
    gap: 0.45rem;
    align-items: end;
    padding: 1rem 0.25rem 0;
    border-bottom: 1px solid var(--line);
    background:
        repeating-linear-gradient(
            to top,
            transparent 0,
            transparent 59px,
            rgba(11, 61, 46, 0.07) 60px
        );
}

.analytics-bar-day {
    display: grid;
    min-width: 38px;
    height: 100%;
    flex: 1 0 38px;
    grid-template-rows: 1fr auto;
    gap: 0.5rem;
    align-items: end;
    text-align: center;
}

.analytics-bar-group {
    display: flex;
    height: 100%;
    gap: 3px;
    align-items: end;
    justify-content: center;
}

.analytics-bar {
    width: 8px;
    min-height: 2px;
    height: var(--bar-height, 0%);
    border-radius: 999px 999px 0 0;
}

.analytics-bar.orders,
.analytics-legend i.orders {
    background: var(--green-700);
}

.analytics-bar.visitors,
.analytics-legend i.visitors {
    background: #3f88c5;
}

.analytics-bar.revenue,
.analytics-legend i.revenue {
    background: var(--gold);
}

.analytics-bar-day small {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--muted);
    font-size: 0.67rem;
}

.analytics-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.analytics-legend span {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    color: var(--muted);
    font-size: 0.8rem;
}

.analytics-legend i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.analytics-ranking {
    display: grid;
    gap: 0.7rem;
}

.analytics-ranking > div {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.7rem;
}

.analytics-ranking > div > span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #fff;
    background: var(--green-700);
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 800;
}

.analytics-ranking strong,
.analytics-ranking small {
    display: block;
}

.analytics-ranking small {
    margin-top: 0.2rem;
    color: var(--muted);
}

/* Translation and human review */

.translation-locale-card {
    padding: 0.9rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.8rem;
}

.cms-rich-content[lang="bn"],
html[lang="bn"] .cms-rich-content,
html[lang="bn"] .content-publication-body {
    line-height: 1.9;
}

/* Multi-warehouse inventory */

.inventory-card {
    position: relative;
    overflow: hidden;
}

.inventory-card::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
    content: "";
    background: var(--green-700);
}

.inventory-card.state-reorder::before {
    background: var(--gold);
}

.inventory-card.state-critical::before,
.inventory-card.state-out_of_stock::before {
    background: #b53b3b;
}

.inventory-quantity {
    color: var(--green-950);
    font-family: Georgia, serif;
    font-size: 1.7rem;
}

.inventory-card.state-critical .inventory-quantity,
.inventory-card.state-out_of_stock .inventory-quantity {
    color: #9f2626;
}

@media (max-width: 991.98px) {
    .analytics-kpi-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .analytics-kpi-grid {
        grid-template-columns: 1fr;
    }

    .appointment-window-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-mobile-actions .btn {
        width: 100%;
    }

    .analytics-bar-day {
        min-width: 34px;
        flex-basis: 34px;
    }
}


.admin-nav-disabled {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    margin: 0.25rem 0.75rem 0.75rem;
    padding: 0.75rem 0.85rem;
    color: #f7d7d7;
    background: rgba(155, 38, 38, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.65rem;
    font-size: 0.82rem;
}

/* PHASE 8 — IMPORTS & DYNAMIC DELIVERY */
.import-center-card {
    display: grid;
    align-content: start;
    gap: .75rem;
}
.import-center-card > i {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    color: #fff;
    background: var(--green-700);
    border-radius: 50%;
    font-size: 1.35rem;
}
.import-center-card > span {
    color: var(--muted);
    font-weight: 700;
}
.import-center-card > strong {
    color: var(--green-950);
    font-family: Georgia, serif;
    font-size: 2rem;
}
.import-source-option {
    display: inline-flex;
    margin-right: 1rem;
    gap: .4rem;
}
.import-error-log {
    max-height: 340px;
    overflow: auto;
    padding: 1rem;
    background: #1f2925;
    color: #eaf7ef;
    border-radius: .75rem;
    white-space: pre-wrap;
}
.dynamic-location-result {
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: var(--cream);
}

/* =========================================================
   PHASE 8.1 — BANNER CAMPAIGNS & GLOBAL EMAIL BRANDING
========================================================= */

.banner-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.banner-text-lines {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 1.2rem;
}

.banner-text-lines p {
    margin: 0;
    color: inherit;
    font-size: 0.96rem;
}

.banner-button-editor {
    padding: 1rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.85rem;
}

.banner-day-selector {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.55rem;
}

.banner-day-selector .form-check {
    margin: 0;
    padding: 0.65rem 0.7rem 0.65rem 2rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.65rem;
}

.banner-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.banner-summary-grid > div {
    padding: 0.75rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.65rem;
}

.banner-summary-grid span,
.banner-summary-grid strong {
    display: block;
}

.banner-summary-grid span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.banner-summary-grid strong {
    margin-top: 0.2rem;
    color: var(--green-950);
    font-size: 0.86rem;
}

.cms-banner-preview {
    background: var(
        --banner-background,
        var(--green-900)
    );
}

.banner-preview-short_ad {
    height: 190px;
}

.banner-preview-announcement {
    height: 115px;
}

.banner-preview-announcement
.cms-banner-preview-copy h2 {
    font-size: 1.15rem;
}

.banner-preview-card {
    max-width: 620px;
}

.homepage-banner-carousel .carousel-item {
    min-height: var(
        --banner-height-desktop,
        680px
    );
    background: var(
        --banner-background,
        var(--green-950)
    );
}

.homepage-banner-copy {
    min-height: var(
        --banner-height-desktop,
        680px
    );
}

.homepage-short-ad-section {
    padding: 1.25rem 0;
    background: #f7faf8;
}

.homepage-short-ad {
    position: relative;
    display: flex;
    min-height: var(
        --banner-height-desktop,
        210px
    );
    overflow: hidden;
    align-items: center;
    color: var(--banner-text, #fff);
    background: var(
        --banner-background,
        var(--green-900)
    );
    border-radius: 1.15rem;
    box-shadow:
        0 18px 50px
        rgba(11, 61, 46, 0.13);
}

.homepage-short-ad > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.homepage-short-ad-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(
                6,
                38,
                28,
                calc(
                    var(--banner-overlay, 0.35)
                    + 0.25
                )
            ),
            rgba(
                6,
                38,
                28,
                var(--banner-overlay, 0.35)
            )
        );
}

.homepage-short-ad-copy {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 1.6rem 2rem;
}

.homepage-short-ad.text-center
.homepage-short-ad-copy {
    text-align: center;
}

.homepage-short-ad.text-right
.homepage-short-ad-copy {
    text-align: right;
}

.homepage-short-ad-copy span {
    color: var(--gold);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.homepage-short-ad-copy h2 {
    max-width: 900px;
    margin: 0.45rem 0;
    color: inherit;
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
}

.homepage-short-ad-copy p {
    max-width: 850px;
    margin-bottom: 0.75rem;
}

.homepage-short-ad.text-center
.homepage-short-ad-copy h2,
.homepage-short-ad.text-center
.homepage-short-ad-copy p {
    margin-right: auto;
    margin-left: auto;
}

.homepage-short-ad.text-right
.homepage-short-ad-copy h2,
.homepage-short-ad.text-right
.homepage-short-ad-copy p {
    margin-left: auto;
}

.site-announcement-carousel {
    color: var(--banner-text, #fff);
    background: var(
        --banner-background,
        var(--green-900)
    );
}

.site-announcement-carousel .carousel-item {
    color: var(--banner-text, #fff);
    background: var(
        --banner-background,
        var(--green-900)
    );
}

.site-announcement-content {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.45rem 0;
    text-align: center;
}

.site-announcement-content > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    justify-content: center;
}

.site-announcement-content strong {
    color: var(--gold);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}

.site-announcement-content small {
    opacity: 0.86;
}

.site-announcement-content
.banner-cta-group {
    flex: 0 0 auto;
}

.banner-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.banner-calendar-heading {
    padding: 0.65rem;
    color: #fff;
    background: var(--green-900);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    text-align: center;
    font-size: 0.78rem;
    font-weight: 800;
}

.banner-calendar-day {
    min-height: 135px;
    padding: 0.55rem;
    background: #fff;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.banner-calendar-day.is-outside {
    background: #f5f6f5;
    color: #9ca7a1;
}

.banner-calendar-day.is-today {
    box-shadow:
        inset 0 0 0 3px
        rgba(200, 162, 78, 0.75);
}

.banner-calendar-events {
    display: grid;
    gap: 0.3rem;
    margin-top: 0.45rem;
}

.banner-calendar-event {
    display: block;
    overflow: hidden;
    padding: 0.3rem 0.4rem;
    color: #fff;
    background: var(--green-700);
    border-radius: 0.35rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.67rem;
}

.banner-calendar-event.type-short_ad {
    color: var(--green-950);
    background: var(--gold);
}

.banner-calendar-event.type-announcement {
    background: #3f88c5;
}

.banner-calendar-event.type-card {
    background: #6d5a9f;
}

.banner-status-live {
    color: #0c5a32;
    background: #dff4e7;
}

.banner-status-scheduled {
    color: #664b06;
    background: #fff1c7;
}

.banner-status-expired,
.banner-status-inactive {
    color: #7c2424;
    background: #f9dddd;
}

.banner-status-outside_window {
    color: #285680;
    background: #dcecf8;
}

.email-preview-shell {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1rem;
}

.email-preview-shell img {
    width: 240px;
    max-width: 100%;
    margin-bottom: 1.2rem;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
}

.email-preview-links {
    display: grid;
    gap: 0.35rem;
    color: var(--green-700);
    font-size: 0.9rem;
}

@media (max-width: 767.98px) {
    .homepage-banner-carousel .carousel-item,
    .homepage-banner-copy {
        min-height: var(
            --banner-height-mobile,
            430px
        );
    }

    .homepage-short-ad {
        min-height: var(
            --banner-height-mobile,
            190px
        );
    }

    .homepage-short-ad-copy {
        padding: 1.25rem;
    }

    .site-announcement-content {
        align-items: stretch;
        flex-direction: column;
        gap: 0.45rem;
        padding: 0.65rem 0;
    }

    .site-announcement-content
    .banner-cta-group {
        justify-content: center;
    }

    .banner-calendar {
        min-width: 860px;
    }
}

.banner-dismiss-button {
    position: absolute;
    z-index: 8;
    top: 0.75rem;
    right: 0.75rem;
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    cursor: pointer;
}

.banner-dismiss-button:hover,
.banner-dismiss-button:focus-visible {
    color: #fff;
    background: rgba(0, 0, 0, 0.68);
}

.site-announcement-content {
    position: relative;
}

.site-announcement-content
.banner-dismiss-button {
    position: static;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
}

.page-campaign-banner-section {
    padding: 1.25rem 0;
    background: #f7faf8;
}

.page-campaign-banner {
    position: relative;
    display: flex;
    min-height: var(
        --banner-height-desktop,
        270px
    );
    overflow: hidden;
    align-items: center;
    color: var(--banner-text, #fff);
    background: var(
        --banner-background,
        var(--green-900)
    );
    border-radius: 1.15rem;
    box-shadow:
        0 18px 50px
        rgba(11, 61, 46, 0.13);
}

.page-campaign-banner > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-campaign-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(
        5,
        35,
        25,
        var(--banner-overlay, 0.40)
    );
}

.page-campaign-banner-copy {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 2rem;
}

.page-campaign-banner.text-center
.page-campaign-banner-copy {
    text-align: center;
}

.page-campaign-banner.text-right
.page-campaign-banner-copy {
    text-align: right;
}

.page-campaign-banner-copy h2 {
    max-width: 900px;
    margin: 0.35rem 0 0.7rem;
    color: inherit;
    font-family: Georgia, serif;
    font-size: clamp(1.9rem, 4vw, 3.6rem);
}

.page-campaign-banner-copy p {
    max-width: 850px;
}

.page-campaign-banner.text-center
.page-campaign-banner-copy h2,
.page-campaign-banner.text-center
.page-campaign-banner-copy p {
    margin-right: auto;
    margin-left: auto;
}

.page-campaign-banner.text-right
.page-campaign-banner-copy h2,
.page-campaign-banner.text-right
.page-campaign-banner-copy p {
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .page-campaign-banner {
        min-height: var(
            --banner-height-mobile,
            220px
        );
    }

    .page-campaign-banner-copy {
        padding: 1.35rem;
    }
}

/* =========================================================
   PHASE 8.2 — DOCTOR PRICING, MANUAL PAYMENTS,
   MEDICINE IMPORT & AUTOMATIC BANGLA TRANSLATION
========================================================= */

.admin-nav-highlight {
    color: var(--green-950) !important;
    background:
        linear-gradient(
            135deg,
            #f4d98b,
            var(--gold)
        ) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    font-weight: 800;
}

.admin-nav-highlight i {
    color: var(--green-950) !important;
}

.pricing-country-note {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 1rem;
    padding: 0.55rem 0.75rem;
    color: var(--green-950);
    background: var(--green-100);
    border: 1px solid rgba(46, 125, 50, 0.18);
    border-radius: 0.65rem;
    font-size: 0.82rem;
}

.price-login-label {
    display: inline-block;
    max-width: 180px;
    padding: 0.55rem 0.65rem;
    color: var(--green-900);
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.medicine-price-access {
    min-width: 190px;
}

.medicine-import-guide {
    border-left: 5px solid var(--gold);
}

.import-requirement-card {
    height: 100%;
    padding: 1rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.8rem;
}

.import-requirement-card strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--green-950);
}

.import-requirement-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.manual-payment-checkout {
    padding: 1rem;
    background: #f8fbf9;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
}

.manual-payment-account-details {
    display: grid;
    gap: 0.75rem;
}

.manual-payment-account-card,
.manual-payment-status-card {
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 5px solid var(--gold);
    border-radius: 0.85rem;
    box-shadow:
        0 10px 28px
        rgba(11, 61, 46, 0.07);
}

.manual-account-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(310px, 1fr));
    gap: 1rem;
}

.manual-account-card {
    position: relative;
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    box-shadow:
        0 10px 30px
        rgba(11, 61, 46, 0.06);
}

.manual-account-card.is-inactive {
    opacity: 0.68;
    background: #f6f6f6;
}

.manual-account-card-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.manual-payment-status-card {
    margin: 1rem 0;
}

.auto-translation-notice {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    margin: 0 0 1rem;
    padding: 0.75rem 0.85rem;
    color: #604a08;
    background: #fff4cf;
    border: 1px solid #eed68b;
    border-radius: 0.75rem;
    font-size: 0.84rem;
}

.auto-translation-notice i {
    margin-top: 0.1rem;
    color: #9a7310;
}

.auto-translation-check {
    display: block;
    height: 100%;
    padding: 0.85rem 0.85rem 0.85rem 2.25rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
}

.translation-cell {
    max-width: 480px;
    white-space: normal;
    word-break: break-word;
}

.manual-payment-proof {
    display: block;
    width: min(100%, 860px);
    max-height: 720px;
    margin: 1rem auto;
    object-fit: contain;
    background: #f6f8f7;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
}

.currency-rate-card {
    padding: 1rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.8rem;
}

.payment-method-card.is-unavailable {
    display: none;
}

@media (max-width: 767.98px) {
    .medicine-price-access {
        min-width: 100%;
        text-align: left !important;
    }

    .price-login-label {
        max-width: none;
        width: 100%;
    }

    .manual-account-grid {
        grid-template-columns: 1fr;
    }

    .manual-account-card-header {
        flex-direction: column;
    }
}

/* =========================================================
   PHASE 8.3 — LANGUAGE, MEDICINE VISUALS & FORM-FIRST COMBINATION
========================================================= */

.admin-language-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.9rem;
    padding: 0 0.75rem;
}

.admin-language-switcher a,
.admin-language-switcher button {
    padding: 0.35rem 0.55rem;
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.admin-language-switcher a.active,
.admin-language-switcher a:hover,
.admin-language-switcher button.active,
.admin-language-switcher button:hover,
.admin-language-switcher button:focus-visible {
    color: var(--green-950);
    background: var(--gold);
}

.medicine-visual {
    position: relative;
    width: 170px;
    max-width: 100%;
    overflow: hidden;
    background: var(--cream);
    border: 1px solid rgba(200, 162, 78, 0.32);
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgba(11, 61, 46, 0.1);
}

.medicine-visual img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.medicine-image-name {
    position: absolute;
    z-index: 2;
    right: 11%;
    bottom: 31.5%;
    left: 11%;
    display: -webkit-box;
    overflow: hidden;
    min-height: 2.2em;
    padding: 0.2rem 0.3rem;
    align-items: center;
    justify-content: center;
    color: var(--green-950);
    background: rgba(255, 255, 252, 0.92);
    border: 1px solid rgba(200, 162, 78, 0.55);
    border-radius: 0.35rem;
    text-align: center;
    text-transform: uppercase;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: clamp(0.52rem, 1.35vw, 0.75rem);
    font-weight: 800;
    line-height: 1.05;
}

.medicine-visual-small {
    width: 72px;
    min-width: 72px;
    border-radius: 0.65rem;
}

.medicine-visual-small .medicine-image-name {
    right: 8%;
    bottom: 30%;
    left: 8%;
    min-height: 2em;
    padding: 0.1rem;
    font-size: 0.42rem;
}

.medicine-card .medicine-visual {
    width: 145px;
    margin: 0 auto 1rem;
}

.search-result-card .medicine-visual {
    flex: 0 0 auto;
}

.medicine-admin-preview {
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
}

.combination-form-first {
    border: 2px solid rgba(200, 162, 78, 0.55);
}

.combination-form-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.combination-form-option {
    cursor: pointer;
}

.combination-form-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.combination-form-option span {
    display: grid;
    min-height: 130px;
    padding: 1rem;
    place-items: center;
    align-content: center;
    color: var(--green-950);
    background: var(--cream);
    border: 2px solid var(--line);
    border-radius: 1rem;
    text-align: center;
    transition: 0.18s ease;
}

.combination-form-option i {
    color: var(--gold);
    font-size: 2rem;
}

.combination-form-option strong,
.combination-form-option small {
    display: block;
}

.combination-form-option input:checked + span {
    color: #fff;
    background: var(--green-900);
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(200, 162, 78, 0.2);
}

.combination-form-option input:checked + span small {
    color: rgba(255, 255, 255, 0.82);
}

#combinationComponentsPanel.is-locked {
    opacity: 0.55;
    filter: grayscale(0.25);
}

#combinationComponentsPanel.is-locked::before {
    content: "Select Liquid or Tablet first";
    display: block;
    margin-bottom: 0.75rem;
    padding: 0.7rem;
    color: #72560e;
    background: #fff4cf;
    border: 1px solid #ead386;
    border-radius: 0.75rem;
    text-align: center;
    font-weight: 800;
}

.footer-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.footer-social-links a {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.42rem 0.62rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.78rem;
}

.footer-social-links a:hover {
    color: var(--green-950);
    background: var(--gold);
}

@media (max-width: 767.98px) {
    .combination-form-options {
        grid-template-columns: 1fr;
    }

    .medicine-card .medicine-visual {
        width: 130px;
    }
}

/* =========================================================
   PHASE 8.4 — VISITORS ANALYSIS
========================================================= */

.visitor-privacy-note {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
}

.visitor-privacy-note > i {
    margin-top: 0.1rem;
    color: var(--green-700);
    font-size: 1.35rem;
}

.visitor-chart-scroll {
    overflow-x: auto;
    padding: 0.5rem 0 0.25rem;
}

.visitor-bar-chart {
    display: flex;
    min-width: 760px;
    min-height: 270px;
    align-items: flex-end;
    gap: 0.65rem;
    padding: 1rem 0.5rem 0.25rem;
    border-bottom: 1px solid var(--line);
}

.visitor-bar-column {
    display: grid;
    min-width: 34px;
    height: 240px;
    grid-template-rows: 1fr auto auto;
    align-items: end;
    justify-items: center;
    gap: 0.3rem;
}

.visitor-bar-column > span {
    width: 24px;
    height: max(4px, var(--visitor-height, 0%));
    align-self: end;
    background:
        linear-gradient(
            180deg,
            var(--gold),
            var(--green-700)
        );
    border-radius: 0.5rem 0.5rem 0 0;
    box-shadow:
        0 8px 20px
        rgba(11, 61, 46, 0.14);
}

.visitor-bar-column strong {
    color: var(--green-950);
    font-size: 0.72rem;
}

.visitor-bar-column small {
    color: var(--muted);
    font-size: 0.65rem;
    white-space: nowrap;
    transform: rotate(-38deg);
    transform-origin: center;
    margin-bottom: -1.1rem;
}

.visitor-hour-grid {
    display: grid;
    gap: 0.55rem;
    margin-top: 1rem;
}

.visitor-hour-grid > div {
    display: grid;
    grid-template-columns: 62px 46px 1fr;
    gap: 0.65rem;
    align-items: center;
}

.visitor-hour-grid span,
.visitor-hour-grid strong {
    font-size: 0.78rem;
}

.visitor-hour-grid i {
    display: block;
    width: var(--hour-width, 0%);
    min-width: 3px;
    height: 9px;
    background: var(--green-700);
    border-radius: 999px;
}

.visitor-ranking {
    max-height: 430px;
    overflow-y: auto;
    padding-right: 0.15rem;
}

.visitor-path-cell {
    max-width: 420px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.visitor-setting-check {
    display: flex;
    height: 100%;
    gap: 0.7rem;
    padding: 1rem;
    align-items: flex-start;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.8rem;
}

.visitor-setting-check .form-check-input {
    flex: 0 0 auto;
    margin-left: 0;
}

.visitor-setting-check .form-check-label {
    display: grid;
    gap: 0.2rem;
}

.visitor-setting-check small {
    color: var(--muted);
    font-size: 0.78rem;
}

@media (max-width: 767.98px) {
    .visitor-bar-chart {
        min-width: 620px;
    }

    .visitor-hour-grid > div {
        grid-template-columns: 58px 38px 1fr;
    }
}


/* =========================================================
   PHASE 8.5 — CAMPAIGN EDITOR, PORTRAIT VISUALS & NEWSLETTERS
========================================================= */

.banner-image-editor {
    padding: 1rem;
    background: #f8fbf9;
    border: 1px solid var(--line);
    border-radius: 1rem;
}

.banner-crop-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: var(--green-100);
    border: 1px solid var(--line);
    border-radius: 0.9rem;
}

.banner-crop-preview.mobile {
    aspect-ratio: 4 / 3;
    max-width: 430px;
}

.banner-crop-preview img,
.cms-banner-preview > img,
.homepage-banner-carousel picture img,
.homepage-short-ad > img,
.page-campaign-banner > img {
    width: 100%;
    height: 100%;
    object-fit: var(--image-fit, cover);
    object-position: var(--image-x, 50%) var(--image-y, 50%);
    transform: scale(var(--image-zoom, 1));
    transform-origin: var(--image-x, 50%) var(--image-y, 50%);
}

.banner-preview-empty {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: var(--muted);
    text-align: center;
}

.banner-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.newsletter-audience-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.newsletter-audience-option {
    position: relative;
    cursor: pointer;
}

.newsletter-audience-option input {
    position: absolute;
    opacity: 0;
}

.newsletter-audience-option span {
    display: grid;
    min-height: 105px;
    padding: 1rem;
    place-items: center;
    align-content: center;
    color: var(--green-950);
    background: var(--cream);
    border: 2px solid var(--line);
    border-radius: 0.9rem;
    text-align: center;
}

.newsletter-audience-option i {
    color: var(--gold);
    font-size: 1.6rem;
}

.newsletter-audience-option input:checked + span {
    color: #fff;
    background: var(--green-900);
    border-color: var(--gold);
}

.newsletter-audience-option input:checked + span i {
    color: var(--gold);
}

/* Medicine portrait image: 3:4 with transparent multi-line name. */
.medicine-visual {
    aspect-ratio: 3 / 4;
}

.medicine-visual img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.medicine-image-name {
    top: 59%;
    right: 15%;
    bottom: auto;
    left: 15%;
    display: flex;
    min-height: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    overflow: visible;
    color: var(--green-950);
    background: transparent;
    border: 0;
    border-radius: 0;
    transform: translateY(-50%);
    text-align: center;
    text-transform: none;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-line-clamp: unset;
    font-size: clamp(0.5rem, 1.2vw, 0.73rem);
    font-weight: 800;
    line-height: 1.05;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95);
}

.medicine-visual-small .medicine-image-name {
    top: 59%;
    right: 13%;
    bottom: auto;
    left: 13%;
    min-height: 0;
    padding: 0;
    font-size: 0.34rem;
    line-height: 1;
}

/* Doctor image containers keep a consistent 3:4 portrait ratio. */
.directory-profile-preview,
.doctor-public-photo,
.review-doctor-photo,
.directory-doctor-media {
    aspect-ratio: 3 / 4;
    height: auto;
}

.directory-profile-preview {
    width: 180px;
    border-radius: 0.9rem;
}

.directory-doctor-media {
    width: 100%;
    min-height: 0;
}

.doctor-public-photo {
    width: 220px;
    height: auto;
}

.directory-profile-preview img,
.doctor-public-photo img,
.review-doctor-photo img,
.directory-doctor-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.readiness-check {
    position: relative;
}

.readiness-check.is-skipped {
    border-style: dashed;
    opacity: 0.88;
}

.readiness-card-action {
    margin-top: 0.8rem;
}

@media (max-width: 767.98px) {
    .newsletter-audience-options {
        grid-template-columns: 1fr;
    }

    .doctor-public-photo {
        width: 170px;
        height: auto;
        border-radius: 0.9rem;
    }

    .directory-doctor-media {
        height: auto;
    }
}

/* Phase 8.5 follow-up controls */
.banner-dashboard-thumb {
    position: relative;
    width: 110px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: var(--muted);
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
}

.banner-dashboard-thumb img {
    width: 100%;
    height: 100%;
    object-fit: var(--image-fit, cover);
    object-position:
        var(--image-x, 50%)
        var(--image-y, 50%);
    transform: scale(var(--image-zoom, 1));
    transform-origin:
        var(--image-x, 50%)
        var(--image-y, 50%);
}

.newsletter-audience-option {
    display: grid;
    min-height: 120px;
    padding: 1rem;
    place-items: center;
    align-content: center;
    color: var(--green-950);
    background: var(--cream);
    border: 2px solid var(--line);
    border-radius: 0.9rem;
    text-align: center;
}

.newsletter-audience-option > span {
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.newsletter-audience-option input:checked ~ span,
.newsletter-audience-option:has(input:checked) {
    color: #fff;
    background: var(--green-900);
    border-color: var(--gold);
}

.newsletter-audience-option input:checked ~ i {
    color: var(--gold);
}

.newsletter-audience-option small {
    display: block;
    margin-top: 0.25rem;
    color: inherit;
    opacity: 0.78;
}

.newsletter-rule-card {
    display: flex;
    gap: 0.8rem;
    padding: 1rem;
    align-items: flex-start;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.8rem;
}

.newsletter-rule-card i {
    color: var(--gold);
    font-size: 1.5rem;
}

.newsletter-rule-card p {
    margin: 0.25rem 0 0;
    color: var(--muted);
}

.readiness-state-passed {
    border-left: 5px solid var(--green-700);
}

.readiness-state-action_required {
    border-left: 5px solid #b97500;
}

.readiness-state-skipped {
    border-left: 5px solid #5d7690;
    border-style: solid;
}

.readiness-state-skipped > i {
    color: #5d7690;
}

.readiness-status-label {
    background: var(--cream);
}

.launch-readiness-steps {
    display: grid;
    gap: 0.65rem;
    padding-left: 1.25rem;
}

.doctor-public-photo img[src*="default-doctor-profile"],
.directory-profile-preview img[src*="default-doctor-profile"],
.review-doctor-photo img[src*="default-doctor-profile"],
.directory-doctor-media img[src*="default-doctor-profile"] {
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .banner-dashboard-thumb {
        width: 88px;
    }
}

.homepage-short-ad > picture,
.page-campaign-banner > picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.homepage-short-ad > picture img,
.page-campaign-banner > picture img {
    width: 100%;
    height: 100%;
    object-fit: var(--image-fit, cover);
    object-position:
        var(--image-x, 50%)
        var(--image-y, 50%);
    transform: scale(var(--image-zoom, 1));
    transform-origin:
        var(--image-x, 50%)
        var(--image-y, 50%);
}

@media (max-width: 767.98px) {
    .homepage-banner-carousel picture img,
    .homepage-short-ad > picture img,
    .page-campaign-banner > picture img {
        object-fit:
            var(
                --mobile-image-fit,
                var(--image-fit, cover)
            );
        object-position:
            var(
                --mobile-image-x,
                var(--image-x, 50%)
            )
            var(
                --mobile-image-y,
                var(--image-y, 50%)
            );
        transform:
            scale(
                var(
                    --mobile-image-zoom,
                    var(--image-zoom, 1)
                )
            );
        transform-origin:
            var(
                --mobile-image-x,
                var(--image-x, 50%)
            )
            var(
                --mobile-image-y,
                var(--image-y, 50%)
            );
    }
}

/* =========================================================
   PHASE 8.6 — PAGINATION, BULK MANAGEMENT & IMAGE EDITORS
========================================================= */

.hd-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: flex-end;
}

.hd-page-link,
.hd-page-ellipsis {
    display: inline-flex;
    min-width: 38px;
    height: 38px;
    padding: 0 0.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    text-decoration: none;
    font-weight: 700;
}

.hd-page-link {
    color: var(--green-900);
    background: #fff;
}

.hd-page-link:hover,
.hd-page-link.active {
    color: #fff;
    background: var(--green-700);
    border-color: var(--green-700);
}

.hd-page-link.disabled {
    pointer-events: none;
    opacity: 0.45;
}

.hd-page-ellipsis {
    border-color: transparent;
}

.medicine-search-filter {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

.medicine-per-page {
    width: min(190px, 100%);
}

.medicine-visual img {
    object-position:
        var(--medicine-image-x, 50%)
        var(--medicine-image-y, 50%);
    object-fit: var(--medicine-image-fit, cover);
    transform: scale(var(--medicine-image-zoom, 1));
}

.medicine-image-name {
    right: var(--medicine-name-right, 21%) !important;
    left: var(--medicine-name-left, 21%) !important;
}

.admin-image-editor {
    display: grid;
    gap: 1rem;
}

.admin-image-preview {
    position: relative;
    width: min(100%, 360px);
    max-width: 100%;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: #f4f7f5;
    border: 1px solid var(--line);
    border-radius: 1rem;
}

.admin-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
}

.admin-image-control-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.admin-entity-thumb {
    width: 64px;
    height: 86px;
    overflow: hidden;
    background: #f4f7f5;
    border: 1px solid var(--line);
    border-radius: 0.65rem;
}

.admin-entity-thumb img {
    width: 100%;
    height: 100%;
    transform-origin: center;
}

.bulk-action-panel {
    position: sticky;
    z-index: 20;
    bottom: 0.75rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--line);
    border-left: 5px solid var(--gold);
    border-radius: 0.9rem;
    box-shadow: 0 18px 50px rgba(11, 61, 46, 0.15);
}

.selection-count {
    color: var(--green-900);
    font-weight: 800;
}

@media (max-width: 767.98px) {
    .medicine-search-filter {
        flex-direction: column;
    }

    .medicine-per-page {
        width: 100%;
    }

    .hd-pagination {
        justify-content: center;
    }
}

.directory-doctor-media img,
.doctor-public-photo img,
.doctor-dashboard-photo img,
.doctor-profile-preview img {
    object-fit: var(--image-fit, cover);
}


/* =========================================================
   PHASE 8.7 — DOCTOR DIRECTORY CARD IMAGE SIZE
========================================================= */

.directory-doctor-media {
    width: 200px;
    max-width: calc(100% - 2rem);
    height: auto;
    aspect-ratio: 3 / 4;
    margin: 1rem auto 0;
    border-radius: 0.9rem;
}

.directory-doctor-media img {
    width: 100%;
    height: 100%;
}

/* =========================================================
   PHASE 8.9 — EXPERIENCE, SEARCH, UPLOADS & EBOOK PREVIEW
========================================================= */

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: hd-page-out 0.12s ease both;
}

::view-transition-new(root) {
    animation: hd-page-in 0.18s ease both;
}

@keyframes hd-page-out {
    to {
        opacity: 0.82;
        transform: translateY(-2px);
    }
}

@keyframes hd-page-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}

/* Requested light-hero text treatment. */
.knowledge-hub-hero h1,
.knowledge-hub-hero p,
.library-hero h1,
.library-hero p {
    color: #111;
}

/* Administration navigation search and public-site shortcut. */
.admin-public-site-link {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    margin-top: 0.9rem;
    padding: 0.72rem 0.9rem;
    color: #fff;
    background: rgba(200, 162, 78, 0.16);
    border: 1px solid rgba(200, 162, 78, 0.48);
    border-radius: 0.7rem;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 800;
    transition: transform 0.18s ease, background 0.18s ease;
}

.admin-public-site-link:hover,
.admin-public-site-link:focus-visible {
    color: var(--green-950);
    background: var(--gold);
    transform: translateY(-1px);
}

.admin-menu-search {
    margin: -0.55rem 0 1rem;
}

.admin-menu-search-control {
    position: relative;
    display: flex;
    align-items: center;
}

.admin-menu-search-control > i {
    position: absolute;
    z-index: 1;
    left: 0.75rem;
    color: rgba(255, 255, 255, 0.62);
    pointer-events: none;
}

.admin-menu-search-control input {
    width: 100%;
    min-height: 42px;
    padding: 0.58rem 2.4rem 0.58rem 2.15rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.68rem;
    outline: none;
}

.admin-menu-search-control input::placeholder {
    color: rgba(255, 255, 255, 0.58);
}

.admin-menu-search-control input:focus {
    background: rgba(255, 255, 255, 0.13);
    border-color: var(--gold);
    box-shadow: 0 0 0 0.18rem rgba(200, 162, 78, 0.2);
}

.admin-menu-search-control button {
    position: absolute;
    right: 0.4rem;
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    color: #fff;
    background: transparent;
    border: 0;
    border-radius: 50%;
}

.admin-menu-search-control button:hover {
    background: rgba(255, 255, 255, 0.12);
}

.admin-menu-search > small {
    display: block;
    min-height: 1.15rem;
    margin-top: 0.38rem;
    color: #bcd1c5;
    font-size: 0.7rem;
}

.admin-menu-search-empty {
    margin: 0.8rem 0;
    padding: 0.8rem;
    color: #dceae2;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 0.65rem;
    text-align: center;
    font-size: 0.78rem;
}

/* Staff creation workflow. */
.staff-create-form {
    border-top: 4px solid var(--gold);
}

.staff-optional-fields {
    padding: 0.85rem 1rem;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 0.85rem;
}

.staff-optional-fields > summary {
    color: var(--green-900);
    cursor: pointer;
    font-weight: 800;
}

.staff-optional-fields > summary::marker {
    color: var(--gold-dark);
}

.staff-created-credentials {
    border-left: 5px solid var(--green-700);
}

.staff-created-credential-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.7rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0.7rem;
}

.staff-created-credential-row code {
    color: var(--green-950);
    font-size: 1rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

/* Contact link sharing and multi-image previews. */
.contact-support-form {
    padding: clamp(1.15rem, 3vw, 2rem);
}

.contact-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-image-feedback {
    min-height: 1.4rem;
    margin-top: 0.5rem;
    color: var(--green-700);
    font-size: 0.82rem;
    font-weight: 700;
}

.contact-image-feedback.is-invalid {
    color: #b42318;
}

.contact-image-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 0.7rem;
}

.contact-image-preview-item {
    position: relative;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    padding: 0.55rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.78rem;
    box-shadow: 0 8px 22px rgba(11, 61, 46, 0.07);
}

.contact-image-preview-item img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 0.55rem;
}

.contact-image-preview-item strong,
.contact-image-preview-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-image-preview-item small {
    color: var(--muted);
}

/* Homepage continuous content rails. */
.btn-section-link {
    display: inline-flex;
    gap: 0.55rem;
    align-items: center;
    padding: 0.76rem 1.08rem;
    color: #fff;
    background: linear-gradient(135deg, var(--green-800), var(--green-950));
    border: 1px solid var(--green-800);
    border-radius: 999px;
    box-shadow: 0 10px 25px rgba(11, 61, 46, 0.16);
    font-weight: 800;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.btn-section-link:hover,
.btn-section-link:focus-visible {
    color: var(--green-950);
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 14px 32px rgba(200, 162, 78, 0.25);
    transform: translateY(-2px);
}

.btn-section-link i {
    transition: transform 0.18s ease;
}

.btn-section-link:hover i,
.btn-section-link:focus-visible i {
    transform: translateX(3px);
}

.auto-scroll-shell {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0.25rem 0 1.1rem;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 2.5%,
        #000 97.5%,
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 2.5%,
        #000 97.5%,
        transparent 100%
    );
}

.auto-scroll-track {
    display: flex;
    width: max-content;
    gap: 1.35rem;
    align-items: stretch;
    padding: 0 1.35rem;
    will-change: transform;
}

.auto-scroll-card {
    display: flex;
    width: clamp(292px, 30vw, 365px);
    min-width: clamp(292px, 30vw, 365px);
    align-self: stretch;
}

.auto-scroll-card > article {
    width: 100%;
}

.auto-scroll-card .medicine-card,
.auto-scroll-card .content-card,
.auto-scroll-card .home-library-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
}

.auto-scroll-card .content-card > .p-4,
.auto-scroll-card .library-public-body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.auto-scroll-card .content-card > .p-4 > a:last-child,
.auto-scroll-card .library-public-body > a:last-child,
.auto-scroll-card .medicine-card > a:last-child,
.auto-scroll-card .medicine-card > .price-login-label {
    margin-top: auto;
}

.auto-scroll-shell.is-paused::after {
    position: absolute;
    right: 1rem;
    bottom: 0.25rem;
    padding: 0.22rem 0.5rem;
    content: "Paused";
    color: var(--green-900);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
}

.auto-scroll-shell.auto-scroll-static {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: thin;
}

.auto-scroll-static .auto-scroll-track {
    width: max-content;
    transform: none !important;
}

.auto-scroll-empty {
    width: min(760px, calc(100vw - 3rem));
}

/* Home page floating section navigation, WhatsApp and back-to-top. */
.home-section-menu {
    position: fixed;
    z-index: 1040;
    top: 50%;
    right: 1rem;
    display: flex;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transform: translate(22px, -50%);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.home-section-menu.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translate(0, -50%);
}

.home-section-menu-toggle,
.go-to-top-button {
    display: grid;
    width: 48px;
    height: 48px;
    padding: 0;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--green-700), var(--green-950));
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    box-shadow: 0 14px 34px rgba(8, 45, 34, 0.25);
}

.home-section-menu-toggle:hover,
.home-section-menu-toggle:focus-visible,
.go-to-top-button:hover,
.go-to-top-button:focus-visible {
    color: var(--green-950);
    background: var(--gold);
}

.home-section-menu-panel {
    position: absolute;
    top: 50%;
    right: calc(100% + 0.65rem);
    display: grid;
    width: min(255px, calc(100vw - 5rem));
    gap: 0.2rem;
    padding: 0.8rem;
    visibility: hidden;
    opacity: 0;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: 0 20px 55px rgba(8, 45, 34, 0.2);
    transform: translate(10px, -50%) scale(0.96);
    transform-origin: right center;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.home-section-menu.is-open .home-section-menu-panel {
    visibility: visible;
    opacity: 1;
    transform: translate(0, -50%) scale(1);
}

.home-section-menu-panel > strong {
    padding: 0.35rem 0.55rem 0.55rem;
    color: var(--green-950);
    font-family: Georgia, serif;
}

.home-section-menu-panel a {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    padding: 0.64rem 0.7rem;
    color: var(--ink);
    border-radius: 0.65rem;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 700;
}

.home-section-menu-panel a:hover,
.home-section-menu-panel a:focus-visible,
.home-section-menu-panel a.active {
    color: var(--green-950);
    background: var(--green-100);
}

.home-section-menu-panel a i {
    color: var(--gold-dark);
}

.home-whatsapp-button {
    position: fixed;
    z-index: 1035;
    top: 50%;
    left: 0.8rem;
    display: inline-flex;
    width: 50px;
    min-height: 50px;
    gap: 0.5rem;
    align-items: center;
    overflow: hidden;
    padding: 0 0.86rem;
    color: #fff;
    background: #128c4f;
    border: 2px solid #fff;
    border-radius: 999px;
    box-shadow: 0 15px 34px rgba(8, 45, 34, 0.25);
    text-decoration: none;
    transform: translateY(-50%);
    transition: width 0.2s ease, background 0.2s ease;
}

.home-whatsapp-button i {
    flex: 0 0 auto;
    font-size: 1.35rem;
}

.home-whatsapp-button span {
    opacity: 0;
    white-space: nowrap;
    font-weight: 800;
    transition: opacity 0.14s ease;
}

.home-whatsapp-button:hover,
.home-whatsapp-button:focus-visible {
    width: 138px;
    color: #fff;
    background: #0b6f3d;
}

.home-whatsapp-button:hover span,
.home-whatsapp-button:focus-visible span {
    opacity: 1;
}

.go-to-top-button {
    position: fixed;
    z-index: 1035;
    right: 1rem;
    bottom: 1rem;
    visibility: hidden;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.go-to-top-button.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Dynamic site search dialog and suggestion experience. */
.global-search-open {
    overflow: hidden;
}

.global-search-dialog {
    position: fixed;
    z-index: 1100;
    inset: 0;
    display: grid;
    padding: clamp(1rem, 5vw, 4rem);
    place-items: start center;
}

.global-search-dialog[hidden] {
    display: none;
}

.global-search-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 23, 17, 0.72);
    border: 0;
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.16s ease;
}

.global-search-panel {
    position: relative;
    z-index: 1;
    width: min(780px, 100%);
    margin-top: min(9vh, 90px);
    padding: clamp(1rem, 3vw, 1.5rem);
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 1.2rem;
    box-shadow: 0 35px 90px rgba(3, 23, 17, 0.36);
    opacity: 0;
    transform: translateY(-14px) scale(0.985);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.global-search-dialog.show .global-search-backdrop,
.global-search-dialog.show .global-search-panel {
    opacity: 1;
}

.global-search-dialog.show .global-search-panel {
    transform: translateY(0) scale(1);
}

.global-search-heading {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.global-search-heading h2 {
    margin: 0;
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.global-search-dialog-form,
.global-search-field {
    position: relative;
}

.global-search-field-icon {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 1rem;
    color: var(--green-700);
    font-size: 1.05rem;
    pointer-events: none;
    transform: translateY(-50%);
}

.global-search-field > input {
    width: 100%;
    min-height: 56px;
    padding-right: 1rem;
    padding-left: 2.8rem;
}

.global-search-suggestions {
    position: absolute;
    z-index: 1060;
    top: calc(100% + 0.45rem);
    right: 0;
    left: 0;
    display: none;
    max-height: min(60vh, 510px);
    overflow-y: auto;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    box-shadow: 0 20px 55px rgba(8, 45, 34, 0.2);
}

.global-search-suggestions.show {
    display: grid;
    gap: 0.2rem;
}

.global-search-suggestion,
.global-search-correction,
.global-search-all-results {
    display: grid;
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.72rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: 0.68rem;
    text-align: left;
    text-decoration: none;
}

.global-search-suggestion:hover,
.global-search-suggestion:focus-visible,
.global-search-suggestion.active,
.global-search-correction:hover,
.global-search-correction:focus-visible,
.global-search-all-results:hover,
.global-search-all-results:focus-visible {
    color: var(--green-950);
    background: var(--green-100);
    outline: none;
}

.global-search-suggestion-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #fff;
    background: var(--green-700);
    border-radius: 50%;
}

.global-search-suggestion-copy {
    display: block;
    min-width: 0;
}

.global-search-suggestion-copy small,
.global-search-suggestion-copy strong,
.global-search-suggestion-copy > span,
.global-search-correction small,
.global-search-correction strong {
    display: block;
}

.global-search-suggestion-copy small,
.global-search-correction small {
    color: var(--gold-dark);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: capitalize;
}

.global-search-suggestion-copy strong,
.global-search-suggestion-copy > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-suggestion-copy > span {
    color: var(--muted);
    font-size: 0.76rem;
}

.global-search-correction {
    grid-template-columns: 38px minmax(0, 1fr);
    color: var(--green-900);
    background: #fff8e5;
}

.global-search-correction > i {
    color: var(--gold-dark);
    text-align: center;
    font-size: 1.15rem;
}

.global-search-all-results {
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 0.25rem;
    color: #fff;
    background: var(--green-900);
    font-weight: 800;
}

.global-search-all-results:hover,
.global-search-all-results:focus-visible {
    color: var(--green-950);
    background: var(--gold);
}

.global-search-empty {
    padding: 0.9rem;
    color: var(--muted);
    text-align: center;
    font-size: 0.82rem;
}

.global-search-help {
    margin: 0.75rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.site-wide-search-form .global-search-field {
    min-width: 0;
}

.search-correction-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    margin-bottom: 1.3rem;
    padding: 0.9rem 1rem;
    color: var(--green-950);
    background: #fff8df;
    border: 1px solid #ead58e;
    border-left: 5px solid var(--gold);
    border-radius: 0.8rem;
}

/* Per-item library cover controls and safe eBook readers. */
.library-cover-editor {
    display: grid;
    gap: 1rem;
}

.library-cover-editor-preview {
    position: relative;
    display: grid;
    width: min(100%, 340px);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    place-items: center;
    color: var(--muted);
    background: linear-gradient(135deg, var(--green-100), var(--cream));
    border: 1px solid var(--line);
    border-radius: 1rem;
}

.library-cover-editor-preview img {
    width: 100%;
    height: 100%;
    object-fit: var(--cover-fit, cover);
    object-position: var(--cover-x, 50%) var(--cover-y, 50%);
    transform: scale(var(--cover-zoom, 1));
    transform-origin: var(--cover-x, 50%) var(--cover-y, 50%);
}

.library-cover-editor-preview > div {
    display: grid;
    gap: 0.45rem;
    place-items: center;
    padding: 1rem;
    text-align: center;
}

.library-cover-editor-preview > div i {
    color: var(--gold-dark);
    font-size: 2.2rem;
}

.library-cover-editor-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.library-cover-editor-controls label {
    display: grid;
    gap: 0.3rem;
    color: var(--green-950);
    font-size: 0.82rem;
    font-weight: 700;
}

.library-cover-editor-controls label > span {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.library-cover-editor-controls output {
    color: var(--gold-dark);
    font-weight: 800;
}

.cms-ebook-preview,
.library-ebook-reader {
    padding: 0.85rem;
    background: #f4f7f5;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
}

.cms-ebook-preview iframe,
.library-ebook-reader {
    width: 100%;
    height: min(78vh, 860px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.72rem;
}

/* Footer payment partners appear directly below social links. */
.footer-payment-partners {
    padding-top: 0.25rem;
}

.footer-payment-partners h2 {
    color: #fff;
    font-family: inherit;
    font-weight: 800;
}

.footer-payment-partners > p {
    color: rgba(255, 255, 255, 0.7);
}

.footer-payment-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 0.55rem;
}

.footer-payment-logo {
    display: grid;
    min-width: 0;
    min-height: 74px;
    padding: 0.55rem;
    place-items: center;
    align-content: center;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 0.72rem;
}

.footer-payment-logo img {
    width: 100%;
    max-width: 104px;
    height: 31px;
    object-fit: contain;
}

.footer-payment-logo span {
    display: block;
    max-width: 100%;
    margin-top: 0.3rem;
    overflow: hidden;
    color: var(--green-950);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.64rem;
    font-weight: 800;
    text-align: center;
}

@media (max-width: 991.98px) {
    .site-wide-search-form {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .site-wide-search-form > select {
        grid-row: 2;
        grid-column: 1 / -1;
    }

    .auto-scroll-card {
        width: min(335px, calc(100vw - 3rem));
        min-width: min(335px, calc(100vw - 3rem));
    }
}

@media (max-width: 767.98px) {
    .admin-menu-search {
        margin-top: 0;
    }

    .site-wide-search-form {
        grid-template-columns: 1fr;
    }

    .site-wide-search-form > select,
    .site-wide-search-form > button {
        grid-row: auto;
        grid-column: auto;
        width: 100%;
    }

    .auto-scroll-shell {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .auto-scroll-track {
        gap: 0.9rem;
        padding: 0 0.75rem;
    }

    .btn-section-link {
        padding: 0.62rem 0.82rem;
        font-size: 0.8rem;
    }

    .home-section-menu {
        right: 0.65rem;
    }

    .home-section-menu-toggle,
    .go-to-top-button {
        width: 44px;
        height: 44px;
    }

    .home-whatsapp-button {
        left: 0.45rem;
        width: 46px;
        min-height: 46px;
        padding: 0 0.75rem;
    }

    .home-whatsapp-button:hover,
    .home-whatsapp-button:focus-visible {
        width: 46px;
    }

    .home-whatsapp-button span {
        display: none;
    }

    .global-search-dialog {
        padding: 0.7rem;
    }

    .global-search-panel {
        margin-top: 0.7rem;
        border-radius: 1rem;
    }

    .global-search-suggestions {
        max-height: 55vh;
    }

    .global-search-suggestion-copy > span {
        display: none;
    }

    .library-cover-editor-controls {
        grid-template-columns: 1fr;
    }

    .contact-image-preview {
        grid-template-columns: 1fr;
    }

    .footer-payment-logo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* Phase 9.0: public member accounts, profiles and free sample workflow. */
.account-registration-section {
    background:
        radial-gradient(circle at 8% 8%, rgba(200, 162, 78, 0.16), transparent 28rem),
        linear-gradient(180deg, #f8fbf9 0%, #eef5f1 100%);
}

.account-registration-card {
    width: min(100%, 1040px);
    margin-inline: auto;
}

.account-registration-card .auth-brand {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}

.account-type-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.account-type-option {
    position: relative;
    display: block;
    height: 100%;
    cursor: pointer;
}

.account-type-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.account-type-option > span {
    display: grid;
    min-height: 150px;
    padding: 1rem;
    align-content: start;
    gap: 0.45rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgba(11, 61, 46, 0.06);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.account-type-option i {
    color: var(--green-700);
    font-size: 1.7rem;
}

.account-type-option strong {
    color: var(--green-950);
    font-size: 1.02rem;
}

.account-type-option small {
    color: var(--muted);
    line-height: 1.45;
}

.account-type-option:hover > span {
    transform: translateY(-2px);
    border-color: rgba(11, 94, 65, 0.42);
    box-shadow: 0 16px 36px rgba(11, 61, 46, 0.1);
}

.account-type-option > input:checked + span {
    color: var(--green-950);
    background: linear-gradient(145deg, #f6fbf8, #fffaf0);
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(200, 162, 78, 0.16), 0 16px 36px rgba(11, 61, 46, 0.1);
}

.account-type-option > input:focus-visible + span {
    outline: 3px solid rgba(11, 94, 65, 0.25);
    outline-offset: 3px;
}

.role-registration-fields[hidden] {
    display: none !important;
}

.role-fields-card {
    padding: 1.1rem;
    background: linear-gradient(145deg, rgba(11, 94, 65, 0.055), rgba(200, 162, 78, 0.07));
    border: 1px solid rgba(11, 94, 65, 0.14);
    border-radius: 1rem;
}

.role-fields-card h2 small,
.field-note {
    color: var(--gold-dark);
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.member-profile-hero,
.sample-application-hero {
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.9), rgba(244, 249, 246, 0.88)),
        radial-gradient(circle at 85% 20%, rgba(200, 162, 78, 0.2), transparent 24rem);
}

.member-profile-summary {
    overflow: hidden;
}

.member-profile-avatar {
    width: 132px;
    height: 132px;
    margin-bottom: 1rem;
    overflow: hidden;
    background: var(--cream);
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 12px 30px rgba(11, 61, 46, 0.16);
}

.member-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-completion {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 0.55rem;
    padding: 0.9rem;
    margin: 1.1rem 0;
    background: #f5f8f6;
    border: 1px solid var(--line);
    border-radius: 0.85rem;
}

.profile-completion > .d-flex {
    height: auto;
    min-height: 1.5rem;
    overflow: visible;
    background: transparent;
    border-radius: 0;
}

.profile-completion > .d-flex strong,
.profile-completion > .d-flex span {
    display: block;
    margin: 0;
    font-size: .88rem;
    line-height: 1.35;
}

.profile-completion .progress {
    height: 0.55rem;
    background: #dce7e1;
}

.profile-completion .progress-bar {
    background: linear-gradient(90deg, var(--green-700), var(--gold));
}

.member-profile-view-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
}

.member-profile-view-grid > div,
.member-profile-note {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: .85rem;
    padding: .85rem 1rem;
    background: #f8fbf9;
}

.member-profile-view-grid dt {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.member-profile-view-grid dd {
    margin: .2rem 0 0;
    color: var(--green-900);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.member-health-checkpoints,
.member-health-check-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}

.member-health-checkpoints span,
.member-health-check-grid label {
    display: flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid #d9e8e2;
    border-radius: .75rem;
    padding: .65rem .75rem;
    color: #174d3d;
    background: #f8fcfa;
    font-size: .86rem;
    font-weight: 700;
}

.member-health-checkpoints i {
    color: var(--green-700);
}

.member-health-checkpoints .is-empty {
    grid-column: 1 / -1;
    color: var(--muted);
    font-weight: 500;
}

.member-profile-note {
    height: 100%;
}

.member-profile-note p {
    margin: .45rem 0 0;
    color: var(--muted);
}

@media (max-width: 767.98px) {
    .member-profile-view-grid,
    .member-health-checkpoints,
    .member-health-check-grid {
        grid-template-columns: 1fr;
    }
}

.member-profile-meta {
    display: grid;
    gap: 0;
    margin: 0 0 1rem;
}

.member-profile-meta > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.68rem 0;
    border-bottom: 1px solid var(--line);
}

.member-profile-meta dt {
    color: var(--muted);
    font-weight: 600;
}

.member-profile-meta dd {
    margin: 0;
    color: var(--green-950);
    font-weight: 800;
    text-align: right;
}

.member-profile-form hr {
    color: var(--line);
    opacity: 1;
}

.sample-eligibility-panel {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}

.sample-price-summary {
    display: grid;
    gap: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1rem;
}

.sample-price-summary > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--line);
}

.sample-price-summary > div:last-child {
    color: #fff;
    background: var(--green-900);
    border-bottom: 0;
}

.sample-price-summary > div:first-child strong {
    color: var(--green-700);
    letter-spacing: 0.05em;
}

.sample-process-card {
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 247, 0.98)),
        radial-gradient(circle at 100% 0%, rgba(200, 162, 78, 0.2), transparent 18rem);
}

.sample-process-list {
    display: grid;
    gap: 1rem;
    padding: 0;
    margin: 1.25rem 0;
    list-style: none;
    counter-reset: sample-step;
}

.sample-process-list li {
    position: relative;
    display: grid;
    min-height: 42px;
    padding-left: 3.25rem;
    counter-increment: sample-step;
}

.sample-process-list li::before {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    color: #fff;
    background: var(--green-800);
    border-radius: 50%;
    content: counter(sample-step);
    font-weight: 800;
}

.sample-process-list strong,
.sample-process-list span {
    display: block;
}

.sample-process-list span {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.sample-order-notice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    color: var(--green-950);
    background: linear-gradient(120deg, #f2faf5, #fff8e8);
    border: 1px solid rgba(200, 162, 78, 0.45);
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgba(11, 61, 46, 0.07);
}

.status-badge-accent {
    color: #674c09 !important;
    background: #fff1bd !important;
    border-color: #e6c75d !important;
}

.public-member-list,
.sample-request-admin-list {
    max-height: min(76vh, 900px);
    overflow: auto;
}

.public-member-list .list-group-item,
.sample-request-admin-list .list-group-item {
    padding: 0.95rem;
    color: var(--ink);
    background: transparent;
    border-color: var(--line);
}

.public-member-list .list-group-item.active,
.sample-request-admin-list .list-group-item.active {
    color: #fff;
    background: var(--green-800);
    border-color: var(--green-800);
}

.public-member-list .list-group-item.active small,
.sample-request-admin-list .list-group-item.active small {
    color: rgba(255, 255, 255, 0.78);
}

.access-matrix-table th,
.access-matrix-table td {
    min-width: 132px;
    text-align: center;
    vertical-align: middle;
}

.access-matrix-table th:first-child,
.access-matrix-table td:nth-child(2) {
    text-align: left;
}

.matrix-toggle {
    display: inline-grid;
    gap: 0.25rem;
    place-items: center;
    cursor: pointer;
}

.matrix-toggle input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--green-700);
}

.matrix-toggle span {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.sample-review-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.25rem;
}

.sample-review-summary > div {
    padding: 0.9rem;
    background: #f5f8f6;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
}

.sample-review-summary dt {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sample-review-summary dd {
    margin: 0.25rem 0 0;
    color: var(--green-950);
    font-weight: 800;
}

.review-note-box {
    padding: 1rem;
    color: var(--ink);
    background: #fffdf6;
    border: 1px solid #ead9a7;
    border-radius: 0.85rem;
    line-height: 1.65;
}

.sample-review-actions {
    padding: 1rem;
    background: #f4f8f5;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
}

@media (max-width: 767.98px) {
    .account-type-selector,
    .sample-review-summary {
        grid-template-columns: 1fr;
    }

    .account-type-option > span {
        min-height: 0;
    }

    .sample-order-notice {
        align-items: flex-start;
        flex-direction: column;
    }

    .member-profile-avatar {
        margin-inline: auto;
    }

    .member-profile-summary {
        text-align: center;
    }

    .member-profile-meta > div {
        text-align: left;
    }
}

.hd-whatsapp-float{position:fixed;left:18px;bottom:18px;z-index:1080;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#25D366;color:#fff;font-size:1.65rem;box-shadow:0 8px 24px rgba(0,0,0,.24);text-decoration:none}.hd-whatsapp-float:hover{color:#fff;transform:translateY(-2px)}

/* Phase 9.6: Homepage pioneer and services */
.home-pioneer-section{padding-top:3rem}.home-pioneer-card{display:grid;grid-template-columns:minmax(250px,38%) 1fr;overflow:hidden;border-radius:28px;background:linear-gradient(135deg,#073d31 0%,#0b5845 58%,#0a6b51 100%);color:#fff;text-decoration:none;box-shadow:0 24px 65px rgba(4,45,35,.2);transition:transform .25s ease,box-shadow .25s ease}.home-pioneer-card:hover{transform:translateY(-5px);box-shadow:0 30px 75px rgba(4,45,35,.28);color:#fff}.home-pioneer-portrait{position:relative;min-height:430px;background:#e8efe9}.home-pioneer-portrait img{width:100%;height:100%;object-fit:cover}.home-pioneer-experience{position:absolute;left:20px;bottom:20px;padding:.7rem 1rem;border-radius:999px;background:#d3aa42;color:#143126;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.2)}.home-pioneer-copy{padding:clamp(2rem,5vw,4.5rem);align-self:center}.home-pioneer-copy .eyebrow{color:#efd278}.home-pioneer-copy h2{font-size:clamp(2rem,4vw,3.6rem);line-height:1.04;margin:.65rem 0 1.2rem}.home-pioneer-copy h3{font-size:1.35rem;margin-bottom:.25rem}.home-pioneer-title{color:#efd278;font-weight:700}.home-pioneer-meta{display:flex;flex-wrap:wrap;gap:.75rem 1.4rem;margin:1.5rem 0}.home-pioneer-meta span{display:inline-flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.88)}
.home-services-section{overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f3f7f4 100%)}.home-services-marquee{overflow:hidden;padding:1rem 0 2rem}.home-services-track{display:flex;gap:1.5rem;width:max-content;animation:homeServicesScroll 55s linear infinite}.home-services-marquee:hover .home-services-track{animation-play-state:paused}.home-service-card{width:340px;flex:0 0 340px;overflow:hidden;border:1px solid rgba(8,78,59,.12);border-radius:22px;background:#fff;color:#18352c;text-decoration:none;box-shadow:0 14px 38px rgba(16,66,52,.1);transition:transform .25s ease}.home-service-card:hover{transform:translateY(-6px);color:#18352c}.home-service-card img{width:100%;height:210px;object-fit:cover}.home-service-card-body{padding:1.35rem}.home-service-card-body>span{display:inline-block;margin-bottom:.65rem;color:#8a6a17;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.home-service-card-body h3{font-size:1.35rem}.home-service-card-body p{display:-webkit-box;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical;color:#64716c}.home-service-card-body strong{color:#0b6b50}@keyframes homeServicesScroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - .75rem))}}
.pioneer-page-image,.service-detail-image{width:100%;max-height:560px;object-fit:cover;border-radius:28px;box-shadow:0 26px 65px rgba(0,0,0,.2)}.pioneer-contact-list li{display:flex;gap:.75rem;margin:.9rem 0}.pioneer-contact-list i{color:#a67c1d}.service-detail-content{max-width:980px;margin:auto;font-size:1.05rem;line-height:1.85}.medicine-order-workflow{padding-top:2.75rem;background:linear-gradient(180deg,#f7faf8,#fff)}
@media(max-width:767.98px){.home-pioneer-card{grid-template-columns:1fr}.home-pioneer-portrait{min-height:320px}.home-pioneer-copy{padding:1.5rem}.home-service-card{width:285px;flex-basis:285px}.home-service-card img{height:180px}.home-services-track{animation-duration:42s}}
@media(prefers-reduced-motion:reduce){.home-services-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.home-services-track .home-service-card:nth-child(n+2):has(~ .home-service-card){}}

/* Phase 9.8.1: Homepage Pioneer text contrast hotfix */
.home-pioneer-card,
.home-pioneer-card:link,
.home-pioneer-card:visited,
.home-pioneer-card:hover,
.home-pioneer-card:focus {
    color: #ffffff !important;
}
.home-pioneer-copy,
.home-pioneer-copy h2,
.home-pioneer-copy h3,
.home-pioneer-copy p,
.home-pioneer-copy .home-pioneer-title,
.home-pioneer-copy .home-pioneer-meta span {
    color: #ffffff !important;
}
.home-pioneer-copy .eyebrow,
.home-pioneer-copy .home-pioneer-title {
    color: #f5d778 !important;
}
.home-pioneer-copy h2 {
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
}
.home-pioneer-copy p {
    opacity: 0.94;
}

/* =========================================================
   PHASE 9.12 — CONSOLIDATED ADMIN NAVIGATION
========================================================= */
.admin-navigation {
    display: grid;
    gap: .55rem;
}

.admin-nav-group {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .8rem;
    background: rgba(255, 255, 255, .035);
}

.admin-nav-group[hidden],
.admin-nav-group a[hidden] {
    display: none !important;
}

.admin-nav-group > summary {
    display: flex;
    min-height: 46px;
    padding: .72rem .78rem;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    color: #f5fbf7;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .015em;
    list-style: none;
    user-select: none;
}

.admin-nav-group > summary::-webkit-details-marker {
    display: none;
}

.admin-nav-group > summary span {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.admin-nav-group > summary:hover,
.admin-nav-group[open] > summary {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.admin-nav-chevron {
    transition: transform .2s ease;
}

.admin-nav-group[open] .admin-nav-chevron {
    transform: rotate(180deg);
}

.admin-nav-group-items {
    display: grid;
    gap: .2rem;
    padding: .25rem .35rem .45rem;
}

.admin-sidebar .admin-nav-group-items a {
    min-height: 40px;
    padding: .58rem .72rem;
    border-radius: .58rem;
    font-size: .79rem;
}

.admin-sidebar .admin-nav-group-items a.active {
    color: #102e24;
    background: var(--gold);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}

.admin-sidebar .admin-nav-group-items a.admin-nav-highlight:not(.active) {
    border: 1px solid rgba(235, 196, 96, .35);
    background: rgba(235, 196, 96, .08);
}

.admin-sidebar .admin-nav-group-items a.admin-menu-search-match {
    outline: 1px solid rgba(235, 196, 96, .72);
    background: rgba(235, 196, 96, .12);
}

.admin-topbar {
    position: sticky;
    z-index: 1030;
    top: 0;
    display: flex;
    min-height: 64px;
    margin: -2rem -2rem 1.5rem;
    padding: .75rem 2rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 28px rgba(16, 66, 52, .06);
    backdrop-filter: blur(12px);
}

.admin-topbar-context,
.admin-topbar-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.admin-topbar-context small,
.admin-topbar-context strong {
    display: block;
}

.admin-topbar-context small {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.admin-topbar-context strong {
    color: var(--green-950);
    font-size: .95rem;
}

.admin-sidebar-jump {
    display: none;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--green-900);
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: .65rem;
}

.admin-dashboard-directory {
    margin-bottom: 1.5rem;
    padding: 1.35rem;
    background: linear-gradient(135deg, #fff, #f5f9f6);
    border: 1px solid rgba(8, 78, 59, .12);
    border-radius: 1.15rem;
    box-shadow: 0 16px 38px rgba(16, 66, 52, .07);
}

.admin-dashboard-directory-search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 760px;
}

.admin-dashboard-directory-search > i {
    position: absolute;
    left: 1rem;
    color: var(--green-700);
}

.admin-dashboard-directory-search input {
    min-height: 52px;
    padding-left: 2.75rem;
    padding-right: 3rem;
    border-color: rgba(8, 78, 59, .2);
    border-radius: .85rem;
}

.admin-dashboard-directory-search button {
    position: absolute;
    right: .55rem;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
}

.admin-dashboard-menu-group {
    margin-top: 1.35rem;
}

.admin-dashboard-menu-group[hidden],
.admin-dashboard-menu-card[hidden] {
    display: none !important;
}

.admin-dashboard-menu-group-title {
    display: flex;
    margin-bottom: .65rem;
    align-items: center;
    gap: .55rem;
    color: var(--green-900);
    font-size: .84rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.admin-dashboard-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.admin-dashboard-menu-card {
    display: flex;
    min-height: 72px;
    padding: .9rem;
    align-items: center;
    gap: .75rem;
    color: var(--green-950);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .85rem;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.admin-dashboard-menu-card:hover {
    color: var(--green-950);
    border-color: rgba(8, 108, 80, .35);
    box-shadow: 0 10px 24px rgba(16, 66, 52, .09);
    transform: translateY(-2px);
}

.admin-dashboard-menu-card > i {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    color: var(--green-800);
    background: var(--green-100);
    border-radius: .72rem;
}

.admin-dashboard-menu-card strong,
.admin-dashboard-menu-card small {
    display: block;
}

.admin-dashboard-menu-card small {
    margin-top: .15rem;
    color: var(--muted);
    font-size: .7rem;
}

/* Improved Services editor and crop preview. */
.service-admin-editor .admin-image-preview {
    width: 100%;
    max-width: 520px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e8eeea;
    border: 1px solid var(--line);
    border-radius: 1rem;
}

.service-admin-editor .admin-image-preview img {
    width: 100%;
    height: 100%;
    transform-origin: center;
}

.service-admin-language-panel {
    height: 100%;
    padding: 1rem;
    background: #f8faf9;
    border: 1px solid var(--line);
    border-radius: 1rem;
}

.service-admin-language-panel h2 {
    font-size: 1rem;
}

.service-admin-thumb {
    width: 92px;
    height: 62px;
    overflow: hidden;
    background: #edf2ef;
    border-radius: .7rem;
}

.service-admin-thumb img {
    width: 100%;
    height: 100%;
    transform-origin: center;
}

@media (max-width: 1399.98px) {
    .admin-dashboard-menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199.98px) {
    .admin-sidebar nav {
        grid-template-columns: 1fr;
    }

    .admin-topbar {
        margin: -2rem -2rem 1.5rem;
    }

    .admin-sidebar-jump {
        display: grid;
    }

    .admin-dashboard-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .admin-topbar {
        margin: -1rem -1rem 1rem;
        padding: .65rem 1rem;
        align-items: flex-start;
    }

    .admin-topbar-actions .btn-outline-success {
        display: none;
    }

    .admin-topbar-context strong {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-dashboard-menu-grid {
        grid-template-columns: 1fr;
    }
}


/* Phase 9.13.1: restored Quote Cards and expanded homepage floating navigation. */
.home-quotes-section {
    overflow: hidden;
    background: linear-gradient(180deg, #f7fbf8 0%, #eef6f1 100%);
}

.home-quotes-marquee {
    overflow: hidden;
    padding: 0.65rem 0 2.15rem;
}

.home-quotes-track {
    display: flex;
    width: max-content;
    gap: 1.25rem;
    padding-inline: 1.25rem;
    animation: homeQuotesScroll 42s linear infinite;
}

.home-quotes-marquee:hover .home-quotes-track,
.home-quotes-marquee:focus-within .home-quotes-track {
    animation-play-state: paused;
}

.home-quote-card {
    width: min(360px, 82vw);
    min-height: 230px;
    padding: 1.75rem;
    color: #263b32;
    background: #fff;
    border: 1px solid rgba(11, 77, 56, 0.14);
    border-radius: 1.4rem;
    box-shadow: 0 14px 36px rgba(12, 65, 47, 0.09);
    text-align: start;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-quote-card:hover,
.home-quote-card:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(12, 65, 47, 0.15);
    outline: 3px solid rgba(203, 167, 54, 0.28);
    outline-offset: 2px;
}

.home-quote-mark,
.quote-viewer-mark {
    display: block;
    margin-bottom: 0.9rem;
    color: #c8a236;
    font-family: Georgia, serif;
    font-size: 3.65rem;
    line-height: 0.7;
}

.home-quote-card strong {
    display: block;
    margin-bottom: 0.65rem;
    color: #0b4d38;
    font-size: 1.05rem;
}

.home-quote-card blockquote {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #344b40;
    font-size: 1rem;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.home-quote-card cite {
    display: block;
    margin-top: 1.1rem;
    color: #8a7428;
    font-style: normal;
    font-weight: 700;
}

@keyframes homeQuotesScroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - 0.625rem)); }
}

.quote-viewer[hidden] { display: none !important; }

.quote-viewer {
    position: fixed;
    z-index: 1090;
    inset: 0;
    display: grid;
    padding: 1.25rem;
    place-items: center;
}

.quote-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 25, 18, 0.78);
    backdrop-filter: blur(5px);
}

.quote-viewer-dialog {
    position: relative;
    width: min(720px, 100%);
    max-height: 88vh;
    overflow: auto;
    padding: 2.6rem 2.6rem 1.9rem;
    background: #fff;
    border-radius: 1.65rem;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.3);
}

.quote-viewer-close {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    color: #0b4d38;
    background: #eef6f1;
    border: 0;
    border-radius: 50%;
}

.quote-viewer-dialog h3 {
    margin: 0 0 1.1rem;
    color: #0b4d38;
}

.quote-viewer-dialog blockquote {
    margin: 0;
    color: #243a30;
    font-family: Georgia, serif;
    font-size: clamp(1.3rem, 3vw, 2rem);
    line-height: 1.55;
}

.quote-viewer-dialog cite {
    display: block;
    margin-top: 1.25rem;
    color: #8a7428;
    font-style: normal;
    font-weight: 700;
}

.quote-viewer-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 2.1rem;
}

.quote-viewer-open { overflow: hidden; }

.home-section-menu-panel {
    max-height: min(76vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.home-section-menu-panel > small {
    display: block;
    padding: 0 0.55rem 0.55rem;
    color: #64756d;
    font-size: 0.72rem;
}

.home-section-menu-divider {
    display: block;
    height: 1px;
    margin: 0.35rem 0.45rem;
    background: var(--line);
}

@media (max-width: 767.98px) {
    .home-section-menu {
        top: auto;
        right: 0.8rem;
        bottom: 5.25rem;
        transform: translateX(22px);
    }

    .home-section-menu.is-visible {
        transform: translateX(0);
    }

    .home-section-menu-panel {
        top: auto;
        right: 0;
        bottom: calc(100% + 0.65rem);
        width: min(290px, calc(100vw - 1.6rem));
        max-height: min(65vh, 520px);
        transform: translateY(10px) scale(0.96);
        transform-origin: right bottom;
    }

    .home-section-menu.is-open .home-section-menu-panel {
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 575.98px) {
    .quote-viewer-dialog { padding: 2.25rem 1.35rem 1.5rem; }
    .quote-viewer-actions .btn { flex: 1; }
    .home-quote-card { padding: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .home-quotes-track {
        animation: none;
        transform: none;
    }
}

/* Phase 9.14: one global public EN / BN switch */
.site-language-switch {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(11, 61, 46, .32);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(11, 61, 46, .08);
}

.site-language-switch form {
    display: flex;
}

.site-language-option {
    min-width: 42px;
    min-height: 38px;
    padding: .45rem .72rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #173d31;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .05em;
    line-height: 1;
    transition: background-color .18s ease, color .18s ease;
}

.site-language-switch form + form .site-language-option {
    border-left: 1px solid rgba(11, 61, 46, .18);
}

.site-language-option:hover,
.site-language-option:focus-visible {
    background: #edf7f2;
    color: #0b3d2e;
    outline: none;
}

.site-language-option.active {
    background: #0b3d2e;
    color: #fff;
}

html[lang="bn"] body {
    font-family: "Noto Sans Bengali", "Nirmala UI", "Vrinda", system-ui, sans-serif;
}

html[lang="bn"] .site-language-option {
    font-family: system-ui, sans-serif;
}

@media (max-width: 575.98px) {
    .site-language-option {
        min-width: 38px;
        min-height: 36px;
        padding: .4rem .58rem;
    }
}

/* Phase 9.15 medicine configurators */
.medicine-search-results{
    position:absolute;z-index:1055;left:0;right:0;top:100%;margin-top:.25rem;
    max-height:22rem;overflow:auto;background:#fff;border:1px solid rgba(20,73,54,.18);
    border-radius:.75rem;box-shadow:0 1rem 2.5rem rgba(16,49,39,.16);padding:.35rem;
}
.medicine-search-result{
    display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:.15rem;
    border:0;background:transparent;border-radius:.55rem;padding:.7rem .8rem;text-align:left;color:inherit;
}
.medicine-search-result:hover,.medicine-search-result:focus{background:rgba(20,104,73,.08);outline:none}
.medicine-search-result small{color:#6b7280}
.order-mode-tabs label{cursor:pointer}
@media (max-width:767.98px){.combination-row{grid-template-columns:2.2rem 1fr}.combination-row>div:not(.combination-sequence){grid-column:2}.combination-row>button{grid-column:2}}

/* =========================================================
   PHASE 9.17 — LANGUAGE, QUOTE CARD AND MEDICINE UI HOTFIX
========================================================= */
:root {
    --bangla-font: "SolaimanLipi", "Noto Serif Bengali", "Noto Sans Bengali", "Nirmala UI", "Vrinda", sans-serif;
}

/* SolaimanLipi is used when it is installed on the visitor's device. The
   remaining fonts keep Bangla readable in browsers and installed apps. */
html[lang="bn"] body,
html[lang="bn"] button,
html[lang="bn"] input,
html[lang="bn"] select,
html[lang="bn"] textarea,
html[lang="bn"] option,
html[lang="bn"] .navbar,
html[lang="bn"] .dropdown-menu,
html[lang="bn"] .btn,
html[lang="bn"] .form-control,
html[lang="bn"] .form-select,
html[lang="bn"] .modal,
html[lang="bn"] .offcanvas,
html[lang="bn"] .alert,
html[lang="bn"] .card,
html[lang="bn"] .panel-card {
    font-family: var(--bangla-font) !important;
}

html[lang="bn"] h1,
html[lang="bn"] h2,
html[lang="bn"] h3,
html[lang="bn"] h4,
html[lang="bn"] h5,
html[lang="bn"] h6,
html[lang="bn"] .section-heading,
html[lang="bn"] .page-hero,
html[lang="bn"] .home-quote-card,
html[lang="bn"] .quote-viewer-dialog {
    font-family: var(--bangla-font) !important;
    line-height: 1.45;
}

html[lang="bn"] body {
    line-height: 1.75;
    word-break: normal;
    overflow-wrap: anywhere;
}

html[lang="bn"] .eyebrow,
html[lang="bn"] .section-heading > span,
html[lang="bn"] .page-hero > div > span,
html[lang="bn"] .hero-kicker {
    letter-spacing: .025em;
    text-transform: none;
}

.site-language-switch {
    flex: 0 0 auto;
    isolation: isolate;
}

.site-language-switch form {
    margin: 0;
}

.site-language-option {
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
}

.site-language-option.active {
    position: relative;
    z-index: 1;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Quote cards are buttons. Reset native button styles and keep their layout
   stable in English and Bangla. */
.home-quotes-section {
    position: relative;
    isolation: isolate;
}

.home-quotes-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.home-quotes-track {
    align-items: stretch;
    will-change: transform;
}

.home-quote-card {
    display: flex;
    flex: 0 0 min(360px, 82vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    border: 1px solid rgba(11, 77, 56, .14);
}

.home-quote-card blockquote {
    flex: 1 1 auto;
    width: 100%;
    text-align: start;
}

.quote-viewer {
    overscroll-behavior: contain;
}

.quote-viewer-dialog {
    z-index: 1;
}

.quote-viewer-backdrop {
    cursor: pointer;
}

/* Medicine search and order controls. */
.medicine-search-field {
    position: relative;
}

.medicine-search-results[hidden] {
    display: none !important;
}

.medicine-search-result {
    cursor: pointer;
}

.medicine-order-placeholder {
    color: #6d756f;
}

.medicine-cost-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.medicine-cost-grid > div {
    padding: .8rem .9rem;
    background: #f7faf8;
    border: 1px solid var(--line);
    border-radius: .75rem;
}

.medicine-cost-grid dt {
    margin-bottom: .2rem;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.medicine-cost-grid dd {
    margin: 0;
    color: var(--green-950);
    font-weight: 800;
}

.medicine-detail-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.medicine-detail-facts > div {
    min-width: 0;
    padding: 1rem;
    background: #f7faf8;
    border: 1px solid var(--line);
    border-radius: .9rem;
}

.medicine-detail-facts dt {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.medicine-detail-facts dd {
    margin: .35rem 0 0;
    overflow-wrap: anywhere;
}

.combination-shared-config {
    padding: 1rem;
    background: #f7faf8;
    border: 1px solid var(--line);
    border-radius: 1rem;
}

.combination-auto-name {
    background: #f4f6f5 !important;
}

@media (max-width: 991.98px) {
    .site-header .site-language-switch {
        margin-block: .35rem;
    }

    .medicine-detail-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .site-language-option {
        min-width: 40px;
        min-height: 36px;
        padding: .4rem .55rem;
    }

    .home-quote-card {
        flex-basis: min(300px, calc(100vw - 2rem));
        min-height: 210px;
    }

    .medicine-cost-grid,
    .medicine-detail-facts {
        grid-template-columns: 1fr;
    }
}

/* Phase 9.17 medicine master, detail and local Bangla font refinements. */
@font-face {
    font-family: "SolaimanLipi";
    src: local("SolaimanLipi"), local("Solaiman Lipi");
    font-display: swap;
}

.medicine-master-policy {
    padding: .9rem 1rem;
    color: #174b39;
    background: #edf7f1;
    border: 1px solid rgba(20, 104, 73, .18);
    border-radius: .85rem;
}

.medicine-master-table th,
.medicine-master-table td {
    vertical-align: middle;
}

.medicine-master-table td:nth-child(2) {
    min-width: 260px;
}

.medicine-master-table td:nth-child(3) {
    min-width: 300px;
}

.medicine-master-table td:nth-child(4) {
    min-width: 330px;
}

.medicine-detail-hero .medicine-visual {
    max-width: 420px;
    margin-inline: auto;
}

.medicine-detail-list dt {
    margin-top: 1rem;
    color: var(--green-900);
    font-weight: 800;
}

.medicine-detail-list dt:first-child {
    margin-top: 0;
}

.medicine-detail-list dd {
    margin: .3rem 0 0;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.medicine-price-access {
    min-width: 175px;
}

html[lang="bn"] .home-quotes-track {
    font-family: var(--bangla-font) !important;
}

html[lang="bn"] .home-quote-card blockquote,
html[lang="bn"] .quote-viewer-dialog blockquote {
    font-family: var(--bangla-font) !important;
    line-height: 1.75;
}

@media (max-width: 767.98px) {
    .medicine-search-card {
        align-items: stretch;
    }

    .medicine-price-access {
        width: 100%;
        min-width: 0;
        text-align: start !important;
    }
}

/* Phase 9.19 member cart, address book and offer refinements. */
.member-offer-list {
    padding: .85rem;
    border: 1px solid rgba(20, 104, 73, .18);
    border-radius: .85rem;
    background: #f7fbf8;
}

.member-offer-item {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .45rem 0;
    border-top: 1px dashed rgba(20, 104, 73, .18);
}

.member-offer-item:first-of-type {
    border-top: 0;
}

.member-offer-item code {
    font-weight: 800;
    color: var(--green-900);
}

[data-address-book-form] [hidden],
#checkoutForm [hidden] {
    display: none !important;
}

@media (max-width: 575.98px) {
    .member-offer-item {
        flex-direction: column;
        gap: .2rem;
    }
}

/* Phase 9.20: signed-in member menu directly below the main site navigation. */
.member-site-menu {
    color: #fff;
    background: linear-gradient(90deg, var(--green-950), var(--green-800));
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 22px rgba(7, 45, 34, 0.12);
}

.member-site-menu-inner {
    display: flex;
    gap: 1rem;
    align-items: center;
    min-height: 48px;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.member-site-identity {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.5rem;
    align-items: center;
    padding-right: 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    white-space: nowrap;
    font-size: 0.82rem;
}

.member-site-links {
    display: flex;
    flex: 1 1 auto;
    gap: 0.35rem;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: thin;
}

.member-site-links a {
    display: inline-flex;
    gap: 0.38rem;
    align-items: center;
    padding: 0.48rem 0.68rem;
    color: #fff;
    border-radius: 0.55rem;
    text-decoration: none;
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 700;
}

.member-site-links a:hover,
.member-site-links a:focus-visible {
    color: var(--green-950);
    background: var(--gold);
    outline: none;
}

.member-menu-count {
    display: inline-grid;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.28rem;
    place-items: center;
    color: #fff;
    background: #b42318;
    border-radius: 999px;
    font-size: 0.68rem;
}

/* Member profile banner uses the saved colour when no image is available. */
.member-profile-hero {
    color: #fff;
    background-color: var(--member-banner-color, #0b5d46);
}

.member-profile-hero h1,
.member-profile-hero p,
.member-profile-hero > div > span {
    color: #fff;
}

/* Public Contact page details beside the message form. */
.contact-details-panel {
    top: 8.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: linear-gradient(145deg, #f8fbf9, #fffaf0);
    border: 1px solid rgba(11, 94, 65, 0.15);
    border-radius: 1.15rem;
    box-shadow: 0 18px 46px rgba(11, 61, 46, 0.1);
}

.contact-country-card {
    padding: 1rem;
    margin-top: 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
}

.contact-country-heading {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    margin-bottom: 0.8rem;
    color: var(--green-800);
}

.contact-country-heading h3 {
    margin: 0;
    font-size: 1.05rem;
}

.contact-country-card dl {
    display: grid;
    gap: 0.65rem;
    margin: 0;
}

.contact-country-card dl > div {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 0.65rem;
}

.contact-country-card dt {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.contact-country-card dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.contact-country-card a,
.contact-email-card a {
    color: var(--green-700);
    font-weight: 700;
    text-decoration: none;
}

.contact-email-card {
    display: grid;
    gap: 0.55rem;
    padding: 1rem;
    margin-top: 1rem;
    color: #fff;
    background: var(--green-900);
    border-radius: 0.9rem;
}

.contact-email-card h3,
.contact-email-card a {
    color: #fff;
}

.contact-email-card a {
    display: flex;
    gap: 0.55rem;
    align-items: center;
}

.footer-contact-list {
    display: grid;
    gap: 0.45rem;
}

.footer-contact-list a {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    margin: 0;
    overflow-wrap: anywhere;
}

.payment-platform-admin-logo,
.payment-platform-form-logo {
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
}

.payment-platform-admin-logo {
    width: 72px;
    height: 56px;
    padding: 0.35rem;
}

.payment-platform-form-logo {
    width: 100%;
    max-width: 160px;
    height: 70px;
    padding: 0.5rem;
}

@media (max-width: 1199.98px) {
    .member-site-menu-inner {
        display: block;
    }

    .member-site-identity {
        padding: 0.15rem 0 0.45rem;
        border-right: 0;
    }
}

@media (max-width: 575.98px) {
    .member-site-menu-inner {
        padding-right: 0.75rem !important;
        padding-left: 0.75rem !important;
    }

    .member-site-links a {
        padding: 0.45rem 0.58rem;
        font-size: 0.76rem;
    }

    .contact-country-card dl > div {
        grid-template-columns: 1fr;
        gap: 0.18rem;
    }
}

.header-member-account {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   PHASE 9.22 — BILINGUAL PAGE DESIGN, ABOUT TEAM & WCAG
========================================================= */
.cms-public-page {
    color: var(--page-body-color, #202823);
    background: var(--page-background, #ffffff);
    font-family: var(--page-body-font, Inter), Arial, sans-serif;
}

.cms-public-page .cms-section:not(.bg-dark-section):not(.bg-gold-section) {
    color: var(--page-body-color, #202823);
}

.cms-public-page .cms-section:not(.bg-dark-section):not(.bg-gold-section) h1,
.cms-public-page .cms-rich-content h1 {
    color: var(--page-h1-color, #082d22);
    font-family: var(--page-h1-font, Georgia), serif;
}

.cms-public-page .cms-section:not(.bg-dark-section):not(.bg-gold-section) h2,
.cms-public-page .cms-rich-content h2 {
    color: var(--page-h2-color, #082d22);
    font-family: var(--page-h2-font, Georgia), serif;
}

.cms-public-page .cms-section:not(.bg-dark-section):not(.bg-gold-section) h3,
.cms-public-page .cms-rich-content h3 {
    color: var(--page-h3-color, #0b3d2e);
    font-family: var(--page-h3-font, Georgia), serif;
}

.cms-public-page .cms-section:not(.bg-dark-section):not(.bg-gold-section) h4,
.cms-public-page .cms-rich-content h4 {
    color: var(--page-h4-color, #10513c);
    font-family: var(--page-h4-font, Inter), Arial, sans-serif;
}

.cms-public-page .cms-rich-content,
.cms-public-page .cms-rich-panel {
    color: var(--page-body-color, #202823);
    font-family: var(--page-body-font, Inter), Arial, sans-serif;
    font-size: 1.05rem;
    line-height: 1.8;
}


.cms-page-title-banner {
    position: relative;
    display: flex;
    min-height: clamp(260px, 38vw, 430px);
    overflow: hidden;
    align-items: center;
    color: #ffffff;
    background-color: #082d22;
    background-image: var(--page-banner-image);
    background-position: center;
    background-size: cover;
}

.cms-page-title-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4, 35, 25, 0.9), rgba(4, 35, 25, 0.42));
}

.cms-page-title-banner h1 {
    max-width: 950px;
    margin: 0.45rem 0 0.75rem;
    color: #ffffff;
    font-family: var(--page-h1-font, Georgia), serif;
    font-size: clamp(2.5rem, 6vw, 5.2rem);
}

.cms-page-title-banner p {
    max-width: 820px;
    margin: 0;
    color: #f0f7f3;
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.7;
}

.cms-page-title-banner .eyebrow {
    color: #f0c96a;
}

.cms-team-section .section-heading {
    max-width: 760px;
}

.cms-team-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d6e2db;
    border-radius: 1.25rem;
    box-shadow: 0 16px 42px rgba(8, 45, 34, 0.09);
}

.cms-team-photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #eaf2ed;
}

.cms-team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cms-team-content {
    padding: 1.4rem;
}

.cms-team-role {
    display: inline-block;
    margin-bottom: 0.55rem;
    color: #0b3d2e;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cms-team-content h3 {
    margin-bottom: 0.25rem;
}

.cms-team-designation {
    color: #49655a;
    font-weight: 700;
}

.cms-team-contact {
    display: grid;
    gap: 0.45rem;
    margin: 1rem 0;
    font-style: normal;
}

.cms-team-contact a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 0.6rem;
    color: #0b3d2e;
    overflow-wrap: anywhere;
}

.cms-team-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.cms-team-social a {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #ffffff;
    background: #0b3d2e;
    border-radius: 50%;
}

.cms-team-social a:hover,
.cms-team-social a:focus-visible {
    color: #082d22;
    background: #f0c96a;
}

.cms-team-job {
    margin-top: 1rem;
    border-top: 1px solid #d6e2db;
    padding-top: 1rem;
}

.cms-team-job summary {
    min-height: 44px;
    cursor: pointer;
    color: #0b3d2e;
    font-weight: 800;
}

.cms-team-job .cms-rich-content {
    margin-top: 0.75rem;
    font-size: 0.96rem;
}

@media (max-width: 767.98px) {
    .cms-page-title-banner {
        min-height: 280px;
    }

    .cms-page-title-banner h1 {
        font-size: clamp(2.15rem, 11vw, 3.4rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cms-public-page *,
    .pioneer-treatment-catalog *,
    .pioneer-public-page .catalogue-category-panel,
    .pioneer-public-page .catalogue-disease-panel {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.cms-public-page {
    background-color: var(--page-background, #ffffff);
    background-image: var(--page-background-image, none);
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}

.cms-public-page > .cms-section:not(.bg-dark-section):not(.bg-gold-section) {
    background-color: rgba(255, 255, 255, 0.97);
}

@media (max-width: 991.98px), (prefers-reduced-motion: reduce) {
    .cms-public-page {
        background-attachment: scroll;
    }
}


/* =========================================================
   PHASE 9.22.2 — BANGLA UTF-8, LOCAL SOLAIMANLIPI & PAGE FIXES
========================================================= */
@font-face {
    font-family: "SolaimanLipi";
    src: url("../fonts/SolaimanLipi.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "SolaimanLipi";
    src: url("../fonts/SolaimanLipi_Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

html[lang="bn"] {
    --bangla-font: "SolaimanLipi", "Noto Serif Bengali", "Noto Sans Bengali", "Nirmala UI", "Vrinda", sans-serif;
}

html[lang="bn"] body,
html[lang="bn"] p,
html[lang="bn"] a,
html[lang="bn"] li,
html[lang="bn"] dt,
html[lang="bn"] dd,
html[lang="bn"] label,
html[lang="bn"] input,
html[lang="bn"] textarea,
html[lang="bn"] select,
html[lang="bn"] option,
html[lang="bn"] button,
html[lang="bn"] h1,
html[lang="bn"] h2,
html[lang="bn"] h3,
html[lang="bn"] h4,
html[lang="bn"] h5,
html[lang="bn"] h6,
html[lang="bn"] .eyebrow,
html[lang="bn"] .navbar,
html[lang="bn"] .dropdown-menu,
html[lang="bn"] .modal,
html[lang="bn"] .offcanvas,
html[lang="bn"] .alert,
html[lang="bn"] .card,
html[lang="bn"] .panel-card,
html[lang="bn"] .cms-public-page,
html[lang="bn"] .cms-public-page .cms-rich-content,
html[lang="bn"] .cms-public-page .cms-rich-panel,
html[lang="bn"] .cms-public-page h1,
html[lang="bn"] .cms-public-page h2,
html[lang="bn"] .cms-public-page h3,
html[lang="bn"] .cms-public-page h4,
.cms-bangla-field,
.cms-bangla-field * {
    font-family: var(--bangla-font) !important;
}

.cms-bangla-field {
    font-size: 1.08rem;
    line-height: 1.9;
    unicode-bidi: plaintext;
}

.cms-editor-surface.cms-bangla-field {
    min-height: 20rem;
}

html[lang="bn"] .bi,
html[lang="bn"] [class^="bi-"],
html[lang="bn"] [class*=" bi-"] {
    font-family: "bootstrap-icons" !important;
}



/* Phase 9.22.5: About Us inherits the same page/banner/content layout as policy pages. */
.cms-public-page[data-page-slug="about-us"] .cms-team-section {
    background: rgba(255, 255, 255, 0.97);
}

/* Shared floating Go to top control */
.go-to-top{position:fixed;right:1.25rem;bottom:1.25rem;z-index:1040;width:3rem;height:3rem;border:0;border-radius:50%;display:grid;place-items:center;background:var(--green-900,#0b4b3b);color:#fff;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.22);transition:opacity .2s ease,transform .2s ease}.go-to-top[hidden]{display:none}.go-to-top:hover,.go-to-top:focus-visible{transform:translateY(-3px);background:var(--green-950,#082d22);color:#fff}.go-to-top i{font-size:1.25rem}@media(max-width:575.98px){.go-to-top{right:1rem;bottom:5.25rem;width:2.75rem;height:2.75rem}}

/* Phase 9.23.2: keep payment options in the left footer column. */
.footer-payment-partners-left{max-width:36rem}.footer-payment-partners-left .footer-payment-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}@media(min-width:1400px){.footer-payment-partners-left .footer-payment-logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:575.98px){.footer-payment-partners-left .footer-payment-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Phase 9.23.3: visually distinguish CMS subsections while preserving responsive flow. */
.cms-page-subsection {
    margin-inline: clamp(1rem, 4vw, 4rem);
    border-inline-start: 3px solid rgba(9, 93, 72, 0.18);
}
@media (max-width: 767.98px) {
    .cms-page-subsection {
        margin-inline: 0;
        border-inline-start-width: 2px;
    }
}


/* Phase 9.23.4: compact, single-row payment logos and admin logo preview. */
.footer-payment-partners-left {
    max-width: none;
}
.footer-payment-partners-left .footer-payment-logo-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: .42rem;
    overflow-x: auto;
    padding: .1rem .05rem .35rem;
    scrollbar-width: thin;
}
.footer-payment-partners-left .footer-payment-logo {
    flex: 0 0 76px;
    width: 76px;
    min-height: 45px;
    padding: .3rem .38rem;
    border-radius: .5rem;
}
.footer-payment-partners-left .footer-payment-logo img {
    width: 100%;
    max-width: 64px;
    height: 25px;
}
.footer-payment-partners-left .footer-payment-logo span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.payment-logo-setting-preview {
    display: grid;
    min-height: 78px;
    place-items: center;
    padding: .65rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .65rem;
}
.payment-logo-setting-preview img {
    width: 100%;
    max-width: 150px;
    height: 50px;
    object-fit: contain;
}
@media (max-width: 575.98px) {
    .footer-payment-partners-left .footer-payment-logo-grid {
        display: flex;
        grid-template-columns: none;
    }
}

/* Phase 9.23.7: reliable mobile homepage floating controls. */
.home-section-menu {
    pointer-events: none;
}
.home-section-menu.is-visible {
    pointer-events: auto;
}
.home-section-menu-toggle,
.go-to-top {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.home-section-menu-toggle {
    position: relative;
    z-index: 2;
}
.home-section-menu-panel {
    pointer-events: none;
}
.home-section-menu.is-open .home-section-menu-panel {
    pointer-events: auto;
}
.home-section-menu-panel a {
    min-height: 44px;
}
.go-to-top {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
}
.go-to-top.is-visible:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
@media (max-width: 767.98px) {
    .home-section-menu {
        z-index: 1046;
        right: max(.8rem, env(safe-area-inset-right));
        bottom: calc(4.9rem + env(safe-area-inset-bottom));
    }
    .home-section-menu-panel {
        width: min(19rem, calc(100vw - 1.6rem));
        max-height: min(66dvh, calc(100dvh - 10rem));
        -webkit-overflow-scrolling: touch;
    }
    .go-to-top {
        z-index: 1045;
        right: max(.8rem, env(safe-area-inset-right));
        bottom: calc(.8rem + env(safe-area-inset-bottom));
    }
}

/* Phase 9.23.8: keep floating controls inside the visible viewport. */
:root {
    --hd-visual-right: 0px;
    --hd-visual-bottom: 0px;
    --hd-visual-center-y: 50vh;
    --hd-visual-width: 100vw;
    --hd-visual-height: 100vh;
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

.home-section-menu {
    top: var(--hd-visual-center-y, 50vh) !important;
    right: calc(var(--hd-visual-right, 0px) + .75rem + env(safe-area-inset-right, 0px)) !important;
    bottom: auto !important;
    left: auto !important;
    max-width: calc(var(--hd-visual-width, 100vw) - 1.5rem);
    transform: translate3d(1rem, -50%, 0) !important;
    will-change: transform, opacity;
}

.home-section-menu.is-visible {
    transform: translate3d(0, -50%, 0) !important;
}

.home-section-menu-panel {
    top: 50% !important;
    right: calc(100% + .625rem) !important;
    bottom: auto !important;
    left: auto !important;
    width: min(18rem, calc(var(--hd-visual-width, 100vw) - 5.5rem)) !important;
    max-width: calc(var(--hd-visual-width, 100vw) - 5.5rem);
    max-height: min(72vh, calc(var(--hd-visual-height, 100vh) - 2rem));
    transform: translate3d(.625rem, -50%, 0) scale(.96) !important;
    transform-origin: right center !important;
    box-sizing: border-box;
}

.home-section-menu.is-open .home-section-menu-panel {
    transform: translate3d(0, -50%, 0) scale(1) !important;
}

.go-to-top {
    right: calc(var(--hd-visual-right, 0px) + .75rem + env(safe-area-inset-right, 0px)) !important;
    bottom: calc(var(--hd-visual-bottom, 0px) + .75rem + env(safe-area-inset-bottom, 0px)) !important;
    left: auto !important;
    margin: 0 !important;
}

@media (min-width: 768px) {
    .home-section-menu {
        right: calc(var(--hd-visual-right, 0px) + 1rem + env(safe-area-inset-right, 0px)) !important;
    }

    .go-to-top {
        right: calc(var(--hd-visual-right, 0px) + 1rem + env(safe-area-inset-right, 0px)) !important;
        bottom: calc(var(--hd-visual-bottom, 0px) + 1rem + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (min-width: 1600px) {
    .home-section-menu-toggle,
    .go-to-top {
        width: 3.25rem;
        height: 3.25rem;
    }
}

/* Phase 9.24.3: mobile/table overflow affordance and device-width safety. */
.table-responsive,.hd-horizontal-scroll{position:relative;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;scrollbar-width:thin}
.hd-scroll-cue{position:sticky;left:0;z-index:2;width:max-content;max-width:100%;margin:0 0 .5rem;padding:.35rem .65rem;border-radius:999px;background:#eef7f2;color:#245e49;font-size:.75rem;font-weight:700;box-shadow:0 .2rem .7rem rgba(10,71,50,.08)}
.medical-import-batch{display:grid;gap:.2rem;padding:.75rem 0;border-bottom:1px solid #e4ebe7}.medical-import-batch:last-child{border-bottom:0}.medical-import-batch small,.medical-import-batch span{color:#66766e;font-size:.82rem}
@supports (content-visibility:auto){main>.section-block,main>.home-section{content-visibility:auto;contain-intrinsic-size:1px 720px}}
.hd-scroll-hint{display:none;position:sticky;left:.5rem;width:max-content;margin:0 0 .35rem;border-radius:999px;padding:.25rem .55rem;color:#fff;background:rgba(10,80,61,.92);font-size:.7rem;font-weight:700;pointer-events:none;z-index:3}
.is-horizontally-scrollable>.hd-scroll-hint{display:inline-flex;align-items:center;gap:.3rem}.is-horizontally-scrolled>.hd-scroll-hint{opacity:.35}
img,video,iframe,canvas{max-width:100%}
@media(max-width:767.98px){.container,.container-fluid{max-width:100%}.home-section-menu-panel{overflow-y:auto!important;overscroll-behavior:contain}.table-responsive table{min-width:42rem}.nav,.menu-list,.medical-record-tabs{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.btn-group.mobile-stack{display:grid;width:100%}.btn-group.mobile-stack>.btn{width:100%;border-radius:.5rem!important}}

/* Phase 9.23.11: shared validation, warning and password guidance */
.hd-form-error-summary{border-left:5px solid #b42318;background:#fff1f0;color:#8a1c13;padding:1rem 1.1rem;border-radius:.75rem;margin-bottom:1rem}.hd-form-error-summary strong,.hd-password-policy strong{color:#b42318}.hd-password-policy{background:#fff7ed;border:1px solid #fed7aa;border-radius:.65rem;padding:.75rem .9rem;color:#9a3412;font-size:.9rem}.form-control.is-invalid,.form-select.is-invalid{border-color:#dc3545!important;box-shadow:0 0 0 .2rem rgba(220,53,69,.12)}.hd-invalid-feedback{font-weight:700;color:#b42318}.hd-confirm-modal .modal-header{background:#fff1f0;color:#8a1c13}.hd-confirm-modal .modal-body{font-size:1rem}.hd-confirm-modal .btn-danger{min-width:88px}
.homeo-permission-card {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1090;
    width: min(390px, calc(100vw - 2rem));
    padding: 1rem;
    border: 1px solid rgba(0, 91, 66, .18);
    border-radius: 1rem;
    background: #fff;
    color: #123b31;
}
.homeo-permission-card p { margin: .45rem 0 .8rem; color: #5b6f69; font-size: .9rem; }