/* ==========================================================================
   Clanics - Mobile-First Design System
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after {

    box-sizing: border-box;
    margin: 0;
    padding: 0;

}


html {

    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}


body {

    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;

}


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

button {
 font-family: inherit; cursor: pointer; border: none; background: none; 
}

input, textarea {
 font-family: inherit; font-size: inherit; 
}

a {
 color: inherit; text-decoration: none; 
}


/* Global form-control focus styling lives in public/css/focus.css,
   linked by both main.ejs and admin.ejs. Single source of truth for
   the whole site — see that file's header comment for the three
   variables (--focus-border-color, --focus-outline, --focus-shadow)
   that control input focus everywhere. */

/* --------------------------------------------------------------------------
   App Container
   -------------------------------------------------------------------------- */
.app-container {

    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
    min-height: 100dvh;

}


/* --------------------------------------------------------------------------
   Sidebar (Desktop) - Matching Sample Design
   -------------------------------------------------------------------------- */
.sidebar {

    /* Visual styling lives in the shared nav-rail.css (single source of truth
       for BOTH rails). Only the patient-specific responsive display stays
       here: hidden below 1024px (mobile uses the bottom nav), shown as a
       flex column at >=1024px (see the media query lower in this file). */
    display: none;

}


.logo-link {

    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    transition: color var(--transition);

}


.logo-link:hover {

    color: var(--primary);

}


/* User Avatar - removed (user-orb green icon removed) */

/* --------------------------------------------------------------------------
   Mobile Header
   -------------------------------------------------------------------------- */
.mobile-header {

    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--mobile-header);
    padding: 0 var(--space-md);
    background: var(--surface);
    border-bottom: 1px solid var(--border-light);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    /* Promote to GPU composite layer to prevent scroll repaint lag */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}


.mobile-menu-btn {

    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);

}


.mobile-menu-btn:hover {

    background: var(--bg-warm);

}


.mobile-logo {

    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--primary);

}


/* --------------------------------------------------------------------------
   Main Content
   -------------------------------------------------------------------------- */
.main-content {

    flex: 1;
    width: 100%;
    padding-top: var(--mobile-header);
    padding-bottom: var(--space-3xl);

}

/* Messages */
.message {

    display: flex;
    gap: var(--space-sm);
    max-width: 85%;
    animation: msgIn 0.3s ease;

}


@keyframes msgIn {

    from {
 opacity: 0; transform: translateY(8px); 
}

    to {
 opacity: 1; transform: translateY(0); 
}


}



.chat-input-wrapper {

    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--bg-secondary);
    border: 1.5px solid var(--border-medium);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
    transition: all 0.3s ease;

}


.chat-input-wrapper:hover {

    border-color: var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

}



.chat-input {

    flex: 1;
    border: none;
    outline: none;
    resize: none;
    padding: var(--space-sm) 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    background: transparent;
    color: var(--text-primary);
    max-height: 100px;

}


.chat-input::placeholder {

    color: var(--text-tertiary);

}


.send-btn {

    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    flex-shrink: 0;
    align-self: center;
    margin: 0;

}


.send-btn:hover:not(:disabled) {

    background: var(--primary-dark);
    transform: scale(1.05);

}


.send-btn:disabled {

    background: var(--border);
    cursor: not-allowed;

}


/* --------------------------------------------------------------------------
   Split View
   -------------------------------------------------------------------------- */
.split-view {

    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--mobile-header));
    min-height: calc(100dvh - var(--mobile-header));

}


.split-view.hidden {

    display: none;

}



/* Clinic Card */
.clinic-card {

    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-light);
    transition: all var(--transition);
    animation: cardIn 0.4s ease backwards;

}


@keyframes cardIn {

    from {
 opacity: 0; transform: translateY(20px); 
}

    to {
 opacity: 1; transform: translateY(0); 
}


}


.clinic-card:hover {

    box-shadow: var(--shadow-md);
    transform: translateY(-2px);

}


.clinic-badge {

    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: var(--accent);
    color: var(--text-inverse);
    font-size: 0.6875rem;
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.02em;

}


/* Spotlight Badge (paid boost) - Gold/amber styling */
.clinic-badge.spotlight {

    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);

}


/* Favourite Button on Card */
.favourite-btn {

    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);

}


.favourite-btn:hover {

    background: var(--surface);
    color: var(--error);
    transform: scale(1.1);

}


.favourite-btn.active {

    color: var(--error);

}


.favourite-btn.active .heart-filled {

    animation: heartPop 0.3s ease;

}


.favourite-btn.pulse {

    animation: pulse 0.3s ease;

}


@keyframes heartPop {

    0% {
 transform: scale(1); 
}

    50% {
 transform: scale(1.3); 
}

    100% {
 transform: scale(1); 
}


}


@keyframes pulse {

    0% {
 transform: scale(1); 
}

    50% {
 transform: scale(1.15); 
}

    100% {
 transform: scale(1); 
}


}


.clinic-name {

    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
    line-height: 1.3;

}


.service-tag {

    padding: 3px var(--space-sm);
    background: var(--primary-subtle);
    color: var(--primary);
    font-size: 0.6875rem;
    font-weight: var(--weight-medium);
    border-radius: var(--radius-sm);

}


.response-time {

    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--text-muted);

}

/* --------------------------------------------------------------------------
   Mobile Chat Overlay
   -------------------------------------------------------------------------- */
.mobile-chat-overlay {

    position: fixed;
    inset: 0;
    background: var(--surface);
    z-index: var(--z-header);
    display: flex;
    flex-direction: column;

}


.mobile-chat-overlay.hidden {

    display: none;

}


.mobile-chat-container {

    display: flex;
    flex-direction: column;
    height: 100%;

}


.mobile-chat-header {

    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-light);
    font-weight: var(--weight-semibold);
    background: var(--bg-primary);

}


.mobile-chat-close {

    margin-left: auto;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);

}


.mobile-chat-messages {

    flex: 1;
    padding: var(--space-md);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);

}


.mobile-chat-input {

    padding: var(--space-md);
    border-top: 1px solid var(--border-light);
    background: var(--bg);

}


/* --------------------------------------------------------------------------
   Mobile Sidebar Overlay
   -------------------------------------------------------------------------- */
.mobile-sidebar-overlay {

    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: var(--z-sticky);

}


.mobile-sidebar-overlay.hidden {

    display: none;

}



/* --------------------------------------------------------------------------
   Clinic Detail Modal
   -------------------------------------------------------------------------- */
.modal-overlay {

    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: var(--z-dropdown);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0.2s;

}


.modal-overlay.hidden {

    display: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

}


.modal-container {

    background: var(--surface);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(1) translateY(0);
    transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);

}


.modal-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-raised);
    transition: all var(--transition);
    box-shadow: var(--shadow-md);
}


.modal-close:hover {

    background: var(--bg-warm);
    color: var(--text);

}


.modal-content {

    max-height: 90vh;
    overflow-y: auto;

}


.modal-gallery {

    position: relative;
    height: 200px;
    background: var(--bg-warm);

}


.modal-image {

    width: 100%;
    height: 100%;
    object-fit: cover;

}


.modal-badge {

    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    padding: 6px 12px;
    background: var(--accent);
    color: var(--text-inverse);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.02em;

}


.modal-badge.spotlight {

    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);

}


/* Modal Verified Badge */
.modal-verified-badge {

    position: absolute;
    bottom: var(--space-md);
    left: var(--space-md);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-sm) 12px;
    background: rgba(45, 139, 122, 0.95);
    color: var(--text-inverse);
    font-size: 0.8125rem;
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(4px);

}


.modal-verified-badge svg {

    flex-shrink: 0;

}


/* Modal Favourite Button */
.modal-favourite-btn {
    position: absolute;
    top: var(--space-md);
    right: 72px;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all var(--transition);
    box-shadow: var(--shadow-md);
    z-index: var(--z-raised);
}


.modal-favourite-btn:hover {

    background: var(--surface);
    color: var(--error);
    transform: scale(1.1);

}


.modal-favourite-btn.active {

    color: var(--error);

}


.modal-favourite-btn.active .heart-filled {

    animation: heartPop 0.3s ease;

}


.modal-header {

    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-light);

}


.modal-title-row {

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);

}


.modal-title {

    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--text);
    line-height: 1.3;

}


.modal-rating {

    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--accent);
    flex-shrink: 0;

}


.modal-rating .rating-value {

    font-weight: var(--weight-semibold);
    font-size: 0.9375rem;

}


.modal-rating .rating-count {

    color: var(--text-muted);
    font-size: 0.8125rem;

}


.modal-location {

    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin-bottom: var(--space-sm);

}


.modal-header-meta {

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);

}


.modal-response-time {

    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 6px 12px;
    background: var(--primary-subtle);
    color: var(--primary);
    font-size: 0.8125rem;
    border-radius: var(--radius-full);

}


.modal-response-time strong {

    font-weight: var(--weight-semibold);

}


/* Modal Free Consultation Badge */
.modal-price {

    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-sm) 14px;
    background: var(--primary-subtle);
    color: var(--primary);
    font-size: 0.8125rem;
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-full);

}

.review-card {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #F2EFEA;
}

.review-card:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.modal-section {

    padding: var(--space-lg);

}


.modal-section + .modal-section {

    border-top: 1px solid var(--border-light);

}


.modal-section-title {

    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);

}


.modal-description {

    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.6;

}


.reviews-header .modal-section-title {

    margin-bottom: 0;

}


/* Hours dropdown close on outside click */
#hoursDrop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 260px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border: 1px solid #F2EFEA;
  padding: 4px 0;
  z-index: 20;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  animation: dropIn 0.15s ease;
}


@keyframes dropIn {

    from {

        opacity: 0;
        transform: translateY(-4px);
    
}

    to {

        opacity: 1;
        transform: translateY(0);
    
}


}


.hours-row .closed {

    color: var(--error);

}


/* Photo Gallery in Modal */
#modalGallery {

    position: relative;
    height: 220px;
    background: var(--bg-warm);
    overflow: hidden;

}


/* Image lightbox */
.img-lightbox {

    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.97);
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    animation: fadeIn 0.2s ease;

}


.lb-image-area {

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

}


.img-lightbox img.lb-main {

    max-width: 85vw;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 8px;
    user-select: none;
    display: block;

}


.lb-close {

    position: fixed;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-toast);
    transition: background 0.2s;

}


.lb-close svg {

    width: 20px;
    height: 20px;

}


.lb-close:hover {

    background: rgba(255, 255, 255, 0.25);

}


.lb-nav {

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-toast);
    transition: all 0.2s;
    opacity: 0.7;

}


.lb-nav:hover {

    background: rgba(0, 0, 0, 0.6);
    opacity: 1;

}


.lb-nav svg {

    width: 20px;
    height: 20px;

}


.lb-prev {

    left: -52px;

}


.lb-next {

    right: -52px;

}


.lb-counter {

    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    margin-top: var(--space-md);
    letter-spacing: 3px;

}


@media (max-width: 700px) {

    .lb-prev {

        left: var(--space-sm);
    
}

    .lb-next {

        right: var(--space-sm);
    
}

    .lb-nav {

        background: rgba(0, 0, 0, 0.5);
    
}

    .lb-close {

        top: 12px;
        right: 12px;
        width: 38px;
        height: 38px;
    
}


}


/* Review Form */
.review-form {

    padding: var(--space-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);

}


.star-btn.active svg {

    fill: var(--accent);

}


/* --------------------------------------------------------------------------
   Desktop (1024px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    /* Show sidebar, hide mobile header */
    .sidebar {

        display: flex;
    
}


    .mobile-header {

        display: none;
    
}


    .main-content {

        margin-left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
        padding-top: 0;
        padding-bottom: 0;
    
}

    /* Split View */
    .split-view {

        flex-direction: row;
        min-height: 100vh;
        min-height: 100dvh;
    
}



}


/* --------------------------------------------------------------------------
   Extra Large (1536px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1536px) {

    :root {

        --chat-panel-width: 420px;
    
}


}


/* ==========================================================================
   Page Sections (Explore, Favourites, Messages, Profile)
   ========================================================================== */
.page-section {

    padding: var(--space-xl);
    padding-bottom: calc(var(--space-xl) + 64px);
    min-height: calc(100vh - var(--mobile-header));
    min-height: calc(100dvh - var(--mobile-header));
    max-width: 1200px;
    margin: 0 auto;

}


.page-section.hidden {

    display: none;

}


.page-header {

    margin-bottom: var(--space-xl);

}


.page-title {

    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-bottom: var(--space-xs);

}


.page-subtitle {

    font-size: 0.9375rem;
    color: var(--text-secondary);

}


.section-title {

    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-bottom: var(--space-lg);

}


/* ==========================================================================
   Empty State
   ========================================================================== */
.empty-state {

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
    max-width: 400px;
    margin: 0 auto;

}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-primary {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    background: var(--primary);
    color: var(--text-inverse);
    font-size: 0.9375rem;
    font-weight: var(--weight-medium);
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    transition: all var(--transition);

}


.btn-primary:hover {

    background: var(--primary-dark);
    transform: translateY(-1px);

}


.btn-outline {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    background: transparent;
    color: var(--clanics-primary);
    font-size: 0.9375rem;
    font-weight: var(--weight-medium);
    border-radius: var(--radius-full);
    border: 2px solid var(--clanics-primary);
    cursor: pointer;
    transition: all var(--transition);

}


.btn-outline:hover {

    background: var(--clanics-primary);
    color: var(--text-inverse);
    transform: translateY(-1px);

}


}

/* ==========================================================================
   Messages Page
   ========================================================================== */

/* Message badge on sidebar nav */
.nav-icon.has-message-badge {

    position: relative;

}


.message-badge {

    position: absolute;
    top: -3px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 var(--space-xs);
    background: var(--error);
    color: var(--text-inverse);
    font-size: 0.6875rem;
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;

}


.message-badge.hidden {

    display: none;

}


/* Mobile bottom-nav badge — sits over the right of the icon. */

.mobile-nav-badge {

    position: absolute;
    top: var(--space-xs);
    right: calc(50% - 18px);
    min-width: 16px;
    height: 16px;
    padding: 0 var(--space-xs);
    background: var(--error, var(--color-danger-strong));
    color: #fff;
    font-size: 0.6875rem;
    font-weight: var(--weight-semibold);
    line-height: 16px;
    text-align: center;
    border-radius: var(--radius-full);
    pointer-events: none;

}



/* Messages layout */
.messages-layout {

    display: flex;
    flex-direction: column;
    height: calc(100vh - 190px);
    height: calc(100dvh - 190px);
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: 36px;

}


@media (min-width: 768px) {

    .messages-layout {

        flex-direction: row;
        height: calc(100vh - 160px);
        height: calc(100dvh - 160px);
    
}


}


/* Messages sidebar */
.messages-sidebar {

    width: 100%;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    overflow: hidden;

}


@media (min-width: 768px) {

    .messages-sidebar {

        width: 360px;
        border-bottom: none;
        border-right: 1px solid var(--border-light);
    
}


}


/* Messages filter */
.messages-filter {

    display: flex;
    gap: var(--space-xs);
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
    overflow-x: auto;

}


.msg-filter-btn {

    padding: var(--space-xs) var(--space-md);
    border: none;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    background: var(--bg-warm);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition);

}


.msg-filter-btn:hover {

    background: var(--primary-subtle);
    color: var(--primary);

}


.msg-filter-btn.active {

    background: var(--primary);
    color: var(--text-inverse);

}


/* Messages list */
.messages-list {

    flex: 1;
    overflow-y: auto;
    padding-bottom: var(--space-lg);

}


.message-thread {

    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background var(--transition);

}


.message-thread:hover {

    background: var(--bg-warm);

}


.message-thread.active {

    background: var(--primary-subtle);

}


.message-thread.unread {

    background: rgba(45, 139, 122, 0.05);

}


.message-thread.unread .thread-clinic {

    font-weight: 700;

}


.message-thread.unread .thread-preview {

    color: var(--text);
    font-weight: var(--weight-medium);

}


.thread-avatar {

    position: relative;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    overflow: visible;
    flex-shrink: 0;

}


.thread-avatar img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);

}


.online-indicator {

    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: var(--success);
    border: 2px solid var(--surface);
    border-radius: var(--radius-full);

}


.thread-content {

    flex: 1;
    min-width: 0;

}


.thread-header {

    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2px;

}


.thread-clinic {

    font-size: 0.9375rem;
    font-weight: var(--weight-semibold);
    color: var(--text);

}


.thread-time {

    font-size: var(--text-xs);
    color: var(--text-muted);
    flex-shrink: 0;

}


.thread-preview {

    font-size: 0.8125rem;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    margin-bottom: var(--space-xs);

}


.thread-meta {

    display: flex;
    align-items: center;
    justify-content: space-between;

}


.thread-service {

    font-size: 0.6875rem;
    font-weight: var(--weight-medium);
    color: var(--primary);
    background: var(--primary-subtle);
    padding: 2px var(--space-sm);
    border-radius: var(--radius-sm);

}


.unread-dot {

    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: var(--radius-full);

}


/* Conversation view */
.conversation-view {

    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;

}


/* Conversation empty state */
.conversation-empty {

    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-2xl);
    color: var(--text-muted);

}

.conversation-empty.hidden {

    display: none;

}


.conversation-empty-icon {

    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--bg-warm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-lg);

}


.conversation-empty h3 {

    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-bottom: var(--space-xs);

}


.conversation-empty p {

    font-size: var(--text-sm);

}


/* Conversation active */
.conversation-active {

    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;

}

.conversation-active.hidden {

    display: none;

}


/* Conversation header */
.conversation-header {

    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-light);
    background: var(--surface);

}


.back-to-list {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--bg-warm);
    color: var(--text);
    cursor: pointer;
    border: none;

}


@media (min-width: 768px) {

    .back-to-list {

        display: none;
    
}


}


.conversation-clinic-info {

    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;

}


.conversation-avatar {

    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    object-fit: cover;

}


.conversation-clinic-details h4 {

    font-size: 0.9375rem;
    font-weight: var(--weight-semibold);
    color: var(--text);

}


.conversation-status {

    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--text-muted);

}


.status-dot {

    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--text-muted);

}


.status-dot.online {

    background: var(--success);

}


.conversation-actions {

    display: flex;
    gap: var(--space-xs);

}


.conv-action-btn {

    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--bg-warm);
    color: var(--text-muted);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);

}


.conv-action-btn:hover {

    background: var(--primary-subtle);
    color: var(--primary);

}


.message-thread:last-of-type {

    margin-bottom: var(--space-md);

}


/* ==========================================================================
   Profile Page
   ========================================================================== */
.profile-content {

    max-width: 600px;
    margin: 0 auto;
    padding-bottom: var(--space-2xl);

}


/* Form Cards */
.form-card {

    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);

}


.form-row {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);

}


@media (max-width: 480px) {

    .form-row {

        grid-template-columns: 1fr;
    
}


}


.form-group {

    margin-bottom: var(--space-md);

}


.form-group label {

    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    margin-bottom: var(--space-xs);

}


.form-card .form-group {

    margin-bottom: var(--space-lg);

}


.form-card .form-group:last-child {

    margin-bottom: 0;

}

@keyframes spin {

    from {
 transform: translateY(-50%) rotate(0deg); 
}

    to {
 transform: translateY(-50%) rotate(360deg); 
}


}


.form-error {

    display: block;
    font-size: var(--text-xs);
    color: var(--error);
    margin-top: var(--space-xs);

}


.input-error {

    border-color: var(--error) !important;

}


.form-hint {

    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-xs);

}



.toggle-switch {

    position: relative;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
    cursor: pointer;

}


.toggle-switch input {

    display: none;

}


.toggle-slider {

    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: var(--radius-full);
    transition: all var(--transition);

}


.toggle-slider::before {

    content: '';
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: var(--surface);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);

}


.toggle-switch input:checked + .toggle-slider {

    background: var(--primary);

}


.toggle-switch input:checked + .toggle-slider::before {

    transform: translateY(-50%) translateX(24px);

}


.btn-text-danger {

    padding: var(--space-sm);
    background: none;
    border: none;
    color: var(--error);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition);

}


.btn-text-danger:hover {

    opacity: 1;

}


/* Settings Sections */
.settings-section {

    margin-bottom: var(--space-lg);

}

/* ==========================================================================
   Responsive - Tablet (768px+)
   ========================================================================== */
@media (min-width: 768px) {

    .page-title {

        font-size: 2rem;
    
}

}


/* ==========================================================================
   Responsive - Desktop (1024px+)
   ========================================================================== */
@media (min-width: 1024px) {

    .page-section {

        padding: var(--space-2xl);
        min-height: 100vh;
        min-height: 100dvh;
    
}


    .page-title {

        font-size: var(--text-4xl);
    
}


}


/* ==========================================================================
   Mobile Bottom Navigation
   ========================================================================== */
.mobile-bottom-nav {

    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--surface);
    border-top: 1px solid var(--border-light);
    z-index: var(--z-sticky);
    padding-bottom: env(safe-area-inset-bottom, 0);
    /* Promote to GPU composite layer to avoid repaint overhead on mobile scroll */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}


.mobile-nav-item {

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    height: 100%;
    padding: var(--space-sm) var(--space-xs);
    color: var(--text-muted);
    transition: color var(--transition);

}


.mobile-nav-item span {

    font-size: 0.625rem;
    font-weight: var(--weight-medium);

}


.mobile-nav-item:hover {

    color: var(--text-secondary);

}


.mobile-nav-item.active {

    color: var(--primary);

}


.mobile-nav-item.active svg {

    stroke-width: 2.5;

}


/* Hide mobile bottom nav on desktop */
@media (min-width: 1024px) {

    .mobile-bottom-nav {

        display: none;
    
}


}


/* --------------------------------------------------------------------------
   Pricing Page
   -------------------------------------------------------------------------- */
.pricing-page {

    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md);

}


/* Pricing Hero */
.pricing-hero {

    text-align: center;
    margin-bottom: var(--space-2xl);

}


.pricing-title, .success-title {

    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: var(--weight-semibold);
    color: var(--text);
    line-height: 1.2;
    margin-bottom: var(--space-md);

}


.pricing-subtitle {

    font-size: var(--text-lg);
    color: var(--text-secondary);
    max-width: 550px;
    margin: 0 auto var(--space-lg);
    line-height: 1.7;

}


.pricing-toggle {

    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);

}


.toggle-label {

    font-size: var(--text-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition);

}


.toggle-label.active {

    color: var(--text);
    font-weight: var(--weight-medium);

}


.save-badge {

    display: inline-block;
    padding: 2px 6px;
    background: var(--primary-subtle);
    color: var(--primary);
    font-size: 0.6875rem;
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-sm);
    margin-left: var(--space-xs);

}


.pricing-toggle .toggle-switch {

    width: 44px;
    height: 24px;
    background: var(--border);
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    position: relative;
    transition: background var(--transition);

}


.pricing-toggle .toggle-switch.active {

    background: var(--primary);

}


.pricing-toggle .toggle-slider {

    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: var(--radius-full);
    transition: transform var(--transition);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);

}


.pricing-toggle .toggle-switch.active .toggle-slider {

    transform: translateX(20px);

}

/* The pricing toggle is a <button> whose .toggle-slider IS the knob.
   Suppress the generic checkbox-switch ::before knob (line ~2090) so it
   doesn't render a second, oversized circle bleeding out of the track. */
.pricing-toggle .toggle-slider::before {

    content: none;

}


/* Pricing Cards - Green-Accent Theme Redesign */
.pricing-page {

    background: var(--page-bg);
    padding: var(--space-xl) 0 var(--space-2xl);

}


.pricing-cards {

    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin: 40px auto 48px;
    max-width: 1100px;
    padding: 0 var(--space-md);

}


@media (min-width: 768px) {

    .pricing-cards {

        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    
}


}


.pricing-card {

    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 24px;
    padding: 32px 28px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    text-align: left;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
    will-change: transform, box-shadow;

}


.pricing-card:hover {

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.04), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
    transform: translateY(-4px);

}


/* Middle Card: Professional */
.pricing-card.popular {

    background: linear-gradient(180deg, #F7FEE7 0%, #FFFFFF 35%);
    border: 1px solid #D9F99D;
    box-shadow: 0 10px 20px -3px rgba(132, 204, 22, 0.06), 0 4px 8px -2px rgba(132, 204, 22, 0.03);

}


.pricing-card.popular:hover {

    box-shadow: 0 20px 25px -5px rgba(132, 204, 22, 0.12), 0 10px 10px -5px rgba(132, 204, 22, 0.06);

}


/* Card Header Components */
.card-header {

    margin-bottom: 16px;
    text-align: left;

}


.pricing-card .plan-name {

    font-size: 22px;
    font-weight: 700;
    color: #111C15;
    margin-bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;

}


.pricing-card.popular .plan-name {

    color: #111C15;

}


.popular-badge, .card-price-top-badge {

    padding: 3px 8px;
    background: rgba(132, 204, 22, 0.15);
    border: 1px solid rgba(132, 204, 22, 0.3);
    color: #4D7C0F;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 99px;
    white-space: nowrap;
    line-height: 1.2;

}


.popular-badge {

    margin-left: 4px;
    vertical-align: middle;

}


.plan-desc {

    font-size: 14px;
    line-height: 1.5;
    color: #64748B;

}


/* Card Pricing Components */
.card-price {

    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    margin-bottom: 24px;
    line-height: 1;

}


.price-currency {

    font-size: 1.5rem;
    font-weight: 700;
    color: #111C15;
    vertical-align: super;
    margin-right: 2px;
    align-self: flex-start;
    margin-top: 4px;

}


.price-amount {

    font-size: 3.5rem;
    font-weight: 800;
    color: #111C15;
    letter-spacing: -1px;

}


.price-period {

    font-size: 1rem;
    font-weight: 500;
    color: #64748B;
    margin-left: 4px;

}


/* Card Action Button */
.plan-btn {

    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 9999px !important;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    text-decoration: none;
    margin-top: 0;
    margin-bottom: 16px;

}


.plan-btn-secondary, .plan-btn-premium {

    background: #111C15;
    color: #FFFFFF !important;

}


.plan-btn-secondary:hover:not(:disabled), .plan-btn-premium:hover:not(:disabled) {

    background: #233429;
    transform: translateY(-1px);

}


.plan-btn-primary {

    background: #84CC16;
    color: #111C15 !important;

}


.plan-btn-primary:hover:not(:disabled) {

    background: #65A30D;
    transform: translateY(-1px);

}


.plan-btn:disabled {

    background: #E2E8F0 !important;
    color: #94A3B8 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;

}


/* Small muted note / spacer line under the price */
.price-note {

    font-size: 12px;
    color: #64748B;
    margin: -8px 0 8px 0;
    font-weight: 500;
    text-align: left;

}


.card-annual-savings {

    font-size: 12px;
    color: #16A34A;
    margin: -4px 0 8px 0;
    font-weight: 600;
    text-align: left;

}


.price-desc-note {

    font-size: 12px;
    color: #64748B;
    margin: -8px 0 8px 0;
    text-align: left;

}


.card-price-top-badge {

    /* Own row at the top of the featured card — sits above the plan name
       so it never overlaps the title, whatever the plan is called. */
    align-self: flex-start;
    margin: 0 0 14px 0;

}


/* Feature Lists */
.plan-features-intro {

    font-size: 13px;
    font-weight: 700;
    color: #111C15;
    margin: 16px 0 12px 0;
    text-align: left;

}


.plan-features {

    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;

}


.plan-features li {

    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: #334155;
    line-height: 1.4;
    text-align: left;

}


.plan-features li.feature-locked {

    text-decoration: line-through;
    /* Was opacity:0.45, which dimmed the text to ~2.3:1 (axe serious). The
       strike-through + an explicit muted grey (5.4:1) reads as "locked"
       while meeting WCAG AA. */
    color: #6a6a6a;

}


.plan-features li > svg {

    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;

}




/* FAQ Layout styles */
.faq-section-wrap {

    max-width: 820px;
    margin: 0 auto 100px;
    padding: 0 var(--space-md);
    text-align: center;

}


.faq-badge-container {

    margin-bottom: 16px;

}


.faq-capsule {

    display: inline-flex;
    background: #84CC16;
    color: #111C15;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 99px;
    letter-spacing: 0.5px;

}


.faq-heading {

    font-size: 40px;
    font-weight: 800;
    color: #111C15;
    line-height: 1.2;
    margin-bottom: 48px;
    letter-spacing: -0.5px;

}


.underline-wrapper {

    position: relative;
    display: inline-block;

}


.handdrawn-line {

    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 12px;
    pointer-events: none;

}


.faq-accordion-container {

    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
    text-align: left;

}


.faq-card {

    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}


.faq-card:hover {

    border-color: #CBD5E1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);

}


.faq-trigger {

    display: flex;
    align-items: center;
    width: 100%;
    padding: 20px 24px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 16px;

}


.faq-icon-wrapper {

    flex-shrink: 0;

}


.faq-plus-icon {

    width: 24px;
    height: 24px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}


.faq-question-text {

    font-size: 16px;
    font-weight: 700;
    color: #111C15;

}


.faq-content {

    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}


.faq-card.open .faq-content {

    grid-template-rows: 1fr;

}


.faq-card.open .faq-plus-icon {

    transform: rotate(45deg);

}


.faq-content-inner {

    overflow: hidden;

}


.faq-content-inner p {

    padding: 0 24px 20px 64px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #475569;

}


.faq-footer-text {

    font-size: 14px;
    color: #64748B;
    margin-top: 40px;

}


.friendly-link {

    color: #111C15;
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.2s;

}


.friendly-link:hover {

    color: #84CC16;

}


/* ================= Dark Theme Overrides ================= */

html[data-theme="dark"] .pricing-card {

    background: #131722;
    border-color: #1F293D;
    box-shadow: none;

}


html[data-theme="dark"] .pricing-card.popular {

    background: linear-gradient(180deg, rgba(132, 204, 22, 0.08) 0%, #131722 35%);
    border-color: rgba(132, 204, 22, 0.3);

}


html[data-theme="dark"] .pricing-card .plan-name, html[data-theme="dark"] .pricing-card.popular .plan-name, html[data-theme="dark"] .price-currency, html[data-theme="dark"] .price-amount, html[data-theme="dark"] .plan-features-intro, html[data-theme="dark"] .faq-heading, html[data-theme="dark"] .faq-question-text {

    color: #FFFFFF;

}


html[data-theme="dark"] .plan-desc, html[data-theme="dark"] .price-period, html[data-theme="dark"] .plan-features li {

    color: #94A3B8;

}


html[data-theme="dark"] .plan-btn-secondary, html[data-theme="dark"] .plan-btn-premium {

    background: #FFFFFF;
    color: #111C15 !important;

}


html[data-theme="dark"] .plan-btn-secondary:hover:not(:disabled), html[data-theme="dark"] .plan-btn-premium:hover:not(:disabled) {

    background: #F1F5F9;

}


html[data-theme="dark"] .faq-card {

    background: #131722;
    border-color: #1F293D;

}


html[data-theme="dark"] .faq-card:hover {

    border-color: #2D3B55;

}


html[data-theme="dark"] .faq-content-inner p {

    color: #94A3B8;

}


html[data-theme="dark"] .friendly-link {

    color: #FFFFFF;

}


html[data-theme="dark"] .friendly-link:hover {

    color: #84CC16;

}


html[data-theme="dark"] .popular-badge, html[data-theme="dark"] .card-price-top-badge {

    background: rgba(132, 204, 22, 0.2);
    border-color: rgba(132, 204, 22, 0.4);
    color: #A3E635;

}



.pricing-layout-wrap {

    padding-top: 0;

}

.pricing-page-content {

    padding-top: 0;
    padding-bottom: 0;

}

.current-badge {

    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #111C15;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 6px 16px;
    border-radius: 99px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(17, 28, 21, 0.25);
    z-index: 2;

}

html[data-theme="dark"] .current-badge {

    background: #84CC16;
    color: #111C15;

}

.feature-included {

}

.pricing-trial-text {

    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 500;
    color: #64748B;

}

html[data-theme="dark"] .pricing-trial-text {

    color: rgba(255, 255, 255, 0.6);

}


.mock-line.name {

    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 4px;

}


.mock-line.sub {

    font-size: 11px;
    color: var(--text-muted);

}


.addon-icon.spotlight {

    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
    flex-shrink: 0;

}


.comparison-table th.highlight {

    background: var(--primary);
    color: var(--text-inverse);

}


.comparison-table .negative {

    color: var(--error);

}


.comparison-table .positive {

    color: var(--primary);
    font-weight: var(--weight-medium);

}


.faq-item {

    border-bottom: 1px solid var(--border-light);

}


.faq-question {

    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;

}


.faq-question span {

    font-size: 0.9375rem;
    font-weight: var(--weight-medium);
    color: var(--text);

}


.faq-question svg {

    width: 20px;
    height: 20px;
    color: var(--text-muted);
    transition: transform var(--transition);
    flex-shrink: 0;

}


.faq-item.open .faq-question svg {

    transform: rotate(180deg);

}


.faq-answer {

    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding-bottom: 0;

}


.faq-item.open .faq-answer {

    max-height: 500px;
    padding-bottom: var(--space-md);

}


.faq-answer p {

    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;

}


.cta-title {

    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 4vw, 2rem);
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-bottom: var(--space-sm);

}


.cta-subtitle {

    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);

}


.cta-buttons {

    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    justify-content: center;
    margin-bottom: var(--space-md);

}


@media (min-width: 480px) {

    .cta-buttons {

        flex-direction: row;
    
}


}


/* .cta-btn-primary / .cta-btn-secondary removed — migrated to the shared
   .btn system (.btn--cta / .btn--secondary on light heroes; .btn--inverse /
   .btn--inverse-outline on the teal .why-cta hero). See components.css. */

.cta-note {

    font-size: 0.8125rem;
    color: var(--text-muted);

}


@media (min-width: 768px) {

    .pricing-title {

        font-size: 2.5rem;
    
}


    .pricing-subtitle {

        font-size: var(--text-xl);
    
}


}


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {

    display: none;
    width: 100%;
    background: transparent;
    border-top: none;
    margin-left: 0;
    margin-bottom: var(--space-3xl); /* Space for mobile bottom nav */

}


@media (min-width: 768px) {

    .site-footer {

        margin-bottom: 0;
    
}


}


/* Footer Minimal Layout */
.footer-minimal {

    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    text-align: center;

}


.footer-minimal-single {

    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.6;
    text-align: center;

}


.footer-minimal-single a {

    color: var(--text-secondary);
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.15);
    text-underline-offset: 2px;
    transition: color 0.15s ease;

}


.footer-minimal-single a:hover {

    color: var(--primary);
    text-decoration-color: var(--primary);

}


.footer-minimal-single .footer-nav-link {

    font-weight: var(--weight-semibold);
    text-decoration: none;

}


.footer-minimal-single .footer-sep {

    margin: 0 6px;
    color: var(--text-muted);
    opacity: 0.5;

}


/* Dark mode theme overrides */
html[data-theme="dark"] .footer-minimal-single {

    color: rgba(255, 255, 255, 0.4);

}

html[data-theme="dark"] .footer-minimal-single a {

    color: rgba(255, 255, 255, 0.7);
    text-decoration-color: rgba(255, 255, 255, 0.15);

}

html[data-theme="dark"] .footer-minimal-single a:hover {

    color: #7EE0C7;
    text-decoration-color: #7EE0C7;

}


.split-view:not(.hidden) ~ .site-footer {

    display: none;

}


/* Show footer only on specific pages */
body.show-footer .site-footer {

    display: block;

}


/* --------------------------------------------------------------------------
   Messages Page Enhancements
   -------------------------------------------------------------------------- */

/* Page Header Row */
.page-header-row {

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);

}


/* Mark All Read Button */
.mark-all-read-btn {

    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    font-size: 0.8125rem;
    font-weight: var(--weight-medium);
    color: var(--primary);
    background: var(--primary-subtle);
    border-radius: var(--radius-full);
    transition: all var(--transition);
    white-space: nowrap;
    flex-shrink: 0;

}


.mark-all-read-btn:hover {

    background: var(--primary);
    color: white;

}


.mark-all-read-btn svg {

    flex-shrink: 0;

}


/* Messages Search Bar */
.messages-search {

    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-warm);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    position: relative;
    height: 48px;
    box-sizing: border-box;
    flex-shrink: 0;

}


.messages-search .search-icon {

    color: var(--text-muted);
    flex-shrink: 0;

}


.messages-search-input {

    flex: 1;
    border: none;
    background: none;
    font-size: var(--text-sm);
    color: var(--text);
    outline: none;
    height: 100%;
    padding: 0;
    margin: 0;
    line-height: 1;

}


.messages-search-input::placeholder {

    color: var(--text-muted);

}


.search-clear-btn {

    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border-radius: var(--radius-full);
    transition: all var(--transition);

}


.search-clear-btn:hover {

    background: var(--border);
    color: var(--text);

}


/* Messages Empty States */
.messages-empty-state {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
    color: var(--text-muted);

}


.messages-empty-state svg {

    margin-bottom: var(--space-md);
    opacity: 0.5;

}


.messages-empty-state h4 {

    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);

}


.messages-empty-state p {

    font-size: var(--text-sm);

}


/* More Options Dropdown */
.conv-more-dropdown {

    position: relative;

}


.conv-dropdown-menu {

    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-xs);
    z-index: var(--z-sticky);
    animation: dropdownFadeIn 0.15s ease;

}


@keyframes dropdownFadeIn {

    from {

        opacity: 0;
        transform: translateY(-8px);
    
}

    to {

        opacity: 1;
        transform: translateY(0);
    
}


}


.dropdown-item {

    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    color: var(--text);
    border-radius: var(--radius-sm);
    transition: background var(--transition);
    text-align: left;

}


.dropdown-item:hover {

    background: var(--bg-warm);

}


.dropdown-item svg {

    flex-shrink: 0;
    color: var(--text-secondary);

}


.dropdown-item.danger {

    color: var(--error);

}


.dropdown-item.danger svg {

    color: var(--error);

}


.dropdown-item.danger:hover {

    background: rgba(232, 90, 90, 0.08);

}


/* Typing Indicator */
.typing-indicator {

    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);

}


.typing-avatar {

    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    object-fit: cover;

}


.typing-bubble {

    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-warm);
    border-radius: var(--radius-lg);

}


.typing-dot {

    width: 6px;
    height: 6px;
    background: var(--text-muted);
    border-radius: var(--radius-full);
    animation: typingBounce 1.4s ease-in-out infinite;

}


.typing-dot:nth-child(2) {

    animation-delay: 0.2s;

}


.typing-dot:nth-child(3) {

    animation-delay: 0.4s;

}


@keyframes typingBounce {

    0%, 60%, 100% {

        transform: translateY(0);
    
}

    30% {

        transform: translateY(-4px);
    
}


}


.typing-text {

    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;

}



/* Unread Filter Count */
#unreadFilterCount {

    font-weight: var(--weight-semibold);

}


/* Mobile Responsive Adjustments */
@media (max-width: 767px) {

    .page-header-row {

        flex-direction: column;
        align-items: flex-start;
    
}


    .mark-all-read-btn {

        align-self: flex-end;
        margin-top: calc(-1 * var(--space-lg));
    
}


    .typing-indicator {

        padding: var(--space-xs) var(--space-sm);
    
}


    .typing-text {

        display: none;
    
}


}


/* Split view fixes for Clara */
.split-view:not(.hidden) .chat-panel {

    display: flex !important;

}

.split-view:not(.hidden) .clinics-section {

    min-height: 100vh;

}


/* Enquiry panel chips */
.eq-chip:hover {

    border-color: var(--primary) !important;
    color: var(--primary) !important;

}

#enquiryPanel {

    animation: slideUp 0.25s ease;

}

@keyframes slideUp {

    from {

        opacity: 0;
        transform: translateY(10px);
    
}

    to {

        opacity: 1;
        transform: translateY(0);
    
}


}


/* ===== Clara AI Icon & Branding ===== */

/* Clara Icon - Twin Dots */
.clara-icon {

    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-sm) 10px;
    background: linear-gradient(135deg, rgba(200, 230, 76, 0.15), rgba(200, 230, 76, 0.05));
    border-radius: var(--radius-full);

}


.clara-dot {

    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: var(--radius-full);
    animation: claraBlink 4s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(200, 230, 76, 0.4);

}


.clara-dot:nth-child(2) {

    animation-delay: 0.1s;

}


/* Idle blink animation */
@keyframes claraBlink {

    0%, 45%, 55%, 100% {

        transform: scaleY(1);
        opacity: 1;
    
}

    50% {

        transform: scaleY(0.1);
        opacity: 0.8;
    
}


}


/* Active/chatting state - dots become alert */
.clara-icon.active {

    background: linear-gradient(135deg, rgba(200, 230, 76, 0.25), rgba(200, 230, 76, 0.1));

}


.clara-icon.active .clara-dot {

    animation: claraActive 1.2s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(200, 230, 76, 0.6);

}


@keyframes claraActive {

    0%, 100% {

        transform: scale(1);
        opacity: 1;
    
}

    50% {

        transform: scale(1.15);
        opacity: 0.9;
    
}


}


/* Clara Info */
.clara-info {

    display: flex;
    flex-direction: column;
    gap: 1px;

}


.clara-name {

    font-size: 0.95rem;
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    line-height: 1.2;

}


.clara-subtitle {

    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.2;
    letter-spacing: 0.01em;

}



.mobile-chat-header .clara-icon {

    padding: 6px var(--space-sm);

}


.mobile-chat-header .clara-dot {

    width: 7px;
    height: 7px;

}


.mobile-chat-header .clara-info {

    flex: 1;

}


.mobile-chat-header .mobile-chat-close {

    margin-left: auto;

}


/* ==========================================================================
   Why Join Clanics Page
   ========================================================================== */
.why-join-page {

    max-width: 900px;
    margin: 0 auto;

}


/* Section Titles */
.why-join-page .section-title {

    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 3vw, 2rem);
    font-weight: var(--weight-semibold);
    color: var(--text);
    text-align: center;
    margin-bottom: var(--space-sm);

}


.why-join-page .section-subtitle {

    font-size: 0.9375rem;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: var(--space-xl);

}


/* Benefits Section */
.benefits-section {

    margin-bottom: var(--space-3xl);

}


.benefits-grid {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-lg);

}


.benefit-card {

    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    transition: all 0.3s ease;

}


.benefit-card:hover {

    border-color: var(--border);
    box-shadow: 0 8px 30px rgba(26, 43, 60, 0.08);

}


.benefit-icon {

    width: 56px;
    height: 56px;
    background: var(--primary-subtle);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
    color: var(--primary);

}


.benefit-title {

    font-size: 1.0625rem;
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin-bottom: var(--space-sm);

}


.benefit-desc {

    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;

}


/* Stats Section */
.stats-section {

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    margin-bottom: var(--space-3xl);
    color: #ffffff;

}


.stats-section .section-title {

    color: #ffffff;

}


.stats-section .section-subtitle {

    color: rgba(255, 255, 255, 0.85);

}


.stats-grid {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-lg);

}


.stat-card {

    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.22);

}


.stat-number {

    display: block;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: var(--space-xs);

}


.stat-label {

    display: block;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    margin-bottom: var(--space-sm);

}


.stat-source {

    display: block;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;

}


/* How It Works Section */
.how-it-works-section {

    margin-bottom: var(--space-3xl);

}


.steps-grid {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;

}


.step-card {

    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    flex: 1;
    min-width: 220px;
    max-width: 280px;

}


.step-number {

    width: 48px;
    height: 48px;
    background: var(--primary);
    color: #ffffff;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    font-weight: 700;
    margin: 0 auto var(--space-md);

}


.step-title {

    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);

}


.step-desc {

    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;

}


.step-connector {

    color: var(--text-muted);
    flex-shrink: 0;

}


@media (max-width: 768px) {

    .step-connector {

        display: none;
    
}


    .steps-grid {

        flex-direction: column;
    
}


    .step-card {

        max-width: 100%;
    
}


}


/* Comparison Section */
.compare-section {

    margin-bottom: var(--space-3xl);

}


.compare-table-wrapper {

    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);

}


.compare-table {

    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    background: var(--bg-card);

}


.compare-table th, .compare-table td {

    padding: var(--space-md) var(--space-lg);
    text-align: left;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--text-sm);

}


.compare-table th {

    background: var(--bg-warm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    white-space: nowrap;

}


.compare-table th.highlight-col {

    background: var(--primary);
    color: #ffffff;

}


.compare-table td.highlight-col {

    background: var(--primary-subtle);
    font-weight: var(--weight-semibold);

}


.compare-table td:first-child {

    font-weight: var(--weight-medium);
    color: var(--text-primary);

}


.compare-table .positive {

    color: var(--success);

}


.compare-table .negative {

    color: var(--error);

}


.compare-table .neutral {

    color: var(--text-muted);

}


.compare-table tbody tr:hover {

    background: var(--bg-warm);

}


.compare-table tbody tr:last-child td {

    border-bottom: none;

}


/* Why Join CTA Section */
.why-cta {

    background: linear-gradient(135deg, var(--primary) 0%, #0d8a6f 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    text-align: center;
    color: #ffffff;

}


.why-cta .cta-title {

    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 4vw, 2rem);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-sm);
    color: #ffffff;

}


.why-cta .cta-subtitle {

    font-size: var(--text-md);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-xl);

}


.why-cta .cta-buttons {

    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-md);

}


/* .why-cta .cta-btn-* removed — the teal-hero inverse treatment now lives in
   the shared .btn system as .btn--inverse / .btn--inverse-outline (+ .btn--pill
   for the rounded shape). See components.css. */

.why-cta .cta-note {

    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.75);

}


.tag {

    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--text-primary);

}


.tag button {

    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--text-base);
    line-height: 1;

}


/* ==========================================================================
   About Page
   ========================================================================== */
.about-page {

    max-width: 1000px;
    margin: 0 auto;

}


.about-hero {

    text-align: center;
    padding: var(--space-3xl) 0;

}


.about-hero-content h1 {

    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.2;
    margin-bottom: var(--space-lg);

}


.about-hero-subtitle {

    font-size: var(--text-lg);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;

}


.clara-icon-large {

    width: 64px;
    height: 64px;
    background: var(--primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 auto var(--space-lg);

}


.clara-icon-large .clara-dot {

    width: 12px;
    height: 12px;
    background: white;
    border-radius: var(--radius-full);

}


.about-section {

    padding: var(--space-2xl) 0;

}


.about-section-header {

    text-align: center;
    margin-bottom: var(--space-xl);

}


.about-section-header h2 {

    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 4vw, 2rem);
    margin-top: var(--space-sm);

}


.about-section-header p {

    color: var(--text-secondary);
    max-width: 600px;
    margin: var(--space-md) auto 0;

}


.about-mission-grid {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-lg);

}


.about-mission-card {

    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    text-align: center;

}


.mission-icon {

    width: 64px;
    height: 64px;
    background: var(--primary-subtle);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
    color: var(--primary);

}


.about-mission-card h3 {

    font-size: var(--text-lg);
    margin-bottom: var(--space-sm);

}


.about-mission-card p {

    color: var(--text-secondary);
    line-height: 1.6;

}


.about-clara-section {

    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    margin: var(--space-xl) 0;

}


.about-clara-content {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;

}


@media (max-width: 768px) {

    .about-clara-content {

        grid-template-columns: 1fr;
    
}


}


.about-clara-text h2 {

    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 4vw, 2rem);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-md);

}


.about-clara-text > p {

    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-lg);

}


.clara-features-list {

    list-style: none;
    padding: 0;
    margin: 0;

}


.clara-features-list li {

    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    color: var(--text-primary);

}


.clara-features-list svg {

    color: var(--success);
    flex-shrink: 0;
    margin-top: 2px;

}


.clara-chat-preview {

    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);

}


.preview-message {

    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);

}


.preview-message.user {

    flex-direction: row-reverse;

}


.clara-dots-small {

    width: 32px;
    height: 32px;
    background: var(--primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex-shrink: 0;

}


.clara-dots-small span {

    width: 6px;
    height: 6px;
    background: white;
    border-radius: var(--radius-full);

}


.preview-bubble {

    background: var(--bg-card);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    line-height: 1.5;
    max-width: 80%;

}


.preview-message.user .preview-bubble {

    background: var(--primary);
    color: white;

}


.about-stats-grid {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    text-align: center;

}


@media (max-width: 768px) {

    .about-stats-grid {

        grid-template-columns: repeat(2, 1fr);
    
}


}


.about-stat {

    padding: var(--space-lg);

}


.about-stat .stat-number {

    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--primary);

}


.about-stat .stat-label {

    color: var(--text-secondary);
    margin-top: var(--space-xs);

}


.about-values-grid {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-lg);

}


.about-value-card {

    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);

}


.about-value-card h4 {

    font-size: var(--text-md);
    margin-bottom: var(--space-sm);
    color: var(--primary);

}


.about-value-card p {

    color: var(--text-secondary);
    line-height: 1.6;
    font-size: var(--text-sm);

}


.about-cta {

    text-align: center;
    padding: var(--space-3xl) var(--space-xl) var(--space-2xl);
    background: linear-gradient(135deg, var(--primary-subtle), var(--bg-warm));
    border-radius: var(--radius-xl);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-xl);

}


.about-cta h2 {

    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 4vw, 2rem);
    margin-bottom: var(--space-sm);

}


.about-cta p {

    color: var(--text-secondary);
    margin-bottom: var(--space-lg);

}


.about-cta .btn-primary {

    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);

}


/* ==========================================================================
   How It Works Page
   ========================================================================== */
.how-it-works-page {

    max-width: 900px;
    margin: 0 auto;

}


.hiw-steps {

    position: relative;

}


.hiw-step {

    display: flex;
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
    position: relative;

}


.hiw-step::before {

    content: '';
    position: absolute;
    left: var(--space-lg);
    top: 60px;
    bottom: -40px;
    width: 2px;
    background: var(--border-light);

}


.hiw-step:last-child::before {

    display: none;

}


.hiw-step-number {

    width: 48px;
    height: 48px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-lg);
    flex-shrink: 0;
    position: relative;
    z-index: var(--z-base);

}


.hiw-step-content {

    flex: 1;
    padding-bottom: var(--space-lg);

}


.hiw-step-icon {

    width: 64px;
    height: 64px;
    background: var(--primary-subtle);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin-bottom: var(--space-md);

}


.hiw-step-content h3 {

    font-size: var(--text-xl);
    margin-bottom: var(--space-sm);

}


.hiw-step-content > p {

    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-md);

}


.hiw-step-example {

    background: var(--bg-warm);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-style: italic;

}


.hiw-step-example span {

    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    font-style: normal;

}


.hiw-step-features {

    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);

}


.hiw-step-features span {

    background: var(--primary-subtle);
    color: var(--primary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);

}


.hiw-section {

    padding: var(--space-2xl) 0;

}


.hiw-section-header {

    text-align: center;
    margin-bottom: var(--space-xl);

}


.hiw-section-header h2 {

    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 4vw, 2rem);

}


.hiw-benefits-grid {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-lg);

}


.hiw-benefit {

    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);

}


.hiw-benefit .benefit-icon {

    width: 48px;
    height: 48px;
    background: var(--primary-subtle);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;

}


.benefit-content h4 {

    font-size: var(--text-md);
    margin-bottom: var(--space-xs);

}


.benefit-content p {

    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;

}


.hiw-faq {

    max-width: 700px;
    margin: 0 auto;

}


.faqs-page .faq-item, .hiw-faq .faq-item, .pricing-faq .faq-item {

    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    overflow: hidden;

}


.faqs-page .faq-question, .hiw-faq .faq-question, .pricing-faq .faq-question {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    cursor: pointer;
    background: var(--bg-card);
    transition: background var(--transition);

}


.faqs-page .faq-question:hover, .hiw-faq .faq-question:hover, .pricing-faq .faq-question:hover {

    background: var(--bg-warm);

}


.faqs-page .faq-question h4, .hiw-faq .faq-question h4, .pricing-faq .faq-question h4 {

    font-size: var(--text-md);
    margin: 0;

}


.faqs-page .faq-question svg, .hiw-faq .faq-question svg, .pricing-faq .faq-question svg {

    color: var(--text-muted);
    transition: transform var(--transition);

}


.faqs-page .faq-item.open .faq-question svg, .hiw-faq .faq-item.open .faq-question svg, .pricing-faq .faq-item.open .faq-question svg {

    transform: rotate(180deg);

}


.faqs-page .faq-answer, .hiw-faq .faq-answer, .pricing-faq .faq-answer {

    padding: 0 var(--space-lg);
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    display: block;

}


.faqs-page .faq-item.open .faq-answer, .hiw-faq .faq-item.open .faq-answer, .pricing-faq .faq-item.open .faq-answer {

    padding: var(--space-md) var(--space-lg) var(--space-lg);
    max-height: 500px;

}


.faqs-page .faq-answer p, .hiw-faq .faq-answer p, .pricing-faq .faq-answer p {

    color: var(--text-secondary);
    line-height: 1.7;

}


.hiw-cta {

    text-align: center;
    padding: var(--space-3xl) var(--space-xl);
    background: linear-gradient(135deg, var(--primary-subtle), var(--bg-warm));
    border-radius: var(--radius-xl);
    margin-top: var(--space-xl);

}


.hiw-cta h2 {

    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 4vw, 2rem);
    margin-bottom: var(--space-sm);

}


.hiw-cta p {

    color: var(--text-secondary);
    margin-bottom: var(--space-lg);

}


/* ==========================================================================
   Blog Page
   ========================================================================== */
.blog-page {

    max-width: 1100px;
    margin: 0 auto;

}


.blog-featured {

    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-2xl);

}


@media (max-width: 768px) {

    .blog-featured {

        grid-template-columns: 1fr;
    
}


}


.blog-featured-image {

    background: var(--bg-warm);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;

}


.blog-image-placeholder {

    color: var(--text-muted);

}


.blog-image-placeholder.small {

    padding: var(--space-2xl);

}


.blog-featured-content {

    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;

}


.blog-category {

    display: inline-block;
    background: var(--primary-subtle);
    color: var(--primary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-md);

}


.blog-featured-content h2 {

    font-family: var(--font-display);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-md);
    line-height: 1.3;

}


.blog-featured-content > p {

    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-md);

}


.blog-meta {

    display: flex;
    gap: var(--space-md);
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-md);

}


.blog-categories {

    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);

}


.blog-cat-btn {

    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition);

}


.blog-cat-btn:hover, .blog-cat-btn.active {

    background: var(--primary);
    color: white;
    border-color: var(--primary);

}


.blog-grid {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-lg);

}

.blog-load-more {

    text-align: center;
    padding: var(--space-2xl) 0;

}


.blog-newsletter {

    background: linear-gradient(135deg, var(--primary-subtle), var(--bg-warm));
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    margin-top: var(--space-xl);

}


@media (max-width: 768px) {

    .blog-newsletter {

        flex-direction: column;
        text-align: center;
    
}


}


.newsletter-content h3 {

    font-size: var(--text-xl);
    margin-bottom: var(--space-xs);

}


.newsletter-content p {

    color: var(--text-secondary);

}


.newsletter-form {

    display: flex;
    gap: var(--space-sm);

}


.newsletter-input {

    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    min-width: 250px;
    background: var(--bg-card);

}



/* ==========================================================================
   Help Centre Page
   ========================================================================== */
.help-page {

    max-width: 1100px;
    margin: 0 auto;

}


.help-search {

    max-width: 500px;
    margin: 0 auto;
    position: relative;

}


.help-search svg {

    position: absolute;
    left: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);

}


.help-search-input {

    width: 100%;
    padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) + 28px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    font-size: var(--text-md);
    background: var(--bg-card);

}


.help-contact {

    text-align: center;
    padding: var(--space-2xl);
    background: var(--bg-card);
    border-radius: var(--radius-xl);

}


.help-contact h3 {

    font-size: var(--text-xl);
    margin-bottom: var(--space-sm);

}


.help-contact p {

    color: var(--text-secondary);
    margin-bottom: var(--space-lg);

}


/* Help Centre Page Categories & Tabs */
.help-tabs {

    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;

}


.help-tab {

    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);

}


.help-tab:hover {

    border-color: var(--primary);
    color: var(--text-primary);

}


.help-tab.active {

    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;

}


/* FAQ Accordion List */
.help-faq-list {

    max-width: 800px;
    margin: 0 auto var(--space-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);

}


.faq-item {

    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition);

}


.faq-item:hover {

    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);

}


.faq-question {

    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;

}


.faq-icon {

    color: var(--text-secondary);
    transition: transform var(--transition);
    flex-shrink: 0;

}


.faq-item.active .faq-icon {

    transform: rotate(180deg);
    color: var(--primary);

}


.faq-answer {

    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;

}


.faq-answer-content {

    padding: 0 var(--space-xl) var(--space-lg);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;

}


.faq-answer-content p {

    margin: 0 0 var(--space-sm);

}


.faq-answer-content p:last-child {

    margin-bottom: 0;

}


.faq-answer-content strong {

    color: var(--text-primary);

}


.faq-answer-content a {

    color: var(--primary);
    text-decoration: none;

}


.faq-answer-content a:hover {

    text-decoration: underline;

}


/* No Results State */
.help-no-results {

    text-align: center;
    padding: var(--space-2xl);
    display: none;

}


.help-no-results p {

    color: var(--text-secondary);
    margin-bottom: var(--space-lg);

}


/* ==========================================================================
   Contact Page
   ========================================================================== */
.contact-page {

    max-width: 1000px;
    margin: 0 auto;

}


.contact-content {

    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-2xl);

}


@media (max-width: 768px) {

    .contact-content {

        grid-template-columns: 1fr;
    
}


}


.contact-form {

    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);

}



.form-group input, .form-group select, .form-group textarea {

    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    -webkit-appearance: none;
}

.contact-locked-input {
    background: #f5f3f0 !important;
    color: var(--text-secondary) !important;
    cursor: not-allowed !important;
}
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;

}


.form-group select {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    background-size: 16px;
    padding-right: calc(var(--space-md) + 20px);
    cursor: pointer;

}


.form-group textarea {

    resize: vertical;
    min-height: 120px;

}


.captcha-group {

    margin-bottom: var(--space-lg);

}


.captcha-container {

    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: 4px;

}


.btn-icon {

    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    height: 42px;
    width: 42px;
    transition: all 0.2s ease;

}


.btn-icon:hover {

    background: var(--bg-hover) !important;
    border-color: var(--border-medium);
    color: var(--text-primary);

}


.contact-info-section {

    display: flex;
    flex-direction: column;
    gap: var(--space-md);

}


.contact-info-card {

    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);

}


.contact-info-icon {

    width: 44px;
    height: 44px;
    background: var(--primary-subtle);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    margin-bottom: var(--space-sm);

}


.contact-info-card h4 {

    font-size: var(--text-md);
    margin-bottom: var(--space-xs);

}


.contact-info-card > p {

    color: var(--text-primary);
    margin-bottom: var(--space-xs);

}


.contact-response {

    font-size: var(--text-xs);
    color: var(--text-muted);

}


/* ==========================================================================
   FAQs Page
   ========================================================================== */
.faqs-page {

    max-width: 800px;
    margin: 0 auto;

}


.faqs-categories {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);

}


.faq-cat-btn {

    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition);

}


.faq-cat-btn:hover, .faq-cat-btn.active {

    background: var(--primary);
    color: white;
    border-color: var(--primary);

}


.faqs-list {

    margin-bottom: var(--space-2xl);

}


.faqs-contact {

    text-align: center;
    padding: var(--space-2xl);
    background: linear-gradient(135deg, var(--primary-subtle), var(--bg-warm));
    border-radius: var(--radius-xl);

}


.faqs-contact h3 {

    font-size: var(--text-xl);
    margin-bottom: var(--space-sm);

}


.faqs-contact p {

    color: var(--text-secondary);
    margin-bottom: var(--space-lg);

}


/* ==========================================================================
   Legal Pages (Privacy, Terms, Cookie, Disclaimer)
   ========================================================================== */
.legal-page {

    max-width: 800px;
    margin: 0 auto;

}


.legal-header {

    text-align: center;
    padding: var(--space-2xl) 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-xl);

}


.legal-header h1 {

    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 2.5rem);
    margin-bottom: var(--space-sm);

}


.legal-updated {

    color: var(--text-muted);
    font-size: var(--text-sm);

}


.legal-content {

    padding-bottom: var(--space-2xl);

}


.legal-section {

    margin-bottom: var(--space-xl);

}


.legal-section h2 {

    font-size: var(--text-lg);
    margin-bottom: var(--space-md);
    color: var(--text-primary);

}


.legal-section p {

    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-md);

}


.legal-section ul {

    color: var(--text-secondary);
    line-height: 1.8;
    padding-left: var(--space-lg);
    margin-bottom: var(--space-md);

}


.legal-section ul li {

    margin-bottom: var(--space-xs);

}




/* ===== Home/Clara (moved from views/pages/home.ejs inline <style>) ===== */
  /* Chat shell. Mobile = full-bleed canvas (sidebar hidden by its own
     responsive CSS, mobile-header/nav hidden here, drawer trigger lives
     in cs-strip). Desktop = persistent sidebar on the left (SAME nav as
     every inner page), chat shell pinned to the right of it. The
     hamburger is then redundant on desktop and gets hidden too. One nav
     pattern across the whole product. */
  body.body--chat-page .mobile-bottom-nav, body.body--chat-page .site-footer {
 display: none !important; 
}

  @media (min-width: 768px) {
    /* Chat-shell pages (e.g. patient home) hide the mobile-header on desktop
       and use the sidebar instead. Register-clinic (#regShell) is the
       exception: it hides the sidebar and re-uses this strip AS its desktop
       header, so exclude it explicitly here rather than relying on the
       #regShell override winning on specificity later in the file. */
    body.body--chat-page:not(:has(#regShell)) .mobile-header {
      display: none !important;
    }
  }

  body.body--chat-page .main-content {
 margin: 0 !important; padding: 0 !important; 
}

  body.body--chat-page .app-container {
 display: block; 
}


  html, body.body--chat-page {
 height: 100%; 
}

  body.body--chat-page {
 overflow: hidden; 
}


  /* a11y — screen-reader-only utility (visually hidden, still announced). */
  .cs-sr-only {

    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
  
}

  /* Skip link — only visible on keyboard focus. Lets a screen-reader user
     jump past the drawer + hero straight to the input. */
  .cs-skip {

    position: fixed; top: var(--space-sm); left: var(--space-sm);
    background: var(--text); color: #fff;
    padding: 10px var(--space-md); border-radius: 8px;
    font-size: 14px; font-weight: var(--weight-semibold);
    text-decoration: none; z-index: var(--z-toast);
    transform: translateY(-200%); transition: transform 0.15s;
  
}

  .cs-skip:focus {
 transform: translateY(0); outline: 2px solid var(--primary); outline-offset: 2px; 
}

  /* Visible focus ring on every interactive control. Hidden for mouse
     users via :focus-visible — only keyboard navigation shows it. */
  .chat-shell :focus-visible, .cs-sheet :focus-visible, .cs-drawer :focus-visible {

    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  
}

  /* Hide sheet from a11y tree when not open — `hidden` already does this
     but some screen readers still surface contents. inert is the modern
     answer (no Tab in, no SR announce). */
  .cs-sheet[hidden] {
 display: none !important; 
}


  .chat-shell {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: auto;
    height: 100vh;
    height: var(--visual-viewport-height, 100dvh);
    /* Match the inner-page sidebar offset on desktop — the persistent
       rail is fixed at left:0 with ~72px width, so the chat surface
       starts after it. Mobile keeps the rail hidden and the shell fills. */
    /* Flex (not grid) so children that go display:none collapse cleanly
       without disturbing track assignment. Each child sizes naturally
       (strip/hero/input = auto), conversation flexes to fill remaining. */
    display: flex;
    flex-direction: column;
    background: var(--page-bg);
    font-family: var(--font-body);
    color: var(--text);
  }

  .cs-hero, .cs-input {
 flex: 0 0 auto; 
}


  /* Brand hero — Playfair, two-line, accent in teal. Same 720px column
     so it visually anchors with the conversation + input below.
     EMPTY STATE only: collapses smoothly the moment the user sends their
     first message (chatShell loses .is-empty). Industry pattern
     (ChatGPT / Claude / Gemini / Pi) — hero introduces the product,
     conversation takes over once engaged. */
  .cs-hero {

    text-align: center;
    padding: var(--space-lg) 20px var(--space-xs);
    max-width: 720px;
    margin: 0 auto;
    /* Collapsed state defaults — overridden when .is-empty is on the shell. */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-8px);
    transition: max-height 0.32s ease, opacity 0.22s ease, transform 0.32s ease, padding 0.32s ease;
  
}

  .chat-shell.is-empty .cs-hero {

    max-height: 240px;
    opacity: 1;
    transform: translateY(0);
  
}

  /* When collapsed, kill the vertical padding too so no ghost gap remains. */
  .chat-shell:not(.is-empty) .cs-hero {
 padding-top: 0; padding-bottom: 0; 
}


  /* EMPTY STATE — Gemini / ChatGPT pattern: centre the hero + input as a
     group in the viewport, rather than hero-at-top + input-pinned-bottom
     with a dead gap between. The instant the user sends their first message
     the shell loses .is-empty and reverts to the docked chat layout below
     (conversation flex-fills, input sits at the bottom, messages scroll). */
  .chat-shell.is-empty {
 justify-content: center; 
}

  /* Don't let the (empty) conversation grow and shove the input down — let
     the hero + input cluster in the middle instead. */
  /* Landing state: the greeting is the only bubble, so collapse the spacing
     that normally separates a growing transcript from the composer. Without
     this, bubble margin (18) + conversation pad-bottom (24) + input pad-top
     (14) stack to ~56px below the greeting vs ~20px above it — a lopsided
     gap. Tightening the bottom balances the greeting between hero + input.
     Active chat (no .is-empty) keeps its normal breathing room. */
  .chat-shell.is-empty .cs-conversation {
 flex: 0 0 auto; padding-bottom: 4px; 
}

  .chat-shell.is-empty .cs-bubble:last-child {
 margin-bottom: 0; 
}

  /* Keep the mobile top strip pinned at the top while the rest centres.
     (On desktop .cs-strip is display:none, so this is mobile-only.) */
  .chat-shell.is-empty .cs-strip {
 position: absolute; top: 0; left: 0; right: 0; 
}

  .cs-hero__title {

    font-family: var(--font-display);
    font-weight: var(--weight-medium);
    font-size: clamp(26px, 4.5vw, 38px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
  
}

  .cs-hero__accent {

    color: var(--primary);
    display: inline-block;
  
}

  @media (max-width: 480px) {

    .cs-hero {
 padding: 18px var(--space-md) var(--space-xs); 
}

  
}

  @media (min-width: 768px) {

    .chat-shell {
 left: 72px; 
}

    /* Desktop: sidebar is the nav. Hamburger is redundant. !important
       because the base .cs-drawer-btn (display: flex) is declared later
       in the file. */
    .cs-drawer-btn {
 display: none !important; 
}

  
}


  /* ── .cs-corner-link — SINGLE SOURCE OF TRUTH for the quiet "corner nav"
     pill used on every chat-shell page: "For clinics →" (home, top-right)
     and "← Clanics" (register-clinic, top-left). Appearance + hover live
     here once; each page only adds its own POSITIONING (.cs-biz / strip).
     Teal hover matches the app's established hover accent (.cs-send:hover,
     legal-link hovers). ───────────────────────────────────────────────── */
  .cs-corner-link {

    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
  
}

  .cs-corner-link:hover {
 color: var(--primary); background: rgba(45, 139, 122, 0.07); 
}

  .cs-corner-link:focus-visible {
 outline: 2px solid var(--primary); outline-offset: 2px; 
}


  /* "For clinics" doorway — POSITIONING ONLY (appearance from .cs-corner-link).
     Desktop-only, pinned top-right of the chat-shell (position:fixed, so it
     anchors to the viewport). Mobile hides it — the drawer's labelled "For
     clinics — list yours" covers small screens. */
  .cs-biz {
 display: none; 
}

  @media (min-width: 768px) {

    .cs-biz {

      display: inline-flex;
      position: absolute;
      top: 20px;
      right: 26px;
      z-index: var(--z-raised);
    
}

  
}


  /* Hide the "For clinics" corner link when modals or result sheets are active */
  body:has(#csResultSheet:not([hidden])) .cs-biz, body:has(#clinicModal:not(.hidden)) .cs-biz, body:has(#authModal:not([hidden])) .cs-biz {

    display: none !important;
  
}


  /* First-time tooltip — only shown to users who've never opened the
     drawer. Fades after 4s. Avoids the "where do I find the menu?"
     question for new visitors. */
  .cs-hint {

    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--text);
    color: #fff;
    font-size: 11px;
    font-weight: var(--weight-semibold);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    animation: cs-hint-fade 5s ease forwards;
    animation-delay: 1.2s;
  
}

  body.has-seen-drawer .cs-hint {
 display: none; 
}

  @keyframes cs-hint-fade {

    0% {
 opacity: 0; 
}

    20% {
 opacity: 1; 
}

    80% {
 opacity: 1; 
}

    100% {
 opacity: 0; 
}

  
}


  /* Conversation — scrollable middle. One canonical column (720px) shared
     with the hero and the input wrap so the three stack visually as one
     centered composition. Industry pattern (ChatGPT, Claude, Gemini, Pi).
     Bubbles flow to the column width — no inner 520px cap. */
  .cs-conversation {

    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px var(--space-md) var(--space-lg);
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
  
}

  @media (min-width: 760px) {

    .cs-conversation {
 padding: var(--space-md) var(--space-lg) var(--space-lg); 
}

    .cs-conversation > * {
 max-width: 720px; margin-left: auto; margin-right: auto; 
}

  
}


  /* Bubbles */
  .cs-bubble {

    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    animation: cs-bubble-bounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  
}

  @keyframes cs-bubble-bounce {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

  .cs-bubble--user {
 justify-content: flex-end; 
}

  .cs-bubble__body {

    /* No fixed cap — let messages fill the conversation column (720px on
       desktop) like ChatGPT/Claude/Gemini. Long replies wrap; short
       replies sit naturally in their bubble. */
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 15px;
    line-height: 1.55;
  
}

  /* User messages — soft teal pill that hugs the content. Lighter than
     Clara's reply so the eye flows naturally to her response (which is
     what the user came here to read). Teal also matches our system
     "active / saved / new" colour family — coherent across the product. */
  .cs-bubble--user .cs-bubble__body {

    flex: 0 1 auto;
    max-width: 70%;
    width: fit-content;
  
}

  .cs-bubble--clara .cs-bubble__body {
 background: var(--page-bg); color: var(--text); border-top-left-radius: 4px; 
}

  .cs-bubble--user  .cs-bubble__body {
 background: var(--primary-subtle); color: var(--text); border-top-right-radius: 4px; 
}


  /* Inline clinic cards — live INSIDE Clara's bubble. Small, dense,
     tappable. No SPOTLIGHT, no "From £", no "Replies < 1 hour" —
     conversational cards aren't comparison signals. */
  .cs-cards {
 margin-top: 12px; display: grid; gap: 10px; 
}

  .cs-card {

    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 12px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
  
}

  .cs-card:hover {
 border-color: var(--primary); transform: translateY(-1px); 
}

  .cs-card__photo {

    width: 64px; height: 64px;
    border-radius: 8px;
    background: var(--page-bg) center/cover no-repeat;
    background-image: url('/images/placeholders/clinic.svg');
  
}

  .cs-card__body {
 display: flex; flex-direction: column; min-width: 0; gap: 2px; 
}

  .cs-card__name {
 font-size: 14px; font-weight: var(--weight-semibold); color: var(--text); margin: 0; line-height: 1.3; 
}

  .cs-card__meta {
 font-size: 12px; color: var(--text-secondary); margin: 0; 
}

  .cs-card__rating {
 font-size: 12px; color: var(--text-secondary); 
}

  .cs-card__rating .stars {
 color: var(--warning); margin-right: var(--space-xs); 
}

  .cs-card__actions {
 display: flex; gap: var(--space-sm); margin-top: var(--space-xs); 
}

  .cs-card__open, .cs-card__save {

    background: none; border: none; padding: 0;
    font: inherit; font-size: 12px; font-weight: var(--weight-medium);
    cursor: pointer; color: var(--primary);
  
}

  .cs-card__save {
 color: var(--text-secondary); 
}

  .cs-card__save:hover, .cs-card__save.is-saved {
 color: var(--primary); 
}


  /* Desktop uses its real estate — bigger photos, larger name, more breathing
     room. Same product, two grammars. (Same shape, scaled to fit.) */
  @media (min-width: 760px) {

    .cs-card {
 grid-template-columns: 96px 1fr; gap: var(--space-md); padding: 14px; 
}

    .cs-card__photo {
 width: 96px; height: 96px; border-radius: var(--radius-md); 
}

    .cs-card__name {
 font-size: 15px; 
}

    .cs-card__meta {
 font-size: 13px; 
}

    .cs-card__rating {
 font-size: 13px; 
}

    .cs-card__actions {
 font-size: 13px; margin-top: 6px; 
}

  
}


  /* Typing dots — shown ONLY while the bubble is .is-thinking (no content
     yet). The moment _claraStream removes that class (first character of
     the reply arrives), the dots disappear and the text fades in. */
  .cs-typing {
 display: inline-flex; gap: var(--space-xs); align-items: center; padding: var(--space-xs) 0; 
}

  .cs-typing span {
 width: 6px; height: 6px; border-radius: 50%; background: #b8b1a4; animation: cs-typing 1.2s ease-in-out infinite; 
}

  .cs-typing span:nth-child(2) {
 animation-delay: 0.15s; 
}

  .cs-typing span:nth-child(3) {
 animation-delay: 0.3s; 
}

  @keyframes cs-typing {

    0%, 80%, 100% {
 opacity: 0.25; transform: translateY(0); 
}

    40% {
 opacity: 1;    transform: translateY(-2px); 
}

  
}

  .cs-bubble--clara:not(.is-thinking) .cs-typing {
 display: none; 
}

  .cs-bubble--clara.is-thinking .clara-text {
 display: none; 
}

  .cs-bubble--clara:not(.is-thinking) .clara-text {

    animation: cs-text-fade 0.18s ease both;
  
}

  @keyframes cs-text-fade {
 from {
 opacity: 0; 
}
 to {
 opacity: 1; 
}
}

  .cs-clinic-citation {
    color: #2D8B7A;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
  }
  .cs-clinic-citation:hover {
    color: #1E6B5D;
    text-decoration: underline;
  }
 
}

  /* Eager-reply pattern (Pi / ChatGPT). A bubble that is .is-thinking
     stays invisible for the first 220ms — long enough that fast LLM
     replies arrive BEFORE the dots ever appear (the bubble pops in
     already populated with text). If the reply takes longer, the dots
     reveal smoothly. Latency theatre is the enemy. */
  .cs-bubble--clara.is-thinking {

    opacity: 0;
    animation: cs-thinking-reveal 0.2s 0.22s forwards;
  
}

  @keyframes cs-thinking-reveal {
 to {
 opacity: 1; 
}
 
}


  /* Input bar — symmetric top/bottom padding so the pill breathes equally
     on both sides. On mobile, env(safe-area-inset-bottom) adds extra room
     for the home-bar / gesture area; on desktop the inset evaluates to 0.
     Soft gradient fade above the pill instead of a hard divider — Claude
     style. */
  .cs-input {

    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(253, 251, 248,0) 0%, rgba(253, 251, 248,0.92) 30%, rgba(253, 251, 248,1) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  
}

  .cs-input__wrap {

    display: flex; align-items: flex-end; gap: var(--space-sm);
    max-width: 720px; margin: 0 auto;
    padding: var(--space-sm) var(--space-sm) var(--space-sm) 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 4px 16px rgba(28, 28, 28, 0.04);
    transition: border-color 0.18s, box-shadow 0.18s;
  
}

  .cs-input__wrap:focus-within {

    border-color: var(--primary);
    box-shadow: 0 4px 20px rgba(45, 139, 122, 0.12);
  
}

  /* AI disclosure line — ChatGPT-style placement: 11px grey, centered,
     same column as the input. Required by EU AI Act Art. 50 (interacting
     with AI must be disclosed) and prudent for medical liability. */
  .cs-input__legal {

    max-width: 720px;
    margin: var(--space-sm) auto 0;
    text-align: center;
  
}

  /* Landing (empty) state: drop the AI disclosure to the very bottom of the
     viewport so the centred hero + composer stay clean (Claude landing
     pattern). It anchors to .chat-shell (position:fixed), so "bottom" = the
     bottom of the screen. The instant a conversation starts (.is-empty
     drops) this rule stops applying and the line auto-returns to normal flow
     just beneath the now-docked composer — no overlap, fully self-adjusting. */
  /* In the empty/landing state the composer's blur is pointless (nothing
     scrolls behind a centred composer) — and crucially, backdrop-filter
     makes .cs-input a *containing block*, which traps an absolutely
     -positioned child at the pill's bottom instead of the page's. Dropping
     it lets the disclosure anchor to .chat-shell (the fixed viewport box)
     and sit at the true page footer. */
  .chat-shell.is-empty .cs-input {
 backdrop-filter: none; -webkit-backdrop-filter: none; 
}

  .chat-shell.is-empty .cs-input__legal {

    position: absolute;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    margin: 0;
  
}

  .cs-mic, .cs-send {

    position: relative;
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s;
  
}

  .cs-mic::after, .cs-send::after {

    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  
}

  .cs-mic:hover {
 background: var(--page-bg); color: var(--text); 
}

  /* Voice input — only shown when the browser supports SpeechRecognition.
     We toggle a body-class on init (see app.js); browsers without the API
     never see the affordance and never hit a broken promise. */
  body:not(.has-speech-recognition) .cs-mic {
 display: none; 
}

  .cs-mic.is-listening {

    background: #fde2e2; color: var(--color-danger-strong);
    box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.5);
    animation: cs-mic-pulse 1.4s ease-in-out infinite;
  
}

  @keyframes cs-mic-pulse {

    0%, 100% {
 box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.5); 
}

    70% {
 box-shadow: 0 0 0 8px rgba(192, 57, 43, 0); 
}

  
}

  .cs-send {

    background: var(--primary);
    color: #fff;
    transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
  
}

  .cs-send:hover:not(:disabled) {

    background: var(--primary-light);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(45, 139, 122, 0.25);
  
}

  .cs-send:active:not(:disabled) {

    transform: scale(0.95);
  
}

  .cs-send:disabled {

    background: var(--border);
    color: var(--text-faint);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  
}

  .cs-textarea {

    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 16px;
    color: var(--text);
    resize: none;
    line-height: 1.4;
    padding: 7px 0;
    max-height: 140px;
  
}

  .cs-textarea::placeholder {
 color: var(--text-faint);
 /* Keep the hint on ONE line — a rows="1" textarea clips a wrapped 2nd line
    (was happening on narrow phones with the long "(e.g. hair transplant)" hint). */
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}


  /* Result sheet — mobile: slides up from bottom (sliding card style).
     Desktop: slides in from the right (overlay panel).
     Chat stays underneath, dimmed. Same component, two grammars. */
  .cs-sheet {

    position: fixed; inset: 0; z-index: var(--z-header); pointer-events: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.22s ease, visibility 0.22s;
  
}

  .cs-sheet[hidden] {

    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  
}

  .cs-sheet__backdrop {

    position: absolute; inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.22s ease;
  
}

  .cs-sheet[hidden] .cs-sheet__backdrop {

    opacity: 0;
  
}

  .cs-sheet__panel {

    position: absolute;
    background: #fff;
    display: flex; flex-direction: column;
    pointer-events: auto; overflow: hidden;
  
}

  /* Mobile = bottom sheet */
  @media (max-width: 767px) {

    .cs-sheet__panel {

      left: 0; right: 0; bottom: 0;
      height: 88vh; max-height: 88vh;
      border-radius: 18px 18px 0 0;
      box-shadow: 0 -12px 40px rgba(0,0,0,0.16);
      transform: translateY(0);
      transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
    
}

    .cs-sheet[hidden] .cs-sheet__panel {

      transform: translateY(100%);
    
}

    .cs-sheet__handle {

      display: block; width: 36px; height: 4px;
      background: var(--border-medium); border-radius: var(--radius-full);
      margin: var(--space-sm) auto var(--space-xs);
      flex-shrink: 0;
    
}

  
}

  /* Desktop = right side panel */
  @media (min-width: 768px) {

    .cs-sheet__panel {

      top: 0; right: 0; bottom: 0;
      width: min(560px, 50vw);
      border-left: 1px solid rgba(0,0,0,0.06);
      box-shadow: -12px 0 40px rgba(0,0,0,0.12);
      transform: translateX(0);
      transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
    
}

    .cs-sheet[hidden] .cs-sheet__panel {

      transform: translateX(100%);
    
}

    .cs-sheet__handle {
 display: none; 
}

  
}


  .cs-sheet__head {

    padding: 14px 18px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  
}

  .cs-sheet__title-row {
 display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; 
}

  .cs-sheet__title {

    font-family: var(--font-display);
    font-weight: var(--weight-medium); font-size: 22px; margin: 0;
    color: var(--text); line-height: 1.2;
  
}

  .cs-sheet__sub {
 margin: 2px 0 0; font-size: 13px; color: var(--text-secondary); 
}

  .cs-sheet__close {

    background: none; border: none;
    width: 32px; height: 32px;
    border-radius: 50%; cursor: pointer;
    color: var(--text-secondary); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  
}

  .cs-sheet__close:hover {
 background: var(--page-bg); color: var(--text); 
}


  .cs-sheet__list {

    flex: 1 1 auto; overflow-y: auto;
    padding: 12px var(--space-md) var(--space-xl);
    -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column; gap: 10px;
  
}

  .cs-sheet-card {

    display: grid; grid-template-columns: 72px 1fr;
    gap: 12px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
  
}

  .cs-sheet-card:hover {
 border-color: var(--primary); transform: translateY(-1px); 
}

  .cs-sheet-card__photo {

    width: 72px; height: 72px;
    border-radius: 8px;
    background: var(--page-bg) center/cover no-repeat;
    background-image: url('/images/placeholders/clinic.svg');
    cursor: pointer;
  
}

  .cs-sheet-card__body {
 display: flex; flex-direction: column; gap: 2px; min-width: 0; 
}

  .cs-sheet-card__name {
 font-weight: var(--weight-semibold); font-size: 14px; margin: 0; color: var(--text); line-height: 1.3; transition: color 0.15s; 
}

  .cs-sheet-card:hover .cs-sheet-card__name {
 color: var(--primary); 
}

  .cs-sheet-card__meta {
 font-size: 12px; color: var(--text-secondary); margin: 0; 
}

  .cs-sheet-card__rating {
 font-size: 12px; color: var(--text-secondary); margin-top: 2px; 
}

  .cs-sheet-card__rating .stars {
 color: var(--warning); margin-right: var(--space-xs); 
}

  .cs-sheet-card__actions {
 display: flex; gap: 14px; margin-top: 6px; 
}

  .cs-sheet-card__actions button {

    background: none; border: none; padding: 0;
    font: inherit; font-size: 12px; font-weight: var(--weight-medium);
    cursor: pointer;
  
}

  .cs-sheet-card__open {
 color: var(--primary); 
}

  .cs-sheet-card__save {
 color: var(--text-secondary); 
}

  .cs-sheet-card__save.is-saved {
 color: #e0245e; 
}

  .cs-sheet-card__save:hover, .cs-sheet-card__save.is-saved {
 color: var(--primary); 
}


  .cs-sheet__empty, .cs-sheet__loading {

    padding: var(--space-2xl) var(--space-md); text-align: center;
    color: var(--text-secondary); font-size: 13px;
  
}

  .cs-sheet__sentinel {

    padding: var(--space-md); text-align: center;
    color: #b5ad9f; font-size: 12px;
  
}


  /* Drawer */
  .cs-drawer {

    position: fixed; inset: 0; z-index: var(--z-sticky);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.22s ease, visibility 0.22s;
  
}

  .cs-drawer.hidden {

    display: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  
}

  .cs-drawer__backdrop {

    position: absolute; inset: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(2px);
    opacity: 1;
    transition: opacity 0.22s ease;
  
}

  .cs-drawer.hidden .cs-drawer__backdrop {

    opacity: 0;
  
}

  .cs-drawer__panel {

    position: absolute; top: 0; left: 0; bottom: 0;
    width: min(320px, 84vw);
    background: var(--page-bg);
    border-right: 1px solid rgba(0,0,0,0.06);
    display: flex; flex-direction: column;
    transform: translateX(0);
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
  
}

  .cs-drawer.hidden .cs-drawer__panel {

    transform: translateX(-100%);
  
}

  .cs-drawer__head {
 padding: 20px 20px 12px; 
}

  .cs-drawer__hello {
 margin: 0; font-size: 17px; font-weight: var(--weight-semibold); color: var(--text); 
}

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

  /* Logged-out drawer header shows the Clanics brand mark in place of the
     old "Sign in" text. Sits left, aligned with the close button. */
  .cs-drawer__logo {
 display: inline-flex; align-items: center;
}
  .cs-drawer__logo img {
 display: block; width: 38px; height: 38px;
}

  .cs-drawer__nav {
 padding: var(--space-sm); 
}

  .cs-drawer__link {

    display: flex; align-items: center; gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--color-divider, var(--border-light, rgba(var(--ink, 0), 0.06)));
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: var(--weight-medium);
    transition: color 0.15s ease, opacity 0.15s ease;
  
}

  .cs-drawer__link:last-child {
    border-bottom: none;
  }

  .cs-drawer__link:hover {
    background: transparent;
    opacity: 0.7;
  }

  .cs-drawer__link.is-active {
    background: transparent;
    color: var(--primary);
  }

  .cs-drawer__link svg {
 flex-shrink: 0; color: var(--text-secondary); 
}

  .cs-drawer__link.is-active svg {
 color: var(--primary); 
}

  .cs-drawer__dot {

    width: 7px; height: 7px; border-radius: 50%;
    background: var(--primary);
    margin-left: auto;
  
}

  .cs-drawer__count {

    margin-left: auto;
    padding: 1px var(--space-sm);
    background: var(--primary); color: #fff;
    border-radius: var(--radius-full);
    font-size: 11px; font-weight: var(--weight-semibold);
  
}

  /* "For clinics" — B2B entry. Quieter than patient links: smaller text,
     thinner divider above, no hover lift. Always at the bottom, just
     above the legal strip. */
  .cs-drawer__divider {

    margin: 12px 20px 0;
    height: 1px;
    background: var(--page-bg);
  
}

  .cs-drawer__biz {

    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.15s;
  
}

  .cs-drawer__biz:hover {
 color: var(--primary); 
}

  .cs-drawer__biz svg {
 color: var(--text-secondary); flex-shrink: 0; 
}

  .cs-drawer__biz:hover svg {
 color: var(--primary); 
}

  .cs-drawer__foot {
 padding: 12px 20px 20px; margin-top: auto; 
}

  .cs-drawer__bottom-links {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .cs-drawer__bottom-link {
    display: flex;
    align-items: center;
    padding: 12px 4px;
    font-size: 14px;
    font-weight: var(--weight-medium);
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-divider, var(--border-light, rgba(var(--ink, 0), 0.06)));
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: color 0.15s ease, opacity 0.15s ease;
  }

  .cs-drawer__bottom-link:last-child {
    border-bottom: none;
  }

  .cs-drawer__bottom-link:hover {
    background: transparent;
    opacity: 0.7;
  }

  .cs-drawer__bottom-signout {
    color: var(--color-danger-strong, #dc2626);
  }

  .cs-drawer__legal {
 margin: 12px 0 0; font-size: 11px; color: var(--text-faint); 
}

  .cs-drawer__legal a {
 color: inherit; text-decoration: none; 
}

  .cs-drawer__legal a:hover {
 color: var(--text); 
}



/* ===== Favourites (moved from views/pages/favourites.ejs inline <style>) ===== */
  body:has(.shortlist-page) .site-footer {
 display: none !important; 
}


  .shortlist-page {

    max-width: 720px;
    margin: var(--space-3xl) auto 96px;
    padding: 0 var(--space-lg);
    font-family: var(--font-body);
    color: var(--text);
  
}

  .sl-head {
 margin-bottom: 40px; 
}

  .sl-title {

    font-family: var(--font-display);
    font-size: 36px;
    font-weight: var(--weight-medium);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.1;
  
}


  /* Empty state — teaches the action instead of just saying "nothing here." */
  .sl-empty {
 padding: var(--space-lg) 0; 
}

  .sl-empty__lead {
 font-size: 17px; font-weight: var(--weight-medium); margin: 0 0 10px; color: var(--text); 
}

  .sl-empty__detail {
 font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin: 0 0 var(--space-lg); max-width: 480px; 
}

  .sl-empty__cta {

    display: inline-block;
    color: var(--primary);
    font-size: 14px;
    font-weight: var(--weight-semibold);
    text-decoration: none;
  
}

  .sl-empty__cta:hover {
 text-decoration: underline; 
}


  /* Grid — single column. Comparing 5 cards side-by-side isn't the
     mental model here; reading them one at a time is. */
  .sl-grid {
 display: flex; flex-direction: column; gap: 20px; 
}


  /* Card. No SPOTLIGHT, no priceFrom, no responseTime — those are
     search-result signals that don't belong post-choice. */
  .sl-card {
    position: relative;
    overflow: hidden;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s;
  }

  .sl-card__swipe-wrapper {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: var(--space-md);
    padding: var(--space-md);
    background: #fff;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
  }

  .sl-card.is-swiping-active .sl-card__swipe-wrapper {
    transition: none !important;
  }

  .sl-card__swipe-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100px;
    background: #dc2626;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 1;
    font-size: 12px;
    font-weight: var(--weight-semibold);
    pointer-events: none;
  }

  .sl-card.is-removing {
 opacity: 0; transform: translateY(-4px); transition: opacity 0.2s, transform 0.2s; 
}

  .sl-card:hover {
 border-color: #d9d3c8; 
}


  .sl-card__photo {

    width: 132px;
    height: 132px;
    border-radius: 12px;
    background: var(--page-bg) center/cover no-repeat;
    background-image: url('/images/placeholders/clinic.svg');
  
}

  .sl-card__body {
 display: flex; flex-direction: column; min-width: 0; 
}


  .sl-card__top {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
  
}

  .sl-card__name {

    font-size: 16px;
    font-weight: var(--weight-semibold);
    color: var(--text);
    margin: 0;
    line-height: 1.3;
    cursor: pointer;
  
}

  .sl-card__name:hover {
 color: var(--primary); 
}

  .sl-card__remove {

    background: none;
    border: none;
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
    color: var(--text-faint);
    font-size: 12px;
    font-weight: var(--weight-medium);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: var(--radius-sm);
  
}

  .sl-card__remove:hover {
 color: var(--color-danger-strong); background: #fdf5f4; 
}

  .sl-card__remove-x {
 display: block; flex-shrink: 0; 
}


  .sl-card__meta {

    font-size: 13px;
    color: var(--text-secondary);
    margin: 2px 0 0;
  
}

  .sl-card__rating {

    font-size: 13px;
    color: var(--text-secondary);
    margin: 6px 0 0;
  
}

  .sl-card__rating .stars {
 color: var(--warning); margin-right: var(--space-xs); letter-spacing: 1px; 
}


  .sl-card__saved {

    font-size: 11px;
    color: var(--text-faint);
    margin-top: auto;
    padding-top: 10px;
  
}


  /* Note — the highest-value field on the page. Borderless until focused,
     so the input invites without shouting. */
  .sl-note {

    margin-top: 12px;
    padding: var(--space-sm) 10px;
    border: 1px dashed transparent;
    border-radius: 8px;
    background: var(--page-bg);
    transition: border-color 0.15s, background 0.15s;
  
}

  .sl-note:hover {
 border-color: var(--border); 
}

  .sl-note:focus-within {
 border-color: var(--primary); background: #fff; border-style: solid; 
}

  .sl-note__label {

    display: block;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    margin-bottom: 2px;
  
}

  .sl-note__input {

    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    resize: none;
    outline: none;
    padding: 0;
    line-height: 1.45;
    min-height: 18px;
    box-sizing: border-box;
  
}

  .sl-note__input::placeholder {
 color: var(--text-faint); font-style: italic; 
}

  .sl-note__hint {
 font-size: 11px; color: var(--text-faint); margin-top: var(--space-xs); min-height: 14px; 
}

  .sl-note__hint.is-saved {
 color: var(--primary); 
}


  /* Actions row — primary CTA (send enquiry) is the obvious next step.
     "Open clinic page" stays quiet on the right. */
  .sl-card__actions {

    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
  
}


  .sl-link {

    color: var(--text-secondary);
    font-size: 13px;
    font-weight: var(--weight-medium);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
  
}

  .sl-link:hover {
 color: var(--primary); 
}


  @media (max-width: 560px) {
    .sl-card__swipe-wrapper {
      grid-template-columns: 88px 1fr; gap: 12px; padding: 12px;
    }
    .sl-card__photo {
      width: 88px; height: 88px;
    }
  }



/* ===== Profile (moved from views/pages/profile.ejs inline <style>) ===== */
  body:has(.profile-page) .site-footer {
 display: none !important; 
}

  body:has(#myReviewsPage) .site-footer {
 display: none !important; 
}


  .profile-page {

    max-width: 560px;
    margin: var(--space-3xl) auto 96px;
    padding: 0 var(--space-lg);
    font-family: var(--font-body);
    color: var(--text);
  
}

  .pp-head {
 margin-bottom: 56px; 
}

  .pp-name {

    font-family: var(--font-display);
    font-size: 36px;
    font-weight: var(--weight-medium);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.1;
  
}


  .pp-fields {
 display: flex; flex-direction: column; gap: 28px; margin-bottom: 40px; 
}

  .pp-field {
 display: flex; flex-direction: column; gap: 6px; 
}

  .pp-field__label {
 font-size: 12px; color: var(--text-secondary); font-weight: var(--weight-semibold); letter-spacing: 0.02em; 
}

  .pp-field__hint {
 font-size: 12px; color: var(--text-faint); 
}

  .pp-input {

    font-family: inherit;
    font-size: 16px;
    padding: var(--space-sm) 0;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    outline: none;
    color: var(--text);
    transition: border-color 0.15s;
    border-radius: 0;
  
}

  .pp-input::placeholder {
 color: var(--text-faint); 
}


  .email-pending {

    margin-top: 6px;
    padding: var(--space-sm) 12px;
    border-radius: 8px;
    background: #fff5e6;
    border: 1px solid #f5d7a0;
    color: #7a4a00;
    font-size: 12px;
    line-height: 1.5;
  
}

  .email-pending.hidden {
 display: none; 
}


  .pp-toggles {

    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
    margin-bottom: 40px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  
}

  .pp-toggle {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
  
}

  .pp-toggle input {

    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
  
}


  .pp-link {

    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--primary);
    font-size: 14px;
    font-weight: var(--weight-medium);
    text-decoration: none;
    margin-bottom: var(--space-2xl);
  
}

  .pp-link:hover {
 text-decoration: underline; 
}

  /* Unread badge — quiet teal pill next to the link telling the patient
     exactly what's new and how many of it. Self-explanatory: no dot
     legend required. Disappears entirely when there's nothing new. */
  .pp-link__new {

    display: inline-flex;
    align-items: center;
    margin-left: var(--space-sm);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--primary-subtle);
    color: var(--primary);
    font-size: 12px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.01em;
  
}


  .pp-signout-row {
 text-align: right; margin-bottom: 160px; 
}

  .pp-signout {

    background: none;
    border: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
  
}

  .pp-signout:hover {
 color: var(--text); 
}


  /* Delete account — diagonally opposite Sign out so a mobile thumb can't
     graze both, and visually treated as a paragraph with a quiet action
     rather than a peer button. The confirm modal is still the safety net. */
  .pp-danger {
 text-align: left; max-width: 360px; 
}

  .pp-danger__btn {

    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
  
}

  .pp-danger__btn:hover {
 color: var(--color-danger-strong); 
}

  .pp-danger__note {

    margin: var(--space-xs) 0 0;
    font-size: 11px;
    color: var(--text-faint);
    line-height: 1.55;
  
}

  .profile-save-toast.visible {

      transform: translateX(-50%) translateY(0);
  
}






/* ===== Cookie banner (moved from views/partials/cookie-banner.ejs inline <style>) ===== */
  /* Banner — bottom-anchored card, full-width on mobile, max 880px on
     desktop. Quiet shadow, soft border. */
  .cb-root[hidden] {
 display: none; 
}

  .cb-root {

    position: fixed; left: 12px; right: 12px; bottom: 12px;
    z-index: var(--z-modal-backdrop);
    display: flex; justify-content: center;
    pointer-events: none;
  
}

  .cb-card {

    pointer-events: auto;
    width: 100%;
    max-width: 880px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    padding: 18px 20px;
    display: flex; flex-wrap: wrap; gap: 14px;
    align-items: center;
    font-family: var(--font-body);
    color: var(--text);
  
}

  .cb-body {
 flex: 1 1 320px; min-width: 0; 
}

  .cb-title {
 font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 18px; margin: 0 0 var(--space-xs); 
}

  .cb-text {
 margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-secondary); 
}

  .cb-text a {
 color: var(--primary); text-decoration: underline; text-underline-offset: 2px; 
}

  .cb-actions {
 display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; 
}


  /* Cookie-banner buttons (Reject visually equal to Accept — ICO requirement;
     Manage is a quieter ghost) now use the shared .btn / .btn--primary /
     .btn--secondary / .btn--ghost in components.css. */

  /* Manage modal */
  .cb-modal[hidden] {
 display: none; 
}

  .cb-modal {
 position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-md); 
}

  .cb-modal__backdrop {
 position: absolute; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); 
}

  .cb-modal__panel {

    position: relative; z-index: var(--z-base);
    width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
    background: #fff; border-radius: 18px;
    padding: var(--space-lg) 22px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.18);
    font-family: var(--font-body);
    color: var(--text);
  
}

  .cb-modal__head h2 {
 font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 22px; margin: 0 0 var(--space-xs); 
}

  .cb-modal__head p {
 margin: 0 0 14px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; 
}

  .cb-list {
 list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); 
}

  .cb-row {
 border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; 
}

  .cb-row__head {
 display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--space-xs); 
}

  .cb-row__head h3 {
 margin: 0; font-size: 14px; font-weight: var(--weight-semibold); 
}

  .cb-row__locked {
 font-size: 11px; color: var(--primary); font-weight: var(--weight-semibold); padding: 2px var(--space-sm); background: var(--primary-subtle); border-radius: var(--radius-full); 
}

  .cb-row p {
 margin: 0; font-size: 12px; color: var(--text-secondary); line-height: 1.5; 
}


  /* Toggle switch */
  .cb-toggle {
 position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; 
}

  .cb-toggle input {
 position: absolute; opacity: 0; width: 0; height: 0; 
}

  .cb-toggle__slider {
 position: absolute; inset: 0; background: var(--border-medium); border-radius: var(--radius-full); transition: background 0.18s; cursor: pointer; 
}

  .cb-toggle__slider::before {
 content: ''; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.18s; box-shadow: 0 1px 3px rgba(0,0,0,0.18); 
}

  .cb-toggle input:checked + .cb-toggle__slider {
 background: var(--primary); 
}

  .cb-toggle input:checked + .cb-toggle__slider::before {
 transform: translateX(16px); 
}


  .cb-modal__foot {
 display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; 
}


/* ==========================================================================
   Success Stories page
   The markup shipped without its stylesheet; this block styles every section
   using the shared design tokens, matching the .why-join-page language
   (centred layout, Playfair section titles, --surface cards w/ hover lift,
   --primary-subtle icon boxes, a gradient emphasis section).
   ========================================================================== */
.roi-page {
 max-width: 1000px; margin: 0 auto; 
}

.roi-page > div {
 margin-bottom: var(--space-3xl); 
}

.roi-page > div:last-child {
 margin-bottom: 0; 
}


/* Hero */
.success-hero {
 text-align: center; padding: var(--space-2xl) 0 var(--space-xl); 
}

.success-subtitle {

  font-size: 1.0625rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;

}


/* Section titles / subtitles (override the small app-side default) */
.roi-page .section-title, .success-stories-page .section-title {

  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, 2rem);
  font-weight: var(--weight-semibold);
  color: var(--text);
  text-align: center;
  margin-bottom: var(--space-sm);

}

.roi-page .section-subtitle, .success-stories-page .section-subtitle {

  font-size: 0.9375rem;
  color: var(--text-secondary);
  text-align: center;
  max-width: 620px;
  margin: 0 auto var(--space-xl);
  line-height: 1.6;

}


/* ── ROI Calculator ─────────────────────────────────────────────────────── */
.calculator-card {

  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);

}

.calculator-inputs, .calculator-results { min-width: 0; }

.calc-input-group {
 margin-bottom: var(--space-lg); 
}

.calc-input-group:last-child {
 margin-bottom: 0; 
}

.calc-input-group > label {

  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);

}

.calc-input-wrapper {
 display: flex; align-items: center; gap: var(--space-md); 
}

.calc-slider {

  flex: 1;
  min-width: 0;
  height: 6px;
  accent-color: var(--primary);
  cursor: pointer;

}

.calc-value {

  min-width: 56px;
  text-align: right;
  font-weight: var(--weight-semibold);
  font-size: 1.0625rem;
  color: var(--primary);
  font-variant-numeric: tabular-nums;

}

.plan-selector {
 display: flex; flex-wrap: wrap; gap: var(--space-sm); 
}

.plan-option {

  flex: 1 1 auto;
  padding: 10px var(--space-md);
  border: 1.5px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  white-space: normal;

}

.plan-option:hover {
 border-color: var(--primary); color: var(--primary); 
}

.plan-option.active {

  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-inverse);

}

.plan-limit-note {

  font-size: 12px;
  color: var(--text-secondary);
  margin-top: var(--space-xs);
  line-height: 1.4;

}


.calculator-results {

  background: var(--primary-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);

}

.result-comparison {

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);

}

.result-box { min-width: 0; }

@media (max-width: 540px) {
  .result-comparison { grid-template-columns: 1fr; gap: var(--space-sm); }
  .result-comparison .result-vs { transform: rotate(90deg); }
}

.result-box {
 display: flex; flex-direction: column; gap: var(--space-xs); text-align: center; 
}

.result-box.clanics .result-amount {
 color: var(--primary); 
}

.result-label {

  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);

}

.result-amount {

  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 1.875rem);
  font-weight: var(--weight-semibold);
  color: var(--text);

}

.result-detail {
 font-size: var(--text-xs); color: var(--text-muted); line-height: 1.4; 
}

.result-vs {

  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);

}

.savings-highlight {

  text-align: center;
  padding: var(--space-lg);
  background: var(--surface);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);

}

.savings-label {

  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);

}

.savings-amount {

  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: var(--weight-semibold);
  color: var(--primary);
  line-height: 1.1;

}

.savings-percent {
 font-size: var(--text-sm); color: var(--success); font-weight: var(--weight-medium); 
}

.savings-annualized {

  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
  display: block;

}

.scenario-annualized {

  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 2px;

}


/* ── Success metrics ────────────────────────────────────────────────────── */
.metrics-grid {

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-lg);

}

.metric-card {

  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  transition: all 0.3s ease;

}

.metric-card:hover {
 border-color: var(--border); box-shadow: var(--shadow-lg); 
}

.metric-label {
 font-size: 1.0625rem; font-weight: var(--weight-semibold); color: var(--text); margin-bottom: var(--space-sm); 
}


/* ── Scenarios ──────────────────────────────────────────────────────────── */
.scenarios-grid {

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  align-items: start;

}

.scenario-card {

  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: all 0.3s ease;

}

.scenario-card:hover {
 box-shadow: var(--shadow-md); 
}

.scenario-card.featured {

  border-color: var(--primary);
  box-shadow: 0 8px 30px rgba(45, 139, 122, 0.16);

}

.scenario-badge {

  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--primary);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 5px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;

}

.scenario-header {
 text-align: center; margin-bottom: var(--space-lg); 
}

.scenario-type {
 display: block; font-size: 1.125rem; font-weight: var(--weight-semibold); color: var(--text); 
}

.scenario-enquiries {
 display: block; font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; 
}

.scenario-comparison {
 display: flex; flex-direction: column; gap: var(--space-sm); 
}

.scenario-row {

  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--text-sm); color: var(--text-secondary);

}

.scenario-row .negative {
 color: var(--error); font-weight: var(--weight-semibold); 
}

.scenario-row .positive {
 color: var(--primary); font-weight: var(--weight-semibold); 
}

.scenario-savings {

  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--space-sm); padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
  font-weight: var(--weight-semibold); color: var(--text);

}

.scenario-savings span:last-child {
 color: var(--primary); font-size: 1.125rem; 
}

.founding-badge {

  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-md);

}


/* ── Success tips ───────────────────────────────────────────────────────── */
.tips-grid {

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);

}

.tip-card {

  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: all 0.3s ease;

}

.tip-card:hover {
 border-color: var(--border); box-shadow: var(--shadow-md); 
}

.tip-number {

  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-subtle);
  color: var(--primary);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-md);

}

.tip-title {
 font-size: 1.0625rem; font-weight: var(--weight-semibold); color: var(--text); margin-bottom: var(--space-sm); 
}

.tip-desc {
 font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; 
}


/* ── Closing CTA panel ──────────────────────────────────────────────────── */
.success-cta {

  text-align: center;
  padding: var(--space-2xl);
  background: linear-gradient(135deg, var(--primary-subtle) 0%, rgba(200, 230, 76, 0.10) 100%);
  border-radius: var(--radius-xl);

}


/* ── Desktop layout ─────────────────────────────────────────────────────── */
@media (min-width: 840px) {

  .calculator-card {
 grid-template-columns: 1fr 1fr; align-items: start; padding: var(--space-2xl); gap: var(--space-2xl);
}


}


/* ==========================================================================
   Shared marketing primitives
   Two decorative classes used as an "eyebrow + gradient heading" pattern on
   the marketing pages (about, how-it-works, faqs, help, blog, contact). They
   had no definition, so eyebrows rendered as plain grey text and gradient
   heading spans rendered solid. Defined once here = fixed on every page.
   ========================================================================== */

/* Eyebrow label above a section heading. */
.section-label {

  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-sm);

}


/* Gradient-filled heading span (the teal brand gradient clipped to text). */
.text-gradient {

  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

}


/* ==========================================================================
   Legal Disclaimers & Banner Primitive Definitions
   ========================================================================== */

/* Public Clinic Modal Disclaimer */
.modal-disclaimer {

  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: 0 var(--space-lg) var(--space-lg);
  margin-top: var(--space-md);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-muted);

}


.modal-disclaimer svg {

  color: var(--text-muted);
  margin-top: 1px;
  flex-shrink: 0;

}

/* Clinic Modal Practitioner Registrations & Hours Styles */
.practitioner-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
  font-size: 12px;
  font-weight: 500;
  border-radius: 12px;
  font-family: inherit;
}

.practitioner-badge svg {
  color: #0284c7;
  flex-shrink: 0;
}

.modal-verified-badge.paused {
  bottom: auto;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(220, 38, 38, 0.95);
}

.modal-verified-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
}

.modal-hours-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: #f5f3f0;
  color: #5A6B7C;
  font-size: 0.8125rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: all 0.15s;
}

.modal-hours-toggle-btn:hover {
  background: #e8e6e2;
  color: var(--text);
}

.modal-practitioner-registrations {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.modal-hours-wrap {
  position: relative;
  display: inline-flex;
}




.pricing-notes {

  max-width: 800px;
  margin: var(--space-2xl) auto 0;
  padding: var(--space-lg) var(--space-md) 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
  border-top: 1px solid var(--border-light);

}

.pricing-notes p {
 margin: var(--space-xs) 0; 
}

.pricing-notes a {
 color: var(--primary); text-decoration: underline; text-underline-offset: 2px; 
}

.pricing-notes a:hover {
 color: var(--primary-dark); 
}

.pricing-notes__company {
 color: var(--text-muted); font-size: 11px; margin-top: var(--space-sm); border-top: 1px dashed var(--border-light); padding-top: var(--space-sm); 
}

.pricing-notes__disclaimer {
 margin-top: var(--space-sm); font-size: 11px; line-height: 1.5; color: var(--text-muted); 
}

html[data-theme="dark"] .pricing-notes {
 border-top-color: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5); 
}

html[data-theme="dark"] .pricing-notes a {
 color: #7EE0C7; 
}

html[data-theme="dark"] .pricing-notes a:hover {
 color: #A8EDD8; 
}

html[data-theme="dark"] .pricing-notes__company {
 border-top-color: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.4); 
}


/* ============================================================================
   Pricing card styling
   ============================================================================ */

/* 1. Featured (top-tier) card highlight */
.pricing-card.premium-tier {

    /* inherits default plain card styles */

}

.pricing-card.premium-tier:hover {

    /* inherits default plain card hover */

}

@keyframes premium-pulse {

    0% {
 transform: scale(1); 
}

    100% {
 transform: scale(1.03); 
}


}


.roi-comp-card.competitor {

    background: rgba(239, 68, 68, 0.03);
    border-color: rgba(239, 68, 68, 0.1);

}

.roi-comp-card.competitor .roi-comp-card__price {

    color: #EF4444;

}


.roi-comp-card.clanics {

    border: 1.5px solid var(--primary);
    box-shadow: 0 4px 10px rgba(45, 139, 122, 0.05);

}

.roi-comp-card.clanics .roi-comp-card__price {

    color: var(--primary);

}


.roi-comp-card.savings {

    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
    border: 2px solid #10B981;
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.22);
    transform: scale(1.03);
    z-index: 1;

}

.roi-comp-card.savings .roi-comp-card__price {

    color: #10B981;

}


/* Dark Theme Overrides for pricing psychology updates */
html[data-theme="dark"] .pricing-card.premium-tier {

    border-color: rgba(255, 255, 255, 0.08);
    background: #28282C;
    box-shadow: none;

}

html[data-theme="dark"] .roi-comp-card.competitor {

    background: rgba(239, 68, 68, 0.04);

}

html[data-theme="dark"] .roi-comp-card.savings {

    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.04) 100%);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.3);

}


/* ============================================================================
   Info Popover Tooltip Modal for Unique Selling Points (Market Intelligence)
   ============================================================================ */
.info-modal {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    opacity: 0;
    pointer-events: none;
    /* visibility:hidden removes the close button from the tab order while the
       modal is aria-hidden — fixes axe aria-hidden-focus + "tab into an
       invisible modal". Delayed so the opacity fade-out still plays. */
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;

}

.info-modal.active {

    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
    opacity: 1;
    pointer-events: auto;

}

.info-modal__backdrop {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 22, 26, 0.55);
    backdrop-filter: blur(3px);

}

.info-modal__content {

    background: var(--surface);
    border-radius: 18px;
    padding: 36px 32px 32px;
    max-width: 420px;
    width: calc(100% - 32px);
    position: relative;
    box-shadow: 0 24px 64px rgba(20, 22, 26, 0.22);
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;

}

.info-modal.active .info-modal__content {

    transform: translateY(0) scale(1);

}

.info-modal__close {

    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: rgba(20, 22, 26, 0.05);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;

}

.info-modal__close:hover {

    background: rgba(20, 22, 26, 0.1);
    color: #2b3039;

}

.info-modal__close svg {

    width: 15px;
    height: 15px;

}

.info-modal__icon {

    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--primary-subtle);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);

}

.info-modal__icon svg {

    width: 24px;
    height: 24px;

}

.info-modal__title {

    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1.25;
    font-weight: 600;
    color: #2b3039;
    margin: 0 0 8px 0;
    letter-spacing: -0.01em;

}

.info-modal__subtitle {

    font-size: 14.5px;
    line-height: 1.55;
    font-weight: 500;
    color: var(--primary);
    margin: 0 0 22px 0;

}

.info-modal__body {

    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;

}

.info-modal__bullets {

    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;

}

.info-modal__bullet-item {

    display: flex;
    align-items: flex-start;
    gap: 12px;

}

.info-modal__bullet-icon {

    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--primary);

}

.info-modal__bullet-content {

    display: flex;
    flex-direction: column;
    gap: 2px;

}

.info-modal__bullet-title {

    font-size: 14.5px;
    font-weight: 600;
    color: #2b3039;

}

.info-modal__bullet-desc {

    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-secondary);

}


/* Info Icon trigger */
.info-trigger {

    background: none;
    border: none;
    padding: 0 4px;
    cursor: pointer;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    transition: color var(--transition);

}

.info-trigger:hover {

    color: var(--primary);

}

.info-trigger svg {

    width: 14px;
    height: 14px;

}


/* Dark Theme Overrides for info modal popover */
html[data-theme="dark"] .info-modal__content {

    background: #28282C;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);

}

html[data-theme="dark"] .info-modal__close {

    background: rgba(255, 255, 255, 0.08);
    color: #a0a0a5;

}

html[data-theme="dark"] .info-modal__close:hover {

    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;

}

html[data-theme="dark"] .info-modal__title {

    color: #ffffff;

}

html[data-theme="dark"] .info-modal__body {

    color: #a0a0a5;

}

html[data-theme="dark"] .info-modal__bullet-title {

    color: #ffffff;

}

html[data-theme="dark"] .info-modal__bullet-desc {

    color: #a0a0a5;

}


/* Market Intelligence Feature Section on Pricing Page */
.market-intel-section-wrap {

    max-width: 820px;
    margin: 0 auto 80px;
    padding: 0 var(--space-md);
    text-align: center;

}

.market-intel-grid {

    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 40px;
    text-align: left;

}

@media (min-width: 768px) {

    .market-intel-grid {

        grid-template-columns: repeat(3, 1fr);
    
}


}

.intel-card {

    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    padding: 32px 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;

}

.intel-card:hover {

    border-color: #CBD5E1;
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);

}

.intel-icon-wrapper {

    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--primary-subtle);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;

}

.intel-icon-wrapper svg {

    width: 24px;
    height: 24px;

}

.intel-card-title {

    font-size: 17px;
    font-weight: 700;
    color: #111C15;
    margin-bottom: 12px;
    letter-spacing: -0.01em;

}

.intel-card-desc {

    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;

}


/* Dark Theme Overrides for Market Intelligence Section */
html[data-theme="dark"] .intel-card {

    background: #28282C;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);

}

html[data-theme="dark"] .intel-card:hover {

    border-color: rgba(255, 255, 255, 0.2);

}

html[data-theme="dark"] .intel-card-title {

    color: #ffffff;

}

html[data-theme="dark"] .intel-card-desc {

    color: #a0a0a5;

}


/* Pricing Page Top USP section */
.pricing-top-usp-badge {

    margin-top: 16px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

}

.pricing-top-usp-badge svg {

    width: 16px;
    height: 16px;
    flex-shrink: 0;

}


/* Shift the handdrawn underline lower in plan features to clear descenders (like "g") */
.plan-features .handdrawn-line {

    bottom: -9px;

}


#regShell {
    padding-top: var(--mobile-header);
}

/* Registration page top strip - unified top positioning */
body:has(#regShell) .mobile-header {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;   /* pills sit at the padding line (top:20px), matching .cs-biz — not centred in the 56px bar */
    padding: 10px 14px;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.04);
    z-index: var(--z-raised);
}

body:has(#regShell.is-empty) .mobile-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    padding-top: 10px;
}

/* Registration strip: the two links reuse .cs-corner-link for appearance
   (single source of truth). Only the header's padding positions them — matching
   .cs-biz's 20px/26px offsets so the log-in pill lands exactly where the
   "For clinics →" pill sits on other pages. */
@media (min-width: 768px) {
    body:has(#regShell) .mobile-header {
        padding: 20px 26px;
        /* Desktop: transparent header, no divider — same colour as the rest of
           the page (like the B2C chat pages). The frosted strip stays on mobile,
           where it aids readability over scrolling chat. */
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: none;
    }
    body:has(#regShell.is-empty) .mobile-header {
        padding: 20px 26px 0;
    }
}


/* Real-time Notification Banner styling */
.notification-banner {

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  color: var(--text);
  animation: slideInDown 0.3s ease-out;

}

.notification-banner__content {

  display: flex;
  align-items: center;
  gap: var(--space-sm);

}

.notification-banner__text {

  font-weight: var(--weight-medium, 500);
  color: var(--text);

}

.notification-banner__btn {

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: var(--primary) !important;
  color: var(--text-inverse) !important;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: opacity var(--transition);

}

.notification-banner__btn:hover {

  opacity: 0.9;

}

.notification-banner__icon {

  font-size: 1.25rem;

}

.notification-banner__close {

  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 var(--space-xs);
  transition: color var(--transition);

}

.notification-banner__close:hover {

  color: var(--text);

}

.notification-banner.hidden {
  display: none !important;
}

@media (max-width: 767px) {
  /* Hide site footer on mobile viewports */
  .site-footer {
    display: none !important;
  }

  /* Inbox and Thread Screen Splitting (messages page) */
  .messages-layout {
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    height: calc(100dvh - 120px) !important;
  }
  .messages-sidebar {
    width: 100% !important;
    display: flex !important;
    border-right: none !important;
  }
  .conversation-view {
    display: none !important;
  }
  /* Screen 2: Active Chat Thread Takeover */
  .messages-sidebar.conv-open {
    display: none !important;
  }
  .messages-sidebar.conv-open + .conversation-view {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--visual-viewport-height, 100dvh) !important;
    z-index: 1000 !important;
    background: var(--surface) !important;
    width: 100% !important;
  }
  .messages-sidebar.conv-open + .conversation-view .conversation-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1002 !important;
    flex: 0 0 auto !important;
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border-light) !important;
    padding: var(--space-md) !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
  }
  .messages-sidebar.conv-open + .conversation-view .conversation-messages {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding-bottom: 80px !important;
  }
  .messages-sidebar.conv-open + .conversation-view .conversation-input-area {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1001 !important;
    background: var(--surface) !important;
    border-top: 1px solid var(--border-light) !important;
    padding: var(--space-sm) var(--space-md) !important;
  }

  /* Global Modal Bottom Sheets */
  .confirm-modal-overlay, .edit-review-modal-overlay {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .confirm-modal-panel, .edit-review-modal-panel {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    margin-bottom: 0 !important;
    margin-top: auto !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.12) !important;
    animation: slideUp 0.25s cubic-bezier(0.32, 0.72, 0, 1) !important;
    padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom)) !important;
  }

  /* Clinic Profile Modal Adjustments */
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-container {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    margin-bottom: 0 !important;
    margin-top: auto !important;
    transform: translateY(0);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .modal-overlay.hidden .modal-container {
    transform: translateY(100%) !important;
  }
  .modal-content {
    max-height: none !important;
    flex: 1 !important;
    overflow-y: auto !important;
  }
  #modalActions {
    border-radius: 0 !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10 !important;
    background: #fff !important;
    border-top: 1px solid #F2EFEA !important;
  }

  /* Touch Targets: ensure finger-friendly hit areas */
  .mark-all-read-btn, .back-to-list, .back-to-list-btn, .conv-action-btn, 
  .msg-filter-btn, .dropdown-item, .authm__btn, .authm__x, .modal-close {
    min-height: 48px !important;
    min-width: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .mark-all-read-btn {
    padding: 0 var(--space-md) !important;
    min-width: auto !important;
  }
  .msg-filter-btn {
    padding: 0 var(--space-md) !important;
    min-width: auto !important;
  }
  .dropdown-item {
    min-height: 48px !important;
    padding: var(--space-sm) var(--space-md) !important;
    width: 100% !important;
  }

  /* List Items touch targets */
  .message-thread, .sl-card, .clinic-card, .cs-sheet-card, .cs-card {
    padding-top: var(--space-md) !important;
    padding-bottom: var(--space-md) !important;
  }
  .message-thread {
    min-height: 72px !important;
  }

  /* Form inputs & buttons massive touch targets */
  input[type="text"], input[type="search"], input[type="email"], input[type="tel"], textarea, select, .btn, button {
    min-height: 48px !important;
  }

  /* Active-state tap highlight feedback */
  button:active, a:active, .message-thread:active, .sl-card:active, .clinic-card:active, .cs-sheet-card:active, .cs-card:active, .msg-filter-btn:active, .dropdown-item:active {
    background-color: rgba(0, 0, 0, 0.05) !important;
    opacity: 0.8;
  }
}